@skyux/datetime 5.0.2 → 5.1.2

package/modules/datepicker/datepicker-calendar-change.d.ts

@@ -0,0 +1,24 @@
+import { SkyDatepickerCustomDate } from './datepicker-custom-date';
+import { Observable } from 'rxjs';
+/**
+ * Specifies changes in the datepicker calendar.
+ */
+export interface SkyDatepickerCalendarChange {
+    /**
+     * The end date.
+     */
+    endDate: Date;
+    /**
+     * The start date.
+     */
+    startDate: Date;
+    /**
+     * Provides an observable that allows the consumer to push custom dates back to the calendar
+     * when the `SkyCalendarDateRangeChangeEvent` event fires. This is useful
+     * for displaying key dates or disabled dates each time the calendar changes. If disabled dates
+     * are provided, SKY UX will prevent the user from selecting the date from the calendar.
+     * However, consumers will still need to add a custom validator to prevent users from entering
+     * disabled dates in the text input.
+     */
+    customDates?: Observable<SkyDatepickerCustomDate[]>;
+}

package/modules/datepicker/datepicker-calendar-inner.component.d.ts

@@ -1,11 +1,13 @@
-import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { SkyDatepickerCustomDate } from './datepicker-custom-date';
 import { SkyDateFormatter } from './date-formatter';
 import { SkyDatepickerDate } from './datepicker-date';
 import * as i0 from "@angular/core";
 /**
  * @internal
  */
