@skyux/datetime 5.0.2 → 5.1.2

package/bundles/skyux-datetime.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@skyux/i18n'), require('moment'), require('@angular/common'), require('@angular/forms'), require('@skyux/forms'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/theme')) :
-    typeof define === 'function' && define.amd ? define('@skyux/datetime', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@skyux/i18n', 'moment', '@angular/common', '@angular/forms', '@skyux/forms', '@skyux/core', '@skyux/indicators', '@skyux/theme'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.datetime = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.i3, global.moment, global.ng.common, global.ng.forms, global.i2$1, global.i1, global.i2, global.i3$2));
-})(this, (function (exports, i0, rxjs, operators, i3, moment, i3$1, i2$2, i2$1, i1, i2, i3$2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@skyux/i18n'), require('moment'), require('@angular/common'), require('@angular/forms'), require('@skyux/forms'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/theme'), require('@skyux/popovers')) :
+    typeof define === 'function' && define.amd ? define('@skyux/datetime', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@skyux/i18n', 'moment', '@angular/common', '@angular/forms', '@skyux/forms', '@skyux/core', '@skyux/indicators', '@skyux/theme', '@skyux/popovers'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.datetime = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.i3, global.moment, global.ng.common, global.ng.forms, global.i2$1, global.i1, global.i2, global.i3$2, global.i3$1));
+})(this, (function (exports, i0, rxjs, operators, i3, moment, i5, i2$2, i2$1, i1, i2, i3$2, i3$1) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,12 +27,13 @@
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
 
     // This class is mostly ported from the Angular 4.x DatePipe in order to maintain the old
     var SkyDateFormatUtility = /** @class */ (function () {
@@ -63,14 +64,14 @@
         return 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;
@@ -95,7 +96,8 @@
             this.defaultFormat = 'short';
             this.defaultLocale = 'en-US';
             this.ngUnsubscribe = new rxjs.Subject();
-            this.localeProvider.getLocaleInfo()
+            this.localeProvider
+                .getLocaleInfo()
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function (localeInfo) {
                 _this.defaultLocale = localeInfo.locale;
@@ -128,13 +130,13 @@
         };
         return SkyDatePipe;
     }());
-    SkyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatePipe, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    SkyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatePipe, name: "skyDate", pure: false });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatePipe, decorators: [{
+    SkyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipe, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SkyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipe, name: "skyDate", pure: false });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipe, decorators: [{
                 type: i0.Pipe,
                 args: [{
                         name: 'skyDate',
-                        pure: false
+                        pure: false,
                     }]
             }], ctorParameters: function () { return [{ type: i3__namespace.SkyAppLocaleProvider }]; } });
 
@@ -145,10 +147,93 @@
      * To update this file, simply rerun the command.
      */
     var 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' },
+        },
     };
     var SkyDatetimeResourcesProvider = /** @class */ (function () {
         function SkyDatetimeResourcesProvider() {
@@ -166,22 +251,26 @@
         }
         return SkyDatetimeResourcesModule;
     }());
-    SkyDatetimeResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyDatetimeResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, exports: [i3.SkyI18nModule] });
-    SkyDatetimeResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, providers: [{
+    SkyDatetimeResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyDatetimeResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, exports: [i3.SkyI18nModule] });
+    SkyDatetimeResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, providers: [
+            {
                 provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyDatetimeResourcesProvider,
-                multi: true
-            }], imports: [i3.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, decorators: [{
+                multi: true,
+            },
+        ], imports: [i3.SkyI18nModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         exports: [i3.SkyI18nModule],
-                        providers: [{
+                        providers: [
+                            {
                                 provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
                                 useClass: SkyDatetimeResourcesProvider,
-                                multi: true
-                            }]
+                                multi: true,
+                            },
+                        ],
                     }]
             }] });
 
@@ -193,7 +282,8 @@
             var _this = this;
             this.localeProvider = localeProvider;
             this.ngUnsubscribe = new rxjs.Subject();
-            this.localeProvider.getLocaleInfo()
+            this.localeProvider
+                .getLocaleInfo()
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function (localeInfo) {
                 _this.currentLocale = localeInfo.locale;
@@ -268,7 +358,7 @@
                 return;
             }
             var year = fuzzyDate.year || this.getDefaultYear(fuzzyDate);
-            var month = fuzzyDate.month > 0 ? (fuzzyDate.month - 1) : 0;
+            var month = fuzzyDate.month > 0 ? fuzzyDate.month - 1 : 0;
             var day = fuzzyDate.day || 1;
             return moment__default["default"]([year, month, day]);
         };
@@ -287,7 +377,7 @@
             var 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(function (a, b) { return a.index - b.index; });
             dateComponents.forEach(function (component) {
@@ -342,18 +432,33 @@
                     // 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;
@@ -372,14 +477,21 @@
                 // Check if day is valid.
                 if (day) {
                     day = parseInt(day, 10);
-                    var fuzzyMoment = this.getMomentFromFuzzyDate({ month: month, day: day, year: year });
+                    var fuzzyMoment = this.getMomentFromFuzzyDate({
+                        month: month,
+                        day: day,
+                        year: year,
+                    });
                     if (isNaN(day) || !fuzzyMoment.isValid()) {
                         return;
                     }
                 }
             }
             if (year) {
-                year = year.toString().length === 2 ? moment__default["default"].parseTwoDigitYear(year) : parseInt(year.toString(), 10);
+                year =
+                    year.toString().length === 2
+                        ? moment__default["default"].parseTwoDigitYear(year)
+                        : parseInt(year.toString(), 10);
                 if (isNaN(year) || year.toString().length !== 4) {
                     return;
                 }
@@ -387,7 +499,7 @@
             return {
                 month: month,
                 day: day,
-                year: year
+                year: year,
             };
         };
         SkyFuzzyDateService.prototype.getFuzzyDateRange = function (startFuzzyDate, endFuzzyDate) {
@@ -397,7 +509,10 @@
             var months;
             var years;
             var 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');
@@ -409,7 +524,7 @@
                 years: years,
                 months: months,
                 days: days,
-                valid: valid
+                valid: valid,
             };
         };
         SkyFuzzyDateService.prototype.getCurrentFuzzyDate = function () {
@@ -417,7 +532,7 @@
             return {
                 day: currentDate.date(),
                 month: currentDate.month() + 1,
-                year: currentDate.year()
+                year: currentDate.year(),
             };
         };
         SkyFuzzyDateService.prototype.getMostRecentLeapYear = function () {
@@ -456,7 +571,7 @@
             }
         };
         SkyFuzzyDateService.prototype.isLeapYear = function (year) {
-            return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
+            return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
         };
         SkyFuzzyDateService.prototype.getMonthNumber = function (month) {
             var returnValue;
@@ -496,7 +611,7 @@
             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).
@@ -512,11 +627,13 @@
             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),
             };
         };
         /**
@@ -546,12 +663,12 @@
         };
         return SkyFuzzyDateService;
     }());
-    SkyFuzzyDateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFuzzyDateService, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyFuzzyDateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFuzzyDateService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFuzzyDateService, decorators: [{
+    SkyFuzzyDateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDateService, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyFuzzyDateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDateService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDateService, decorators: [{
                 type: i0.Injectable,
                 args: [{
-                        providedIn: 'root'
+                        providedIn: 'root',
                     }]
             }], ctorParameters: function () { return [{ type: i3__namespace.SkyAppLocaleProvider }]; } });
 
@@ -589,13 +706,13 @@
         };
         return SkyFuzzyDatePipe;
     }());
-    SkyFuzzyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    SkyFuzzyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFuzzyDatePipe, decorators: [{
+    SkyFuzzyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SkyFuzzyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatePipe, decorators: [{
                 type: i0.Pipe,
                 args: [{
                         name: 'skyFuzzyDate',
-                        pure: false
+                        pure: false,
                     }]
             }], ctorParameters: function () { return [{ type: SkyFuzzyDateService }]; } });
 
@@ -604,37 +721,16 @@
         }
         return SkyDatePipeModule;
     }());
-    SkyDatePipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatePipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyDatePipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatePipeModule, declarations: [SkyDatePipe,
-            SkyFuzzyDatePipe], imports: [i3$1.CommonModule,
-            SkyDatetimeResourcesModule], exports: [SkyDatePipe,
-            SkyFuzzyDatePipe] });
-    SkyDatePipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatePipeModule, providers: [
-            SkyDatePipe,
-            SkyFuzzyDatePipe
-        ], imports: [[
-                i3$1.CommonModule,
-                SkyDatetimeResourcesModule
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatePipeModule, decorators: [{
+    SkyDatePipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyDatePipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipeModule, declarations: [SkyDatePipe, SkyFuzzyDatePipe], imports: [i5.CommonModule, SkyDatetimeResourcesModule], exports: [SkyDatePipe, SkyFuzzyDatePipe] });
+    SkyDatePipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [[i5.CommonModule, SkyDatetimeResourcesModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipeModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [
-                            SkyDatePipe,
-                            SkyFuzzyDatePipe
-                        ],
-                        providers: [
-                            SkyDatePipe,
-                            SkyFuzzyDatePipe
-                        ],
-                        imports: [
-                            i3$1.CommonModule,
-                            SkyDatetimeResourcesModule
-                        ],
-                        exports: [
-                            SkyDatePipe,
-                            SkyFuzzyDatePipe
-                        ]
+                        declarations: [SkyDatePipe, SkyFuzzyDatePipe],
+                        providers: [SkyDatePipe, SkyFuzzyDatePipe],
+                        imports: [i5.CommonModule, SkyDatetimeResourcesModule],
+                        exports: [SkyDatePipe, SkyFuzzyDatePipe],
                     }]
             }] });
 
@@ -805,9 +901,9 @@
         };
         return SkyDatepickerAdapterService;
     }());
-    SkyDatepickerAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerAdapterService, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyDatepickerAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerAdapterService, decorators: [{
+    SkyDatepickerAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerAdapterService, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyDatepickerAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerAdapterService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerAdapterService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }]; } });
 
@@ -825,7 +921,8 @@
          */
         SkyDateFormatter.getPreferredShortDateFormat = function () {
             /* istanbul ignore next */
-            return moment__default["default"].localeData().longDateFormat('L') || SkyDateFormatter.defaultShortDateFormat;
+            return (moment__default["default"].localeData().longDateFormat('L') ||
+                SkyDateFormatter.defaultShortDateFormat);
         };
         SkyDateFormatter.prototype.format = function (date, format) {
             return moment__default["default"](date.getTime()).format(format);
@@ -887,8 +984,9 @@
                 37: 'left',
                 38: 'up',
                 39: 'right',
-                40: 'down'
+                40: 'down',
             };
