feat(picker-base): add hideHeader prop + tests

Author: ddaribo

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

@@ -89,6 +89,17 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
     @Input()
     public headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal;
 
+    /**
+     * Gets/Sets whether the header is hidden in dialog mode.
+     *
+     *  @example
+     * ```html
+     * <igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker>
+     * ```
+     */
+    @Input({ transform: booleanAttribute })
+    public hideHeader = false;
+
     /**
      * Overlay settings used to display the pop-up element.
      *

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

@@ -32,6 +32,7 @@ const DATE_PICKER_CLEAR_ICON = 'clear';
 
 const CSS_CLASS_INPUT_GROUP_REQUIRED = 'igx-input-group--required';
 const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid';
+const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header';
 
 describe('IgxDatePicker', () => {
     describe('Integration tests', () => {
@@ -66,6 +67,19 @@ describe('IgxDatePicker', () => {
                 expect(suffix).toHaveSize(1);
                 expect(suffix[0].nativeElement.innerText).toEqual(DATE_PICKER_CLEAR_ICON);
             });
+
+            it('should hide the calendar header if hideHeader is true in dialog mode', fakeAsync(() => {
+                const datePicker = fixture.componentInstance.datePicker;
+                datePicker.mode = 'dialog';
+                datePicker.hideHeader = true;
+                datePicker.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(datePicker['_calendar'].hasHeader).toBeFalse();
+                const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER));
+                expect(calendarHeader).toBeFalsy('Calendar header should not be present');
+            }));
         });
 
         describe('Events', () => {

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

@@ -954,7 +954,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
 
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
         this._calendar = componentInstance.calendar;
-        this._calendar.hasHeader = !this.isDropdown;
+        this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;
         this._calendar.formatOptions = this.pickerCalendarFormat;
         this._calendar.formatViews = this.pickerFormatViews;
         this._calendar.locale = this.locale;

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

@@ -44,9 +44,10 @@ const CSS_CLASS_OVERLAY_CONTENT = 'igx-overlay__content';
 const CSS_CLASS_DATE_RANGE = 'igx-date-range-picker';
 const CSS_CLASS_CALENDAR_DATE = 'igx-days-view__date';
 const CSS_CLASS_INACTIVE_DATE = 'igx-days-view__date--inactive';
-const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header-date';
+const CSS_CLASS_CALENDAR_HEADER_TEMPLATE = '.igx-calendar__header-date';
 const CSS_CLASS_CALENDAR_HEADER_TITLE = '.igx-calendar__header-year';
 const CSS_CLASS_CALENDAR_SUBHEADER = '.igx-calendar-picker__dates';
+const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header';
 
 describe('IgxDateRangePicker', () => {
     describe('Unit tests: ', () => {
@@ -1576,7 +1577,7 @@ describe('IgxDateRangePicker', () => {
                 fixture.detectChanges();
 
                 expect(dateRange['_calendar'].hasHeader).toBeTrue();
-                const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER));
+                const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER_TEMPLATE));
                 expect(calendarHeader).toBeTruthy('Calendar header should be present');
             }));
 
@@ -1604,6 +1605,22 @@ describe('IgxDateRangePicker', () => {
                 expect(dateRange['_calendar'].headerOrientation).toBe(PickerHeaderOrientation.Vertical);
             }));
 
+            it('should hide the calendar header if hideHeader is true in dialog mode', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+
+                dateRange.mode = 'dialog';
+                dateRange.hideHeader = true;
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].hasHeader).toBeFalse();
+                const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER));
+                expect(calendarHeader).toBeFalsy('Calendar header should not be present');
+            }));
+
             describe('Templated Calendar Header', () => {
                 let dateRangeDebugEl: DebugElement;
                 beforeEach(fakeAsync(() => {
@@ -1630,7 +1647,7 @@ describe('IgxDateRangePicker', () => {
                 }));
 
                 it('Should use the custom template for header', fakeAsync(() => {
-                    const headerElement = dateRangeDebugEl.query(By.css(CSS_CLASS_CALENDAR_HEADER));
+                    const headerElement = dateRangeDebugEl.query(By.css(CSS_CLASS_CALENDAR_HEADER_TEMPLATE));
                     expect(headerElement).toBeTruthy('Header element should be present');
                     if (headerElement) {
                         expect(headerElement.nativeElement.textContent.trim()).toBe('Test header');

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

@@ -1090,7 +1090,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
 
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
         this._calendar = componentInstance.calendar;
-        this.calendar.hasHeader = !this.isDropdown;
+        this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;
         this.calendar.locale = this.locale;
         this.calendar.selection = CalendarSelection.RANGE;
         this.calendar.weekStart = this.weekStart;

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

@@ -62,7 +62,7 @@
 <div #toggleDirective="toggle" igxToggle role="dialog" class="igx-time-picker"
     [ngClass]="{'igx-time-picker--dropdown': isDropdown, 'igx-time-picker--vertical': isVertical && !isDropdown}">
     <div class="igx-time-picker__main">
-        @if (!isDropdown) {
+        @if (!this.isDropdown && !this.hideHeader) {
             <div class="igx-time-picker__header">
                 <h2 class="igx-time-picker__header-hour">
                     <span>{{ selectedDate | timeFormatPipe }}</span>

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

@@ -34,6 +34,7 @@ const CSS_CLASS_SECONDSLIST = '.igx-time-picker__secondsList';
 const CSS_CLASS_AMPMLIST = 'igx-time-picker__ampmList';
 const CSS_CLASS_SELECTED_ITEM = '.igx-time-picker__item--selected';
 const CSS_CLASS_HEADER_HOUR = '.igx-time-picker__header-hour';
+const CSS_CLASS_HEADER = '.igx-time-picker__header';
 const CSS_CLASS_OVERLAY_WRAPPER = 'igx-overlay__wrapper';
 const TIME_PICKER_TOGGLE_ICON = 'access_time';
 const TIME_PICKER_CLEAR_ICON = 'clear';
@@ -1597,6 +1598,19 @@ describe('IgxTimePicker', () => {
                 dialogDivVertical = timePickerDebElement.query(By.css(CSS_CLASS_TIME_PICKER_VERTICAL));
                 expect(dialogDivVertical).not.toBeNull();
             }));
+
+            it('should hide the calendar header if hideHeader is true in dialog mode', fakeAsync(() => {
+                timePicker.mode = PickerInteractionMode.Dialog;
+                timePicker.hideHeader = true;
+                fixture.detectChanges();
+
+                timePicker.open();
+                tick();
+                fixture.detectChanges();
+
+                const header = fixture.debugElement.query(By.css(CSS_CLASS_HEADER));
+                expect(header).toBeNull();
+            }));
         });
 
         describe('Keyboard navigation', () => {