Align Date & Date Range Picker props related to calendar with WC

CHANGELOG.md

@@ -2,6 +2,40 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## Unreleased
+### New Features
+
+- `IgxDateRangePicker`
+    - Now has a complete set of properties to customize the calendar:
+        - `headerOrientation`
+        - `orientation`
+        - `hideHeader`
+        - `activeDate`
+        - `disabledDates`
+        - `specialDates`
+
+    - As well as the following templates, available to customize the contents of the calendar header in `dialog` mode:
+
+        - `igxCalendarHeader`
+        - `igxCalendarHeaderTitle`
+        - `igxCalendarSubheader`
+    - **Behavioral Changes**
+        - The calendar would be displayed with header in `dialog` mode by default.
+        - The picker would remain open when typing (in two-inputs and `dropdown` mode).
+        - The calendar selection would get updated with the typed value.
+        - The calendar view would be updated as per the typed value.
+        - The picker would display a clear icon by default in single input mode.
+- `IgxDatePicker`
+    - Similar to the `IgxDateRangePicker`, also completes the ability to customize the calendar by introducing the following
+    properties in addition to the existing ones:
+        - `hideHeader`
+        - `orientation`
+        - `activeDate`
+    - **Behavioral Changes**
+        - The calendar selection would get updated with the typed value.
+        - The calendar view would be updated as per the typed date value.
+
+
 ## 20.1.0
 ### New Features
 - `IgxCarousel`

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -707,15 +707,15 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
 
         switch (this.selection) {
             case CalendarSelection.SINGLE:
-                if (isDate(value) && !this.isDateDisabled(value as Date)) {
+                if (isDate(value)) {
                     this.selectSingle(value as Date);
                 }
                 break;
             case CalendarSelection.MULTI:
                 this.selectMultiple(value);
                 break;
             case CalendarSelection.RANGE:
-                this.selectRange(value, true);
+                this.selectRange(value);
                 break;
         }
     }
@@ -807,9 +807,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
                     : [value, this.lastSelectedDate];
 
                 const unselectedDates = [this._startDate, ...this.generateDateRange(this._startDate, this._endDate)]
-                    .filter(date => !this.isDateDisabled(date)
-                        && this.selectedDates.every((d: Date) => d.getTime() !== date.getTime())
-                    );
+                    .filter(date => this.selectedDates.every((d: Date) => d.getTime() !== date.getTime()));
 
                 // select all dates from last selected to shift clicked date
                 if (this.selectedDates.some((date: Date) => date.getTime() === this.lastSelectedDate.getTime())

projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts

@@ -1767,7 +1767,8 @@ describe("IgxCalendar - ", () => {
                 });
 
                 it("Should not select date from model, if it is part of disabled dates", () => {
-                    expect(calendar.value).toBeFalsy();
+                    // Changed per WC alignment task #16131 - calendar should not block selection of dates through API/model
+                    expect(calendar.value).toBeTruthy();
                 });
 
                 it("Should not select date from model in range selection, if model passes null", () => {

projects/igniteui-angular/src/lib/calendar/common/helpers.ts

@@ -88,20 +88,34 @@ export function getClosestActiveDate(
  * @remarks
  * By default, `unit` is set to 'day'.
  */
-export function* calendarRange(options: CalendarRangeParams) {
-    let low = toCalendarDay(options.start);
-    const unit = options.unit ?? "day";
-    const high =
-        typeof options.end === "number"
-            ? low.add(unit, options.end)
-            : toCalendarDay(options.end);
-
-    const reverse = high.lessThan(low);
-    const step = reverse ? -1 : 1;
-
-    while (!reverse ? low.lessThan(high) : low.greaterThan(high)) {
-        yield low;
-        low = low.add(unit, step);
+export function* calendarRange(
+    options: CalendarRangeParams
+): Generator<CalendarDay, void, unknown> {
+    const { start, end, unit = 'day', inclusive = false } = options;
+
+    let currentDate = toCalendarDay(start);
+    const endDate =
+        typeof end === 'number'
+            ? toCalendarDay(start).add(unit, end)
+            : toCalendarDay(end);
+
+    const isReversed = endDate.lessThan(currentDate);
+    const step = isReversed ? -1 : 1;
+
+    const shouldContinue = () => {
+        if (inclusive) {
+            return isReversed
+                ? currentDate.greaterThanOrEqual(endDate)
+                : currentDate.lessThanOrEqual(endDate);
+        }
+        return isReversed
+            ? currentDate.greaterThan(endDate)
+            : currentDate.lessThan(endDate);
+    };
+
+    while (shouldContinue()) {
+        yield currentDate;
+        currentDate = currentDate.add(unit, step);
     }
 }
 

projects/igniteui-angular/src/lib/calendar/common/model.ts

@@ -7,6 +7,7 @@ export type CalendarRangeParams = {
     start: DayParameter;
     end: DayParameter | number;
     unit?: DayInterval;
+    inclusive?: boolean;
 };
 
 type CalendarDayParams = {
@@ -237,11 +238,18 @@ export class CalendarDay {
     public greaterThan(value: DayParameter) {
         return this.timestamp > toCalendarDay(value).timestamp;
     }
+    public greaterThanOrEqual(value: DayParameter) {
+        return this.timestamp >= toCalendarDay(value).timestamp;
+    }
 
     public lessThan(value: DayParameter) {
         return this.timestamp < toCalendarDay(value).timestamp;
     }
 
+    public lessThanOrEqual(value: DayParameter) {
+        return this.timestamp <= toCalendarDay(value).timestamp;
+    }
+
     public toString() {
         return `${this.native}`;
     }

projects/igniteui-angular/src/lib/core/utils.ts

@@ -225,6 +225,19 @@ export const isEqual = (obj1, obj2): boolean => {
     return obj1 === obj2;
 };
 
+/**
+ * Limits a number to a range between a minimum and a maximum value.
+ *
+ * @param number
+ * @param min
+ * @param max
+ * @returns: `number`
+ * @hidden
+ */
+export const clamp = (number: number, min: number, max: number) =>
+    Math.max(min, Math.min(number, max));
+
+
 /**
  * Utility service taking care of various utility functions such as
  * detecting browser features, general cross browser DOM manipulation, etc.

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,28 @@ 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;
+
+    /**
+     * 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-common/types.ts

@@ -5,6 +5,13 @@ export const PickerHeaderOrientation = {
 } as const;
 export type PickerHeaderOrientation = (typeof PickerHeaderOrientation)[keyof typeof PickerHeaderOrientation];
 
+/** Calendar orientation. */
+export const PickerCalendarOrientation = {
+    Horizontal: 'horizontal',
+    Vertical: 'vertical'
+} as const;
+export type PickerCalendarOrientation = (typeof PickerCalendarOrientation)[keyof typeof PickerCalendarOrientation];
+
 /**
  * This enumeration is used to configure whether the date/time picker has an editable input with drop down
  * or is readonly - the date/time is selected only through a dialog.