+            this.ngUnsubscribe = new rxjs.Subject();
         }
         Object.defineProperty(SkyDatepickerCalendarInnerComponent.prototype, "selectedDate", {
             get: function () {
@@ -914,6 +1012,10 @@
         SkyDatepickerCalendarInnerComponent.prototype.ngOnChanges = function (changes) {
             this.refreshView();
         };
+        SkyDatepickerCalendarInnerComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         SkyDatepickerCalendarInnerComponent.prototype.setCompareHandler = function (handler, type) {
             if (type === 'day') {
                 this.compareHandlerDay = handler;
@@ -1017,6 +1119,7 @@
             }
         };
         SkyDatepickerCalendarInnerComponent.prototype.createDateObject = function (date, format, isSecondary, id) {
+            var customDateMatch = this.getCustomDate(date);
             var dateObject = {
                 date: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
                 label: this.dateFilter(date, format),
@@ -1024,7 +1127,9 @@
                 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;
         };
@@ -1065,7 +1170,8 @@
                 }
             }
             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();
@@ -1089,8 +1195,8 @@
             /* istanbul ignore else */
             /* sanity check */
             if (expectedStep) {
-                var year = this.activeDate.getFullYear() + (direction * (expectedStep.years || 0));
-                var month = this.activeDate.getMonth() + (direction * (expectedStep.months || 0));
+                var year = this.activeDate.getFullYear() + direction * (expectedStep.years || 0);
+                var month = this.activeDate.getMonth() + direction * (expectedStep.months || 0);
                 this.activeDate = new Date(year, month, 1);
                 this.refreshView();
             }
@@ -1107,28 +1213,45 @@
             /* 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.
+         */
         SkyDatepickerCalendarInnerComponent.prototype.isDisabled = function (date) {
-            return ((this.minDate && this.compare(date, this.minDate) < 0)
-                || (this.maxDate && this.compare(date, this.maxDate) > 0));
+            var customDate = this.getCustomDate(date);
+            return ((this.minDate && this.compare(date, this.minDate) < 0) ||
+                (this.maxDate && this.compare(date, this.maxDate) > 0) ||
+                (customDate && customDate.disabled));
+        };
+        SkyDatepickerCalendarInnerComponent.prototype.getCustomDate = function (date) {
+            if (this.customDates) {
+                return this.customDates.find(function (customDate) {
+                    return customDate.date.getTime() === date.getTime();
+                });
+            }
         };
         return SkyDatepickerCalendarInnerComponent;
     }());
-    SkyDatepickerCalendarInnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyDatepickerCalendarInnerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerCalendarInnerComponent, decorators: [{
+    SkyDatepickerCalendarInnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDatepickerCalendarInnerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerCalendarInnerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-datepicker-inner',
-                        template: "<div\n  *ngIf=\"datepickerMode\"\n  class=\"sky-datepicker-calendar-inner\"\n  (keydown)=\"onKeydown($event)\">\n  <ng-content></ng-content>\n</div>\n",
+                        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"],
-                        encapsulation: i0.ViewEncapsulation.None
+                        encapsulation: i0.ViewEncapsulation.None,
                     }]
