refactor(picker-base): port headerOrientation prop in base class+test for TP,DRP

Author: ddaribo

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

@@ -14,7 +14,7 @@ import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 import { OverlaySettings } from '../services/overlay/utilities';
 import { IgxPickerToggleComponent } from './picker-icons.common';
-import { PickerInteractionMode } from './types';
+import { PickerHeaderOrientation, PickerInteractionMode } from './types';
 import { WEEKDAYS } from '../calendar/calendar';
 import { DateRange } from '../date-range-picker/date-range-picker-inputs.common';
 import { IGX_INPUT_GROUP_TYPE, IgxInputGroupType } from '../input-group/inputGroupType';
@@ -78,6 +78,17 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
     @Input()
     public mode: PickerInteractionMode = PickerInteractionMode.DropDown;
 
+    /**
+     * Gets/Sets the orientation of the `IgxDatePickerComponent` header.
+     *
+     *  @example
+     * ```html
+     * <igx-date-picker headerOrientation="vertical"></igx-date-picker>
+     * ```
+     */
+    @Input()
+    public headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal;
+
     /**
      * Overlay settings used to display the pop-up element.
      *

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

@@ -51,7 +51,6 @@ import { IBaseCancelableBrowserEventArgs, isDate, PlatformUtil } from '../core/u
 import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component';
 import { PickerBaseDirective } from '../date-common/picker-base.directive';
 import { IgxPickerActionsDirective, IgxPickerClearComponent } from '../date-common/public_api';
-import { PickerHeaderOrientation } from '../date-common/types';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
 import { DatePart, DatePartDeltas, IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
@@ -162,17 +161,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     @Input()
     public formatter: (val: Date) => string;
 
-    /**
-     * Gets/Sets the orientation of the `IgxDatePickerComponent` header.
-     *
-     *  @example
-     * ```html
-     * <igx-date-picker headerOrientation="vertical"></igx-date-picker>
-     * ```
-     */
-    @Input()
-    public headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal;
-
     /**
      * Gets/Sets the today button's label.
      *
@@ -989,7 +977,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         this.setCalendarViewDate();
 
         componentInstance.mode = this.mode;
-        // componentInstance.headerOrientation = this.headerOrientation;
         componentInstance.closeButtonLabel = this.cancelButtonLabel;
         componentInstance.todayButtonLabel = this.todayButtonLabel;
         componentInstance.pickerActions = this.pickerActions;

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from '@angular/core/testing';
 import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy } from '@angular/core';
 import { IgxInputDirective, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api';
-import { PickerInteractionMode } from '../date-common/types';
+import { PickerHeaderOrientation, PickerInteractionMode } from '../date-common/types';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -1580,6 +1580,30 @@ describe('IgxDateRangePicker', () => {
                 expect(calendarHeader).toBeTruthy('Calendar header should be present');
             }));
 
+            it('should set calendar headerOrientation prop in dialog mode', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+
+                dateRange.mode = 'dialog';
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].headerOrientation).toBe(PickerHeaderOrientation.Horizontal);
+
+                dateRange.close();
+                tick();
+                fixture.detectChanges();
+
+                dateRange.headerOrientation = PickerHeaderOrientation.Vertical;
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].headerOrientation).toBe(PickerHeaderOrientation.Vertical);
+            }));
+
             describe('Templated Calendar Header', () => {
                 let dateRangeDebugEl: DebugElement;
                 beforeEach(fakeAsync(() => {

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

@@ -1100,6 +1100,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         this._calendar.headerTitleTemplate = this.headerTitleTemplate;
         this._calendar.headerTemplate = this.headerTemplate;
         this._calendar.subheaderTemplate = this.subheaderTemplate;
+        this._calendar.headerOrientation = this.headerOrientation;
         this.calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date[]) => this.handleSelection(ev));
 
         componentInstance.mode = this.mode;

projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts

@@ -37,6 +37,7 @@ const CSS_CLASS_HEADER_HOUR = '.igx-time-picker__header-hour';
 const CSS_CLASS_OVERLAY_WRAPPER = 'igx-overlay__wrapper';
 const TIME_PICKER_TOGGLE_ICON = 'access_time';
 const TIME_PICKER_CLEAR_ICON = 'clear';
+const CSS_CLASS_TIME_PICKER_VERTICAL = '.igx-time-picker--vertical';
 
 describe('IgxTimePicker', () => {
     let timePicker: IgxTimePickerComponent;
@@ -465,7 +466,7 @@ describe('IgxTimePicker', () => {
     });
 
     describe('Interaction tests', () => {
-        let timePickerElement: DebugElement;
+        let timePickerElement: HTMLElement;
         let timePickerDebElement: DebugElement;
         let inputGroup: DebugElement;
         let hourColumn: DebugElement;
@@ -1140,6 +1141,7 @@ describe('IgxTimePicker', () => {
                 fixture = TestBed.createComponent(IgxTimePickerTestComponent);
                 fixture.detectChanges();
                 timePicker = fixture.componentInstance.timePicker;
+                timePickerDebElement = fixture.debugElement.query(By.css(CSS_CLASS_TIMEPICKER));
                 timePickerElement = fixture.debugElement.query(By.css(CSS_CLASS_TIMEPICKER)).nativeElement;
                 inputGroup = fixture.debugElement.query(By.css(`.${CSS_CLASS_INPUTGROUP}`));
                 hourColumn = fixture.debugElement.query(By.css(`.${CSS_CLASS_HOURLIST}`));
@@ -1570,6 +1572,31 @@ describe('IgxTimePicker', () => {
                 inputEl = fixture.nativeElement.querySelector(CSS_CLASS_INPUT);
                 expect(inputEl.placeholder).toEqual('sample placeholder');
             }));
+
+            it('should set headerOrientation prop in dialog mode', fakeAsync(() => {
+                timePicker.mode = PickerInteractionMode.Dialog;
+                timePicker.open();
+                tick();
+                fixture.detectChanges();
+                expect(timePicker.headerOrientation).toEqual('horizontal');
+                let dialogDivVertical = timePickerDebElement.query(By.css(CSS_CLASS_TIME_PICKER_VERTICAL));
+                expect(dialogDivVertical).toBeNull();
+
+                timePicker.close();
+                tick();
+                fixture.detectChanges();
+
+                timePicker.mode = PickerInteractionMode.Dialog;
+                timePicker.headerOrientation = 'vertical';
+                fixture.detectChanges();
+
+                timePicker.open();
+                tick();
+                fixture.detectChanges();
+
+                dialogDivVertical = timePickerDebElement.query(By.css(CSS_CLASS_TIME_PICKER_VERTICAL));
+                expect(dialogDivVertical).not.toBeNull();
+            }));
         });
 
         describe('Keyboard navigation', () => {

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

@@ -239,19 +239,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective
     @Input()
     public formatter: (val: Date) => string;
 
-    /**
-     * Sets the orientation of the picker's header.
-     *
-     * @remarks
-     * Available in dialog mode only. Default value is `horizontal`.
-     *
-     * ```html
-     * <igx-time-picker [headerOrientation]="'vertical'"></igx-time-picker>
-     * ```
-     */
-    @Input()
-    public headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal;
-
     /** @hidden @internal */
     @Input({ transform: booleanAttribute })
     public readOnly = false;