@skyux/datetime 5.0.2 → 5.1.2

package/fesm2015/skyux-datetime.js

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Pipe, NgModule, Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, ViewChild, ElementRef, TemplateRef, ChangeDetectionStrategy, Optional, forwardRef, Directive, HostListener } from '@angular/core';
+import { Pipe, NgModule, Injectable, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, ElementRef, TemplateRef, Optional, forwardRef, Directive, HostListener } from '@angular/core';
 import { Subject, fromEvent, BehaviorSubject, forkJoin, combineLatest } from 'rxjs';
-import { takeUntil, distinctUntilChanged, first, map } from 'rxjs/operators';
+import { takeUntil, debounceTime, distinctUntilChanged, first, map } from 'rxjs/operators';
 import * as i3 from '@skyux/i18n';
 import { SkyIntlDateFormatter, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
 import moment from 'moment';
-import * as i3$1 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -14,9 +14,11 @@ import { SkyInputBoxModule } from '@skyux/forms';
 import * as i1 from '@skyux/core';
 import { SkyAffixAutoFitContext, SkyAffixModule, SkyOverlayModule } from '@skyux/core';
 import * as i2 from '@skyux/indicators';
-import { SkyIconModule } from '@skyux/indicators';
+import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
 import * as i3$2 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
+import * as i3$1 from '@skyux/popovers';
+import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
 
 // This class is mostly ported from the Angular 4.x DatePipe in order to maintain the old
 class SkyDateFormatUtility {
@@ -45,14 +47,14 @@ class SkyDateFormatUtility {
     }
 }
 SkyDateFormatUtility._ALIASES = {
-    'medium': 'yMMMdjms',
-    'short': 'yMdjm',
-    'fullDate': 'yMMMMEEEEd',
-    'longDate': 'yMMMMd',
-    'mediumDate': 'yMMMd',
-    'shortDate': 'yMd',
-    'mediumTime': 'jms',
-    'shortTime': 'jm'
+    medium: 'yMMMdjms',
+    short: 'yMdjm',
+    fullDate: 'yMMMMEEEEd',
+    longDate: 'yMMMMd',
+    mediumDate: 'yMMMd',
+    shortDate: 'yMd',
+    mediumTime: 'jms',
+    shortTime: 'jm',
 };
 function isBlank(obj) {
     return !obj;
@@ -76,7 +78,8 @@ class SkyDatePipe {
         this.defaultFormat = 'short';
         this.defaultLocale = 'en-US';
         this.ngUnsubscribe = new Subject();
-        this.localeProvider.getLocaleInfo()
+        this.localeProvider
+            .getLocaleInfo()
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((localeInfo) => {
             this.defaultLocale = localeInfo.locale;
@@ -108,13 +111,13 @@ class SkyDatePipe {
         this.formattedValue = SkyDateFormatUtility.format(locale, this.value, format);
     }
 }
-SkyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatePipe, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
-SkyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatePipe, name: "skyDate", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatePipe, decorators: [{
+SkyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatePipe, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatePipe, name: "skyDate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyDate',
-                    pure: false
+                    pure: false,
                 }]
         }], ctorParameters: function () { return [{ type: i3.SkyAppLocaleProvider }]; } });
 
@@ -125,10 +128,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
  * To update this file, simply rerun the command.
  */
 const RESOURCES = {
-    'EN-AU': { "skyux_date_range_picker_format_label_last_fiscal_year": { "message": "Last financial year" }, "skyux_date_range_picker_format_label_this_fiscal_year": { "message": "This financial year" }, "skyux_date_range_picker_format_label_next_fiscal_year": { "message": "Next financial year" } },
-    'EN-GB': { "skyux_date_range_picker_format_label_last_fiscal_year": { "message": "Last financial year" }, "skyux_date_range_picker_format_label_this_fiscal_year": { "message": "This financial year" }, "skyux_date_range_picker_format_label_next_fiscal_year": { "message": "Next financial year" } },
-    'EN-NZ': { "skyux_date_range_picker_format_label_last_fiscal_year": { "message": "Last financial year" }, "skyux_date_range_picker_format_label_this_fiscal_year": { "message": "This financial year" }, "skyux_date_range_picker_format_label_next_fiscal_year": { "message": "Next financial year" } },
-    'EN-US': { "skyux_date_field_default_label": { "message": "Date" }, "skyux_datepicker_trigger_button_label": { "message": "Select date" }, "skyux_timepicker_button_label": { "message": "Choose time" }, "skyux_timepicker_close": { "message": "Done" }, "skyux_timepicker_input_default_label": { "message": "Time" }, "skyux_date_range_picker_default_label": { "message": "Select a date range" }, "skyux_date_range_picker_format_label_specific_range": { "message": "Specific range" }, "skyux_date_range_picker_format_label_before": { "message": "Before" }, "skyux_date_range_picker_format_label_after": { "message": "After" }, "skyux_date_range_picker_format_label_any_time": { "message": "At any time" }, "skyux_date_range_picker_format_label_yesterday": { "message": "Yesterday" }, "skyux_date_range_picker_format_label_today": { "message": "Today" }, "skyux_date_range_picker_format_label_tomorrow": { "message": "Tomorrow" }, "skyux_date_range_picker_format_label_last_week": { "message": "Last week" }, "skyux_date_range_picker_format_label_this_week": { "message": "This week" }, "skyux_date_range_picker_format_label_next_week": { "message": "Next week" }, "skyux_date_range_picker_format_label_last_month": { "message": "Last month" }, "skyux_date_range_picker_format_label_this_month": { "message": "This month" }, "skyux_date_range_picker_format_label_next_month": { "message": "Next month" }, "skyux_date_range_picker_format_label_last_quarter": { "message": "Last quarter" }, "skyux_date_range_picker_format_label_this_quarter": { "message": "This quarter" }, "skyux_date_range_picker_format_label_next_quarter": { "message": "Next quarter" }, "skyux_date_range_picker_format_label_last_calendar_year": { "message": "Last calendar year" }, "skyux_date_range_picker_format_label_this_calendar_year": { "message": "This calendar year" }, "skyux_date_range_picker_format_label_next_calendar_year": { "message": "Next calendar year" }, "skyux_date_range_picker_format_label_last_fiscal_year": { "message": "Last fiscal year" }, "skyux_date_range_picker_format_label_this_fiscal_year": { "message": "This fiscal year" }, "skyux_date_range_picker_format_label_next_fiscal_year": { "message": "Next fiscal year" }, "skyux_date_range_picker_start_date_label": { "message": "From date" }, "skyux_date_range_picker_end_date_label": { "message": "To date" }, "skyux_date_range_picker_before_date_label": { "message": "Before date" }, "skyux_date_range_picker_after_date_label": { "message": "After date" } },
+    'EN-AU': {
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last financial year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This financial year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next financial year',
+        },
+    },
+    'EN-GB': {
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last financial year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This financial year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next financial year',
+        },
+    },
+    'EN-NZ': {
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last financial year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This financial year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next financial year',
+        },
+    },
+    'EN-US': {
+        skyux_date_field_default_label: { message: 'Date' },
+        skyux_datepicker_trigger_button_label: { message: 'Select date' },
+        skyux_timepicker_button_label: { message: 'Choose time' },
+        skyux_timepicker_close: { message: 'Done' },
+        skyux_timepicker_input_default_label: { message: 'Time' },
+        skyux_date_range_picker_default_label: { message: 'Select a date range' },
+        skyux_date_range_picker_format_label_specific_range: {
+            message: 'Specific range',
+        },
+        skyux_date_range_picker_format_label_before: { message: 'Before' },
+        skyux_date_range_picker_format_label_after: { message: 'After' },
+        skyux_date_range_picker_format_label_any_time: { message: 'At any time' },
+        skyux_date_range_picker_format_label_yesterday: { message: 'Yesterday' },
+        skyux_date_range_picker_format_label_today: { message: 'Today' },
+        skyux_date_range_picker_format_label_tomorrow: { message: 'Tomorrow' },
+        skyux_date_range_picker_format_label_last_week: { message: 'Last week' },
+        skyux_date_range_picker_format_label_this_week: { message: 'This week' },
+        skyux_date_range_picker_format_label_next_week: { message: 'Next week' },
+        skyux_date_range_picker_format_label_last_month: { message: 'Last month' },
+        skyux_date_range_picker_format_label_this_month: { message: 'This month' },
+        skyux_date_range_picker_format_label_next_month: { message: 'Next month' },
+        skyux_date_range_picker_format_label_last_quarter: {
+            message: 'Last quarter',
+        },
+        skyux_date_range_picker_format_label_this_quarter: {
+            message: 'This quarter',
+        },
+        skyux_date_range_picker_format_label_next_quarter: {
+            message: 'Next quarter',
+        },
+        skyux_date_range_picker_format_label_last_calendar_year: {
+            message: 'Last calendar year',
+        },
+        skyux_date_range_picker_format_label_this_calendar_year: {
+            message: 'This calendar year',
+        },
+        skyux_date_range_picker_format_label_next_calendar_year: {
+            message: 'Next calendar year',
+        },
+        skyux_date_range_picker_format_label_last_fiscal_year: {
+            message: 'Last fiscal year',
+        },
+        skyux_date_range_picker_format_label_this_fiscal_year: {
+            message: 'This fiscal year',
+        },
+        skyux_date_range_picker_format_label_next_fiscal_year: {
+            message: 'Next fiscal year',
+        },
+        skyux_date_range_picker_start_date_label: { message: 'From date' },
+        skyux_date_range_picker_end_date_label: { message: 'To date' },
+        skyux_date_range_picker_before_date_label: { message: 'Before date' },
+        skyux_date_range_picker_after_date_label: { message: 'After date' },
+    },
 };
 class SkyDatetimeResourcesProvider {
     getString(localeInfo, name) {
@@ -140,22 +226,26 @@ class SkyDatetimeResourcesProvider {
  */
 class SkyDatetimeResourcesModule {
 }
-SkyDatetimeResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDatetimeResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] });
-SkyDatetimeResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatetimeResourcesModule, providers: [{
+SkyDatetimeResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDatetimeResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] });
+SkyDatetimeResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatetimeResourcesModule, providers: [
+        {
             provide: SKY_LIB_RESOURCES_PROVIDERS,
             useClass: SkyDatetimeResourcesProvider,
-            multi: true
-        }], imports: [SkyI18nModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
+            multi: true,
+        },
+    ], imports: [SkyI18nModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
-                    providers: [{
+                    providers: [
+                        {
                             provide: SKY_LIB_RESOURCES_PROVIDERS,
                             useClass: SkyDatetimeResourcesProvider,
-                            multi: true
-                        }]
+                            multi: true,
+                        },
+                    ],
                 }]
         }] });
 