-            }], propDecorators: { startingDay: [{
+            }], propDecorators: { customDates: [{
+                    type: i0.Input
+                }], startingDay: [{
                     type: i0.Input
                 }], minDate: [{
                     type: i0.Input
@@ -1153,29 +1276,208 @@
         }
         return SkyDatepickerConfigService;
     }());
-    SkyDatepickerConfigService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerConfigService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyDatepickerConfigService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerConfigService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerConfigService, decorators: [{
+    SkyDatepickerConfigService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerConfigService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyDatepickerConfigService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerConfigService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerConfigService, decorators: [{
                 type: i0.Injectable,
                 args: [{
-                        providedIn: 'root'
+                        providedIn: 'root',
                     }]
             }] });
 
+    /**
+     * @internal
+     */
+    var SkyDatepickerService = /** @class */ (function () {
+        function SkyDatepickerService() {
+            /**
+             * Specifies if a key date popover is currently displayed.
+             * Useful for communicating across all daypicker siblings when a popover is displayed.
+             */
+            this.keyDatePopoverStream = new rxjs.Subject();
+        }
+        return SkyDatepickerService;
+    }());
+    SkyDatepickerService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyDatepickerService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerService, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    /**
+     * @internal
+     */
+    var SkyDayPickerButtonComponent = /** @class */ (function () {
+        function SkyDayPickerButtonComponent(datepicker) {
+            this.datepicker = datepicker;
+        }
+        return SkyDayPickerButtonComponent;
+    }());
+    SkyDayPickerButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDayPickerButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-daypicker-button',
+                        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"],
+                    }]
+            }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { date: [{
+                    type: i0.Input
+                }] } });
+
+    /**
+     * @internal
+     */
+    var SkyDayPickerCellComponent = /** @class */ (function () {
+        function SkyDayPickerCellComponent(datepicker, datepickerService) {
+            this.datepicker = datepicker;
+            this.datepickerService = datepickerService;
+            this.hasTooltip = false;
+            this.popoverController = new rxjs.Subject();
+            this.activeUid = '';
+            this.cancelPopover = false;
+            this.popoverOpen = false;
+            this.ngUnsubscribe = new rxjs.Subject();
+        }
+        SkyDayPickerCellComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            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(operators.takeUntil(this.ngUnsubscribe))
+                    .subscribe(function (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();
+                    }
+                });
+            }
+        };
+        SkyDayPickerCellComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
+        SkyDayPickerCellComponent.prototype.onDayMouseenter = function () {
+            this.cancelPopover = false;
+            if (this.hasTooltip) {
+                this.showTooltip();
+                this.datepickerService.keyDatePopoverStream.next(this.date);
+            }
+        };
+        SkyDayPickerCellComponent.prototype.onDayMouseleave = function () {
+            this.cancelPopover = true;
+            if (this.hasTooltip) {
+                this.hideTooltip();
+            }
+            this.datepickerService.keyDatePopoverStream.next(undefined);
+        };
+        SkyDayPickerCellComponent.prototype.onPopoverClosed = function () {
+            this.popoverOpen = false;
+        };
+        SkyDayPickerCellComponent.prototype.onPopoverOpened = function () {
+            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;
+            }
+        };
+        SkyDayPickerCellComponent.prototype.getKeyDateLabel = function () {
+            if (this.hasTooltip) {
+                return this.date.keyDateText.join(', ');
+            }
+            else {
+                return '';
+            }
+        };
+        SkyDayPickerCellComponent.prototype.hideTooltip = function () {
+            /* istanbul ignore else */
+            if (this.popoverOpen) {
+                this.popoverController.next({ type: i3$1.SkyPopoverMessageType.Close });
+            }
+        };
+        SkyDayPickerCellComponent.prototype.showTooltip = function () {
+            var _this = this;
+            /* 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(function () {
+                    if (!_this.cancelPopover && _this.activeUid === _this.date.uid) {
+                        _this.popoverController.next({ type: i3$1.SkyPopoverMessageType.Open });
+                    }
+                }, 500);
+            }
+        };
+        return SkyDayPickerCellComponent;
+    }());
+    SkyDayPickerCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDayPickerCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: "activeDateHasChanged", date: "date" }, ngImport: i0__namespace, 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__namespace$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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerCellComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'sky-daypicker-cell',
+                        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",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerService }]; }, propDecorators: { activeDateHasChanged: [{
+                    type: i0.Input
+                }], date: [{
+                    type: i0.Input
+                }] } });
+
     /**
      * @internal
      */
     var SkyDayPickerComponent = /** @class */ (function () {
         function SkyDayPickerComponent(datepicker) {
+            this.calendarDateRangeChange = new i0.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 rxjs.Subject();
             this.datepicker = datepicker;
         }
+        Object.defineProperty(SkyDayPickerComponent.prototype, "customDates", {
+            set: function (value) {
+                /* istanbul ignore else */
+                if (value) {
+                    this.applyCustomDates(value, this.rows);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         SkyDayPickerComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.datepicker.stepDay = { months: 1 };
+            this.initialDate = this.datepicker.activeDate.getDate();
             this.datepicker.setRefreshViewHandler(function () {
                 _this.refreshDayView();
             }, 'day');
@@ -1185,6 +1487,10 @@
             }, 'day');
             this.datepicker.refreshView();
         };
+        SkyDayPickerComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         SkyDayPickerComponent.prototype.getDates = function (startDate, n) {
             var dates = new Array(n);
             var current = new Date(startDate.getTime());
@@ -1208,10 +1514,11 @@
             var month = this.datepicker.activeDate.getMonth();
             var firstDayOfMonth = new Date(year, month, 1);
             var difference = this.datepicker.startingDay - firstDayOfMonth.getDay();
-            var numDisplayedFromPreviousMonth = (difference > 0)
-                ? 7 - difference
-                : -difference;
+            var numDisplayedFromPreviousMonth = difference > 0 ? 7 - difference : -difference;
             var firstDate = new Date(firstDayOfMonth.getTime());
+            if (this.datepicker.activeDate.getDate() !== this.initialDate) {
+                this.activeDateHasChanged = true;
+            }
             /* istanbul ignore else */
             /* sanity check */
             if (numDisplayedFromPreviousMonth > 0) {
@@ -1227,13 +1534,19 @@
             this.labels = [];
             for (var 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);
+            var oldDateRange = this.getDateRange(this.rows);
             this.rows = this.datepicker.createCalendarRows(pickerDates, 7);
+            var newDateRange = this.getDateRange(this.rows);
+            if (!this.dateRangeRowsAreEqual(oldDateRange, newDateRange)) {
+                this.calendarDateRangeChange.next({
+                    startDate: newDateRange.startDate,
+                    endDate: newDateRange.endDate,
+                });
+            }
         };
         SkyDayPickerComponent.prototype.keydownDays = function (key, event) {
             var date = this.datepicker.activeDate.getDate();
@@ -1254,8 +1567,7 @@
             else if (key === 'pageup' || key === 'pagedown') {
                 var 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;
@@ -1266,21 +1578,87 @@
             this.datepicker.activeDate.setDate(date);
         };
         SkyDayPickerComponent.prototype.getDaysInMonth = function (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.
+         */
+        SkyDayPickerComponent.prototype.applyCustomDates = function (customDates, dateRows) {
+            var date;
+            var newDate;
+            var dateIndex;
+            /* istanbul ignore else */
+            if (customDates && dateRows) {
+                customDates.forEach(function (customDate) {
+                    dateIndex = -1;
+                    dateRows.forEach(function (row) {
+                        if (dateIndex === -1) {
+                            dateIndex = row.findIndex(function (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;
+                            }
+                        }
+                    });
+                });
+            }
+        };
+        SkyDayPickerComponent.prototype.dateRangeRowsAreEqual = function (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);
+        };
+        SkyDayPickerComponent.prototype.getDateRange = function (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,
+                };
+            }
         };
         return SkyDayPickerComponent;
     }());
-    SkyDayPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyDayPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyDayPickerComponent, selector: "sky-daypicker", ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDayPickerComponent, decorators: [{
+    SkyDayPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDayPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i2__namespace.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }, { type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-daypicker',
-                        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"]
+                        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"],
                     }]
-            }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
+            }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { customDates: [{
+                    type: i0.Input
+                }], calendarDateRangeChange: [{
+                    type: i0.Output
+                }], isWaiting: [{
+                    type: i0.Input
+                }] } });
 
     /**
      * @internal
@@ -1293,7 +1671,7 @@
         SkyMonthPickerComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.datepicker.stepMonth = {
-                years: 1
+                years: 1,
             };
             this.datepicker.setRefreshViewHandler(function () {
                 _this.refreshMonthView();
@@ -1316,11 +1694,9 @@
             for (var 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);
         };
         SkyMonthPickerComponent.prototype.keydownMonths = function (key, event) {
@@ -1353,14 +1729,14 @@
         };
         return SkyMonthPickerComponent;
     }());
-    SkyMonthPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyMonthPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyMonthPickerComponent, decorators: [{
+    SkyMonthPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyMonthPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyMonthPickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-monthpicker',
-                        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"]
+                        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"],
                     }]
             }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
 
@@ -1385,7 +1761,9 @@
             this.datepicker.refreshView();
         };
         SkyYearPickerComponent.prototype.getStartingYear = function (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);
         };
         SkyYearPickerComponent.prototype.compareYears = function (date1, date2) {
             return date1.getFullYear() - date2.getFullYear();
@@ -1397,11 +1775,12 @@
             for (var 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);
         };
         SkyYearPickerComponent.prototype.keydownYears = function (key, event) {
@@ -1427,21 +1806,23 @@
                 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);
         };
         return SkyYearPickerComponent;
     }());
-    SkyYearPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyYearPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyYearPickerComponent, decorators: [{
+    SkyYearPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyYearPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyYearPickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-yearpicker',
-                        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"]
+                        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"],
                     }]
             }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
 
@@ -1453,8 +1834,9 @@
             this.adapter = adapter;
             this.config = config;
             this.elementRef = elementRef;
-            this.selectedDateChange = new i0.EventEmitter(undefined);
+            this.calendarDateRangeChange = new i0.EventEmitter();
             this.calendarModeChange = new i0.EventEmitter();
+            this.selectedDateChange = new i0.EventEmitter(undefined);
             this._now = new Date();
             this.formatter = new SkyDateFormatter();
             this.configureOptions();
@@ -1487,6 +1869,9 @@
         SkyDatepickerCalendarComponent.prototype.configureOptions = function () {
             Object.assign(this, this.config);
         };
+        SkyDatepickerCalendarComponent.prototype.onCalendarDateRangeChange = function (event) {
+            this.calendarDateRangeChange.next(event);
+        };
         SkyDatepickerCalendarComponent.prototype.onCalendarModeChange = function (event) {
             this.calendarModeChange.emit(event);
         };
@@ -1494,10 +1879,10 @@
             this.selectedDateChange.emit(event);
         };
         SkyDatepickerCalendarComponent.prototype.writeValue = function (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)) {
@@ -1511,17 +1896,21 @@
         };
         return SkyDatepickerCalendarComponent;
     }());
-    SkyDatepickerCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerAdapterService }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyDatepickerCalendarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerCalendarComponent, decorators: [{
+    SkyDatepickerCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerAdapterService }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDatepickerCalendarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerCalendarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-datepicker-calendar',
-                        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",
+                        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"],
-                        providers: [SkyDatepickerAdapterService]
+                        providers: [SkyDatepickerAdapterService],
                     }]
-            }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: SkyDatepickerConfigService }, { type: i0__namespace.ElementRef }]; }, propDecorators: { minDate: [{
+            }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: SkyDatepickerConfigService }, { type: i0__namespace.ElementRef }]; }, propDecorators: { customDates: [{
+                    type: i0.Input
+                }], isDaypickerWaiting: [{
+                    type: i0.Input
+                }], minDate: [{
                     type: i0.Input
                 }], maxDate: [{
                     type: i0.Input
@@ -1529,15 +1918,17 @@
                     type: i0.Input
                 }], startingDay: [{
                     type: i0.Input
-                }], selectedDateChange: [{
+                }], calendarDateRangeChange: [{
                     type: i0.Output
                 }], calendarModeChange: [{
                     type: i0.Output
+                }], selectedDateChange: [{
+                    type: i0.Output
                 }], _datepicker: [{
                     type: i0.ViewChild,
                     args: [SkyDatepickerCalendarInnerComponent, {
                             read: SkyDatepickerCalendarInnerComponent,
-                            static: true
+                            static: true,
                         }]
                 }] } });
 
@@ -1558,7 +1949,14 @@
              * 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 i0.EventEmitter();
             this.dateChange = new i0.EventEmitter();
+            this.isDaypickerWaiting = false;
             this.isOpen = false;
             this.isVisible = false;
             this.ngUnsubscribe = new rxjs.Subject();
@@ -1666,7 +2064,7 @@
             if (this.inputBoxHostService) {
                 this.inputBoxHostService.populate({
                     inputTemplate: this.inputTemplateRef,
-                    buttonsTemplate: this.triggerButtonTemplateRef
+                    buttonsTemplate: this.triggerButtonTemplateRef,
                 });
             }
         };
@@ -1697,6 +2095,43 @@
                 this.openPicker();
             }
         };
+        SkyDatepickerComponent.prototype.onCalendarDateRangeChange = function (event) {
+            var _this = this;
+            /* istanbul ignore else */
+            if (event) {
+                this.cancelCustomDatesSubscription();
+                var 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(operators.debounceTime(250))
+                        .subscribe(function (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();
+                    }
+                }
+            }
+        };
         SkyDatepickerComponent.prototype.closePicker = function () {
             this.destroyAffixer();
             this.destroyOverlay();
@@ -1721,7 +2156,7 @@
             affixer.placementChange
                 .pipe(operators.takeUntil(this.calendarUnsubscribe))
                 .subscribe(function (change) {
-                _this.isVisible = (change.placement !== null);
+                _this.isVisible = change.placement !== null;
                 _this.changeDetector.markForCheck();
             });
             affixer.affixTo(this.triggerButtonRef.nativeElement, {
@@ -1729,7 +2164,7 @@
                 enableAutoFit: true,
                 horizontalAlignment: 'right',
                 isSticky: true,
-                placement: 'below'
+                placement: 'below',
             });
             this.affixer = affixer;
         };
