igxTimePicker - editable masked input + dropdown new mode

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+
+## 7.1.2
+### Features
+- `IgxTimePickerComponent`: in addition to the current dialog interaction mode, now the user can select or edit a time value, using an editable masked input with a dropdown.
+
 ## 7.1.1
 ### Bug Fixes
 
@@ -14,6 +19,7 @@ All notable changes for each version of this project will be documented in this
 ### Other
 * update typedoc-plugin-localization version to 1.4.1 ([#3440](https://github.com/IgniteUI/igniteui-angular/issues/3440))
 
+
 ## 7.1.0
 ### Features
 - **New component** `IgxBannerComponent`:
@@ -40,6 +46,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxOverlayService`:
     - `ElasticPositioningStrategy` added. This strategy positions the element as in **Connected** positioning strategy and resize the element to fit in the view port in case the element is partially getting out of view.
 
+
 ## 7.0.5
 
 ### Bug Fixes
@@ -60,6 +67,7 @@ All notable changes for each version of this project will be documented in this
 * update typedoc-plugin-localization version to 1.4.1 ([#3440](https://github.com/IgniteUI/igniteui-angular/issues/3440))
 * Move all keyboard navigation tests in a separate file ([#2975](https://github.com/IgniteUI/igniteui-angular/issues/2975))
 
+
 ## 7.0.4
 ### Bug fixes
 - Fix(igx-grid): revert row editing styles ([#2672](https://github.com/IgniteUI/igniteui-angular/issues/2672))

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-component.scss

@@ -1,90 +1,71 @@
 @include b(igx-time-picker) {
+    @extend %time-picker-display !optional;
 
     @include e(header) {
-        @extend %igx-time-picker__header !optional;
+        @extend %time-picker__header !optional;
     }
 
     @include e(header-ampm) {
-        @extend %igx-time-picker__header-ampm !optional;
+        @extend %time-picker__header-ampm !optional;
     }
 
     @include e(header-hour){
-        @extend %igx-time-picker__header-hour !optional;
+        @extend %time-picker__header-hour !optional;
+    }
+
+    @include e(main) {
+        @extend %time-picker__main !optional;
     }
 
     // COLUMN
     @include e(column) {
-        @extend %igx-time-picker__column !optional;
+        @extend %time-picker__column !optional;
     }
 
     @include e(item) {
-        @extend %igx-time-picker__item !optional;
+        @extend %time-picker__item !optional;
     }
 
     @include e(item, $mod: selected) {
-        @extend %igx-time-picker__item--selected !optional;
+        @extend %time-picker__item--selected !optional;
     }
 
     @include e(item, $m: active) {
-        @extend %igx-time-picker__item--active !optional;
+        @extend %time-picker__item--active !optional;
     }
 
     // HOUR
     @include e(hourList) {
-        @extend %igx-time-picker__hourList !optional;
+        @extend %time-picker__hourList !optional;
     }
 
-
     // MINUTE
     @include e(minuteList) {
-        @extend %igx-time-picker__minuteList !optional;
+        @extend %time-picker__minuteList !optional;
     }
 
     // AM PM
     @include e(ampmList) {
-        @extend %igx-time-picker__ampmList !optional;
+        @extend %time-picker__ampmList !optional;
     }
 
     @include e(body) {
-        @extend %igx-time-picker__body !optional;
+        @extend %time-picker__body !optional;
     }
 
-    .igx-dialog__window {
-        @extend %time-picker-display !optional;
+    @include e(buttons) {
+        @extend %time-picker__buttons !optional;
     }
 
-    @include m(vertical) {
-        .igx-dialog__window {
-            @extend %time-picker-display--vertical !optional;
-        }
-
-        .igx-time-picker__wrapper {
-            @extend %igx-time-picker__wrapper !optional;
-        }
-
-        .igx-time-picker__header {
-            @extend %igx-time-picker__header--vertical !optional;
-
-            &::after {
-                @extend %igx-time-picker__header--vertical-after !optional;
-            }
-        }
-
-        .igx-time-picker__body {
-            @extend %igx-time-picker__body--vertical !optional;
-        }
-    }
-
-    .igx-dialog__window,
-    .igx-dialog__window-content {
-        @extend %time-picker-content !optional;
+    @include m(dropdown) {
+        @extend %time-picker--dropdown !optional;
     }
 
-    .igx-dialog__window-title {
-        @extend %time-picker-dialog-title !optional;
-    }
+    @include m(vertical) {
+        @extend %time-picker-display--vertical !optional;
 
-    .igx-dialog__window-actions {
-        @extend %time-picker-dialog-actions !optional;
+        @include e(header) {
+            @extend %time-picker__header--vertical !optional;
+        }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss

@@ -92,31 +92,35 @@
 
     $vertical-header-width: rem(168px);
 
-    %igx-time-picker__body {
+    %time-picker-display {
         display: flex;
-        padding: 10px 0;
-        justify-content: center;
-        background: --var($theme, 'background-color');
+        flex-flow: column nowrap;
+        max-width: 340px;
+        min-width: 320px;
+        border-radius: rem(4px);
+        box-shadow: igx-elevation($elevations, 24);
+        overflow: hidden;
     }
 
-    %igx-time-picker__body--vertical {
-        flex: 1 1 auto;
+    %time-picker-display--vertical {
+        flex-flow: row nowrap;
+        min-width: 540px;
     }
 
-    %time-picker-display {
-        max-width: 340px;
-        min-width: 320px;
-        padding: 0;
+    %time-picker__main {
+        background: --var($theme, 'background-color');
+        flex: 1 1 auto;
     }
 
-    %time-picker-display--vertical {
-        width: 540px;
+    %time-picker--dropdown {
+        min-width: 200px;
+        box-shadow: igx-elevation($elevations, 3);
     }
 
-    // Take effect only in vertical mode
-    %igx-time-picker__wrapper {
+    %time-picker__body {
         display: flex;
-        flex-wrap: nowrap;
+        padding: 10px 0;
+        justify-content: center;
     }
 
     %time-picker-content {
@@ -134,21 +138,21 @@
         margin: 0;
     }
 
-    %igx-time-picker__hourList {
+    %time-picker__hourList {
         text-align: right;
     }
 
-    %igx-time-picker__minuteList {
+    %time-picker__minuteList {
         text-align: center;
     }
 
-    %igx-time-picker__ampmList {
+    %time-picker__ampmList {
         display: flex;
         flex-direction: column;
         padding-top: 48px;
     }
 
-    %igx-time-picker__column {
+    %time-picker__column {
         max-width: 64px;
         height: 325px;
         padding: 0;
@@ -166,7 +170,7 @@
         }
     }
 
-    %igx-time-picker__item {
+    %time-picker__item {
         width: 54px;
         padding: 5px 10px;
         border-radius: 15px;
@@ -185,48 +189,44 @@
         }
     }
 
-    %igx-time-picker__item--selected {
+    %time-picker__item--selected {
         font-size: rem(24px);
         color: --var($theme, 'selected-text-color');
     }
 
-    %igx-time-picker__item--active {
+    %time-picker__item--active {
         background: --var($theme, 'active-item-background');
     }
 
-    %igx-time-picker__header {
+    %time-picker__header {
         background: --var($theme, 'header-background');
         padding: rem(24px) rem(16px);
     }
 
-    %igx-time-picker__header-ampm {
+    %time-picker__header-ampm {
         color: --var($theme, 'header-time-period-color');
     }
 
-    %igx-time-picker__header--vertical {
+    %time-picker__header--vertical {
         width: $vertical-header-width;
-        position: relative;
     }
 
-    %igx-time-picker__header--vertical-after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 100%;
-        height: 100%;
-        background: --var($theme, 'header-background');
-    }
-
-    %igx-time-picker__header-hour {
-        color: --var($theme, 'header-hour-text-color');
+    %time-picker__header-hour {
         display: flex;
+        color: --var($theme, 'header-hour-text-color');
     }
 
-    %igx-time-picker__header-ampm,
-    %igx-time-picker__header-hour {
+    %time-picker__header-ampm,
+    %time-picker__header-hour {
         margin: 0;
     }
+
+    %time-picker__buttons {
+        display: flex;
+        justify-content: flex-end;
+        height: rem(52px);
+        padding: rem(8px);
+    }
 }
 
 /// Adds typography styles for the igx-calendar component.
@@ -246,15 +246,15 @@
     $content: map-get($categories, 'content');
 
     @include igx-scope('.igx-typography') {
-        %igx-time-picker__header-ampm {
+        %time-picker__header-ampm {
             @include igx-type-style($type-scale, $time-period);
         }
 
-        %igx-time-picker__header-hour {
+        %time-picker__header-hour {
             @include igx-type-style($type-scale, $header-hour);
         }
 
-        %igx-time-picker__column {
+        %time-picker__column {
             @include igx-type-style($type-scale, $content);
         }
     }

projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild, OnInit, ElementRef, Pipe, PipeTransform } from '@angular/core';
+import { Component, Input, ViewChild, ElementRef, Pipe, PipeTransform } from '@angular/core';
 import {
   async,
   fakeAsync,
@@ -68,6 +68,7 @@ describe('igxMask', () => {
 
         input.nativeElement.dispatchEvent(new Event('focus'));
         tick();
+        fixture.detectChanges();
 
         expect(input.nativeElement.value).toEqual('555 55');
 
@@ -81,6 +82,7 @@ describe('igxMask', () => {
 
         input.nativeElement.dispatchEvent(new Event('focus'));
         tick();
+        fixture.detectChanges();
 
         expect(input.nativeElement.value).toEqual('+359-884 19 08 54');
     }));
@@ -296,23 +298,22 @@ describe('igxMask', () => {
     it('Apply display and input pipes on blur and focus.', fakeAsync(() => {
         const fixture = TestBed.createComponent(PipesMaskComponent);
         fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
 
         const input = fixture.componentInstance.input;
 
-        input.nativeElement.focus();
+        input.nativeElement.dispatchEvent(new Event('focus'));
         tick();
+        fixture.detectChanges();
 
         expect(input.nativeElement.value).toEqual('SSS');
 
         input.nativeElement.dispatchEvent(new Event('blur'));
         tick();
+        fixture.detectChanges();
 
         expect(input.nativeElement.value).toEqual('sss');
-
-        input.nativeElement.dispatchEvent(new Event('focus'));
-        tick();
-
-        expect(input.nativeElement.value).toEqual('SSS');
     }));
 
     it('Apply placehodler when value is not defined.', fakeAsync(() => {
@@ -325,13 +326,13 @@ describe('igxMask', () => {
         expect(input.nativeElement.placeholder).toEqual('hello');
 
         input.nativeElement.dispatchEvent(new Event('focus'));
-        tick();
+        fixture.detectChanges();
 
         expect(input.nativeElement.value).toEqual('(__) (__)');
         expect(input.nativeElement.placeholder).toEqual('hello');
 
         input.nativeElement.dispatchEvent(new Event('blur'));
-        tick();
+        fixture.detectChanges();
 
         expect(input.nativeElement.value).toEqual('');
         expect(input.nativeElement.placeholder).toEqual('hello');