-export declare class SkyDatepickerCalendarInnerComponent implements OnInit, OnChanges {
+export declare class SkyDatepickerCalendarInnerComponent implements OnDestroy, OnInit, OnChanges {
+    customDates: SkyDatepickerCustomDate[];
     startingDay: number;
     minDate: Date;
     maxDate: Date;
@@ -43,9 +45,11 @@ export declare class SkyDatepickerCalendarInnerComponent implements OnInit, OnCh
     handleKeydownMonth: Function;
     handleKeydownYear: Function;
     keys: any;
+    private ngUnsubscribe;
     private _selectedDate;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
     setCompareHandler(handler: Function, type: string): void;
     compare(date1: Date, date2: Date): any;
     setRefreshViewHandler(handler: Function, type: string): void;
@@ -64,7 +68,13 @@ export declare class SkyDatepickerCalendarInnerComponent implements OnInit, OnCh
     move(direction: number): void;
     toggleModeCalendar(event: Event): void;
     toggleMode(direction: number): void;
+    /**
+     * Date is disabled if it meets any of these criteria:
+     * 1. Date falls outside the min or max dates set by the SkyDatepickerConfigService.
+     * 2. Date is marked as disabled in the customDates array.
+     */
     protected isDisabled(date: Date): boolean;
+    private getCustomDate;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyDatepickerCalendarInnerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyDatepickerCalendarInnerComponent, "sky-datepicker-inner", never, { "startingDay": "startingDay"; "minDate": "minDate"; "maxDate": "maxDate"; "selectedDate": "selectedDate"; }, { "selectedDateChange": "selectedDateChange"; "calendarModeChange": "calendarModeChange"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyDatepickerCalendarInnerComponent, "sky-datepicker-inner", never, { "customDates": "customDates"; "startingDay": "startingDay"; "minDate": "minDate"; "maxDate": "maxDate"; "selectedDate": "selectedDate"; }, { "selectedDateChange": "selectedDateChange"; "calendarModeChange": "calendarModeChange"; }, never, ["*"]>;
 }

package/modules/datepicker/datepicker-calendar.component.d.ts

@@ -2,6 +2,8 @@ import { AfterViewInit, ElementRef, EventEmitter } from '@angular/core';
 import { SkyDatepickerAdapterService } from './datepicker-adapter.service';
 import { SkyDatepickerCalendarInnerComponent } from './datepicker-calendar-inner.component';
 import { SkyDatepickerConfigService } from './datepicker-config.service';
+import { SkyDatepickerCustomDate } from './datepicker-custom-date';
+import { SkyDatepickerCalendarChange } from './datepicker-calendar-change';
 import * as i0 from "@angular/core";
 /**
  * @internal
@@ -10,6 +12,8 @@ export declare class SkyDatepickerCalendarComponent implements AfterViewInit {
     private adapter;
     private config;
     private elementRef;
+    customDates: SkyDatepickerCustomDate[];
+    isDaypickerWaiting: boolean;
     minDate: Date;
     maxDate: Date;
     /** currently selected date */
@@ -17,8 +21,9 @@ export declare class SkyDatepickerCalendarComponent implements AfterViewInit {
     /** starting day of the week from 0-6 (0=Sunday, ..., 6=Saturday) */
     set startingDay(start: number);
     get startingDay(): number;
-    selectedDateChange: EventEmitter<Date>;
+    calendarDateRangeChange: EventEmitter<SkyDatepickerCalendarChange>;
     calendarModeChange: EventEmitter<string>;
+    selectedDateChange: EventEmitter<Date>;
     /**
      * @internal
      * Indicates if the calendar element's visiblity property is 'visible'.
@@ -31,9 +36,10 @@ export declare class SkyDatepickerCalendarComponent implements AfterViewInit {
     constructor(adapter: SkyDatepickerAdapterService, config: SkyDatepickerConfigService, elementRef: ElementRef);
     ngAfterViewInit(): void;
     configureOptions(): void;
+    onCalendarDateRangeChange(event: SkyDatepickerCalendarChange): void;
     onCalendarModeChange(event: string): void;
     onSelectedDateChange(event: Date): void;
     writeValue(value: Date): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyDatepickerCalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyDatepickerCalendarComponent, "sky-datepicker-calendar", never, { "minDate": "minDate"; "maxDate": "maxDate"; "selectedDate": "selectedDate"; "startingDay": "startingDay"; }, { "selectedDateChange": "selectedDateChange"; "calendarModeChange": "calendarModeChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyDatepickerCalendarComponent, "sky-datepicker-calendar", never, { "customDates": "customDates"; "isDaypickerWaiting": "isDaypickerWaiting"; "minDate": "minDate"; "maxDate": "maxDate"; "selectedDate": "selectedDate"; "startingDay": "startingDay"; }, { "calendarDateRangeChange": "calendarDateRangeChange"; "calendarModeChange": "calendarModeChange"; "selectedDateChange": "selectedDateChange"; }, never, never>;
 }

package/modules/datepicker/datepicker-custom-date.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The configuration for a custom date.
+ */
+export interface SkyDatepickerCustomDate {
+    /**
+     * The date to customize.
+     */
+    date: Date;
+    /**
+     * Indicates whether to disable the date.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether to display the date as a key date in the calendar.
+     */
+    keyDate?: boolean;
+    /**
+     * Displays a popup of the provided text when hovering over the key date in the calendar.
+     */
+    keyDateText?: Array<string>;
+}

package/modules/datepicker/datepicker-date.d.ts

@@ -9,4 +9,6 @@ export interface SkyDatepickerDate {
     current: boolean;
     secondary: boolean;
     uid: string;
+    keyDate?: boolean;
+    keyDateText?: Array<string>;
 }

package/modules/datepicker/datepicker.component.d.ts

@@ -1,5 +1,7 @@
 import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 import { SkyAffixService, SkyCoreAdapterService, SkyOverlayService } from '@skyux/core';
+import { SkyDatepickerCustomDate } from './datepicker-custom-date';
+import { SkyDatepickerCalendarChange } from './datepicker-calendar-change';
 import { SkyInputBoxHostService } from '@skyux/forms';
 import { SkyThemeService } from '@skyux/theme';
 import * as i0 from "@angular/core";
@@ -38,8 +40,16 @@ export declare class SkyDatepickerComponent implements OnDestroy, OnInit {
     get disabled(): boolean;
     set disabled(value: boolean);
     set selectedDate(value: Date);
+    /**
+     * Fires when the range of displayed dates in the calendar changes. Provides the
+     * current range of displayed dates and a mutable `customDate` property consumers can use
+     * to modify individual dates on the calendar.
+     */
+    calendarDateRangeChange: EventEmitter<SkyDatepickerCalendarChange>;
     calendarId: string;
+    customDates: SkyDatepickerCustomDate[] | undefined;
     dateChange: EventEmitter<Date>;
+    isDaypickerWaiting: boolean;
     isOpen: boolean;
     isVisible: boolean;
     maxDate: Date;
@@ -55,6 +65,7 @@ export declare class SkyDatepickerComponent implements OnDestroy, OnInit {
     private triggerButtonTemplateRef;
     private affixer;
     private calendarUnsubscribe;
+    private customDatesSubscription;
     private ngUnsubscribe;
     private overlay;
     private overlayKeydownListner;
@@ -67,6 +78,7 @@ export declare class SkyDatepickerComponent implements OnDestroy, OnInit {
     onCalendarModeChange(): void;
     onSelectedDateChange(value: Date): void;
     onTriggerButtonClick(): void;
+    onCalendarDateRangeChange(event: SkyDatepickerCalendarChange): void;
     private closePicker;
     private openPicker;
     private createAffixer;
@@ -75,6 +87,7 @@ export declare class SkyDatepickerComponent implements OnDestroy, OnInit {
     private destroyOverlay;
     private addKeydownListner;
     private removePickerEventListeners;
+    private cancelCustomDatesSubscription;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyDatepickerComponent, [null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyDatepickerComponent, "sky-datepicker", never, { "pickerClass": "pickerClass"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyDatepickerComponent, "sky-datepicker", never, { "pickerClass": "pickerClass"; }, { "calendarDateRangeChange": "calendarDateRangeChange"; }, never, ["*"]>;
 }

package/modules/datepicker/datepicker.module.d.ts

@@ -7,15 +7,18 @@ import * as i5 from "./yearpicker.component";
 import * as i6 from "./datepicker.component";
 import * as i7 from "./datepicker-input.directive";
 import * as i8 from "./datepicker-input-fuzzy.directive";
-import * as i9 from "@angular/common";
-import * as i10 from "@skyux/i18n";
-import * as i11 from "@angular/forms";
-import * as i12 from "@skyux/indicators";
-import * as i13 from "../shared/sky-datetime-resources.module";
-import * as i14 from "@skyux/core";
-import * as i15 from "@skyux/theme";
+import * as i9 from "./daypicker-cell.component";
+import * as i10 from "./daypicker-button.component";
+import * as i11 from "@angular/common";
+import * as i12 from "@skyux/i18n";
+import * as i13 from "@angular/forms";
+import * as i14 from "@skyux/indicators";
+import * as i15 from "../shared/sky-datetime-resources.module";
+import * as i16 from "@skyux/core";
+import * as i17 from "@skyux/theme";
+import * as i18 from "@skyux/popovers";
 export declare class SkyDatepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyDatepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<SkyDatepickerModule, [typeof i1.SkyDatepickerCalendarComponent, typeof i2.SkyDatepickerCalendarInnerComponent, typeof i3.SkyDayPickerComponent, typeof i4.SkyMonthPickerComponent, typeof i5.SkyYearPickerComponent, typeof i6.SkyDatepickerComponent, typeof i7.SkyDatepickerInputDirective, typeof i8.SkyFuzzyDatepickerInputDirective], [typeof i9.CommonModule, typeof i10.SkyI18nModule, typeof i11.FormsModule, typeof i12.SkyIconModule, typeof i13.SkyDatetimeResourcesModule, typeof i14.SkyAffixModule, typeof i14.SkyOverlayModule, typeof i15.SkyThemeModule], [typeof i1.SkyDatepickerCalendarComponent, typeof i6.SkyDatepickerComponent, typeof i7.SkyDatepickerInputDirective, typeof i8.SkyFuzzyDatepickerInputDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<SkyDatepickerModule, [typeof i1.SkyDatepickerCalendarComponent, typeof i2.SkyDatepickerCalendarInnerComponent, typeof i3.SkyDayPickerComponent, typeof i4.SkyMonthPickerComponent, typeof i5.SkyYearPickerComponent, typeof i6.SkyDatepickerComponent, typeof i7.SkyDatepickerInputDirective, typeof i8.SkyFuzzyDatepickerInputDirective, typeof i9.SkyDayPickerCellComponent, typeof i10.SkyDayPickerButtonComponent], [typeof i11.CommonModule, typeof i12.SkyI18nModule, typeof i13.FormsModule, typeof i14.SkyIconModule, typeof i15.SkyDatetimeResourcesModule, typeof i16.SkyAffixModule, typeof i16.SkyOverlayModule, typeof i17.SkyThemeModule, typeof i18.SkyPopoverModule, typeof i14.SkyWaitModule], [typeof i1.SkyDatepickerCalendarComponent, typeof i6.SkyDatepickerComponent, typeof i7.SkyDatepickerInputDirective, typeof i8.SkyFuzzyDatepickerInputDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<SkyDatepickerModule>;
 }

package/modules/datepicker/datepicker.service.d.ts

@@ -0,0 +1,15 @@
+import { Subject } from 'rxjs';
+import { SkyDatepickerDate } from './datepicker-date';
+import * as i0 from "@angular/core";
+/**
+ * @internal
+ */
+export declare class SkyDatepickerService {
+    /**
+     * Specifies if a key date popover is currently displayed.
+     * Useful for communicating across all daypicker siblings when a popover is displayed.
+     */
+    keyDatePopoverStream: Subject<SkyDatepickerDate>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyDatepickerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SkyDatepickerService>;
+}

package/modules/datepicker/daypicker-button.component.d.ts

@@ -0,0 +1,16 @@
+import { SkyDatepickerCalendarInnerComponent } from './datepicker-calendar-inner.component';
+import { SkyDatepickerDate } from './datepicker-date';
+import * as i0 from "@angular/core";
+/**
+ * @internal
+ */
+export declare class SkyDayPickerButtonComponent {
+    datepicker: SkyDatepickerCalendarInnerComponent;
+    /**
+     * Specifies the date this picker button will represent on the calendar.
+     */
+    date: SkyDatepickerDate;
+    constructor(datepicker: SkyDatepickerCalendarInnerComponent);
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyDayPickerButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyDayPickerButtonComponent, "sky-daypicker-button", never, { "date": "date"; }, {}, never, never>;
+}

package/modules/datepicker/daypicker-cell.component.d.ts

@@ -0,0 +1,40 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import { SkyPopoverMessage } from '@skyux/popovers';
+import { Subject } from 'rxjs';
+import { SkyDatepickerCalendarInnerComponent } from './datepicker-calendar-inner.component';
+import { SkyDatepickerDate } from './datepicker-date';
+import { SkyDatepickerService } from './datepicker.service';
+import * as i0 from "@angular/core";
+/**
+ * @internal
+ */
+export declare class SkyDayPickerCellComponent implements OnInit, OnDestroy {
+    private datepicker;
+    private datepickerService;
+    /**
+     * Specifies if the active date has been changed.
+     */
+    activeDateHasChanged: boolean;
+    /**
+     * Specifies the date this picker cell will represent on the calendar.
+     */
+    date: SkyDatepickerDate;
+    hasTooltip: boolean;
+    popoverController: Subject<SkyPopoverMessage>;
+    private activeUid;
+    private cancelPopover;
+    private popoverOpen;
+    private ngUnsubscribe;
+    constructor(datepicker: SkyDatepickerCalendarInnerComponent, datepickerService: SkyDatepickerService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    onDayMouseenter(): void;
+    onDayMouseleave(): void;
+    onPopoverClosed(): void;
+    onPopoverOpened(): void;
+    getKeyDateLabel(): string;
+    private hideTooltip;
+    private showTooltip;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkyDayPickerCellComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyDayPickerCellComponent, "sky-daypicker-cell", never, { "activeDateHasChanged": "activeDateHasChanged"; "date": "date"; }, {}, never, never>;
+}

package/modules/datepicker/daypicker.component.d.ts

@@ -1,11 +1,17 @@
-import { OnInit } from '@angular/core';
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { SkyDatepickerCustomDate } from './datepicker-custom-date';
+import { SkyDatepickerCalendarChange } from './datepicker-calendar-change';
 import { SkyDatepickerCalendarInnerComponent } from './datepicker-calendar-inner.component';
 import { SkyDatepickerDate } from './datepicker-date';
 import * as i0 from "@angular/core";
 /**
  * @internal
  */
-export declare class SkyDayPickerComponent implements OnInit {
+export declare class SkyDayPickerComponent implements OnDestroy, OnInit {
+    set customDates(value: SkyDatepickerCustomDate[]);
+    calendarDateRangeChange: EventEmitter<SkyDatepickerCalendarChange>;
+    isWaiting: boolean;
+    activeDateHasChanged: boolean;
     labels: any[];
     title: string;
     rows: Array<Array<SkyDatepickerDate>>;
@@ -13,13 +19,22 @@ export declare class SkyDayPickerComponent implements OnInit {
     datepicker: SkyDatepickerCalendarInnerComponent;
     CURRENT_THEME_TEMPLATE: any;
     private daysInMonth;
+    private initialDate;
+    private ngUnsubscribe;
     constructor(datepicker: SkyDatepickerCalendarInnerComponent);
     ngOnInit(): void;
+    ngOnDestroy(): void;
     protected getDates(startDate: Date, n: number): Date[];
     private compareDays;
     private refreshDayView;
     private keydownDays;
     private getDaysInMonth;
+    /**
+     * Applies custom date properties to the existing dates displayed in the calendar.
+     */
+    private applyCustomDates;
+    private dateRangeRowsAreEqual;
+    private getDateRange;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkyDayPickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SkyDayPickerComponent, "sky-daypicker", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkyDayPickerComponent, "sky-daypicker", never, { "customDates": "customDates"; "isWaiting": "isWaiting"; }, { "calendarDateRangeChange": "calendarDateRangeChange"; }, never, never>;
 }

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@skyux/datetime",
-  "version": "5.0.2",
+  "version": "5.1.2",
   "peerDependencies": {
-    "@angular/common": "^12.2.13",
-    "@angular/core": "^12.2.13",
-    "@angular/forms": "^12.2.13",
-    "@angular/router": "^12.2.13",
-    "@skyux/core": "^5.1.2",
+    "@angular/common": "^12.2.14",
+    "@angular/core": "^12.2.14",
+    "@angular/forms": "^12.2.14",
+    "@angular/router": "^12.2.14",
+    "@skyux/core": "^5.2.2",
     "@skyux/forms": "^5.0.1",
     "@skyux/i18n": "^5.0.1",
-    "@skyux/indicators": "^5.0.2"
+    "@skyux/indicators": "^5.1.2"
   },
   "dependencies": {
     "moment": "2.29.1",

package/public-api.d.ts

@@ -11,6 +11,8 @@ export * from './modules/datepicker/datepicker-config.service';
 export * from './modules/datepicker/datepicker.module';
 export * from './modules/datepicker/fuzzy-date';
 export * from './modules/datepicker/fuzzy-date.service';
+export * from './modules/datepicker/datepicker-calendar-change';
+export * from './modules/datepicker/datepicker-custom-date';
 export * from './modules/timepicker/timepicker.interface';
 export * from './modules/timepicker/timepicker.module';
 export { SkyDatepickerCalendarComponent as λ1 } from './modules/datepicker/datepicker-calendar.component';