@@ -1745,7 +2180,7 @@
             var overlay = this.overlayService.create({
                 wrapperClass: this.pickerClass,
                 enableClose: false,
-                enablePointerEvents: false
+                enablePointerEvents: false,
             });
             overlay.backdropClick
                 .pipe(operators.takeUntil(this.calendarUnsubscribe))
@@ -1788,17 +2223,23 @@
             }
             (_a = this.overlayKeydownListner) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         };
+        SkyDatepickerComponent.prototype.cancelCustomDatesSubscription = function () {
+            if (this.customDatesSubscription) {
+                this.customDatesSubscription.unsubscribe();
+                this.customDatesSubscription = undefined;
+            }
+        };
         return SkyDatepickerComponent;
     }());
-    SkyDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace$1.SkyInputBoxHostService, optional: true }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyDatepickerComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, 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__namespace.λ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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerComponent, decorators: [{
+    SkyDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace$1.SkyInputBoxHostService, optional: true }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDatepickerComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, 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__namespace.λ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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-datepicker',
-                        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",
+                        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"],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () {
             return [{ type: i1__namespace.SkyAffixService }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.SkyCoreAdapterService }, { type: i1__namespace.SkyOverlayService }, { type: i2__namespace$1.SkyInputBoxHostService, decorators: [{
@@ -1808,35 +2249,37 @@
                         }] }];
         }, propDecorators: { pickerClass: [{
                     type: i0.Input
+                }], calendarDateRangeChange: [{
+                    type: i0.Output
                 }], calendar: [{
                     type: i0.ViewChild,
                     args: [SkyDatepickerCalendarComponent]
                 }], calendarRef: [{
                     type: i0.ViewChild,
                     args: ['calendarRef', {
-                            read: i0.ElementRef
+                            read: i0.ElementRef,
                         }]
                 }], calendarTemplateRef: [{
                     type: i0.ViewChild,
                     args: ['calendarTemplateRef', {
-                            read: i0.TemplateRef
+                            read: i0.TemplateRef,
                         }]
                 }], triggerButtonRef: [{
                     type: i0.ViewChild,
                     args: ['triggerButtonRef', {
-                            read: i0.ElementRef
+                            read: i0.ElementRef,
                         }]
                 }], inputTemplateRef: [{
                     type: i0.ViewChild,
                     args: ['inputTemplateRef', {
                             read: i0.TemplateRef,
-                            static: true
+                            static: true,
                         }]
                 }], triggerButtonTemplateRef: [{
                     type: i0.ViewChild,
                     args: ['triggerButtonTemplateRef', {
                             read: i0.TemplateRef,
-                            static: true
+                            static: true,
                         }]
                 }] } });
 
@@ -1844,12 +2287,12 @@
     var SKY_DATEPICKER_VALUE_ACCESSOR = {
         provide: i2$2.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return SkyDatepickerInputDirective; }),
-        multi: true
+        multi: true,
     };
     var SKY_DATEPICKER_VALIDATOR = {
         provide: i2$2.NG_VALIDATORS,
         useExisting: i0.forwardRef(function () { return SkyDatepickerInputDirective; }),
-        multi: true
+        multi: true,
     };
     // tslint:enable
     var SkyDatepickerInputDirective = /** @class */ (function () {
@@ -1877,19 +2320,21 @@
             this.onValidatorChange = function () { };
             this.initialPlaceholder = this.adapter.getPlaceholder(this.elementRef);
             this.updatePlaceholder();
-            this.localeProvider.getLocaleInfo()
+            this.localeProvider
+                .getLocaleInfo()
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function (localeInfo) {
                 SkyDateFormatter.setLocale(localeInfo.locale);
-                _this.preferredShortDateFormat = SkyDateFormatter.getPreferredShortDateFormat();
+                _this.preferredShortDateFormat =
+                    SkyDateFormatter.getPreferredShortDateFormat();
                 _this.applyDateFormat();
             });
         }
         Object.defineProperty(SkyDatepickerInputDirective.prototype, "dateFormat", {
             get: function () {
-                return this._dateFormat ||
+                return (this._dateFormat ||
                     this.configService.dateFormat ||
-                    this.preferredShortDateFormat;
+                    this.preferredShortDateFormat);
             },
             /**
              * Specifies the date format for the input. Place this attribute on the `input` element
@@ -2026,9 +2471,9 @@
             },
             set: function (value) {
                 var dateValue = this.getDateValue(value);
-                var areDatesEqual = (this._value instanceof Date &&
+                var areDatesEqual = this._value instanceof Date &&
                     dateValue &&
-                    dateValue.getTime() === this._value.getTime());
+                    dateValue.getTime() === this._value.getTime();
                 var 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.)
@@ -2037,7 +2482,7 @@
                     this.notifyUpdatedValue();
                 }
                 else if (dateValue !== this._value || !areDatesEqual) {
-                    this._value = (dateValue || value);
+                    this._value = dateValue || value;
                     this.notifyUpdatedValue();
                 }
                 if (dateValue && isValidDateString) {
@@ -2061,7 +2506,8 @@
             this.renderer.addClass(element, 'sky-form-control');
             var hasAriaLabel = element.getAttribute('aria-label');
             if (!hasAriaLabel) {
-                this.resourcesService.getString('skyux_date_field_default_label')
+                this.resourcesService
+                    .getString('skyux_date_field_default_label')
                     .pipe(operators.takeUntil(this.ngUnsubscribe))
                     .subscribe(function (value) {
                     _this.renderer.setAttribute(element, 'aria-label', value);
@@ -2090,7 +2536,7 @@
             if (this.control && this.control.parent) {
                 setTimeout(function () {
                     _this.control.setValue(_this.value, {
-                        emitEvent: false
+                        emitEvent: false,
                     });
                     _this.changeDetector.markForCheck();
                 });
@@ -2116,8 +2562,8 @@
             this.onChange(value);
             this.control.setErrors({
                 skyDate: {
-                    invalid: true
-                }
+                    invalid: true,
+                },
             });
         };
         SkyDatepickerInputDirective.prototype.onInputBlur = function () {
@@ -2141,35 +2587,31 @@
                 return;
             }
             var dateValue = this.getDateValue(value);
-            var isDateValid = (dateValue && this.dateFormatter.dateIsValid(dateValue));
+            var 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,
+                    },
                 };
             }
             var minDate = this.minDate;
-            if (minDate &&
-                this.dateFormatter.dateIsValid(minDate) &&
-                value < minDate) {
+            if (minDate && this.dateFormatter.dateIsValid(minDate) && value < minDate) {
                 return {
-                    'skyDate': {
-                        minDate: minDate
-                    }
+                    skyDate: {
+                        minDate: minDate,
+                    },
                 };
             }
             var maxDate = this.maxDate;
-            if (maxDate &&
-                this.dateFormatter.dateIsValid(maxDate) &&
-                value > maxDate) {
+            if (maxDate && this.dateFormatter.dateIsValid(maxDate) && value > maxDate) {
                 return {
-                    'skyDate': {
-                        maxDate: maxDate
-                    }
+                    skyDate: {
+                        maxDate: maxDate,
+                    },
                 };
             }
         };
@@ -2257,21 +2699,21 @@
         };
         return SkyDatepickerInputDirective;
     }());
-    SkyDatepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i0__namespace.Renderer2 }, { token: i3__namespace.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    SkyDatepickerInputDirective.ɵdir = i0__namespace.ɵɵ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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i0__namespace.Renderer2 }, { token: i3__namespace.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SkyDatepickerInputDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerInputDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerInputDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[skyDatepickerInput]',
                         providers: [
                             SKY_DATEPICKER_VALUE_ACCESSOR,
                             SKY_DATEPICKER_VALIDATOR,
-                            SkyDatepickerAdapterService
-                        ]
+                            SkyDatepickerAdapterService,
+                        ],
                     }]
             }], ctorParameters: function () {
             return [{ type: SkyDatepickerAdapterService }, { type: i0__namespace.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0__namespace.ElementRef }, { type: i3__namespace.SkyAppLocaleProvider }, { type: i0__namespace.Renderer2 }, { type: i3__namespace.SkyLibResourcesService }, { type: SkyDatepickerComponent, decorators: [{
@@ -2308,12 +2750,12 @@
     var SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR = {
         provide: i2$2.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return SkyFuzzyDatepickerInputDirective; }),
-        multi: true
+        multi: true,
     };
     var SKY_FUZZY_DATEPICKER_VALIDATOR = {
         provide: i2$2.NG_VALIDATORS,
         useExisting: i0.forwardRef(function () { return SkyFuzzyDatepickerInputDirective; }),
-        multi: true
+        multi: true,
     };
     // tslint:enable
     var SkyFuzzyDatepickerInputDirective = /** @class */ (function () {
@@ -2342,19 +2784,21 @@
             /*istanbul ignore next */
             this.onTouched = function () { };
             this.onValidatorChange = function () { };
-            this.localeProvider.getLocaleInfo()
+            this.localeProvider
+                .getLocaleInfo()
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function (localeInfo) {
                 _this.locale = localeInfo.locale;
                 SkyDateFormatter.setLocale(_this.locale);
-                _this.preferredShortDateFormat = SkyDateFormatter.getPreferredShortDateFormat();
+                _this.preferredShortDateFormat =
+                    SkyDateFormatter.getPreferredShortDateFormat();
             });
         }
         Object.defineProperty(SkyFuzzyDatepickerInputDirective.prototype, "dateFormat", {
             get: function () {
-                return this._dateFormat ||
+                return (this._dateFormat ||
                     this.configService.dateFormat ||
-                    this.preferredShortDateFormat;
+                    this.preferredShortDateFormat);
             },
             /**
              * Specifies the date format for the input. Place this attribute on the `input` element
@@ -2520,8 +2964,7 @@
                     }
                 }
                 var areFuzzyDatesEqual = this.fuzzyDatesEqual(this._value, fuzzyDate);
-                var isNewValue = (fuzzyDate !== this._value ||
-                    !areFuzzyDatesEqual);
+                var isNewValue = fuzzyDate !== this._value || !areFuzzyDatesEqual;
                 this._value = fuzzyDate || value;
                 if (isNewValue) {
                     this.onChange(this._value);
@@ -2556,7 +2999,8 @@
             var 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(operators.takeUntil(this.ngUnsubscribe))
                     .subscribe(function (value) {
                     _this.renderer.setAttribute(element, 'aria-label', value);
@@ -2584,7 +3028,7 @@
             if (this.control && this.control.parent) {
                 setTimeout(function () {
                     _this.control.setValue(_this.value, {
-                        emitEvent: false
+                        emitEvent: false,
                     });
                     _this.changeDetector.markForCheck();
                 });
@@ -2631,16 +3075,16 @@
             }
             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) {
@@ -2649,9 +3093,9 @@
                     fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.maxDate);
                     if (!fuzzyDateRange.valid) {
                         validationError = {
-                            'skyFuzzyDate': {
-                                maxDate: value
-                            }
+                            skyFuzzyDate: {
+                                maxDate: value,
+                            },
                         };
                     }
                 }
@@ -2659,9 +3103,9 @@
                     fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(this.minDate, fuzzyDate);
                     if (!fuzzyDateRange.valid) {
                         validationError = {
-                            'skyFuzzyDate': {
-                                minDate: value
-                            }
+                            skyFuzzyDate: {
+                                minDate: value,
+                            },
                         };
                     }
                 }
@@ -2669,9 +3113,9 @@
                     fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.fuzzyDateService.getCurrentFuzzyDate());
                     if (!fuzzyDateRange.valid) {
                         validationError = {
-                            'skyFuzzyDate': {
-                                futureDisabled: value
-                            }
+                            skyFuzzyDate: {
+                                futureDisabled: value,
+                            },
                         };
                     }
                 }
@@ -2733,29 +3177,27 @@
         };
         /* istanbul ignore next */
         SkyFuzzyDatepickerInputDirective.prototype.fuzzyDatesEqual = function (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));
         };
         return SkyFuzzyDatepickerInputDirective;
     }());