@@ -166,7 +256,8 @@ class SkyFuzzyDateService {
     constructor(localeProvider) {
         this.localeProvider = localeProvider;
         this.ngUnsubscribe = new Subject();
-        this.localeProvider.getLocaleInfo()
+        this.localeProvider
+            .getLocaleInfo()
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((localeInfo) => {
             this.currentLocale = localeInfo.locale;
@@ -241,7 +332,7 @@ class SkyFuzzyDateService {
             return;
         }
         const year = fuzzyDate.year || this.getDefaultYear(fuzzyDate);
-        const month = fuzzyDate.month > 0 ? (fuzzyDate.month - 1) : 0;
+        const month = fuzzyDate.month > 0 ? fuzzyDate.month - 1 : 0;
         const day = fuzzyDate.day || 1;
         return moment([year, month, day]);
     }
@@ -260,10 +351,10 @@ class SkyFuzzyDateService {
         let dateComponents = [
             { value: fuzzyDate.year || 0, index: dateFormatIndexes.yearIndex },
             { value: fuzzyDate.month || 0, index: dateFormatIndexes.monthIndex },
-            { value: fuzzyDate.day || 0, index: dateFormatIndexes.dayIndex }
+            { value: fuzzyDate.day || 0, index: dateFormatIndexes.dayIndex },
         ];
         dateComponents.sort((a, b) => a.index - b.index);
-        dateComponents.forEach(component => {
+        dateComponents.forEach((component) => {
             if (component.value > 0 && component.index > -1) {
                 if (dateString) {
                     dateString += separator;
@@ -315,18 +406,33 @@ class SkyFuzzyDateService {
                 // is the month. Otherwise, we can assume the input is mm/dd or mm/yy (2-digit year).
                 year = this.get4DigitYearFromDateString(date);
                 if (year) {
-                    month = dateComponents[0] === year.toString() ? dateComponents[1] : dateComponents[0];
+                    month =
+                        dateComponents[0] === year.toString()
+                            ? dateComponents[1]
+                            : dateComponents[0];
                 }
                 else {
                     if (indexes.dayIndex > -1) {
                         // mm/dd
-                        month = (indexes.monthIndex < indexes.dayIndex) ? dateComponents[0] : dateComponents[1];
-                        day = (month === dateComponents[1]) ? dateComponents[0] : dateComponents[1];
+                        month =
+                            indexes.monthIndex < indexes.dayIndex
+                                ? dateComponents[0]
+                                : dateComponents[1];
+                        day =
+                            month === dateComponents[1]
+                                ? dateComponents[0]
+                                : dateComponents[1];
                     }
                     else {
                         // mm/yy
-                        month = (indexes.monthIndex < indexes.yearIndex) ? dateComponents[0] : dateComponents[1];
-                        year = (month === dateComponents[1]) ? dateComponents[0] : dateComponents[1];
+                        month =
+                            indexes.monthIndex < indexes.yearIndex
+                                ? dateComponents[0]
+                                : dateComponents[1];
+                        year =
+                            month === dateComponents[1]
+                                ? dateComponents[0]
+                                : dateComponents[1];
                     }
                 }
                 break;
@@ -345,14 +451,21 @@ class SkyFuzzyDateService {
             // Check if day is valid.
             if (day) {
                 day = parseInt(day, 10);
-                let fuzzyMoment = this.getMomentFromFuzzyDate({ month: month, day: day, year: year });
+                let fuzzyMoment = this.getMomentFromFuzzyDate({
+                    month: month,
+                    day: day,
+                    year: year,
+                });
                 if (isNaN(day) || !fuzzyMoment.isValid()) {
                     return;
                 }
             }
         }
         if (year) {
-            year = year.toString().length === 2 ? moment.parseTwoDigitYear(year) : parseInt(year.toString(), 10);
+            year =
+                year.toString().length === 2
+                    ? moment.parseTwoDigitYear(year)
+                    : parseInt(year.toString(), 10);
             if (isNaN(year) || year.toString().length !== 4) {
                 return;
             }
@@ -360,7 +473,7 @@ class SkyFuzzyDateService {
         return {
             month: month,
             day: day,
-            year: year
+            year: year,
         };
     }
     getFuzzyDateRange(startFuzzyDate, endFuzzyDate) {
@@ -370,7 +483,10 @@ class SkyFuzzyDateService {
         let months;
         let years;
         let valid = false;
-        if (startFuzzyDate && startFuzzyDate.year && endFuzzyDate && endFuzzyDate.year) {
+        if (startFuzzyDate &&
+            startFuzzyDate.year &&
+            endFuzzyDate &&
+            endFuzzyDate.year) {
             start = this.getMomentFromFuzzyDate(startFuzzyDate);
             end = this.getMomentFromFuzzyDate(endFuzzyDate);
             years = end.diff(start, 'years');
@@ -382,7 +498,7 @@ class SkyFuzzyDateService {
             years: years,
             months: months,
             days: days,
-            valid: valid
+            valid: valid,
         };
     }
     getCurrentFuzzyDate() {
@@ -390,7 +506,7 @@ class SkyFuzzyDateService {
         return {
             day: currentDate.date(),
             month: currentDate.month() + 1,
-            year: currentDate.year()
+            year: currentDate.year(),
         };
     }
     getMostRecentLeapYear() {
@@ -408,7 +524,7 @@ class SkyFuzzyDateService {
     getDateSeparator(dateFormat) {
         let returnValue;
         let separators = ['/', '.', '-', ' '];
-        separators.forEach(separator => {
+        separators.forEach((separator) => {
             if (!returnValue && dateFormat.indexOf(separator) > 0) {
                 returnValue = separator;
             }
@@ -419,7 +535,7 @@ class SkyFuzzyDateService {
         let year;
         const separator = this.getDateSeparator(date);
         // Find the number value in the string that is 4 digits long.
-        date.split(separator).forEach(dateComponent => {
+        date.split(separator).forEach((dateComponent) => {
             if (!year && parseInt(dateComponent, 10).toString().length === 4) {
                 year = dateComponent;
             }
@@ -429,7 +545,7 @@ class SkyFuzzyDateService {
         }
     }
     isLeapYear(year) {
-        return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
+        return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
     }
     getMonthNumber(month) {
         let returnValue;
@@ -469,7 +585,7 @@ class SkyFuzzyDateService {
         return {
             yearIndex: dateFormat.indexOf('y'),
             monthIndex: dateFormat.indexOf('m'),
-            dayIndex: dateFormat.indexOf('d')
+            dayIndex: dateFormat.indexOf('d'),
         };
     }
     // Returns the index of each of the date components in the provided string (month, day, year).
@@ -485,11 +601,13 @@ class SkyFuzzyDateService {
         if (dateFormatIndexes.dayIndex > -1) {
             dateComponentIndexes.push(dateFormatIndexes.dayIndex);
         }
-        dateComponentIndexes.sort(function (a, b) { return a - b; });
+        dateComponentIndexes.sort(function (a, b) {
+            return a - b;
+        });
         return {
             yearIndex: dateComponentIndexes.indexOf(dateFormatIndexes.yearIndex),
             monthIndex: dateComponentIndexes.indexOf(dateFormatIndexes.monthIndex),
-            dayIndex: dateComponentIndexes.indexOf(dateFormatIndexes.dayIndex)
+            dayIndex: dateComponentIndexes.indexOf(dateFormatIndexes.dayIndex),
         };
     }
     /**
@@ -518,12 +636,12 @@ class SkyFuzzyDateService {
         return true;
     }
 }
-SkyFuzzyDateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyFuzzyDateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
+SkyFuzzyDateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyFuzzyDateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () { return [{ type: i3.SkyAppLocaleProvider }]; } });
 
@@ -560,49 +678,28 @@ class SkyFuzzyDatePipe {
         return this.fuzzyDateService.format(value, fuzzyDateFormat, fuzzyDateLocale);
     }
 }
-SkyFuzzyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe });
-SkyFuzzyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
+SkyFuzzyDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe });
+SkyFuzzyDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyFuzzyDate',
-                    pure: false
+                    pure: false,
                 }]
         }], ctorParameters: function () { return [{ type: SkyFuzzyDateService }]; } });
 
 class SkyDatePipeModule {
 }
-SkyDatePipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDatePipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatePipeModule, declarations: [SkyDatePipe,
-        SkyFuzzyDatePipe], imports: [CommonModule,
-        SkyDatetimeResourcesModule], exports: [SkyDatePipe,
-        SkyFuzzyDatePipe] });
-SkyDatePipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatePipeModule, providers: [
-        SkyDatePipe,
-        SkyFuzzyDatePipe
-    ], imports: [[
-            CommonModule,
-            SkyDatetimeResourcesModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatePipeModule, decorators: [{
+SkyDatePipeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDatePipeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatePipeModule, declarations: [SkyDatePipe, SkyFuzzyDatePipe], imports: [CommonModule, SkyDatetimeResourcesModule], exports: [SkyDatePipe, SkyFuzzyDatePipe] });
+SkyDatePipeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [[CommonModule, SkyDatetimeResourcesModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatePipeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyDatePipe,
-                        SkyFuzzyDatePipe
-                    ],
-                    providers: [
-                        SkyDatePipe,
-                        SkyFuzzyDatePipe
-                    ],
-                    imports: [
-                        CommonModule,
-                        SkyDatetimeResourcesModule
-                    ],
-                    exports: [
-                        SkyDatePipe,
-                        SkyFuzzyDatePipe
-                    ]
+                    declarations: [SkyDatePipe, SkyFuzzyDatePipe],
+                    providers: [SkyDatePipe, SkyFuzzyDatePipe],
+                    imports: [CommonModule, SkyDatetimeResourcesModule],
+                    exports: [SkyDatePipe, SkyFuzzyDatePipe],
                 }]
         }] });
 
@@ -772,9 +869,9 @@ class SkyDatepickerAdapterService {
         this.renderer.setAttribute(elementRef.nativeElement, 'placeholder', value);
     }
 }
-SkyDatepickerAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDatepickerAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerAdapterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerAdapterService, decorators: [{
+SkyDatepickerAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerAdapterService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDatepickerAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerAdapterService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerAdapterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
 
@@ -790,7 +887,8 @@ class SkyDateFormatter {
      */
     static getPreferredShortDateFormat() {
         /* istanbul ignore next */
-        return moment.localeData().longDateFormat('L') || SkyDateFormatter.defaultShortDateFormat;
+        return (moment.localeData().longDateFormat('L') ||
+            SkyDateFormatter.defaultShortDateFormat);
     }
     format(date, format) {
         return moment(date.getTime()).format(format);
@@ -850,8 +948,9 @@ class SkyDatepickerCalendarInnerComponent {
             37: 'left',
             38: 'up',
             39: 'right',
-            40: 'down'
+            40: 'down',
         };
+        this.ngUnsubscribe = new Subject();
     }
     set selectedDate(value) {
         if (this.dateFormatter.dateIsValid(value)) {
@@ -873,6 +972,10 @@ class SkyDatepickerCalendarInnerComponent {
     ngOnChanges(changes) {
         this.refreshView();
     }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
     setCompareHandler(handler, type) {
         if (type === 'day') {
             this.compareHandlerDay = handler;
@@ -976,6 +1079,7 @@ class SkyDatepickerCalendarInnerComponent {
         }
     }
     createDateObject(date, format, isSecondary, id) {
+        const customDateMatch = this.getCustomDate(date);
         let dateObject = {
             date: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
             label: this.dateFilter(date, format),
@@ -983,7 +1087,9 @@ class SkyDatepickerCalendarInnerComponent {
             disabled: this.isDisabled(date),
             current: this.compare(date, new Date()) === 0,
             secondary: isSecondary,
-            uid: id
+            uid: id,
+            keyDate: customDateMatch ? customDateMatch.keyDate : undefined,
+            keyDateText: customDateMatch ? customDateMatch.keyDateText : [],
         };
         return dateObject;
     }
@@ -1022,7 +1128,8 @@ class SkyDatepickerCalendarInnerComponent {
             }
         }
         else {
-            this.datepickerMode = this.modes[this.modes.indexOf(this.datepickerMode) - 1];
+            this.datepickerMode =
+                this.modes[this.modes.indexOf(this.datepickerMode) - 1];
             this.calendarModeChange.emit(this.datepickerMode);
         }
         this.refreshView();
@@ -1046,8 +1153,8 @@ class SkyDatepickerCalendarInnerComponent {
         /* istanbul ignore else */
         /* sanity check */
         if (expectedStep) {
-            let year = this.activeDate.getFullYear() + (direction * (expectedStep.years || 0));
-            let month = this.activeDate.getMonth() + (direction * (expectedStep.months || 0));
+            let year = this.activeDate.getFullYear() + direction * (expectedStep.years || 0);
+            let month = this.activeDate.getMonth() + direction * (expectedStep.months || 0);
             this.activeDate = new Date(year, month, 1);
             this.refreshView();
         }
@@ -1064,27 +1171,44 @@ class SkyDatepickerCalendarInnerComponent {
         /* sanity check */
         if (!(direction === 1 && this.datepickerMode === this.maxMode) &&
             !(this.datepickerMode === this.minMode && direction === -1)) {
-            this.datepickerMode = this.modes[this.modes.indexOf(this.datepickerMode) + direction];
+            this.datepickerMode =
+                this.modes[this.modes.indexOf(this.datepickerMode) + direction];
             this.calendarModeChange.emit(this.datepickerMode);
             this.refreshView();
         }
     }
+    /**
+     * 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.
+     */
     isDisabled(date) {
-        return ((this.minDate && this.compare(date, this.minDate) < 0)
-            || (this.maxDate && this.compare(date, this.maxDate) > 0));
+        const customDate = this.getCustomDate(date);
+        return ((this.minDate && this.compare(date, this.minDate) < 0) ||
+            (this.maxDate && this.compare(date, this.maxDate) > 0) ||
+            (customDate && customDate.disabled));
+    }
+    getCustomDate(date) {
+        if (this.customDates) {
+            return this.customDates.find((customDate) => {
+                return customDate.date.getTime() === date.getTime();
+            });
+        }
     }
 }
-SkyDatepickerCalendarInnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SkyDatepickerCalendarInnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: { startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"datepickerMode\"\n  class=\"sky-datepicker-calendar-inner\"\n  (keydown)=\"onKeydown($event)\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron-default{display:none}.sky-theme-modern .sky-datepicker-chevron-modern{display:inline;font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
+SkyDatepickerCalendarInnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkyDatepickerCalendarInnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"datepickerMode\"\n  class=\"sky-datepicker-calendar-inner\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron-default{display:none}.sky-theme-modern .sky-datepicker-chevron-modern{display:inline;font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-datepicker-inner',
                     templateUrl: './datepicker-calendar-inner.component.html',
                     styleUrls: ['./datepicker-calendar-inner.component.scss'],
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
                 }]
-        }], propDecorators: { startingDay: [{
+        }], propDecorators: { customDates: [{
+                type: Input
+            }], startingDay: [{
                 type: Input
             }], minDate: [{
                 type: Input
@@ -1108,28 +1232,198 @@ class SkyDatepickerConfigService {
         this.startingDay = 0;
     }
 }
-SkyDatepickerConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDatepickerConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
+SkyDatepickerConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDatepickerConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }] });
 
+/**
+ * @internal
+ */
+class SkyDatepickerService {
+    constructor() {
+        /**
+         * Specifies if a key date popover is currently displayed.
+         * Useful for communicating across all daypicker siblings when a popover is displayed.
+         */
+        this.keyDatePopoverStream = new Subject();
+    }
+}
+SkyDatepickerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDatepickerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * @internal
+ */
+class SkyDayPickerButtonComponent {
+    constructor(datepicker) {
+        this.datepicker = datepicker;
+    }
+}
+SkyDayPickerButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+SkyDayPickerButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0, template: "<button\n  class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n  tabindex=\"-1\"\n  type=\"button\"\n  [disabled]=\"date.disabled\"\n  [ngClass]=\"{\n    'sky-datepicker-btn-selected': date.selected,\n    'sky-btn-disabled': date.disabled,\n    'sky-btn-active': datepicker.isActive(date),\n    'sky-datepicker-btn-disabled': date.disabled,\n    'sky-datepicker-btn-key-date': date.keyDate\n  }\"\n  (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n>\n  <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n    {{ date.label }}\n  </span>\n</button>\n", styles: [".sky-datepicker-btn-disabled{font-style:italic}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:5px;width:5px;background-color:#d93a3d;border-radius:50%;left:15px;top:22px}:host-context(.sky-theme-modern) .sky-datepicker-btn-key-date:before{left:12px}.sky-theme-modern .sky-datepicker-btn-key-date:before{left:12px}\n"], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-daypicker-button',
+                    templateUrl: 'daypicker-button.component.html',
+                    styleUrls: ['./daypicker-button.component.scss'],
+                }]
+        }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { date: [{
+                type: Input
+            }] } });
+
+/**
+ * @internal
+ */
+class SkyDayPickerCellComponent {
+    constructor(datepicker, datepickerService) {
+        this.datepicker = datepicker;
+        this.datepickerService = datepickerService;
+        this.hasTooltip = false;
+        this.popoverController = new Subject();
+        this.activeUid = '';
+        this.cancelPopover = false;
+        this.popoverOpen = false;
+        this.ngUnsubscribe = new Subject();
+    }
+    ngOnInit() {
+        this.hasTooltip =
+            this.date.keyDate &&
+                this.date.keyDateText &&
+                this.date.keyDateText.length > 0 &&
+                this.date.keyDateText[0].length > 0;
+        // show the tooltip if this is the active date and is not the
+        // initial active date (activeDateHasChanged)
+        if (this.datepicker.isActive(this.date) &&
+            this.activeDateHasChanged &&
+            this.hasTooltip) {
+            this.activeUid = this.date.uid;
+            this.showTooltip();
+        }
+        if (this.hasTooltip) {
+            this.datepickerService.keyDatePopoverStream
+                .pipe(takeUntil(this.ngUnsubscribe))
+                .subscribe((date) => {
+                if (date) {
+                    this.activeUid = date.uid;
+                }
+                else {
+                    this.activeUid = '';
+                }
+                // If this day has an open popover and they have moved off of the day close the popover.
+                if (this.date.uid !== this.activeUid) {
+                    this.hideTooltip();
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    onDayMouseenter() {
+        this.cancelPopover = false;
+        if (this.hasTooltip) {
+            this.showTooltip();
+            this.datepickerService.keyDatePopoverStream.next(this.date);
+        }
+    }
+    onDayMouseleave() {
+        this.cancelPopover = true;
+        if (this.hasTooltip) {
+            this.hideTooltip();
+        }
+        this.datepickerService.keyDatePopoverStream.next(undefined);
+    }
+    onPopoverClosed() {
+        this.popoverOpen = false;
+    }
+    onPopoverOpened() {
+        this.popoverOpen = true;
+        /* istanbul ignore else */
+        if (this.cancelPopover) {
+            // If the popover gets opened just as a mouseout event happens, close it.
+            this.hideTooltip();
+            this.cancelPopover = false;
+        }
+    }
+    getKeyDateLabel() {
+        if (this.hasTooltip) {
+            return this.date.keyDateText.join(', ');
+        }
+        else {
+            return '';
+        }
+    }
+    hideTooltip() {
+        /* istanbul ignore else */
+        if (this.popoverOpen) {
+            this.popoverController.next({ type: SkyPopoverMessageType.Close });
+        }
+    }
+    showTooltip() {
+        /* istanbul ignore else */
+        if (this.hasTooltip && !this.popoverOpen) {
+            /**
+             * Delay 1/2 second before opening the popover as long as mouse hasn't moved off the date.
+             */
+            setTimeout(() => {
+                if (!this.cancelPopover && this.activeUid === this.date.uid) {
+                    this.popoverController.next({ type: SkyPopoverMessageType.Open });
+                }
+            }, 500);
+        }
+    }
+}
+SkyDayPickerCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerService }], target: i0.ɵɵFactoryTarget.Component });
+SkyDayPickerCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: "activeDateHasChanged", date: "date" }, ngImport: i0, template: "<div\n  *ngIf=\"hasTooltip\"\n  class=\"sky-daypicker-cell\"\n  [attr.aria-label]=\"getKeyDateLabel()\"\n  [skyPopover]=\"dayInfoPopover\"\n  skyPopoverPlacement=\"left\"\n  [skyPopoverMessageStream]=\"popoverController\"\n  (mouseenter)=\"onDayMouseenter()\"\n  (mouseleave)=\"onDayMouseleave()\"\n>\n  <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n  <sky-popover\n    (popoverClosed)=\"onPopoverClosed()\"\n    (popoverOpened)=\"onPopoverOpened()\"\n    #dayInfoPopover\n  >\n    <div *ngFor=\"let text of date.keyDateText\">\n      {{ text }}\n    </div>\n  </sky-popover>\n</div>\n<div\n  *ngIf=\"!hasTooltip\"\n  class=\"sky-daypicker-cell\"\n  (mouseenter)=\"onDayMouseenter()\"\n  (mouseleave)=\"onDayMouseleave()\"\n>\n  <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\"></ng-container>\n</div>\n\n<ng-template #daypickerButtonTemplateRef>\n  <sky-daypicker-button [date]=\"date\"> </sky-daypicker-button>\n</ng-template>\n", components: [{ type: i3$1.λ6, selector: "sky-popover", inputs: ["alignment", "dismissOnBlur", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'sky-daypicker-cell',
+                    templateUrl: 'daypicker-cell.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerService }]; }, propDecorators: { activeDateHasChanged: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }] } });
+
 /**
  * @internal
  */
 class SkyDayPickerComponent {
     constructor(datepicker) {
+        this.calendarDateRangeChange = new EventEmitter();
+        this.isWaiting = false;
+        this.activeDateHasChanged = false;
         this.labels = [];
         this.rows = [];
         this.weekNumbers = [];
-        this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+        this.daysInMonth = [
+            31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31,
+        ];
+        this.ngUnsubscribe = new Subject();
         this.datepicker = datepicker;
     }
+    set customDates(value) {
+        /* istanbul ignore else */
+        if (value) {
+            this.applyCustomDates(value, this.rows);
+        }
+    }
     ngOnInit() {
         this.datepicker.stepDay = { months: 1 };
+        this.initialDate = this.datepicker.activeDate.getDate();
         this.datepicker.setRefreshViewHandler(() => {
             this.refreshDayView();
         }, 'day');
@@ -1139,6 +1433,10 @@ class SkyDayPickerComponent {
         }, 'day');
         this.datepicker.refreshView();
     }
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
     getDates(startDate, n) {
         let dates = new Array(n);
         let current = new Date(startDate.getTime());
@@ -1162,10 +1460,11 @@ class SkyDayPickerComponent {
         let month = this.datepicker.activeDate.getMonth();
         let firstDayOfMonth = new Date(year, month, 1);
         let difference = this.datepicker.startingDay - firstDayOfMonth.getDay();
-        let numDisplayedFromPreviousMonth = (difference > 0)
-            ? 7 - difference
-            : -difference;
+        let numDisplayedFromPreviousMonth = difference > 0 ? 7 - difference : -difference;
         let firstDate = new Date(firstDayOfMonth.getTime());
+        if (this.datepicker.activeDate.getDate() !== this.initialDate) {
+            this.activeDateHasChanged = true;
+        }
         /* istanbul ignore else */
         /* sanity check */
         if (numDisplayedFromPreviousMonth > 0) {
@@ -1181,13 +1480,19 @@ class SkyDayPickerComponent {
         this.labels = [];
         for (let j = 0; j < 7; j++) {
             this.labels[j] = {};
-            this.labels[j].abbr =
-                this.datepicker.dateFilter(pickerDates[j].date, this.datepicker.formatDayHeader);
+            this.labels[j].abbr = this.datepicker.dateFilter(pickerDates[j].date, this.datepicker.formatDayHeader);
             this.labels[j].full = this.datepicker.dateFilter(pickerDates[j].date, 'EEEE');
         }
-        this.title =
-            this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatDayTitle);
+        this.title = this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatDayTitle);
+        const oldDateRange = this.getDateRange(this.rows);
         this.rows = this.datepicker.createCalendarRows(pickerDates, 7);
+        const newDateRange = this.getDateRange(this.rows);
+        if (!this.dateRangeRowsAreEqual(oldDateRange, newDateRange)) {
+            this.calendarDateRangeChange.next({
+                startDate: newDateRange.startDate,
+                endDate: newDateRange.endDate,
+            });
+        }
     }
     keydownDays(key, event) {
         let date = this.datepicker.activeDate.getDate();
@@ -1208,8 +1513,7 @@ class SkyDayPickerComponent {
         else if (key === 'pageup' || key === 'pagedown') {
             let month = this.datepicker.activeDate.getMonth() + (key === 'pageup' ? -1 : 1);
             this.datepicker.activeDate.setMonth(month, 1);
-            date =
-                Math.min(this.getDaysInMonth(this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth()), date);
+            date = Math.min(this.getDaysInMonth(this.datepicker.activeDate.getFullYear(), this.datepicker.activeDate.getMonth()), date);
         }
         else if (key === 'home') {
             date = 1;
@@ -1220,20 +1524,86 @@ class SkyDayPickerComponent {
         this.datepicker.activeDate.setDate(date);
     }
     getDaysInMonth(year, month) {
-        return month === 1 && year % 4 === 0 &&
-            (year % 400 === 0 || year % 100 !== 0) ? 29 : this.daysInMonth[month];
+        return month === 1 &&
+            year % 4 === 0 &&
+            (year % 400 === 0 || year % 100 !== 0)
+            ? 29
+            : this.daysInMonth[month];
+    }
+    /**
+     * Applies custom date properties to the existing dates displayed in the calendar.
+     */
+    applyCustomDates(customDates, dateRows) {
+        let date;
+        let newDate;
+        let dateIndex;
+        /* istanbul ignore else */
+        if (customDates && dateRows) {
+            customDates.forEach((customDate) => {
+                dateIndex = -1;
+                dateRows.forEach((row) => {
+                    if (dateIndex === -1) {
+                        dateIndex = row.findIndex((d) => {
+                            return d.date.getTime() === customDate.date.getTime();
+                        });
+                        if (dateIndex > -1) {
+                            date = row[dateIndex];
+                            // Replace the date with a new instance so the display gets updated.
+                            newDate = {
+                                current: date.current,
+                                date: date.date,
+                                disabled: !!date.disabled || !!customDate.disabled,
+                                keyDate: !!customDate.keyDate || !!date.keyDate,
+                                keyDateText: customDate.keyDateText || date.keyDateText,
+                                label: date.label,
+                                secondary: date.secondary,
+                                selected: date.selected,
+                                uid: date.uid,
+                            };
+                            row[dateIndex] = newDate;
+                        }
+                    }
+                });
+            });
+        }
+    }
+    dateRangeRowsAreEqual(rangeA, rangeB) {
+        /* istanbul ignore if */
+        if (!rangeA && !rangeB) {
+            return true;
+        }
+        else if ((rangeA && !rangeB) || (!rangeA && rangeB)) {
+            return false;
+        }
+        return (this.compareDays(rangeA.startDate, rangeB.startDate) === 0 &&
+            this.compareDays(rangeA.endDate, rangeB.endDate) === 0);
+    }
+    getDateRange(rows) {
+        /* istanbul ignore else */
+        if (rows && rows.length > 0) {
+            return {
+                startDate: rows[0][0].date,
+                endDate: rows[rows.length - 1][rows[rows.length - 1].length - 1].date,
+            };
+        }
     }
 }
-SkyDayPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
-SkyDayPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDayPickerComponent, selector: "sky-daypicker", ngImport: i0, template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\"\n  class=\"sky-daypicker-wrapper\"\n>\n  <table\n    class=\"sky-daypicker-table\"\n    role=\"grid\"\n    [attr.aria-labelledby]=\"datepicker.datepickerId+'-title'\"\n  >\n    <thead>\n      <tr>\n        <th\n          class=\"sky-datepicker-header-left\"\n          scope=\"col\"\n        >\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n            (click)=\"datepicker.moveCalendar($event, -1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-left\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-left\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n        <th\n          scope=\"col\"\n          [attr.colspan]=\"5\"\n        >\n          <button\n            [id]=\"datepicker.datepickerId + '-title'\"\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n            (click)=\"datepicker.toggleModeCalendar($event)\"\n            [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n            [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            >\n            <strong>{{title}}</strong>\n          </button>\n        </th>\n        <th\n          class=\"sky-datepicker-header-right\"\n          scope=\"col\"\n        >\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n            (click)=\"datepicker.moveCalendar($event, 1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-right\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-right\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n      </tr>\n      <tr>\n        <th\n          scope=\"col\"\n          *ngFor=\"let label of labels\"\n          class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{label.abbr}}</b>\n          </small>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-template\n        ngFor\n        [ngForOf]=\"rows\"\n        let-row=\"$implicit\"\n        let-index=\"index\"\n        >\n        <tr role=\"row\">\n          <td\n            *ngFor=\"let date of row\"\n            class=\"sky-datepicker-center\"\n            role=\"gridcell\"\n            [id]=\"date.uid\"\n            >\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n              [ngClass]=\"{ 'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n              tabindex=\"-1\"\n              >\n              <span\n                [ngClass]=\"{'sky-datepicker-secondary': date.secondary }\"\n                >{{date.label}}</span>\n            </button>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
+SkyDayPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+SkyDayPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\" class=\"sky-daypicker-wrapper\">\n  <table\n    class=\"sky-daypicker-table\"\n    role=\"grid\"\n    [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n  >\n    <thead>\n      <tr>\n        <th class=\"sky-datepicker-header-left\" scope=\"col\">\n          <button\n            type=\"button\"\n            class=\"\n              sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\n            \"\n            (click)=\"datepicker.moveCalendar($event, -1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n          >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-left\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-left\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n        <th scope=\"col\" [attr.colspan]=\"5\">\n          <button\n            [id]=\"datepicker.datepickerId + '-title'\"\n            type=\"button\"\n            class=\"\n              sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\n            \"\n            (click)=\"datepicker.toggleModeCalendar($event)\"\n            [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n            [ngClass]=\"{\n              'sky-btn-disabled':\n                datepicker.datepickerMode === datepicker.maxMode\n            }\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n          >\n            <strong>{{ title }}</strong>\n          </button>\n        </th>\n        <th class=\"sky-datepicker-header-right\" scope=\"col\">\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n            (click)=\"datepicker.moveCalendar($event, 1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n          >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-right\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-right\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n      </tr>\n      <tr>\n        <th\n          scope=\"col\"\n          *ngFor=\"let label of labels\"\n          class=\"sky-datepicker-center sky-datepicker-weekdays\"\n        >\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{ label.abbr }}</b>\n          </small>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <!-- Wait indicator for async custom date stream -->\n      <sky-wait [isWaiting]=\"isWaiting\"> </sky-wait>\n      <ng-template ngFor [ngForOf]=\"rows\" let-row=\"$implicit\" let-index=\"index\">\n        <tr role=\"row\">\n          <td\n            *ngFor=\"let date of row\"\n            class=\"sky-datepicker-center\"\n            role=\"gridcell\"\n            [id]=\"date.uid\"\n          >\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            >\n            </sky-daypicker-cell>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-daypicker',
                     templateUrl: 'daypicker.component.html',
-                    styleUrls: ['./daypicker.component.scss']
+                    styleUrls: ['./daypicker.component.scss'],
                 }]
-        }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
+        }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { customDates: [{
+                type: Input
+            }], calendarDateRangeChange: [{
+                type: Output
+            }], isWaiting: [{
+                type: Input
+            }] } });
 
 /**
  * @internal
@@ -1245,7 +1615,7 @@ class SkyMonthPickerComponent {
     }
     ngOnInit() {
         this.datepicker.stepMonth = {
-            years: 1
+            years: 1,
         };
         this.datepicker.setRefreshViewHandler(() => {
             this.refreshMonthView();
@@ -1268,11 +1638,9 @@ class SkyMonthPickerComponent {
         for (let i = 0; i < 12; i++) {
             date = new Date(year, i, 1);
             date = this.datepicker.fixTimeZone(date);
-            months[i] =
-                this.datepicker.createDateObject(date, this.datepicker.formatMonth, false, this.datepicker.datepickerId + '-' + i);
+            months[i] = this.datepicker.createDateObject(date, this.datepicker.formatMonth, false, this.datepicker.datepickerId + '-' + i);
         }
-        this.title =
-            this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatMonthTitle);
+        this.title = this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatMonthTitle);
         this.rows = this.datepicker.createCalendarRows(months, this.datepicker.monthColLimit);
     }
     keydownMonths(key, event) {
@@ -1304,14 +1672,14 @@ class SkyMonthPickerComponent {
         this.datepicker.activeDate.setMonth(date);
     }
 }
-SkyMonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
-SkyMonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0, template: "<table *ngIf=\"datepicker.datepickerMode==='month'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th\n        class=\"sky-datepicker-header-left\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button></th>\n      <th [attr.colspan]=\"((datepicker.monthColLimit - 2) <= 0) ? 1 : datepicker.monthColLimit - 2\">\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === maxMode\"\n          [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === maxMode}\"\n          tabindex=\"-1\"\n          >\n          <strong>{{title}}</strong>\n        </button>\n      </th>\n      <th\n        class=\"sky-datepicker-header-right\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td\n        *ngFor=\"let date of row\"\n        class=\"text-center\"\n        role=\"gridcell\"\n        id=\"{{date.uid}}\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n          >\n          <span [ngClass]=\"{'sky-datepicker-current': date.current}\">{{date.label}}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
+SkyMonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+SkyMonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0, template: "<table *ngIf=\"datepicker.datepickerMode === 'month'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th\n        [attr.colspan]=\"\n          datepicker.monthColLimit - 2 <= 0 ? 1 : datepicker.monthColLimit - 2\n        \"\n      >\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          type=\"button\"\n          class=\"\n            sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\n          \"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepicker.datepickerMode === maxMode\n          }\"\n          tabindex=\"-1\"\n        >\n          <strong>{{ title }}</strong>\n        </button>\n      </th>\n      <th class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td\n        *ngFor=\"let date of row\"\n        class=\"text-center\"\n        role=\"gridcell\"\n        id=\"{{ date.uid }}\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{\n            'sky-datepicker-btn-selected': date.selected,\n            'sky-btn-disabled': date.disabled,\n            'sky-btn-active': datepicker.isActive(date)\n          }\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n        >\n          <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n            date.label\n          }}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-monthpicker',
                     templateUrl: 'monthpicker.component.html',
-                    styleUrls: ['./monthpicker.component.scss']
+                    styleUrls: ['./monthpicker.component.scss'],
                 }]
         }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
 
@@ -1335,7 +1703,9 @@ class SkyYearPickerComponent {
         this.datepicker.refreshView();
     }
     getStartingYear(year) {
-        return Math.floor((year - 1) / this.datepicker.yearRange) * this.datepicker.yearRange + 1;
+        return (Math.floor((year - 1) / this.datepicker.yearRange) *
+            this.datepicker.yearRange +
+            1);
     }
     compareYears(date1, date2) {
         return date1.getFullYear() - date2.getFullYear();
@@ -1347,11 +1717,12 @@ class SkyYearPickerComponent {
         for (let i = 0; i < this.datepicker.yearRange; i++) {
             date = new Date(this.datepicker.activeDate);
             date.setFullYear(start + i, 0, 1);
-            years[i] =
-                this.datepicker.createDateObject(date, this.datepicker.formatYear, false, this.datepicker.datepickerId + '-' + i);
+            years[i] = this.datepicker.createDateObject(date, this.datepicker.formatYear, false, this.datepicker.datepickerId + '-' + i);
         }
-        this.title = [years[0].label,
-            years[this.datepicker.yearRange - 1].label].join(' - ');
+        this.title = [
+            years[0].label,
+            years[this.datepicker.yearRange - 1].label,
+        ].join(' - ');
         this.rows = this.datepicker.createCalendarRows(years, this.datepicker.yearColLimit);
     }
     keydownYears(key, event) {
@@ -1377,20 +1748,22 @@ class SkyYearPickerComponent {
             date = this.getStartingYear(this.datepicker.activeDate.getFullYear());
         }
         else if (key === 'end') {
-            date
-                = this.getStartingYear(this.datepicker.activeDate.getFullYear()) + this.datepicker.yearRange - 1;
+            date =
+                this.getStartingYear(this.datepicker.activeDate.getFullYear()) +
+                    this.datepicker.yearRange -
+                    1;
         }
         this.datepicker.activeDate.setFullYear(date);
     }
 }
-SkyYearPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
-SkyYearPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0, template: "<table *ngIf=\"datepicker.datepickerMode==='year'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th\n        class=\"sky-datepicker-header-left\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th [attr.colspan]=\"((datepicker.yearColLimit - 2) <= 0) ? 1 : datepicker.yearColLimit - 2\">\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          role=\"heading\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n          [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n          tabindex=\"-1\"\n          >\n          <strong>{{title}}</strong>\n        </button>\n      </th>\n      <th\n        class=\"sky-datepicker-header-right\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td\n        *ngFor=\"let date of row\"\n        class=\"sky-datepicker-row\"\n        role=\"gridcell\"\n        >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n          >\n          <span\n            [ngClass]=\"{'sky-datepicker-current': date.current }\">{{date.label}}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
+SkyYearPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component });
+SkyYearPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0, template: "<table *ngIf=\"datepicker.datepickerMode === 'year'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th\n        [attr.colspan]=\"\n          datepicker.yearColLimit - 2 <= 0 ? 1 : datepicker.yearColLimit - 2\n        \"\n      >\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          role=\"heading\"\n          type=\"button\"\n          class=\"\n            sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\n          \"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode\n          }\"\n          tabindex=\"-1\"\n        >\n          <strong>{{ title }}</strong>\n        </button>\n      </th>\n      <th class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n        >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td *ngFor=\"let date of row\" class=\"sky-datepicker-row\" role=\"gridcell\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{\n            'sky-datepicker-btn-selected': date.selected,\n            'sky-btn-disabled': date.disabled,\n            'sky-btn-active': datepicker.isActive(date)\n          }\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n        >\n          <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n            date.label\n          }}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-yearpicker',
                     templateUrl: 'yearpicker.component.html',
-                    styleUrls: ['./yearpicker.component.scss']
+                    styleUrls: ['./yearpicker.component.scss'],
                 }]
         }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
 
@@ -1402,8 +1775,9 @@ class SkyDatepickerCalendarComponent {
         this.adapter = adapter;
         this.config = config;
         this.elementRef = elementRef;
-        this.selectedDateChange = new EventEmitter(undefined);
+        this.calendarDateRangeChange = new EventEmitter();
         this.calendarModeChange = new EventEmitter();
+        this.selectedDateChange = new EventEmitter(undefined);
         this._now = new Date();
         this.formatter = new SkyDateFormatter();
         this.configureOptions();
@@ -1428,6 +1802,9 @@ class SkyDatepickerCalendarComponent {
     configureOptions() {
         Object.assign(this, this.config);
     }
+    onCalendarDateRangeChange(event) {
+        this.calendarDateRangeChange.next(event);
+    }
     onCalendarModeChange(event) {
         this.calendarModeChange.emit(event);
     }
@@ -1435,10 +1812,10 @@ class SkyDatepickerCalendarComponent {
         this.selectedDateChange.emit(event);
     }
     writeValue(value) {
-        if (value !== undefined
-            && this.formatter.dateIsValid(value)
-            && this.selectedDate !== undefined
-            && this._datepicker.compareHandlerDay(value, this.selectedDate) === 0) {
+        if (value !== undefined &&
+            this.formatter.dateIsValid(value) &&
+            this.selectedDate !== undefined &&
+            this._datepicker.compareHandlerDay(value, this.selectedDate) === 0) {
             return;
         }
         if (this.formatter.dateIsValid(value)) {
@@ -1451,17 +1828,21 @@ class SkyDatepickerCalendarComponent {
         }
     }
 }
-SkyDatepickerCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerAdapterService }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SkyDatepickerCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate", startingDay: "startingDay" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, providers: [SkyDatepickerAdapterService], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: SkyDatepickerCalendarInnerComponent, descendants: true, read: SkyDatepickerCalendarInnerComponent, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker-calendar\">\n  <sky-datepicker-inner\n      [selectedDate]=\"selectedDate\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [startingDay]=\"startingDay\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange($event)\">\n    <sky-daypicker tabindex=\"0\"></sky-daypicker>\n    <sky-monthpicker tabindex=\"0\"></sky-monthpicker>\n    <sky-yearpicker tabindex=\"0\"></sky-yearpicker>\n  </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], components: [{ type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["startingDay", "minDate", "maxDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { type: SkyDayPickerComponent, selector: "sky-daypicker" }, { type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { type: SkyYearPickerComponent, selector: "sky-yearpicker" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
+SkyDatepickerCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerAdapterService }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SkyDatepickerCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: { customDates: "customDates", isDaypickerWaiting: "isDaypickerWaiting", minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate", startingDay: "startingDay" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", calendarModeChange: "calendarModeChange", selectedDateChange: "selectedDateChange" }, providers: [SkyDatepickerAdapterService], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: SkyDatepickerCalendarInnerComponent, descendants: true, read: SkyDatepickerCalendarInnerComponent, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker-calendar\">\n  <sky-datepicker-inner\n    [customDates]=\"customDates\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [selectedDate]=\"selectedDate\"\n    [startingDay]=\"startingDay\"\n    (calendarModeChange)=\"onCalendarModeChange($event)\"\n    (selectedDateChange)=\"onSelectedDateChange($event)\"\n  >\n    <sky-daypicker\n      tabindex=\"0\"\n      [customDates]=\"customDates\"\n      [isWaiting]=\"isDaypickerWaiting\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n    ></sky-daypicker>\n    <sky-monthpicker tabindex=\"0\"></sky-monthpicker>\n    <sky-yearpicker tabindex=\"0\"></sky-yearpicker>\n  </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], components: [{ type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["customDates", "startingDay", "minDate", "maxDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: ["customDates", "isWaiting"], outputs: ["calendarDateRangeChange"] }, { type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { type: SkyYearPickerComponent, selector: "sky-yearpicker" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-datepicker-calendar',
                     templateUrl: './datepicker-calendar.component.html',
                     styleUrls: ['./datepicker-calendar.component.scss'],
-                    providers: [SkyDatepickerAdapterService]
+                    providers: [SkyDatepickerAdapterService],
                 }]
-        }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }]; }, propDecorators: { minDate: [{
+        }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }]; }, propDecorators: { customDates: [{
+                type: Input
+            }], isDaypickerWaiting: [{
+                type: Input
+            }], minDate: [{
                 type: Input
             }], maxDate: [{
                 type: Input
@@ -1469,15 +1850,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                 type: Input
             }], startingDay: [{
                 type: Input
-            }], selectedDateChange: [{
+            }], calendarDateRangeChange: [{
                 type: Output
             }], calendarModeChange: [{
                 type: Output
+            }], selectedDateChange: [{
+                type: Output
             }], _datepicker: [{
                 type: ViewChild,
                 args: [SkyDatepickerCalendarInnerComponent, {
                         read: SkyDatepickerCalendarInnerComponent,
-                        static: true
+                        static: true,
                     }]
             }] } });
 
@@ -1497,7 +1880,14 @@ class SkyDatepickerComponent {
          * Adds a class to the datepicker.
          */
         this.pickerClass = '';
+        /**
+         * 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.
+         */
+        this.calendarDateRangeChange = new EventEmitter();
         this.dateChange = new EventEmitter();
+        this.isDaypickerWaiting = false;
         this.isOpen = false;
         this.isVisible = false;
         this.ngUnsubscribe = new Subject();
@@ -1580,7 +1970,7 @@ class SkyDatepickerComponent {
         if (this.inputBoxHostService) {
             this.inputBoxHostService.populate({
                 inputTemplate: this.inputTemplateRef,
-                buttonsTemplate: this.triggerButtonTemplateRef
+                buttonsTemplate: this.triggerButtonTemplateRef,
             });
         }
     }
@@ -1610,6 +2000,42 @@ class SkyDatepickerComponent {
             this.openPicker();
         }
     }
+    onCalendarDateRangeChange(event) {
+        /* istanbul ignore else */
+        if (event) {
+            this.cancelCustomDatesSubscription();
+            const args = {
+                startDate: event.startDate,
+                endDate: event.endDate,
+                customDates: undefined,
+            };
+            this.calendarDateRangeChange.emit(args);
+            // If consumer has added an observable to the args, watch for incoming custom dates.
+            /* istanbul ignore else */
+            if (args.customDates) {
+                this.isDaypickerWaiting = true;
+                // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
+                this.changeDetector.detectChanges();
+                this.customDatesSubscription = args.customDates
+                    .pipe(debounceTime(250))
+                    .subscribe((result) => {
+                    this.customDates = result;
+                    this.isDaypickerWaiting = false;
+                    // Trigger change detection in child components to show changes in the calendar.
+                    this.changeDetector.markForCheck();
+                });
+            }
+            else {
+                // If consumer returns an undefined value after custom dates have
+                // already ben established, remove custom dates.
+                if (this.customDates) {
+                    this.customDates = undefined;
+                    // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
+                    this.changeDetector.detectChanges();
+                }
+            }
+        }
+    }
     closePicker() {
         this.destroyAffixer();
         this.destroyOverlay();
@@ -1633,7 +2059,7 @@ class SkyDatepickerComponent {
         affixer.placementChange
             .pipe(takeUntil(this.calendarUnsubscribe))
             .subscribe((change) => {
-            this.isVisible = (change.placement !== null);
+            this.isVisible = change.placement !== null;
             this.changeDetector.markForCheck();
         });
         affixer.affixTo(this.triggerButtonRef.nativeElement, {
@@ -1641,7 +2067,7 @@ class SkyDatepickerComponent {
             enableAutoFit: true,
             horizontalAlignment: 'right',
             isSticky: true,
-            placement: 'below'
+            placement: 'below',
         });
         this.affixer = affixer;
     }
@@ -1656,7 +2082,7 @@ class SkyDatepickerComponent {
         const overlay = this.overlayService.create({
             wrapperClass: this.pickerClass,
             enableClose: false,
-            enablePointerEvents: false
+            enablePointerEvents: false,
         });
         overlay.backdropClick
             .pipe(takeUntil(this.calendarUnsubscribe))
@@ -1698,16 +2124,22 @@ class SkyDatepickerComponent {
         }
         (_a = this.overlayKeydownListner) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
+    cancelCustomDatesSubscription() {
+        if (this.customDatesSubscription) {
+            this.customDatesSubscription.unsubscribe();
+            this.customDatesSubscription = undefined;
+        }
+    }
 }
-SkyDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$1.SkyInputBoxHostService, optional: true }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-datepicker\"\n>\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div\n      class=\"sky-input-group\"\n    >\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div\n    class=\"sky-input-group-btn\"\n  >\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\"\n        icon=\"calendar\"\n        size=\"lg\"\n      ></sky-icon>\n      <sky-icon *skyThemeIf=\"'modern'\"\n        icon=\"calendar\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n    #calendarRef\n  >\n    <sky-datepicker-calendar\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startingDay]=\"startingDay\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    >\n    </sky-datepicker-calendar>\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["minDate", "maxDate", "selectedDate", "startingDay"], outputs: ["selectedDateChange", "calendarModeChange"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
+SkyDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$1.SkyInputBoxHostService, optional: true }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        'skyux_datepicker_trigger_button_label' | skyLibResources\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"calendar\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"calendar\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n    #calendarRef\n  >\n    <sky-datepicker-calendar\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    >\n    </sky-datepicker-calendar>\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-datepicker',
                     templateUrl: './datepicker.component.html',
                     styleUrls: ['./datepicker.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
                     type: Optional
@@ -1715,35 +2147,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                     type: Optional
                 }] }]; }, propDecorators: { pickerClass: [{
                 type: Input
+            }], calendarDateRangeChange: [{
+                type: Output
             }], calendar: [{
                 type: ViewChild,
                 args: [SkyDatepickerCalendarComponent]
             }], calendarRef: [{
                 type: ViewChild,
                 args: ['calendarRef', {
-                        read: ElementRef
+                        read: ElementRef,
                     }]
             }], calendarTemplateRef: [{
                 type: ViewChild,
                 args: ['calendarTemplateRef', {
-                        read: TemplateRef
+                        read: TemplateRef,
                     }]
             }], triggerButtonRef: [{
                 type: ViewChild,
                 args: ['triggerButtonRef', {
-                        read: ElementRef
+                        read: ElementRef,
                     }]
             }], inputTemplateRef: [{
                 type: ViewChild,
                 args: ['inputTemplateRef', {
                         read: TemplateRef,
-                        static: true
+                        static: true,
                     }]
             }], triggerButtonTemplateRef: [{
                 type: ViewChild,
                 args: ['triggerButtonTemplateRef', {
                         read: TemplateRef,
-                        static: true
+                        static: true,
                     }]
             }] } });
 
@@ -1751,12 +2185,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 const SKY_DATEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SkyDatepickerInputDirective),
-    multi: true
+    multi: true,
 };
 const SKY_DATEPICKER_VALIDATOR = {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => SkyDatepickerInputDirective),
-    multi: true
+    multi: true,
 };
 // tslint:enable
 class SkyDatepickerInputDirective {
@@ -1783,11 +2217,13 @@ class SkyDatepickerInputDirective {
         this.onValidatorChange = () => { };
         this.initialPlaceholder = this.adapter.getPlaceholder(this.elementRef);
         this.updatePlaceholder();
-        this.localeProvider.getLocaleInfo()
+        this.localeProvider
+            .getLocaleInfo()
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((localeInfo) => {
             SkyDateFormatter.setLocale(localeInfo.locale);
-            this.preferredShortDateFormat = SkyDateFormatter.getPreferredShortDateFormat();
+            this.preferredShortDateFormat =
+                SkyDateFormatter.getPreferredShortDateFormat();
             this.applyDateFormat();
         });
     }
@@ -1804,9 +2240,9 @@ class SkyDatepickerInputDirective {
         }
     }
     get dateFormat() {
-        return this._dateFormat ||
+        return (this._dateFormat ||
             this.configService.dateFormat ||
-            this.preferredShortDateFormat;
+            this.preferredShortDateFormat);
     }
     /**
      * Indicates whether to disable the datepicker.
@@ -1899,9 +2335,9 @@ class SkyDatepickerInputDirective {
     }
     set value(value) {
         const dateValue = this.getDateValue(value);
-        const areDatesEqual = (this._value instanceof Date &&
+        const areDatesEqual = this._value instanceof Date &&
             dateValue &&
-            dateValue.getTime() === this._value.getTime());
+            dateValue.getTime() === this._value.getTime();
         const isValidDateString = this.isDateStringValid(value);
         // If the string value supplied is malformed, do not set the value to its Date equivalent.
         // (JavaScript's Date parser will convert poorly formatted dates to Date objects, such as "abc 123", which isn't ideal.)
@@ -1910,7 +2346,7 @@ class SkyDatepickerInputDirective {
             this.notifyUpdatedValue();
         }
         else if (dateValue !== this._value || !areDatesEqual) {
-            this._value = (dateValue || value);
+            this._value = dateValue || value;
             this.notifyUpdatedValue();
         }
         if (dateValue && isValidDateString) {
@@ -1930,7 +2366,8 @@ class SkyDatepickerInputDirective {
         this.renderer.addClass(element, 'sky-form-control');
         const hasAriaLabel = element.getAttribute('aria-label');
         if (!hasAriaLabel) {
-            this.resourcesService.getString('skyux_date_field_default_label')
+            this.resourcesService
+                .getString('skyux_date_field_default_label')
                 .pipe(takeUntil(this.ngUnsubscribe))
                 .subscribe((value) => {
                 this.renderer.setAttribute(element, 'aria-label', value);
@@ -1957,7 +2394,7 @@ class SkyDatepickerInputDirective {
         if (this.control && this.control.parent) {
             setTimeout(() => {
                 this.control.setValue(this.value, {
-                    emitEvent: false
+                    emitEvent: false,
                 });
                 this.changeDetector.markForCheck();
             });
@@ -1983,8 +2420,8 @@ class SkyDatepickerInputDirective {
         this.onChange(value);
         this.control.setErrors({
             skyDate: {
-                invalid: true
-            }
+                invalid: true,
+            },
         });
     }
     onInputBlur() {
@@ -2008,35 +2445,31 @@ class SkyDatepickerInputDirective {
             return;
         }
         const dateValue = this.getDateValue(value);
-        const isDateValid = (dateValue && this.dateFormatter.dateIsValid(dateValue));
+        const isDateValid = dateValue && this.dateFormatter.dateIsValid(dateValue);
         if (!isDateValid || !this.isDateStringValid(value)) {
             // Mark the invalid control as touched so that the input's invalid CSS styles appear.
             // (This is only required when the invalid value is set by the FormControl constructor.)
             this.control.markAsTouched();
             return {
-                'skyDate': {
-                    invalid: value
-                }
+                skyDate: {
+                    invalid: value,
+                },
             };
         }
         const minDate = this.minDate;
-        if (minDate &&
-            this.dateFormatter.dateIsValid(minDate) &&
-            value < minDate) {
+        if (minDate && this.dateFormatter.dateIsValid(minDate) && value < minDate) {
             return {
-                'skyDate': {
-                    minDate
-                }
+                skyDate: {
+                    minDate,
+                },
             };
         }
         const maxDate = this.maxDate;
-        if (maxDate &&
-            this.dateFormatter.dateIsValid(maxDate) &&
-            value > maxDate) {
+        if (maxDate && this.dateFormatter.dateIsValid(maxDate) && value > maxDate) {
             return {
-                'skyDate': {
-                    maxDate
-                }
+                skyDate: {
+                    maxDate,
+                },
             };
         }
     }
@@ -2123,21 +2556,21 @@ class SkyDatepickerInputDirective {
         }
     }
 }
-SkyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-SkyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
+SkyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SkyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
         SKY_DATEPICKER_VALUE_ACCESSOR,
         SKY_DATEPICKER_VALIDATOR,
-        SkyDatepickerAdapterService
+        SkyDatepickerAdapterService,
     ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyDatepickerInput]',
                     providers: [
                         SKY_DATEPICKER_VALUE_ACCESSOR,
                         SKY_DATEPICKER_VALIDATOR,
-                        SkyDatepickerAdapterService
-                    ]
+                        SkyDatepickerAdapterService,
+                    ],
                 }]
         }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: i3.SkyLibResourcesService }, { type: SkyDatepickerComponent, decorators: [{
                     type: Optional
@@ -2172,12 +2605,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 const SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
-    multi: true
+    multi: true,
 };
 const SKY_FUZZY_DATEPICKER_VALIDATOR = {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
-    multi: true
+    multi: true,
 };
 // tslint:enable
 class SkyFuzzyDatepickerInputDirective {
@@ -2205,12 +2638,14 @@ class SkyFuzzyDatepickerInputDirective {
         /*istanbul ignore next */
         this.onTouched = () => { };
         this.onValidatorChange = () => { };
-        this.localeProvider.getLocaleInfo()
+        this.localeProvider
+            .getLocaleInfo()
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((localeInfo) => {
             this.locale = localeInfo.locale;
             SkyDateFormatter.setLocale(this.locale);
-            this.preferredShortDateFormat = SkyDateFormatter.getPreferredShortDateFormat();
+            this.preferredShortDateFormat =
+                SkyDateFormatter.getPreferredShortDateFormat();
         });
     }
     /**
@@ -2227,9 +2662,9 @@ class SkyFuzzyDatepickerInputDirective {
         }
     }
     get dateFormat() {
-        return this._dateFormat ||
+        return (this._dateFormat ||
             this.configService.dateFormat ||
-            this.preferredShortDateFormat;
+            this.preferredShortDateFormat);
     }
     /**
      * Indicates whether to disable the datepicker.
@@ -2350,8 +2785,7 @@ class SkyFuzzyDatepickerInputDirective {
             }
         }
         const areFuzzyDatesEqual = this.fuzzyDatesEqual(this._value, fuzzyDate);
-        const isNewValue = (fuzzyDate !== this._value ||
-            !areFuzzyDatesEqual);
+        const isNewValue = fuzzyDate !== this._value || !areFuzzyDatesEqual;
         this._value = fuzzyDate || value;
         if (isNewValue) {
             this.onChange(this._value);
@@ -2382,7 +2816,8 @@ class SkyFuzzyDatepickerInputDirective {
         const hasAriaLabel = element.getAttribute('aria-label');
         /* istanbul ignore else */
         if (!hasAriaLabel) {
-            this.resourcesService.getString('skyux_date_field_default_label')
+            this.resourcesService
+                .getString('skyux_date_field_default_label')
                 .pipe(takeUntil(this.ngUnsubscribe))
                 .subscribe((value) => {
                 this.renderer.setAttribute(element, 'aria-label', value);
@@ -2408,7 +2843,7 @@ class SkyFuzzyDatepickerInputDirective {
         if (this.control && this.control.parent) {
             setTimeout(() => {
                 this.control.setValue(this.value, {
-                    emitEvent: false
+                    emitEvent: false,
                 });
                 this.changeDetector.markForCheck();
             });
@@ -2455,16 +2890,16 @@ class SkyFuzzyDatepickerInputDirective {
         }
         if (!fuzzyDate) {
             validationError = {
-                'skyFuzzyDate': {
-                    invalid: value
-                }
+                skyFuzzyDate: {
+                    invalid: value,
+                },
             };
         }
         if (!validationError && !fuzzyDate.year && this.yearRequired) {
             validationError = {
-                'skyFuzzyDate': {
-                    yearRequired: value
-                }
+                skyFuzzyDate: {
+                    yearRequired: value,
+                },
             };
         }
         if (!validationError && fuzzyDate.year) {
@@ -2473,9 +2908,9 @@ class SkyFuzzyDatepickerInputDirective {
                 fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.maxDate);
                 if (!fuzzyDateRange.valid) {
                     validationError = {
-                        'skyFuzzyDate': {
-                            maxDate: value
-                        }
+                        skyFuzzyDate: {
+                            maxDate: value,
+                        },
                     };
                 }
             }
@@ -2483,9 +2918,9 @@ class SkyFuzzyDatepickerInputDirective {
                 fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(this.minDate, fuzzyDate);
                 if (!fuzzyDateRange.valid) {
                     validationError = {
-                        'skyFuzzyDate': {
-                            minDate: value
-                        }
+                        skyFuzzyDate: {
+                            minDate: value,
+                        },
                     };
                 }
             }
@@ -2493,9 +2928,9 @@ class SkyFuzzyDatepickerInputDirective {
                 fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.fuzzyDateService.getCurrentFuzzyDate());
                 if (!fuzzyDateRange.valid) {
                     validationError = {
-                        'skyFuzzyDate': {
-                            futureDisabled: value
-                        }
+                        skyFuzzyDate: {
+                            futureDisabled: value,
+                        },
                     };
                 }
             }
@@ -2557,28 +2992,26 @@ class SkyFuzzyDatepickerInputDirective {
     }
     /* istanbul ignore next */
     fuzzyDatesEqual(dateA, dateB) {
-        return dateA && dateB
-            && ((!dateA.day && !dateB.day)
-                || dateA.day === dateB.day)
-            && ((!dateA.month && !dateB.month)
-                || dateA.month === dateB.month)
-            && ((!dateA.year && !dateB.year)
-                || dateA.year === dateB.year);
+        return (dateA &&
+            dateB &&
+            ((!dateA.day && !dateB.day) || dateA.day === dateB.day) &&
+            ((!dateA.month && !dateB.month) || dateA.month === dateB.month) &&
+            ((!dateA.year && !dateB.year) || dateA.year === dateB.year));
     }
 }
-SkyFuzzyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-SkyFuzzyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", skyFuzzyDatepickerInput: "skyFuzzyDatepickerInput", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
+SkyFuzzyDatepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: i3.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+SkyFuzzyDatepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", skyFuzzyDatepickerInput: "skyFuzzyDatepickerInput", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
         SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
-        SKY_FUZZY_DATEPICKER_VALIDATOR
+        SKY_FUZZY_DATEPICKER_VALIDATOR,
     ], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyFuzzyDatepickerInput]',
                     providers: [
                         SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
-                        SKY_FUZZY_DATEPICKER_VALIDATOR
-                    ]
+                        SKY_FUZZY_DATEPICKER_VALIDATOR,
+                    ],
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i3.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: i3.SkyLibResourcesService }, { type: SkyDatepickerComponent, decorators: [{
                     type: Optional
@@ -2613,26 +3046,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 
 class SkyDatepickerModule {
 }
-SkyDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
+SkyDatepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDatepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
         SkyDatepickerCalendarInnerComponent,
         SkyDayPickerComponent,
         SkyMonthPickerComponent,
         SkyYearPickerComponent,
         SkyDatepickerComponent,
         SkyDatepickerInputDirective,
-        SkyFuzzyDatepickerInputDirective], imports: [CommonModule,
+        SkyFuzzyDatepickerInputDirective,
+        SkyDayPickerCellComponent,
+        SkyDayPickerButtonComponent], imports: [CommonModule,
         SkyI18nModule,
         FormsModule,
         SkyIconModule,
         SkyDatetimeResourcesModule,
         SkyAffixModule,
         SkyOverlayModule,
-        SkyThemeModule], exports: [SkyDatepickerCalendarComponent,
+        SkyThemeModule,
+        SkyPopoverModule,
+        SkyWaitModule], exports: [SkyDatepickerCalendarComponent,
         SkyDatepickerComponent,
         SkyDatepickerInputDirective,
         SkyFuzzyDatepickerInputDirective] });
-SkyDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerModule, imports: [[
+SkyDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerService], imports: [[
             CommonModule,
             SkyI18nModule,
             FormsModule,
@@ -2640,9 +3077,11 @@ SkyDatepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
             SkyDatetimeResourcesModule,
             SkyAffixModule,
             SkyOverlayModule,
-            SkyThemeModule
+            SkyThemeModule,
+            SkyPopoverModule,
+            SkyWaitModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -2653,7 +3092,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                         SkyYearPickerComponent,
                         SkyDatepickerComponent,
                         SkyDatepickerInputDirective,
-                        SkyFuzzyDatepickerInputDirective
+                        SkyFuzzyDatepickerInputDirective,
+                        SkyDayPickerCellComponent,
+                        SkyDayPickerButtonComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -2663,14 +3104,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                         SkyDatetimeResourcesModule,
                         SkyAffixModule,
                         SkyOverlayModule,
-                        SkyThemeModule
+                        SkyThemeModule,
+                        SkyPopoverModule,
+                        SkyWaitModule,
                     ],
                     exports: [
                         SkyDatepickerCalendarComponent,
                         SkyDatepickerComponent,
                         SkyDatepickerInputDirective,
-                        SkyFuzzyDatepickerInputDirective
-                    ]
+                        SkyFuzzyDatepickerInputDirective,
+                    ],
+                    providers: [SkyDatepickerService],
                 }]
         }] });
 
@@ -2709,7 +3153,7 @@ class SkyDateRangeCalculator {
         return {
             calculatorId: this.calculatorId,
             startDate,
-            endDate
+            endDate,
         };
     }
     /**
@@ -2744,7 +3188,7 @@ class SkyDateRangeRelativeValue {
         const today = new Date();
         return {
             startDate: today,
-            endDate: today
+            endDate: today,
         };
     }
     static get tomorrow() {
@@ -2752,7 +3196,7 @@ class SkyDateRangeRelativeValue {
         tomorrow.setDate(tomorrow.getDate() + 1);
         return {
             startDate: tomorrow,
-            endDate: tomorrow
+            endDate: tomorrow,
         };
     }
     static get yesterday() {
@@ -2760,7 +3204,7 @@ class SkyDateRangeRelativeValue {
         yesterday.setDate(yesterday.getDate() - 1);
         return {
             startDate: yesterday,
-            endDate: yesterday
+            endDate: yesterday,
         };
     }
     /**
@@ -2773,7 +3217,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(endDate.getDate() - endDate.getDay() + 6);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     /**
@@ -2786,7 +3230,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(endDate.getDate() - endDate.getDay() + 13);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     static get lastWeek() {
@@ -2796,7 +3240,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(endDate.getDate() - endDate.getDay() - 1);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     static get thisMonth() {
@@ -2807,7 +3251,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(0);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     static get nextMonth() {
@@ -2820,7 +3264,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(0);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     static get lastMonth() {
@@ -2834,7 +3278,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(0);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     static get thisQuarter() {
@@ -2848,7 +3292,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(0);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     static get nextQuarter() {
@@ -2862,7 +3306,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(0);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     static get lastQuarter() {
@@ -2878,7 +3322,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(0);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     static get thisCalendarYear() {
@@ -2892,7 +3336,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(0);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     static get nextCalendarYear() {
@@ -2907,7 +3351,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(0);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     static get lastCalendarYear() {
@@ -2921,7 +3365,7 @@ class SkyDateRangeRelativeValue {
         endDate.setDate(0);
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
     static get thisFiscalYear() {
@@ -2977,7 +3421,7 @@ class SkyDateRangeRelativeValue {
         }
         return {
             startDate,
-            endDate
+            endDate,
         };
     }
 }
@@ -2987,19 +3431,19 @@ const SKY_DEFAULT_CALCULATOR_CONFIGS = [
         calculatorId: SkyDateRangeCalculatorId.AnyTime,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_any_time',
-        getValue: (startDate, endDate) => ({ startDate, endDate })
+        getValue: (startDate, endDate) => ({ startDate, endDate }),
     },
     {
         calculatorId: SkyDateRangeCalculatorId.Before,
         type: SkyDateRangeCalculatorType.Before,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_before',
-        getValue: (startDate, endDate) => ({ startDate, endDate })
+        getValue: (startDate, endDate) => ({ startDate, endDate }),
     },
     {
         calculatorId: SkyDateRangeCalculatorId.After,
         type: SkyDateRangeCalculatorType.After,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_after',
-        getValue: (startDate, endDate) => ({ startDate, endDate })
+        getValue: (startDate, endDate) => ({ startDate, endDate }),
     },
     {
         calculatorId: SkyDateRangeCalculatorId.SpecificRange,
@@ -3011,119 +3455,119 @@ const SKY_DEFAULT_CALCULATOR_CONFIGS = [
                 value.endDate &&
                 value.startDate > value.endDate) {
                 return {
-                    'endDateBeforeStartDate': true
+                    endDateBeforeStartDate: true,
                 };
             }
-        }
+        },
     },
     {
         calculatorId: SkyDateRangeCalculatorId.LastFiscalYear,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_fiscal_year',
-        getValue: () => SkyDateRangeRelativeValue.lastFiscalYear
+        getValue: () => SkyDateRangeRelativeValue.lastFiscalYear,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.LastMonth,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_month',
-        getValue: () => SkyDateRangeRelativeValue.lastMonth
+        getValue: () => SkyDateRangeRelativeValue.lastMonth,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.LastQuarter,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_quarter',
-        getValue: () => SkyDateRangeRelativeValue.lastQuarter
+        getValue: () => SkyDateRangeRelativeValue.lastQuarter,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.LastWeek,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_week',
-        getValue: () => SkyDateRangeRelativeValue.lastWeek
+        getValue: () => SkyDateRangeRelativeValue.lastWeek,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.LastCalendarYear,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_calendar_year',
-        getValue: () => SkyDateRangeRelativeValue.lastCalendarYear
+        getValue: () => SkyDateRangeRelativeValue.lastCalendarYear,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.NextFiscalYear,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_fiscal_year',
-        getValue: () => SkyDateRangeRelativeValue.nextFiscalYear
+        getValue: () => SkyDateRangeRelativeValue.nextFiscalYear,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.NextMonth,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_month',
-        getValue: () => SkyDateRangeRelativeValue.nextMonth
+        getValue: () => SkyDateRangeRelativeValue.nextMonth,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.NextQuarter,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_quarter',
-        getValue: () => SkyDateRangeRelativeValue.nextQuarter
+        getValue: () => SkyDateRangeRelativeValue.nextQuarter,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.NextWeek,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_week',
-        getValue: () => SkyDateRangeRelativeValue.nextWeek
+        getValue: () => SkyDateRangeRelativeValue.nextWeek,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.NextCalendarYear,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_calendar_year',
-        getValue: () => SkyDateRangeRelativeValue.nextCalendarYear
+        getValue: () => SkyDateRangeRelativeValue.nextCalendarYear,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.ThisFiscalYear,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_fiscal_year',
-        getValue: () => SkyDateRangeRelativeValue.thisFiscalYear
+        getValue: () => SkyDateRangeRelativeValue.thisFiscalYear,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.ThisMonth,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_month',
-        getValue: () => SkyDateRangeRelativeValue.thisMonth
+        getValue: () => SkyDateRangeRelativeValue.thisMonth,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.ThisQuarter,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_quarter',
-        getValue: () => SkyDateRangeRelativeValue.thisQuarter
+        getValue: () => SkyDateRangeRelativeValue.thisQuarter,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.ThisWeek,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_week',
-        getValue: () => SkyDateRangeRelativeValue.thisWeek
+        getValue: () => SkyDateRangeRelativeValue.thisWeek,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.ThisCalendarYear,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_calendar_year',
-        getValue: () => SkyDateRangeRelativeValue.thisCalendarYear
+        getValue: () => SkyDateRangeRelativeValue.thisCalendarYear,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.Today,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_today',
-        getValue: () => SkyDateRangeRelativeValue.today
+        getValue: () => SkyDateRangeRelativeValue.today,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.Tomorrow,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_tomorrow',
-        getValue: () => SkyDateRangeRelativeValue.tomorrow
+        getValue: () => SkyDateRangeRelativeValue.tomorrow,
     },
     {
         calculatorId: SkyDateRangeCalculatorId.Yesterday,
         type: SkyDateRangeCalculatorType.Relative,
         shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_yesterday',
-        getValue: () => SkyDateRangeRelativeValue.yesterday
-    }
+        getValue: () => SkyDateRangeRelativeValue.yesterday,
+    },
 ];
 
 /**
@@ -3164,16 +3608,14 @@ class SkyDateRangeService {
     getCalculatorById(id) {
         const calculatorId = parseInt(id, 10);
         const found = this.calculators.find((calculator) => {
-            return (calculator.calculatorId === calculatorId);
+            return calculator.calculatorId === calculatorId;
         });
         return new Promise((resolve, reject) => {
             if (!found) {
                 reject(new Error(`A calculator with the ID ${id} was not found.`));
                 return;
             }
-            this.calculatorReadyStream
-                .pipe(first())
-                .subscribe(() => {
+            this.calculatorReadyStream.pipe(first()).subscribe(() => {
                 resolve(found);
             });
         });
@@ -3186,7 +3628,7 @@ class SkyDateRangeService {
                 getValue: defaultConfig.getValue,
                 validate: defaultConfig.validate,
                 shortDescription: '',
-                type: defaultConfig.type
+                type: defaultConfig.type,
             };
             tasks.push(this.resourcesService
                 .getString(defaultConfig.shortDescriptionResourceKey)
@@ -3211,25 +3653,22 @@ class SkyDateRangeService {
 // Start the count higher than the number of available values
 // provided in the SkyDateRangeCalculatorId enum.
 SkyDateRangeService.lastId = 1000;
-SkyDateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDateRangeService, deps: [{ token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
-SkyDateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDateRangeService, providedIn: 'any' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDateRangeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'any'
-                }]
+SkyDateRangeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDateRangeService, deps: [{ token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable });
+SkyDateRangeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDateRangeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDateRangeService, decorators: [{
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i3.SkyLibResourcesService }]; } });
 
 /* tslint:disable:no-forward-ref no-use-before-declare */
 const SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SkyDateRangePickerComponent),
-    multi: true
+    multi: true,
 };
 const SKY_DATE_RANGE_PICKER_VALIDATOR = {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => SkyDateRangePickerComponent),
-    multi: true
+    multi: true,
 };
 /* tslint:enable */
 let uniqueId = 0;
@@ -3272,11 +3711,13 @@ class SkyDateRangePickerComponent {
         this.onTouched = () => { };
         /* istanbul ignore next */
         this.onValidatorChange = () => { };
-        this.localeProvider.getLocaleInfo()
+        this.localeProvider
+            .getLocaleInfo()
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((localeInfo) => {
             SkyDateFormatter.setLocale(localeInfo.locale);
-            this.preferredShortDateFormat = SkyDateFormatter.getPreferredShortDateFormat();
+            this.preferredShortDateFormat =
+                SkyDateFormatter.getPreferredShortDateFormat();
         });
         // Update icons when theme changes.
         /* istanbul ignore next */
@@ -3293,7 +3734,7 @@ class SkyDateRangePickerComponent {
         this._calculatorIds = value;
     }
     get calculatorIds() {
-        return this._calculatorIds || [
+        return (this._calculatorIds || [
             SkyDateRangeCalculatorId.AnyTime,
             SkyDateRangeCalculatorId.Before,
             SkyDateRangeCalculatorId.After,
@@ -3315,8 +3756,8 @@ class SkyDateRangePickerComponent {
             SkyDateRangeCalculatorId.NextCalendarYear,
             SkyDateRangeCalculatorId.LastFiscalYear,
             SkyDateRangeCalculatorId.ThisFiscalYear,
-            SkyDateRangeCalculatorId.NextFiscalYear
-        ];
+            SkyDateRangeCalculatorId.NextFiscalYear,
+        ]);
     }
     /**
      * Specifies a date format for
@@ -3381,8 +3822,7 @@ class SkyDateRangePickerComponent {
         return this.formGroup.get('startDate');
     }
     get value() {
-        if (this._value &&
-            this._value.calculatorId !== undefined) {
+        if (this._value && this._value.calculatorId !== undefined) {
             return this._value;
         }
         return this.defaultValue;
@@ -3407,20 +3847,19 @@ class SkyDateRangePickerComponent {
             /* istanbul ignore else */
             if (this.control) {
                 this.control.setValue(this.value, {
-                    emitEvent: false
+                    emitEvent: false,
                 });
             }
         });
     }
     ngOnChanges(changes) {
-        if (changes.calculatorIds &&
-            changes.calculatorIds.firstChange === false) {
+        if (changes.calculatorIds && changes.calculatorIds.firstChange === false) {
             this.updateCalculators().then(() => {
                 const id = this.calculatorIdControl.value;
                 // Maintain the currently selected values if the calculators change after
                 // a value has been chosen.
                 const found = this.calculators.find((calculator) => {
-                    return (calculator.calculatorId === id);
+                    return calculator.calculatorId === id;
                 });
                 /* istanbul ignore else */
                 if (!found) {
@@ -3469,8 +3908,8 @@ class SkyDateRangePickerComponent {
             errors = {
                 skyDateRange: {
                     calculatorId: idControl.value,
-                    errors: result
-                }
+                    errors: result,
+                },
             };
         }
         else {
@@ -3520,7 +3959,7 @@ class SkyDateRangePickerComponent {
         this.formGroup = this.formBuilder.group({
             calculatorId: new FormControl(),
             startDate: new FormControl(),
-            endDate: new FormControl()
+            endDate: new FormControl(),
         });
         if (this.disabled) {
             this.formGroup.disable();
@@ -3555,7 +3994,7 @@ class SkyDateRangePickerComponent {
         // listeners to be triggered, as those are reserved for user interactions.
         // (See the event listeners listed below.)
         this.formGroup.reset(value || this.value, {
-            emitEvent: false
+            emitEvent: false,
         });
     }
     addEventListeners() {
@@ -3563,7 +4002,7 @@ class SkyDateRangePickerComponent {
         // when control is initialized with a value.
         combineLatest([
             this.startDateControl.statusChanges,
-            this.endDateControl.statusChanges
+            this.endDateControl.statusChanges,
         ])
             .pipe(first())
             .subscribe((status) => {
@@ -3606,7 +4045,7 @@ class SkyDateRangePickerComponent {
         // Detect errors from the date inputs and update ng- classes on picker.
         combineLatest([
             this.startDateControl.statusChanges,
-            this.endDateControl.statusChanges
+            this.endDateControl.statusChanges,
         ])
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe(() => {
@@ -3627,15 +4066,15 @@ class SkyDateRangePickerComponent {
         });
     }
     dateRangesEqual(rangeA, rangeB) {
-        return (JSON.stringify(rangeA) === JSON.stringify(rangeB));
+        return JSON.stringify(rangeA) === JSON.stringify(rangeB);
     }
 }
-SkyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2$2.FormBuilder }, { token: i3.SkyAppLocaleProvider }, { token: i1.SkyAppWindowRef }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
+SkyDateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2$2.FormBuilder }, { token: i3.SkyAppLocaleProvider }, { token: i1.SkyAppWindowRef }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyDateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
         SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
-        SKY_DATE_RANGE_PICKER_VALIDATOR
-    ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isReady\"\n  class=\"sky-date-range-picker\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"sky-date-range-picker-form-group\"\n  >\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-select-calculator'\"\n      >\n        {{ label || 'skyux_date_range_picker_default_label' | skyLibResources }}\n      </label>\n      <select\n        class=\"sky-form-control\"\n        formControlName=\"calculatorId\"\n        [attr.id]=\"dateRangePickerId + '-select-calculator'\"\n        (blur)=\"onFieldBlur()\"\n      >\n        <option *ngFor=\"let calculator of calculators\"\n          [value]=\"calculator.calculatorId\"\n        >\n          {{ calculator.shortDescription }}\n        </option>\n      </select>\n    </sky-input-box>\n  </div>\n\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [hidden]=\"!showStartDatePicker\"\n  >\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-start-date'\"\n        [ngClass]=\"{ 'sky-control-label-required' : startDateRequired }\"\n      >\n        {{ startDateLabelResourceKey | skyLibResources }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"startDate\"\n          [attr.aria-label]=\"startDateLabelResourceKey | skyLibResources\"\n          [attr.id]=\"dateRangePickerId + '-start-date'\"\n          [attr.placeholder]=\"dateFormat\"\n          [required]=\"startDateRequired\"\n          [dateFormat]=\"dateFormat\"\n          (blur)=\"onFieldBlur()\"\n          skyDatepickerInput\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [hidden]=\"!showEndDatePicker\"\n  >\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-end-date'\"\n        [ngClass]=\"{ 'sky-control-label-required' : endDateRequired }\"\n      >\n        {{ endDateLabelResourceKey | skyLibResources }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"endDate\"\n          skyDatepickerInput\n          [attr.aria-label]=\"endDateLabelResourceKey | skyLibResources\"\n          [attr.id]=\"dateRangePickerId + '-end-date'\"\n          [attr.placeholder]=\"dateFormat\"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"endDateRequired\"\n          (blur)=\"onFieldBlur()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker{display:flex;margin-left:-5px;margin-right:-5px}.sky-date-range-picker-form-group{padding-left:5px;padding-right:5px}.sky-date-range-picker-form-group:last-child{margin-bottom:0}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{margin:0 20px 0 0}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group{margin:0 20px 0 0}}:host-context(.sky-theme-modern .sky-responsive-container-xs) .sky-date-range-picker-form-group{margin:0 0 20px}:host-context(.sky-theme-modern .sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-lg) .sky-date-range-picker-form-group{margin:0 20px 0 0}\n"], components: [{ type: i2$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
+        SKY_DATE_RANGE_PICKER_VALIDATOR,
+    ], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"isReady\" class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div class=\"sky-date-range-picker-form-group\">\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-select-calculator'\"\n      >\n        {{ label || 'skyux_date_range_picker_default_label' | skyLibResources }}\n      </label>\n      <select\n        class=\"sky-form-control\"\n        formControlName=\"calculatorId\"\n        [attr.id]=\"dateRangePickerId + '-select-calculator'\"\n        (blur)=\"onFieldBlur()\"\n      >\n        <option\n          *ngFor=\"let calculator of calculators\"\n          [value]=\"calculator.calculatorId\"\n        >\n          {{ calculator.shortDescription }}\n        </option>\n      </select>\n    </sky-input-box>\n  </div>\n\n  <div class=\"sky-date-range-picker-form-group\" [hidden]=\"!showStartDatePicker\">\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-start-date'\"\n        [ngClass]=\"{ 'sky-control-label-required': startDateRequired }\"\n      >\n        {{ startDateLabelResourceKey | skyLibResources }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"startDate\"\n          [attr.aria-label]=\"startDateLabelResourceKey | skyLibResources\"\n          [attr.id]=\"dateRangePickerId + '-start-date'\"\n          [attr.placeholder]=\"dateFormat\"\n          [required]=\"startDateRequired\"\n          [dateFormat]=\"dateFormat\"\n          (blur)=\"onFieldBlur()\"\n          skyDatepickerInput\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n\n  <div class=\"sky-date-range-picker-form-group\" [hidden]=\"!showEndDatePicker\">\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-end-date'\"\n        [ngClass]=\"{ 'sky-control-label-required': endDateRequired }\"\n      >\n        {{ endDateLabelResourceKey | skyLibResources }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"endDate\"\n          skyDatepickerInput\n          [attr.aria-label]=\"endDateLabelResourceKey | skyLibResources\"\n          [attr.id]=\"dateRangePickerId + '-end-date'\"\n          [attr.placeholder]=\"dateFormat\"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"endDateRequired\"\n          (blur)=\"onFieldBlur()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker{display:flex;margin-left:-5px;margin-right:-5px}.sky-date-range-picker-form-group{padding-left:5px;padding-right:5px}.sky-date-range-picker-form-group:last-child{margin-bottom:0}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{margin:0 20px 0 0}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group{margin:0 20px 0 0}}:host-context(.sky-theme-modern .sky-responsive-container-xs) .sky-date-range-picker-form-group{margin:0 0 20px}:host-context(.sky-theme-modern .sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-lg) .sky-date-range-picker-form-group{margin:0 20px 0 0}\n"], components: [{ type: i2$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-date-range-picker',
@@ -3643,9 +4082,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                     styleUrls: ['./date-range-picker.component.scss'],
                     providers: [
                         SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
-                        SKY_DATE_RANGE_PICKER_VALIDATOR
+                        SKY_DATE_RANGE_PICKER_VALIDATOR,
                     ],
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SkyDateRangeService }, { type: i2$2.FormBuilder }, { type: i3.SkyAppLocaleProvider }, { type: i1.SkyAppWindowRef }, { type: i3$2.SkyThemeService, decorators: [{
                     type: Optional
@@ -3665,29 +4104,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 
 class SkyDateRangePickerModule {
 }
-SkyDateRangePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyDateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent], imports: [CommonModule,
+SkyDateRangePickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyDateRangePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent], imports: [CommonModule,
         FormsModule,
         ReactiveFormsModule,
         SkyI18nModule,
         SkyDatepickerModule,
         SkyDatetimeResourcesModule,
         SkyInputBoxModule], exports: [SkyDateRangePickerComponent] });
-SkyDateRangePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDateRangePickerModule, imports: [[
+SkyDateRangePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDateRangePickerModule, providers: [SkyDateRangeService], imports: [[
             CommonModule,
             FormsModule,
             ReactiveFormsModule,
             SkyI18nModule,
             SkyDatepickerModule,
             SkyDatetimeResourcesModule,
-            SkyInputBoxModule
+            SkyInputBoxModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyDateRangePickerComponent
-                    ],
+                    declarations: [SkyDateRangePickerComponent],
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -3695,11 +4132,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                         SkyI18nModule,
                         SkyDatepickerModule,
                         SkyDatetimeResourcesModule,
-                        SkyInputBoxModule
+                        SkyInputBoxModule,
                     ],
-                    exports: [
-                        SkyDateRangePickerComponent
-                    ]
+                    exports: [SkyDateRangePickerComponent],
+                    providers: [SkyDateRangeService],
                 }]
         }] });
 
@@ -3707,12 +4143,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 const SKY_TIMEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => SkyTimepickerInputDirective),
-    multi: true
+    multi: true,
 };
 const SKY_TIMEPICKER_VALIDATOR = {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => SkyTimepickerInputDirective),
-    multi: true
+    multi: true,
 };
 // tslint:enable
 class SkyTimepickerInputDirective {
@@ -3778,14 +4214,15 @@ class SkyTimepickerInputDirective {
     }
     ngOnInit() {
         this.renderer.addClass(this.elRef.nativeElement, 'sky-form-control');
-        this.pickerChangedSubscription = this.skyTimepickerInput.selectedTimeChanged
-            .subscribe((newTime) => {
-            this.writeValue(newTime);
-            this._onTouched();
-        });
+        this.pickerChangedSubscription =
+            this.skyTimepickerInput.selectedTimeChanged.subscribe((newTime) => {
+                this.writeValue(newTime);
+                this._onTouched();
+            });
         /* istanbul ignore else */
         if (!this.elRef.nativeElement.getAttribute('aria-label')) {
-            this.resourcesService.getString('skyux_timepicker_input_default_label')
+            this.resourcesService
+                .getString('skyux_timepicker_input_default_label')
                 .subscribe((value) => {
                 this.renderer.setAttribute(this.elRef.nativeElement, 'aria-label', value);
             });
@@ -3796,7 +4233,7 @@ class SkyTimepickerInputDirective {
         /* istanbul ignore else */
         if (this.control && this.control.parent) {
             this.control.setValue(this.modelValue, {
-                emitEvent: false
+                emitEvent: false,
             });
             this.changeDetector.markForCheck();
         }
@@ -3815,9 +4252,15 @@ class SkyTimepickerInputDirective {
     onBlur() {
         this._onTouched();
     }
-    registerOnChange(fn) { this._onChange = fn; }
-    registerOnTouched(fn) { this._onTouched = fn; }
-    registerOnValidatorChange(fn) { this._validatorChange = fn; }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    registerOnValidatorChange(fn) {
+        this._validatorChange = fn;
+    }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
@@ -3835,9 +4278,9 @@ class SkyTimepickerInputDirective {
         /* istanbul ignore next */
         if (value.local === 'Invalid date') {
             return {
-                'skyTime': {
-                    invalid: control.value
-                }
+                skyTime: {
+                    invalid: control.value,
+                },
             };
         }
         return undefined;
@@ -3873,13 +4316,13 @@ class SkyTimepickerInputDirective {
                 this.returnFormat = currentFormat;
             }
             formatTime = {
-                'hour': moment(time, currentFormat).hour(),
-                'minute': moment(time, currentFormat).minute(),
-                'meridie': moment(time, currentFormat).format('A'),
-                'timezone': parseInt(moment(time, currentFormat).format('Z'), 10),
-                'iso8601': moment(time, currentFormat).toDate(),
-                'local': moment(time, currentFormat).format(currentFormat),
-                'customFormat': this.returnFormat
+                hour: moment(time, currentFormat).hour(),
+                minute: moment(time, currentFormat).minute(),
+                meridie: moment(time, currentFormat).format('A'),
+                timezone: parseInt(moment(time, currentFormat).format('Z'), 10),
+                iso8601: moment(time, currentFormat).toDate(),
+                local: moment(time, currentFormat).format(currentFormat),
+                customFormat: this.returnFormat,
             };
             return formatTime;
         }
@@ -3894,19 +4337,13 @@ class SkyTimepickerInputDirective {
         }
     }
 }
-SkyTimepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTimepickerInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-SkyTimepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: SkyTimepickerInputDirective, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" } }, providers: [
-        SKY_TIMEPICKER_VALUE_ACCESSOR,
-        SKY_TIMEPICKER_VALIDATOR
-    ], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
+SkyTimepickerInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTimepickerInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i3.SkyLibResourcesService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+SkyTimepickerInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyTimepickerInputDirective, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyTimepickerInput]',
-                    providers: [
-                        SKY_TIMEPICKER_VALUE_ACCESSOR,
-                        SKY_TIMEPICKER_VALIDATOR
-                    ]
+                    providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR],
                 }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i3.SkyLibResourcesService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { skyTimepickerInput: [{
                 type: Input
@@ -3972,10 +4409,10 @@ class SkyTimepickerComponent {
         if (this.is8601) {
             hourOffset = 0;
         }
-        hour = moment({ 'hour': setHour }).add(hourOffset, 'hours').hour();
+        hour = moment({ hour: setHour }).add(hourOffset, 'hours').hour();
         this.activeTime = moment({
-            'hour': hour,
-            'minute': moment(this.activeTime).get('minute') + 0
+            hour: hour,
+            minute: moment(this.activeTime).get('minute') + 0,
         }).toDate();
         this.selectedTimeChanged.emit(this.selectedTime);
     }
@@ -4006,8 +4443,8 @@ class SkyTimepickerComponent {
     }
     set selectedMinute(minute) {
         this.activeTime = moment({
-            'hour': moment(this.activeTime).get('hour') + 0,
-            'minute': minute
+            hour: moment(this.activeTime).get('hour') + 0,
+            minute: minute,
         }).toDate();
         this.selectedTimeChanged.emit(this.selectedTime);
     }
@@ -4032,8 +4469,9 @@ class SkyTimepickerComponent {
             timezone: parseInt(moment(this.activeTime).format('Z'), 10),
             iso8601: this.activeTime,
             local: moment(this.activeTime).format(this.localeFormat),
-            customFormat: (typeof this.returnFormat !== 'undefined')
-                ? this.returnFormat : this.localeFormat
+            customFormat: typeof this.returnFormat !== 'undefined'
+                ? this.returnFormat
+                : this.localeFormat,
         };
         return time;
     }
@@ -4061,7 +4499,7 @@ class SkyTimepickerComponent {
         if (this.inputBoxHostService) {
             this.inputBoxHostService.populate({
                 inputTemplate: this.inputTemplateRef,
-                buttonsTemplate: this.triggerButtonTemplateRef
+                buttonsTemplate: this.triggerButtonTemplateRef,
             });
         }
     }
@@ -4093,8 +4531,7 @@ class SkyTimepickerComponent {
         }
         let data;
         data = {
-            'hours': Array.apply(undefined, Array(h))
-                .map(function (x, i) {
+            hours: Array.apply(undefined, Array(h)).map(function (x, i) {
                 if (format === 'hh') {
                     return ++i;
                 }
@@ -4106,12 +4543,11 @@ class SkyTimepickerComponent {
                 /* sanity check */
                 return 0;
             }),
-            'minutes': Array.apply(undefined, Array(m))
-                .map(function (x, i) {
+            minutes: Array.apply(undefined, Array(m)).map(function (x, i) {
                 return i * minuteMultiplier;
             }),
-            'localeFormat': localeFormat,
-            'minuteMultiplier': minuteMultiplier
+            localeFormat: localeFormat,
+            minuteMultiplier: minuteMultiplier,
         };
         this.hours = data.hours;
         this.minutes = data.minutes;
@@ -4165,7 +4601,7 @@ class SkyTimepickerComponent {
         affixer.placementChange
             .pipe(takeUntil(this.timepickerUnsubscribe))
             .subscribe((change) => {
-            this.isVisible = (change.placement !== null);
+            this.isVisible = change.placement !== null;
             this.changeDetector.markForCheck();
         });
         affixer.affixTo(this.triggerButtonRef.nativeElement, {
@@ -4173,7 +4609,7 @@ class SkyTimepickerComponent {
             enableAutoFit: true,
             horizontalAlignment: 'right',
             isSticky: true,
-            placement: 'below'
+            placement: 'below',
         });
         this.affixer = affixer;
     }
@@ -4187,7 +4623,7 @@ class SkyTimepickerComponent {
     createOverlay() {
         const overlay = this.overlayService.create({
             enableClose: false,
-            enablePointerEvents: false
+            enablePointerEvents: false,
         });
         overlay.backdropClick
             .pipe(takeUntil(this.timepickerUnsubscribe))
@@ -4232,16 +4668,16 @@ class SkyTimepickerComponent {
         (_a = this.overlayKeydownListner) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
 }
-SkyTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$1.SkyInputBoxHostService, optional: true }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div\n  class=\"sky-timepicker\"\n>\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div\n      class=\"sky-input-group\"\n    >\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div\n    class=\"sky-input-group-btn\"\n  >\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\"\n        icon=\"clock-o\"\n        size=\"lg\"\n      ></sky-icon>\n      <sky-icon *skyThemeIf=\"'modern'\"\n        icon=\"clock\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n    #timepickerRef\n  >\n    <div\n      class=\"sky-timepicker-content\"\n    >\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour':is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours;\">\n            <button\n              name=\"hour\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active' : selectedHour === hour }\"\n              (click)=\"setTime($event)\"\n            >\n              {{hour}}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section\n        class=\"sky-timepicker-column\"\n      >\n        <ol>\n          <li *ngFor=\"let minute of minutes;\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00' .substring(0, 2 - (minute) .toString() .length) + (minute) }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\"\n        class=\"sky-timepicker-column\"\n      >\n        <ol>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n              (click)=\"setTime($event)\"\n            >\n              AM\n            </button>\n          </li>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n              (click)=\"setTime($event)\"\n            >\n              PM\n            </button>\n          </li>\n        </ol>\n      </section>\n    </div>\n    <div\n      class=\"sky-timepicker-footer\"\n    >\n      <section\n        class=\"sky-timepicker-column\"\n      >\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonCick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;grid-column-gap:1px;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern{display:none}.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
+SkyTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$1.SkyInputBoxHostService, optional: true }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SkyTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"clock\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n    #timepickerRef\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours\">\n            <button\n              name=\"hour\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ hour }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          <li *ngFor=\"let minute of minutes\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n        <ol>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n              (click)=\"setTime($event)\"\n            >\n              AM\n            </button>\n          </li>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n              (click)=\"setTime($event)\"\n            >\n              PM\n            </button>\n          </li>\n        </ol>\n      </section>\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonCick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;grid-column-gap:1px;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern{display:none}.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], components: [{ type: i2.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i3.SkyLibResourcesPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'sky-timepicker',
                     templateUrl: './timepicker.component.html',
                     styleUrls: ['./timepicker.component.scss'],
                     encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
                     type: Optional
@@ -4252,60 +4688,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
             }], timepickerRef: [{
                 type: ViewChild,
                 args: ['timepickerRef', {
-                        read: ElementRef
+                        read: ElementRef,
                     }]
             }], timepickerTemplateRef: [{
                 type: ViewChild,
                 args: ['timepickerTemplateRef', {
-                        read: TemplateRef
+                        read: TemplateRef,
                     }]
             }], triggerButtonRef: [{
                 type: ViewChild,
                 args: ['triggerButtonRef', {
-                        read: ElementRef
+                        read: ElementRef,
                     }]
             }], inputTemplateRef: [{
                 type: ViewChild,
                 args: ['inputTemplateRef', {
                         read: TemplateRef,
-                        static: true
+                        static: true,
                     }]
             }], triggerButtonTemplateRef: [{
                 type: ViewChild,
                 args: ['triggerButtonTemplateRef', {
                         read: TemplateRef,
-                        static: true
+                        static: true,
                     }]
             }] } });
 
 class SkyTimepickerModule {
 }
-SkyTimepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SkyTimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective,
-        SkyTimepickerComponent], imports: [CommonModule,
+SkyTimepickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SkyTimepickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [CommonModule,
         SkyI18nModule,
         SkyIconModule,
         SkyDatetimeResourcesModule,
         SkyAffixModule,
         SkyOverlayModule,
-        SkyThemeModule], exports: [SkyTimepickerInputDirective,
-        SkyTimepickerComponent] });
-SkyTimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTimepickerModule, imports: [[
+        SkyThemeModule], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] });
+SkyTimepickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTimepickerModule, imports: [[
             CommonModule,
             SkyI18nModule,
             SkyIconModule,
             SkyDatetimeResourcesModule,
             SkyAffixModule,
             SkyOverlayModule,
-            SkyThemeModule
+            SkyThemeModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTimepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0, type: SkyTimepickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyTimepickerInputDirective,
-                        SkyTimepickerComponent
-                    ],
+                    declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent],
                     imports: [
                         CommonModule,
                         SkyI18nModule,
@@ -4313,12 +4744,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                         SkyDatetimeResourcesModule,
                         SkyAffixModule,
                         SkyOverlayModule,
-                        SkyThemeModule
+                        SkyThemeModule,
                     ],
-                    exports: [
-                        SkyTimepickerInputDirective,
-                        SkyTimepickerComponent
-                    ]
+                    exports: [SkyTimepickerInputDirective, SkyTimepickerComponent],
                 }]
         }] });