IgxTimePicker refactoring

projects/igniteui-angular/src/lib/date-common/pickers-base.directive.ts

@@ -63,7 +63,7 @@ export abstract class PickersBaseDirective extends DisplayDensityBase implements
      * ```
      */
     @Input()
-    public mode = InteractionMode.Dialog;
+    public mode: InteractionMode = InteractionMode.DropDown;
 
     /**
      * Custom overlay settings that will be used to display the calendar.

projects/igniteui-angular/src/lib/date-picker/date-picker.utils.ts

@@ -40,13 +40,14 @@ const enum DateParts {
 /** @hidden */
 export abstract class DatePickerUtil {
     public static readonly DEFAULT_INPUT_FORMAT = 'MM/dd/yyyy';
+    static DEFAULT_TIME_INPUT_FORMAT = 'hh:mm tt';
+    static DEFAULT_TIME_FORMAT = 'hh:mm a';
     // TODO: this is the def mask for the date-picker, should remove it during refactoring
     private static readonly SHORT_DATE_MASK = 'MM/dd/yy';
     private static readonly SEPARATOR = 'literal';
     private static readonly NUMBER_OF_MONTHS = 12;
     private static readonly PROMPT_CHAR = '_';
     private static readonly DEFAULT_LOCALE = 'en';
-
     /**
      *  TODO: (in issue #6483) Unit tests and docs for all public methods.
      */
@@ -346,16 +347,16 @@ export abstract class DatePickerUtil {
      * @param minValue The lowest possible value that `value` can take
      * @param maxValue The largest possible value that `value` can take
      */
-    public static validateMinMax(value: Date, minValue: Date | string, maxValue: Date | string): ValidationErrors | null {
+    public static validateMinMax(value: Date, minValue: Date | string, maxValue: Date | string, includeTime = false, includeDate = true): ValidationErrors | null {
         const errors = {};
         const min = DatePickerUtil.parseDate(minValue);
         const max = DatePickerUtil.parseDate(maxValue);
-        if ((min && value && DatePickerUtil.lessThanMinValue(value, min, false))
-            || (min && value && DatePickerUtil.lessThanMinValue(value, min, false))) {
+        if ((min && value && DatePickerUtil.lessThanMinValue(value, min, includeTime, includeDate))
+            || (min && value && DatePickerUtil.lessThanMinValue(value, min, includeTime, includeDate))) {
             Object.assign(errors, { minValue: true });
         }
-        if ((max && value && DatePickerUtil.greaterThanMaxValue(value, max, false))
-            || (max && value && DatePickerUtil.greaterThanMaxValue(value, max, false))) {
+        if ((max && value && DatePickerUtil.greaterThanMaxValue(value, max, includeTime, includeDate))
+            || (max && value && DatePickerUtil.greaterThanMaxValue(value, max, includeTime, includeDate))) {
             Object.assign(errors, { maxValue: true });
         }
 

projects/igniteui-angular/src/lib/directives/date-time-editor/date-time-editor.directive.ts

@@ -225,7 +225,10 @@ export class IgxDateTimeEditorDirective extends IgxMaskDirective implements OnCh
     return this.maskParser.applyMask(null, this.maskOptions);
   }
 
-  private get targetDatePart(): DatePart {
+  /**
+  * @hidden @internal
+  */
+  public get targetDatePart(): DatePart {
     if (this.document.activeElement === this.nativeElement) {
       return this._inputDateParts
         .find(p => p.start <= this.selectionStart && this.selectionStart <= p.end && p.type !== DatePart.Literal)?.type;

projects/igniteui-angular/src/lib/time-picker/time-picker.common.ts

@@ -22,8 +22,6 @@ export interface IgxTimePickerBase {
     selectedMinute: string;
     selectedSeconds: string;
     selectedAmPm: string;
-    format: string;
-    promptChar: string;
     cleared: boolean;
     mode: InteractionMode;
     showHoursList: boolean;
@@ -45,6 +43,5 @@ export interface IgxTimePickerBase {
     scrollSecondsIntoView(item: string): void;
     scrollAmPmIntoView(item: string): void;
     close(): void;
-    parseMask(preserveAmPm?: boolean): string;
 }
 

projects/igniteui-angular/src/lib/time-picker/time-picker.component.html

@@ -1,51 +1,49 @@
-<ng-template #labelTemplate>
-    <ng-content select="[igxLabel]"></ng-content>
-</ng-template>
+    <igx-input-group [suppressInputAutofocus]="this.isDropdown" (click)="!this.isDropdown && open()">
+        <input igxInput [igxDateTimeEditor]="this.inputFormat" type="text"
+            [readonly]="!this.isDropdown"
+            [preventSpinOnWheel]="!this.isDropdown"
+            [disabled]="this.disabled"
+            [displayFormat]="this.displayFormat"
+            [placeholder]="this.placeholder"
+            role="combobox" aria-haspopup="dialog"
+            [attr.aria-expanded]="!toggle.collapsed"
+            [attr.aria-labelledby]="this.label?.id"
+             />
+
+            <igx-prefix *ngIf="!this.toggleComponents.length" (click)="open()">
+                <ng-container *ngTemplateOutlet="defaultToggleIcon"></ng-container>
+            </igx-prefix>
+
+            <igx-suffix *ngIf="showClearButton" igxRipple (click)="clear()">
+                <ng-container *ngTemplateOutlet="defaultClearIcon"></ng-container>
+            </igx-suffix>
 
-<ng-template #dropdownInputTemplate>
-    <igx-input-group #group (mousedown)="mouseDown($event)" [suppressInputAutofocus]="true">
-        <label igxLabel *ngIf="!labelDirective">Time</label>
-        <ng-container ngProjectAs="[igxLabel]" *ngTemplateOutlet="labelTemplate"></ng-container>
-        <igx-prefix (click)="openDialog(group.element.nativeElement)">
-            <igx-icon>access_time</igx-icon>
-        </igx-prefix>
-        <input
-            type="text"
-            [igxMask]="mask"
-            igxInput
-            [includeLiterals]="true"
-            [placeholder]="format"
-            [displayValuePipe]="displayFormat"
-            [focusedValuePipe]="inputFormat"
-            [promptChar]="promptChar"
-            [value]="displayValue"
-            [igxTextSelection]="true"
-            (input)="onInput($event)"
-            (blur)="onBlur($event)"
-            (focus)="onFocus($event)"
-            (wheel)="spinOnEdit($event)"
-            [disabled]="disabled" />
-        <igx-suffix *ngIf="showClearButton" igxRipple (click)="clear()">
-            <igx-icon>clear</igx-icon>
-        </igx-suffix>
+        <ng-container ngProjectAs="[igxLabel]">
+            <ng-content select="[igxLabel]"></ng-content>
+        </ng-container>
+        <ng-container ngProjectAs="igx-prefix">
+            <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
+        </ng-container>
+        <ng-container ngProjectAs="igx-suffix">
+            <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
+        </ng-container>
+        <ng-container ngProjectAs="igx-hint">
+            <ng-content select="igx-hint,[igxHint]"></ng-content>
+        </ng-container>
     </igx-input-group>
+
+
+<ng-template #defaultToggleIcon>
+    <igx-icon fontSet="material">
+        access_time
+    </igx-icon>
 </ng-template>
-<ng-template #defaultTimePickerTemplate>
-    <igx-input-group (click)="openDialog()" (mousedown)="mouseDown($event)">
-        <igx-prefix>
-            <igx-icon>access_time</igx-icon>
-        </igx-prefix>
-        <label igxLabel *ngIf="!labelDirective">Time</label>
-        <ng-container ngProjectAs="[igxLabel]" *ngTemplateOutlet="labelTemplate"></ng-container>
-        <input
-            igxInput
-            [value]="displayTime || ''"
-            [disabled]="disabled"
-            tabindex="0" readonly
-            (blur)="onBlur($event)" />
-    </igx-input-group>
+
+<ng-template #defaultClearIcon>
+    <igx-icon fontSet="material">
+        clear
+    </igx-icon>
 </ng-template>
-<ng-container *ngTemplateOutlet="template; context: context"></ng-container>
 
 <ng-template #defaultTimePickerActions>
     <div *ngIf="cancelButtonLabel || okButtonLabel" class="igx-time-picker__buttons">
@@ -57,35 +55,37 @@
         </button>
     </div>
 </ng-template>
-<div igxToggle class="igx-time-picker"
-    [ngClass]="{'igx-time-picker--dropdown': mode === 'dropdown', 'igx-time-picker--vertical': vertical && mode === 'dialog'}">
-    <div *ngIf="mode === 'dialog'" class="igx-time-picker__header">
+
+
+<div #toggle="toggle" igxToggle class="igx-time-picker"
+    [ngClass]="{'igx-time-picker--dropdown': this.isDropdown, 'igx-time-picker--vertical': this.isVertical && !this.isDropdown}">
+    <div *ngIf="!this.isDropdown" class="igx-time-picker__header">
         <h5 class="igx-time-picker__header-ampm">{{ selectedAmPm }}</h5>
         <h2 class="igx-time-picker__header-hour">
-            <span>{{ selectedHour }}</span>:<span>{{ selectedMinute }}</span>:<span>{{ selectedSeconds }}</span>
+            <span *ngIf="showHoursList">{{ selectedHour }}</span><span *ngIf="showMinutesList">:{{ selectedMinute }}</span><span *ngIf="showSecondsList">:{{ selectedSeconds }}</span>
         </h2>
     </div>
     <div class="igx-time-picker__main">
         <div class="igx-time-picker__body">
             <div *ngIf="showHoursList" #hourList [igxItemList]="'hourList'">
                 <span [igxHourItem]="hour"
-                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Hour, hour)}"
-                *ngFor="let hour of hourView">{{ hour }}</span>
+                    [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Hour, hour)}"
+                    *ngFor="let hour of hourView">{{ hour }}</span>
             </div>
             <div *ngIf="showMinutesList" #minuteList [igxItemList]="'minuteList'">
                 <span [igxMinuteItem]="minute"
-                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Minute, minute)}"
-                *ngFor="let minute of minuteView" >{{ minute }}</span>
+                    [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Minute, minute)}"
+                    *ngFor="let minute of minuteView">{{ minute }}</span>
             </div>
             <div *ngIf="showSecondsList" #secondsList [igxItemList]="'secondsList'">
                 <span [igxSecondsItem]="seconds"
-                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Seconds, seconds)}"
-                *ngFor="let seconds of secondsView">{{ seconds }}</span>
+                    [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.Seconds, seconds)}"
+                    *ngFor="let seconds of secondsView">{{ seconds }}</span>
             </div>
             <div *ngIf="showAmPmList" #ampmList [igxItemList]="'ampmList'">
                 <span [igxAmPmItem]="ampm"
-                [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.AMPM, ampm)}"
-                *ngFor="let ampm of ampmView">{{ ampm }}</span>
+                    [ngClass]="{'igx-time-picker__item--disabled': applyDisabledStyleForItem(timeParts.AMPM, ampm)}"
+                    *ngFor="let ampm of ampmView">{{ ampm }}</span>
             </div>
         </div>
         <ng-container