-    SkyFuzzyDatepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }, { token: SkyFuzzyDateService }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i0__namespace.Renderer2 }, { token: i3__namespace.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    SkyFuzzyDatepickerInputDirective.ɵdir = i0__namespace.ɵɵ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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }, { token: SkyFuzzyDateService }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i0__namespace.Renderer2 }, { token: i3__namespace.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SkyFuzzyDatepickerInputDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[skyFuzzyDatepickerInput]',
                         providers: [
                             SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
-                            SKY_FUZZY_DATEPICKER_VALIDATOR
-                        ]
+                            SKY_FUZZY_DATEPICKER_VALIDATOR,
+                        ],
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0__namespace.ElementRef }, { type: SkyFuzzyDateService }, { type: i3__namespace.SkyAppLocaleProvider }, { type: i0__namespace.Renderer2 }, { type: i3__namespace.SkyLibResourcesService }, { type: SkyDatepickerComponent, decorators: [{
@@ -2795,36 +3237,42 @@
         }
         return SkyDatepickerModule;
     }());
-    SkyDatepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyDatepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
+    SkyDatepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyDatepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
             SkyDatepickerCalendarInnerComponent,
             SkyDayPickerComponent,
             SkyMonthPickerComponent,
             SkyYearPickerComponent,
             SkyDatepickerComponent,
             SkyDatepickerInputDirective,
-            SkyFuzzyDatepickerInputDirective], imports: [i3$1.CommonModule,
+            SkyFuzzyDatepickerInputDirective,
+            SkyDayPickerCellComponent,
+            SkyDayPickerButtonComponent], imports: [i5.CommonModule,
             i3.SkyI18nModule,
             i2$2.FormsModule,
             i2.SkyIconModule,
             SkyDatetimeResourcesModule,
             i1.SkyAffixModule,
             i1.SkyOverlayModule,
-            i3$2.SkyThemeModule], exports: [SkyDatepickerCalendarComponent,
+            i3$2.SkyThemeModule,
+            i3$1.SkyPopoverModule,
+            i2.SkyWaitModule], exports: [SkyDatepickerCalendarComponent,
             SkyDatepickerComponent,
             SkyDatepickerInputDirective,
             SkyFuzzyDatepickerInputDirective] });
-    SkyDatepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerModule, imports: [[
-                i3$1.CommonModule,
+    SkyDatepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, providers: [SkyDatepickerService], imports: [[
+                i5.CommonModule,
                 i3.SkyI18nModule,
                 i2$2.FormsModule,
                 i2.SkyIconModule,
                 SkyDatetimeResourcesModule,
                 i1.SkyAffixModule,
                 i1.SkyOverlayModule,
-                i3$2.SkyThemeModule
+                i3$2.SkyThemeModule,
+                i3$1.SkyPopoverModule,
+                i2.SkyWaitModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDatepickerModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
@@ -2835,24 +3283,29 @@
                             SkyYearPickerComponent,
                             SkyDatepickerComponent,
                             SkyDatepickerInputDirective,
-                            SkyFuzzyDatepickerInputDirective
+                            SkyFuzzyDatepickerInputDirective,
+                            SkyDayPickerCellComponent,
+                            SkyDayPickerButtonComponent,
                         ],
                         imports: [
-                            i3$1.CommonModule,
+                            i5.CommonModule,
                             i3.SkyI18nModule,
                             i2$2.FormsModule,
                             i2.SkyIconModule,
                             SkyDatetimeResourcesModule,
                             i1.SkyAffixModule,
                             i1.SkyOverlayModule,
-                            i3$2.SkyThemeModule
+                            i3$2.SkyThemeModule,
+                            i3$1.SkyPopoverModule,
+                            i2.SkyWaitModule,
                         ],
                         exports: [
                             SkyDatepickerCalendarComponent,
                             SkyDatepickerComponent,
                             SkyDatepickerInputDirective,
-                            SkyFuzzyDatepickerInputDirective
-                        ]
+                            SkyFuzzyDatepickerInputDirective,
+                        ],
+                        providers: [SkyDatepickerService],
                     }]
             }] });
 
@@ -2891,7 +3344,7 @@
             return {
                 calculatorId: this.calculatorId,
                 startDate: startDate,
-                endDate: endDate
+                endDate: endDate,
             };
         };
         /**
@@ -2929,7 +3382,7 @@
                 var today = new Date();
                 return {
                     startDate: today,
-                    endDate: today
+                    endDate: today,
                 };
             },
             enumerable: false,
@@ -2941,7 +3394,7 @@
                 tomorrow.setDate(tomorrow.getDate() + 1);
                 return {
                     startDate: tomorrow,
-                    endDate: tomorrow
+                    endDate: tomorrow,
                 };
             },
             enumerable: false,
@@ -2953,7 +3406,7 @@
                 yesterday.setDate(yesterday.getDate() - 1);
                 return {
                     startDate: yesterday,
-                    endDate: yesterday
+                    endDate: yesterday,
                 };
             },
             enumerable: false,
@@ -2970,7 +3423,7 @@
                 endDate.setDate(endDate.getDate() - endDate.getDay() + 6);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -2987,7 +3440,7 @@
                 endDate.setDate(endDate.getDate() - endDate.getDay() + 13);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3001,7 +3454,7 @@
                 endDate.setDate(endDate.getDate() - endDate.getDay() - 1);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3016,7 +3469,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3033,7 +3486,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3051,7 +3504,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3069,7 +3522,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3087,7 +3540,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3107,7 +3560,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3125,7 +3578,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3144,7 +3597,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3162,7 +3615,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3233,7 +3686,7 @@
             }
             return {
                 startDate: startDate,
-                endDate: endDate
+                endDate: endDate,
             };
         };
         return SkyDateRangeRelativeValue;
@@ -3244,19 +3697,19 @@
             calculatorId: exports.SkyDateRangeCalculatorId.AnyTime,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_any_time',
-            getValue: function (startDate, endDate) { return ({ startDate: startDate, endDate: endDate }); }
+            getValue: function (startDate, endDate) { return ({ startDate: startDate, endDate: endDate }); },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.Before,
             type: exports.SkyDateRangeCalculatorType.Before,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_before',
-            getValue: function (startDate, endDate) { return ({ startDate: startDate, endDate: endDate }); }
+            getValue: function (startDate, endDate) { return ({ startDate: startDate, endDate: endDate }); },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.After,
             type: exports.SkyDateRangeCalculatorType.After,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_after',
-            getValue: function (startDate, endDate) { return ({ startDate: startDate, endDate: endDate }); }
+            getValue: function (startDate, endDate) { return ({ startDate: startDate, endDate: endDate }); },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.SpecificRange,
@@ -3268,119 +3721,119 @@
                     value.endDate &&
                     value.startDate > value.endDate) {
                     return {
-                        'endDateBeforeStartDate': true
+                        endDateBeforeStartDate: true,
                     };
                 }
-            }
+            },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.LastFiscalYear,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_fiscal_year',
-            getValue: function () { return SkyDateRangeRelativeValue.lastFiscalYear; }
+            getValue: function () { return SkyDateRangeRelativeValue.lastFiscalYear; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.LastMonth,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_month',
-            getValue: function () { return SkyDateRangeRelativeValue.lastMonth; }
+            getValue: function () { return SkyDateRangeRelativeValue.lastMonth; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.LastQuarter,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_quarter',
-            getValue: function () { return SkyDateRangeRelativeValue.lastQuarter; }
+            getValue: function () { return SkyDateRangeRelativeValue.lastQuarter; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.LastWeek,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_week',
-            getValue: function () { return SkyDateRangeRelativeValue.lastWeek; }
+            getValue: function () { return SkyDateRangeRelativeValue.lastWeek; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.LastCalendarYear,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_last_calendar_year',
-            getValue: function () { return SkyDateRangeRelativeValue.lastCalendarYear; }
+            getValue: function () { return SkyDateRangeRelativeValue.lastCalendarYear; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.NextFiscalYear,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_fiscal_year',
-            getValue: function () { return SkyDateRangeRelativeValue.nextFiscalYear; }
+            getValue: function () { return SkyDateRangeRelativeValue.nextFiscalYear; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.NextMonth,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_month',
-            getValue: function () { return SkyDateRangeRelativeValue.nextMonth; }
+            getValue: function () { return SkyDateRangeRelativeValue.nextMonth; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.NextQuarter,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_quarter',
-            getValue: function () { return SkyDateRangeRelativeValue.nextQuarter; }
+            getValue: function () { return SkyDateRangeRelativeValue.nextQuarter; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.NextWeek,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_week',
-            getValue: function () { return SkyDateRangeRelativeValue.nextWeek; }
+            getValue: function () { return SkyDateRangeRelativeValue.nextWeek; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.NextCalendarYear,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_next_calendar_year',
-            getValue: function () { return SkyDateRangeRelativeValue.nextCalendarYear; }
+            getValue: function () { return SkyDateRangeRelativeValue.nextCalendarYear; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.ThisFiscalYear,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_fiscal_year',
-            getValue: function () { return SkyDateRangeRelativeValue.thisFiscalYear; }
+            getValue: function () { return SkyDateRangeRelativeValue.thisFiscalYear; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.ThisMonth,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_month',
-            getValue: function () { return SkyDateRangeRelativeValue.thisMonth; }
+            getValue: function () { return SkyDateRangeRelativeValue.thisMonth; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.ThisQuarter,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_quarter',
-            getValue: function () { return SkyDateRangeRelativeValue.thisQuarter; }
+            getValue: function () { return SkyDateRangeRelativeValue.thisQuarter; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.ThisWeek,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_week',
-            getValue: function () { return SkyDateRangeRelativeValue.thisWeek; }
+            getValue: function () { return SkyDateRangeRelativeValue.thisWeek; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.ThisCalendarYear,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_this_calendar_year',
-            getValue: function () { return SkyDateRangeRelativeValue.thisCalendarYear; }
+            getValue: function () { return SkyDateRangeRelativeValue.thisCalendarYear; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.Today,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_today',
-            getValue: function () { return SkyDateRangeRelativeValue.today; }
+            getValue: function () { return SkyDateRangeRelativeValue.today; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.Tomorrow,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_tomorrow',
-            getValue: function () { return SkyDateRangeRelativeValue.tomorrow; }
+            getValue: function () { return SkyDateRangeRelativeValue.tomorrow; },
         },
         {
             calculatorId: exports.SkyDateRangeCalculatorId.Yesterday,
             type: exports.SkyDateRangeCalculatorType.Relative,
             shortDescriptionResourceKey: 'skyux_date_range_picker_format_label_yesterday',
-            getValue: function () { return SkyDateRangeRelativeValue.yesterday; }
-        }
+            getValue: function () { return SkyDateRangeRelativeValue.yesterday; },
+        },
     ];
 
     /**
@@ -3423,16 +3876,14 @@
             var _this = this;
             var calculatorId = parseInt(id, 10);
             var found = this.calculators.find(function (calculator) {
-                return (calculator.calculatorId === calculatorId);
+                return calculator.calculatorId === calculatorId;
             });
             return new Promise(function (resolve, reject) {
                 if (!found) {
                     reject(new Error("A calculator with the ID " + id + " was not found."));
                     return;
                 }
-                _this.calculatorReadyStream
-                    .pipe(operators.first())
-                    .subscribe(function () {
+                _this.calculatorReadyStream.pipe(operators.first()).subscribe(function () {
                     resolve(found);
                 });
             });
@@ -3446,7 +3897,7 @@
                     getValue: defaultConfig.getValue,
                     validate: defaultConfig.validate,
                     shortDescription: '',
-                    type: defaultConfig.type
+                    type: defaultConfig.type,
                 };
                 tasks.push(_this.resourcesService
                     .getString(defaultConfig.shortDescriptionResourceKey)
@@ -3472,25 +3923,22 @@
     // Start the count higher than the number of available values
     // provided in the SkyDateRangeCalculatorId enum.
     SkyDateRangeService.lastId = 1000;
-    SkyDateRangeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDateRangeService, deps: [{ token: i3__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyDateRangeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDateRangeService, providedIn: 'any' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDateRangeService, decorators: [{
-                type: i0.Injectable,
-                args: [{
-                        providedIn: 'any'
-                    }]
+    SkyDateRangeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangeService, deps: [{ token: i3__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyDateRangeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangeService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangeService, decorators: [{
+                type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i3__namespace.SkyLibResourcesService }]; } });
 
     /* tslint:disable:no-forward-ref no-use-before-declare */
     var SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
         provide: i2$2.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return SkyDateRangePickerComponent; }),
-        multi: true
+        multi: true,
     };
     var SKY_DATE_RANGE_PICKER_VALIDATOR = {
         provide: i2$2.NG_VALIDATORS,
         useExisting: i0.forwardRef(function () { return SkyDateRangePickerComponent; }),
-        multi: true
+        multi: true,
     };
     /* tslint:enable */
     var uniqueId = 0;
@@ -3534,11 +3982,13 @@
             this.onTouched = function () { };
             /* istanbul ignore next */
             this.onValidatorChange = function () { };
-            this.localeProvider.getLocaleInfo()
+            this.localeProvider
+                .getLocaleInfo()
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function (localeInfo) {
                 SkyDateFormatter.setLocale(localeInfo.locale);
-                _this.preferredShortDateFormat = SkyDateFormatter.getPreferredShortDateFormat();
+                _this.preferredShortDateFormat =
+                    SkyDateFormatter.getPreferredShortDateFormat();
             });
             // Update icons when theme changes.
             /* istanbul ignore next */
@@ -3548,7 +3998,7 @@
         }
         Object.defineProperty(SkyDateRangePickerComponent.prototype, "calculatorIds", {
             get: function () {
-                return this._calculatorIds || [
+                return (this._calculatorIds || [
                     exports.SkyDateRangeCalculatorId.AnyTime,
                     exports.SkyDateRangeCalculatorId.Before,
                     exports.SkyDateRangeCalculatorId.After,
@@ -3570,8 +4020,8 @@
                     exports.SkyDateRangeCalculatorId.NextCalendarYear,
                     exports.SkyDateRangeCalculatorId.LastFiscalYear,
                     exports.SkyDateRangeCalculatorId.ThisFiscalYear,
-                    exports.SkyDateRangeCalculatorId.NextFiscalYear
-                ];
+                    exports.SkyDateRangeCalculatorId.NextFiscalYear,
+                ]);
             },
             /**
              * Specifies IDs for the date range options to include in the picker's dropdown.
@@ -3688,8 +4138,7 @@
         });
         Object.defineProperty(SkyDateRangePickerComponent.prototype, "value", {
             get: function () {
-                if (this._value &&
-                    this._value.calculatorId !== undefined) {
+                if (this._value && this._value.calculatorId !== undefined) {
                     return this._value;
                 }
                 return this.defaultValue;
@@ -3718,21 +4167,20 @@
                 /* istanbul ignore else */
                 if (_this.control) {
                     _this.control.setValue(_this.value, {
-                        emitEvent: false
+                        emitEvent: false,
                     });
                 }
             });
         };
         SkyDateRangePickerComponent.prototype.ngOnChanges = function (changes) {
             var _this = this;
-            if (changes.calculatorIds &&
-                changes.calculatorIds.firstChange === false) {
+            if (changes.calculatorIds && changes.calculatorIds.firstChange === false) {
                 this.updateCalculators().then(function () {
                     var id = _this.calculatorIdControl.value;
                     // Maintain the currently selected values if the calculators change after
                     // a value has been chosen.
                     var found = _this.calculators.find(function (calculator) {
-                        return (calculator.calculatorId === id);
+                        return calculator.calculatorId === id;
                     });
                     /* istanbul ignore else */
                     if (!found) {
@@ -3781,8 +4229,8 @@
                 errors = {
                     skyDateRange: {
                         calculatorId: idControl.value,
-                        errors: result
-                    }
+                        errors: result,
+                    },
                 };
             }
             else {
@@ -3833,7 +4281,7 @@
             this.formGroup = this.formBuilder.group({
                 calculatorId: new i2$2.FormControl(),
                 startDate: new i2$2.FormControl(),
-                endDate: new i2$2.FormControl()
+                endDate: new i2$2.FormControl(),
             });
             if (this.disabled) {
                 this.formGroup.disable();
@@ -3868,7 +4316,7 @@
             // 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,
             });
         };
         SkyDateRangePickerComponent.prototype.addEventListeners = function () {
@@ -3877,7 +4325,7 @@
             // when control is initialized with a value.
             rxjs.combineLatest([
                 this.startDateControl.statusChanges,
-                this.endDateControl.statusChanges
+                this.endDateControl.statusChanges,
             ])
                 .pipe(operators.first())
                 .subscribe(function (status) {
@@ -3920,7 +4368,7 @@
             // Detect errors from the date inputs and update ng- classes on picker.
             rxjs.combineLatest([
                 this.startDateControl.statusChanges,
-                this.endDateControl.statusChanges
+                this.endDateControl.statusChanges,
             ])
                 .pipe(operators.takeUntil(this.ngUnsubscribe))
                 .subscribe(function () {
@@ -3942,26 +4390,26 @@
             });
         };
         SkyDateRangePickerComponent.prototype.dateRangesEqual = function (rangeA, rangeB) {
-            return (JSON.stringify(rangeA) === JSON.stringify(rangeB));
+            return JSON.stringify(rangeA) === JSON.stringify(rangeB);
         };
         return SkyDateRangePickerComponent;
     }());
-    SkyDateRangePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDateRangePickerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2__namespace$2.FormBuilder }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i1__namespace.SkyAppWindowRef }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyDateRangePickerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2__namespace$2.FormBuilder }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i1__namespace.SkyAppWindowRef }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDateRangePickerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$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__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDateRangePickerComponent, decorators: [{
+            SKY_DATE_RANGE_PICKER_VALIDATOR,
+        ], usesOnChanges: true, ngImport: i0__namespace, 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__namespace$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$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__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-date-range-picker',
-                        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",
+                        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"],
                         providers: [
                             SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
-                            SKY_DATE_RANGE_PICKER_VALIDATOR
+                            SKY_DATE_RANGE_PICKER_VALIDATOR,
                         ],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () {
             return [{ type: i0__namespace.ChangeDetectorRef }, { type: SkyDateRangeService }, { type: i2__namespace$2.FormBuilder }, { type: i3__namespace.SkyAppLocaleProvider }, { type: i1__namespace.SkyAppWindowRef }, { type: i3__namespace$2.SkyThemeService, decorators: [{
@@ -3986,41 +4434,38 @@
         }
         return SkyDateRangePickerModule;
     }());
-    SkyDateRangePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDateRangePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyDateRangePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent], imports: [i3$1.CommonModule,
+    SkyDateRangePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyDateRangePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent], imports: [i5.CommonModule,
             i2$2.FormsModule,
             i2$2.ReactiveFormsModule,
             i3.SkyI18nModule,
             SkyDatepickerModule,
             SkyDatetimeResourcesModule,
             i2$1.SkyInputBoxModule], exports: [SkyDateRangePickerComponent] });
-    SkyDateRangePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDateRangePickerModule, imports: [[
-                i3$1.CommonModule,
+    SkyDateRangePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, providers: [SkyDateRangeService], imports: [[
+                i5.CommonModule,
                 i2$2.FormsModule,
                 i2$2.ReactiveFormsModule,
                 i3.SkyI18nModule,
                 SkyDatepickerModule,
                 SkyDatetimeResourcesModule,
-                i2$1.SkyInputBoxModule
+                i2$1.SkyInputBoxModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyDateRangePickerModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [
-                            SkyDateRangePickerComponent
-                        ],
+                        declarations: [SkyDateRangePickerComponent],
                         imports: [
-                            i3$1.CommonModule,
+                            i5.CommonModule,
                             i2$2.FormsModule,
                             i2$2.ReactiveFormsModule,
                             i3.SkyI18nModule,
                             SkyDatepickerModule,
                             SkyDatetimeResourcesModule,
-                            i2$1.SkyInputBoxModule
+                            i2$1.SkyInputBoxModule,
                         ],
-                        exports: [
-                            SkyDateRangePickerComponent
-                        ]
+                        exports: [SkyDateRangePickerComponent],
+                        providers: [SkyDateRangeService],
                     }]
             }] });
 
@@ -4028,12 +4473,12 @@
     var SKY_TIMEPICKER_VALUE_ACCESSOR = {
         provide: i2$2.NG_VALUE_ACCESSOR,
         useExisting: i0.forwardRef(function () { return SkyTimepickerInputDirective; }),
-        multi: true
+        multi: true,
     };
     var SKY_TIMEPICKER_VALIDATOR = {
         provide: i2$2.NG_VALIDATORS,
         useExisting: i0.forwardRef(function () { return SkyTimepickerInputDirective; }),
-        multi: true
+        multi: true,
     };
     // tslint:enable
     var SkyTimepickerInputDirective = /** @class */ (function () {
@@ -4116,14 +4561,15 @@
         SkyTimepickerInputDirective.prototype.ngOnInit = function () {
             var _this = this;
             this.renderer.addClass(this.elRef.nativeElement, 'sky-form-control');
-            this.pickerChangedSubscription = this.skyTimepickerInput.selectedTimeChanged
-                .subscribe(function (newTime) {
-                _this.writeValue(newTime);
-                _this._onTouched();
-            });
+            this.pickerChangedSubscription =
+                this.skyTimepickerInput.selectedTimeChanged.subscribe(function (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(function (value) {
                     _this.renderer.setAttribute(_this.elRef.nativeElement, 'aria-label', value);
                 });
@@ -4134,7 +4580,7 @@
             /* istanbul ignore else */
             if (this.control && this.control.parent) {
                 this.control.setValue(this.modelValue, {
-                    emitEvent: false
+                    emitEvent: false,
                 });
                 this.changeDetector.markForCheck();
             }
@@ -4153,9 +4599,15 @@
         SkyTimepickerInputDirective.prototype.onBlur = function () {
             this._onTouched();
         };
-        SkyTimepickerInputDirective.prototype.registerOnChange = function (fn) { this._onChange = fn; };
-        SkyTimepickerInputDirective.prototype.registerOnTouched = function (fn) { this._onTouched = fn; };
-        SkyTimepickerInputDirective.prototype.registerOnValidatorChange = function (fn) { this._validatorChange = fn; };
+        SkyTimepickerInputDirective.prototype.registerOnChange = function (fn) {
+            this._onChange = fn;
+        };
+        SkyTimepickerInputDirective.prototype.registerOnTouched = function (fn) {
+            this._onTouched = fn;
+        };
+        SkyTimepickerInputDirective.prototype.registerOnValidatorChange = function (fn) {
+            this._validatorChange = fn;
+        };
         SkyTimepickerInputDirective.prototype.setDisabledState = function (isDisabled) {
             this.disabled = isDisabled;
         };
@@ -4173,9 +4625,9 @@
             /* istanbul ignore next */
             if (value.local === 'Invalid date') {
                 return {
-                    'skyTime': {
-                        invalid: control.value
-                    }
+                    skyTime: {
+                        invalid: control.value,
+                    },
                 };
             }
             return undefined;
@@ -4211,13 +4663,13 @@
                     this.returnFormat = currentFormat;
                 }
                 formatTime = {
-                    'hour': moment__default["default"](time, currentFormat).hour(),
-                    'minute': moment__default["default"](time, currentFormat).minute(),
-                    'meridie': moment__default["default"](time, currentFormat).format('A'),
-                    'timezone': parseInt(moment__default["default"](time, currentFormat).format('Z'), 10),
-                    'iso8601': moment__default["default"](time, currentFormat).toDate(),
-                    'local': moment__default["default"](time, currentFormat).format(currentFormat),
-                    'customFormat': this.returnFormat
+                    hour: moment__default["default"](time, currentFormat).hour(),
+                    minute: moment__default["default"](time, currentFormat).minute(),
+                    meridie: moment__default["default"](time, currentFormat).format('A'),
+                    timezone: parseInt(moment__default["default"](time, currentFormat).format('Z'), 10),
+                    iso8601: moment__default["default"](time, currentFormat).toDate(),
+                    local: moment__default["default"](time, currentFormat).format(currentFormat),
+                    customFormat: this.returnFormat,
                 };
                 return formatTime;
             }
@@ -4233,19 +4685,13 @@
         };
         return SkyTimepickerInputDirective;
     }());
-    SkyTimepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyTimepickerInputDirective, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    SkyTimepickerInputDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyTimepickerInputDirective, decorators: [{
+    SkyTimepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerInputDirective, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SkyTimepickerInputDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerInputDirective, decorators: [{
                 type: i0.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__namespace.Renderer2 }, { type: i0__namespace.ElementRef }, { type: i3__namespace.SkyLibResourcesService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { skyTimepickerInput: [{
                     type: i0.Input
@@ -4327,10 +4773,10 @@
                 if (this.is8601) {
                     hourOffset = 0;
                 }
-                hour = moment__default["default"]({ 'hour': setHour }).add(hourOffset, 'hours').hour();
+                hour = moment__default["default"]({ hour: setHour }).add(hourOffset, 'hours').hour();
                 this.activeTime = moment__default["default"]({
-                    'hour': hour,
-                    'minute': moment__default["default"](this.activeTime).get('minute') + 0
+                    hour: hour,
+                    minute: moment__default["default"](this.activeTime).get('minute') + 0,
                 }).toDate();
                 this.selectedTimeChanged.emit(this.selectedTime);
             },
@@ -4362,8 +4808,8 @@
             },
             set: function (minute) {
                 this.activeTime = moment__default["default"]({
-                    'hour': moment__default["default"](this.activeTime).get('hour') + 0,
-                    'minute': minute
+                    hour: moment__default["default"](this.activeTime).get('hour') + 0,
+                    minute: minute,
                 }).toDate();
                 this.selectedTimeChanged.emit(this.selectedTime);
             },
@@ -4379,8 +4825,9 @@
                     timezone: parseInt(moment__default["default"](this.activeTime).format('Z'), 10),
                     iso8601: this.activeTime,
                     local: moment__default["default"](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;
             },
@@ -4426,7 +4873,7 @@
             if (this.inputBoxHostService) {
                 this.inputBoxHostService.populate({
                     inputTemplate: this.inputTemplateRef,
-                    buttonsTemplate: this.triggerButtonTemplateRef
+                    buttonsTemplate: this.triggerButtonTemplateRef,
                 });
             }
         };
@@ -4458,8 +4905,7 @@
             }
             var 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;
                     }
@@ -4471,12 +4917,11 @@
                     /* 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;
@@ -4531,7 +4976,7 @@
             affixer.placementChange
                 .pipe(operators.takeUntil(this.timepickerUnsubscribe))
                 .subscribe(function (change) {
-                _this.isVisible = (change.placement !== null);
+                _this.isVisible = change.placement !== null;
                 _this.changeDetector.markForCheck();
             });
             affixer.affixTo(this.triggerButtonRef.nativeElement, {
@@ -4539,7 +4984,7 @@
                 enableAutoFit: true,
                 horizontalAlignment: 'right',
                 isSticky: true,
-                placement: 'below'
+                placement: 'below',
             });
             this.affixer = affixer;
         };
@@ -4554,7 +4999,7 @@
             var _this = this;
             var overlay = this.overlayService.create({
                 enableClose: false,
-                enablePointerEvents: false
+                enablePointerEvents: false,
             });
             overlay.backdropClick
                 .pipe(operators.takeUntil(this.timepickerUnsubscribe))
@@ -4601,16 +5046,16 @@
         };
         return SkyTimepickerComponent;
     }());
-    SkyTimepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyTimepickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace$1.SkyInputBoxHostService, optional: true }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyTimepickerComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyTimepickerComponent, decorators: [{
+    SkyTimepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace$1.SkyInputBoxHostService, optional: true }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTimepickerComponent.ɵcmp = i0__namespace.ɵɵ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: i0.ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, 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__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-timepicker',
-                        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",
+                        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"],
                         encapsulation: i0.ViewEncapsulation.None,
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
             }], ctorParameters: function () {
             return [{ type: i1__namespace.SkyAffixService }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.SkyCoreAdapterService }, { type: i1__namespace.SkyOverlayService }, { type: i2__namespace$1.SkyInputBoxHostService, decorators: [{
@@ -4623,29 +5068,29 @@
                 }], timepickerRef: [{
                     type: i0.ViewChild,
                     args: ['timepickerRef', {
-                            read: i0.ElementRef
+                            read: i0.ElementRef,
                         }]
                 }], timepickerTemplateRef: [{
                     type: i0.ViewChild,
                     args: ['timepickerTemplateRef', {
-                            read: i0.TemplateRef
+                            read: i0.TemplateRef,
                         }]
                 }], triggerButtonRef: [{
                     type: i0.ViewChild,
                     args: ['triggerButtonRef', {
-                            read: i0.ElementRef
+                            read: i0.ElementRef,
                         }]
                 }], inputTemplateRef: [{
                     type: i0.ViewChild,
                     args: ['inputTemplateRef', {
                             read: i0.TemplateRef,
-                            static: true
+                            static: true,
                         }]
                 }], triggerButtonTemplateRef: [{
                     type: i0.ViewChild,
                     args: ['triggerButtonTemplateRef', {
                             read: i0.TemplateRef,
-                            static: true
+                            static: true,
                         }]
                 }] } });
 
@@ -4654,45 +5099,37 @@
         }
         return SkyTimepickerModule;
     }());
-    SkyTimepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyTimepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTimepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective,
-            SkyTimepickerComponent], imports: [i3$1.CommonModule,
+    SkyTimepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyTimepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [i5.CommonModule,
             i3.SkyI18nModule,
             i2.SkyIconModule,
             SkyDatetimeResourcesModule,
             i1.SkyAffixModule,
             i1.SkyOverlayModule,
-            i3$2.SkyThemeModule], exports: [SkyTimepickerInputDirective,
-            SkyTimepickerComponent] });
-    SkyTimepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyTimepickerModule, imports: [[
-                i3$1.CommonModule,
+            i3$2.SkyThemeModule], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] });
+    SkyTimepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, imports: [[
+                i5.CommonModule,
                 i3.SkyI18nModule,
                 i2.SkyIconModule,
                 SkyDatetimeResourcesModule,
                 i1.SkyAffixModule,
                 i1.SkyOverlayModule,
-                i3$2.SkyThemeModule
+                i3$2.SkyThemeModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: SkyTimepickerModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [
-                            SkyTimepickerInputDirective,
-                            SkyTimepickerComponent
-                        ],
+                        declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent],
                         imports: [
-                            i3$1.CommonModule,
+                            i5.CommonModule,
                             i3.SkyI18nModule,
                             i2.SkyIconModule,
                             SkyDatetimeResourcesModule,
                             i1.SkyAffixModule,
                             i1.SkyOverlayModule,
-                            i3$2.SkyThemeModule
+                            i3$2.SkyThemeModule,
                         ],
-                        exports: [
-                            SkyTimepickerInputDirective,
-                            SkyTimepickerComponent
-                        ]
+                        exports: [SkyTimepickerInputDirective, SkyTimepickerComponent],
                     }]
             }] });