@skyux/datetime 5.1.1 → 5.1.2

package/bundles/skyux-datetime.umd.js

@@ -64,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;
@@ -96,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;
@@ -135,7 +136,7 @@
                 type: i0.Pipe,
                 args: [{
                         name: 'skyDate',
-                        pure: false
+                        pure: false,
                     }]
             }], ctorParameters: function () { return [{ type: i3__namespace.SkyAppLocaleProvider }]; } });
 
@@ -146,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() {
@@ -169,20 +253,24 @@
     }());
     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: [{
+    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] });
+                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,
+                            },
+                        ],
                     }]
             }] });
 
@@ -194,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;
@@ -269,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]);
         };
@@ -288,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) {
@@ -343,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;
@@ -373,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;
                 }
@@ -388,7 +499,7 @@
             return {
                 month: month,
                 day: day,
-                year: year
+                year: year,
             };
         };
         SkyFuzzyDateService.prototype.getFuzzyDateRange = function (startFuzzyDate, endFuzzyDate) {
@@ -398,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');
@@ -410,7 +524,7 @@
                 years: years,
                 months: months,
                 days: days,
-                valid: valid
+                valid: valid,
             };
         };
         SkyFuzzyDateService.prototype.getCurrentFuzzyDate = function () {
@@ -418,7 +532,7 @@
             return {
                 day: currentDate.date(),
                 month: currentDate.month() + 1,
-                year: currentDate.year()
+                year: currentDate.year(),
             };
         };
         SkyFuzzyDateService.prototype.getMostRecentLeapYear = function () {
@@ -457,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;
@@ -497,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).
@@ -513,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),
             };
         };
         /**
@@ -552,7 +668,7 @@
     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 }]; } });
 
@@ -596,7 +712,7 @@
                 type: i0.Pipe,
                 args: [{
                         name: 'skyFuzzyDate',
-                        pure: false
+                        pure: false,
                     }]
             }], ctorParameters: function () { return [{ type: SkyFuzzyDateService }]; } });
 
@@ -606,36 +722,15 @@
         return SkyDatePipeModule;
     }());
     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
-            ]] });
+    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: [
-                            i5.CommonModule,
-                            SkyDatetimeResourcesModule
-                        ],
-                        exports: [
-                            SkyDatePipe,
-                            SkyFuzzyDatePipe
-                        ]
+                        declarations: [SkyDatePipe, SkyFuzzyDatePipe],
+                        providers: [SkyDatePipe, SkyFuzzyDatePipe],
+                        imports: [i5.CommonModule, SkyDatetimeResourcesModule],
+                        exports: [SkyDatePipe, SkyFuzzyDatePipe],
                     }]
             }] });
 
@@ -826,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);
@@ -888,7 +984,7 @@
                 37: 'left',
                 38: 'up',
                 39: 'right',
-                40: 'down'
+                40: 'down',
             };
             this.ngUnsubscribe = new rxjs.Subject();
         }
@@ -1033,7 +1129,7 @@
                 secondary: isSecondary,
                 uid: id,
                 keyDate: customDateMatch ? customDateMatch.keyDate : undefined,
-                keyDateText: customDateMatch ? customDateMatch.keyDateText : []
+                keyDateText: customDateMatch ? customDateMatch.keyDateText : [],
             };
             return dateObject;
         };
@@ -1074,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();
@@ -1098,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();
             }
@@ -1116,7 +1213,8 @@
             /* 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();
             }
@@ -1129,8 +1227,8 @@
         SkyDatepickerCalendarInnerComponent.prototype.isDisabled = function (date) {
             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);
+                (this.maxDate && this.compare(date, this.maxDate) > 0) ||
+                (customDate && customDate.disabled));
         };
         SkyDatepickerCalendarInnerComponent.prototype.getCustomDate = function (date) {
             if (this.customDates) {
@@ -1142,14 +1240,14 @@
         return SkyDatepickerCalendarInnerComponent;
     }());
     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  <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 });
+    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: { customDates: [{
                     type: i0.Input
@@ -1183,7 +1281,7 @@
     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',
                     }]
             }] });
 
@@ -1216,13 +1314,13 @@
         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\n    [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\"\n  >\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"] }] });
+    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\n    [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\"\n  >\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"]
+                        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
@@ -1321,14 +1419,12 @@
         SkyDayPickerCellComponent.prototype.showTooltip = function () {
             var _this = this;
             /* istanbul ignore else */
-            if (this.hasTooltip &&
-                !this.popoverOpen) {
+            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) {
+                    if (!_this.cancelPopover && _this.activeUid === _this.date.uid) {
                         _this.popoverController.next({ type: i3$1.SkyPopoverMessageType.Open });
                     }
                 }, 500);
@@ -1337,13 +1433,13 @@
         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 *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 *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\n    [date]=\"date\"\n  >\n  </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 });
+    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 *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 *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\n    [date]=\"date\"\n  >\n  </sky-daypicker-button>\n</ng-template>\n",
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush
+                        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
@@ -1362,7 +1458,9 @@
             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;
         }
@@ -1416,9 +1514,7 @@
             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;
@@ -1438,19 +1534,17 @@
             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
+                    endDate: newDateRange.endDate,
                 });
             }
         };
@@ -1473,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;
@@ -1485,8 +1578,11 @@
             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.
@@ -1516,7 +1612,7 @@
                                     label: date.label,
                                     secondary: date.secondary,
                                     selected: date.selected,
-                                    uid: date.uid
+                                    uid: date.uid,
                                 };
                                 row[dateIndex] = newDate;
                             }
@@ -1533,28 +1629,28 @@
             else if ((rangeA && !rangeB) || (!rangeA && rangeB)) {
                 return false;
             }
-            return this.compareDays(rangeA.startDate, rangeB.startDate) === 0 &&
-                this.compareDays(rangeA.endDate, rangeB.endDate) === 0;
+            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
+                    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.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'\"\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      <!-- Wait indicator for async custom date stream -->\n      <sky-wait\n        [isWaiting]=\"isWaiting\"\n      >\n      </sky-wait>\n        <ng-template\n          ngFor\n          [ngForOf]=\"rows\"\n          let-row=\"$implicit\"\n          let-index=\"index\"\n          >\n          <tr role=\"row\">\n            <td *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"] }] });
+    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      <!-- Wait indicator for async custom date stream -->\n      <sky-wait\n        [isWaiting]=\"isWaiting\"\n      >\n      </sky-wait>\n        <ng-template\n          ngFor\n          [ngForOf]=\"rows\"\n          let-row=\"$implicit\"\n          let-index=\"index\"\n          >\n          <tr role=\"row\">\n            <td *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"]
+                        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 }]; }, propDecorators: { customDates: [{
                     type: i0.Input
@@ -1575,7 +1671,7 @@
         SkyMonthPickerComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.datepicker.stepMonth = {
-                years: 1
+                years: 1,
             };
             this.datepicker.setRefreshViewHandler(function () {
                 _this.refreshMonthView();
@@ -1598,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) {
@@ -1636,13 +1730,13 @@
         return SkyMonthPickerComponent;
     }());
     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\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: 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"] }] });
+    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 }]; } });
 
@@ -1667,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();
@@ -1679,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) {
@@ -1709,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.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\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: 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"] }] });
+    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 }]; } });
 
@@ -1780,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)) {
@@ -1798,14 +1897,14 @@
         return SkyDatepickerCalendarComponent;
     }());
     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\n  class=\"sky-datepicker-calendar\"\n>\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\n      tabindex=\"0\"\n    ></sky-monthpicker>\n    <sky-yearpicker\n      tabindex=\"0\"\n    ></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" }] });
+    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\n  class=\"sky-datepicker-calendar\"\n>\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\n      tabindex=\"0\"\n    ></sky-monthpicker>\n    <sky-yearpicker\n      tabindex=\"0\"\n    ></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: { customDates: [{
                     type: i0.Input
@@ -1829,7 +1928,7 @@
                     type: i0.ViewChild,
                     args: [SkyDatepickerCalendarInnerComponent, {
                             read: SkyDatepickerCalendarInnerComponent,
-                            static: true
+                            static: true,
                         }]
                 }] } });
 
@@ -1965,7 +2064,7 @@
             if (this.inputBoxHostService) {
                 this.inputBoxHostService.populate({
                     inputTemplate: this.inputTemplateRef,
-                    buttonsTemplate: this.triggerButtonTemplateRef
+                    buttonsTemplate: this.triggerButtonTemplateRef,
                 });
             }
         };
@@ -2004,7 +2103,7 @@
                 var args = {
                     startDate: event.startDate,
                     endDate: event.endDate,
-                    customDates: undefined
+                    customDates: undefined,
                 };
                 this.calendarDateRangeChange.emit(args);
                 // If consumer has added an observable to the args, watch for incoming custom dates.
@@ -2057,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, {
@@ -2065,7 +2164,7 @@
                 enableAutoFit: true,
                 horizontalAlignment: 'right',
                 isSticky: true,
-                placement: 'below'
+                placement: 'below',
             });
             this.affixer = affixer;
         };
@@ -2081,7 +2180,7 @@
             var overlay = this.overlayService.create({
                 wrapperClass: this.pickerClass,
                 enableClose: false,
-                enablePointerEvents: false
+                enablePointerEvents: false,
             });
             overlay.backdropClick
                 .pipe(operators.takeUntil(this.calendarUnsubscribe))
@@ -2133,14 +2232,14 @@
         return SkyDatepickerComponent;
     }());
     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\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      [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 });
+    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      [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",
+                        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: [{
@@ -2158,29 +2257,29 @@
                 }], 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,
                         }]
                 }] } });
 
@@ -2188,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 () {
@@ -2221,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
@@ -2370,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.)
@@ -2381,7 +2482,7 @@
                     this.notifyUpdatedValue();
                 }
                 else if (dateValue !== this._value || !areDatesEqual) {
-                    this._value = (dateValue || value);
+                    this._value = dateValue || value;
                     this.notifyUpdatedValue();
                 }
                 if (dateValue && isValidDateString) {
@@ -2405,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);
@@ -2434,7 +2536,7 @@
             if (this.control && this.control.parent) {
                 setTimeout(function () {
                     _this.control.setValue(_this.value, {
-                        emitEvent: false
+                        emitEvent: false,
                     });
                     _this.changeDetector.markForCheck();
                 });
@@ -2460,8 +2562,8 @@
             this.onChange(value);
             this.control.setErrors({
                 skyDate: {
-                    invalid: true
-                }
+                    invalid: true,
+                },
             });
         };
         SkyDatepickerInputDirective.prototype.onInputBlur = function () {
@@ -2485,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,
+                    },
                 };
             }
         };
@@ -2605,7 +2703,7 @@
     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.14", ngImport: i0__namespace, type: SkyDatepickerInputDirective, decorators: [{
                 type: i0.Directive,
@@ -2614,8 +2712,8 @@
                         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: [{
@@ -2652,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 () {
@@ -2686,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
@@ -2864,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);
@@ -2900,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);
@@ -2928,7 +3028,7 @@
             if (this.control && this.control.parent) {
                 setTimeout(function () {
                     _this.control.setValue(_this.value, {
-                        emitEvent: false
+                        emitEvent: false,
                     });
                     _this.changeDetector.markForCheck();
                 });
@@ -2975,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) {
@@ -2993,9 +3093,9 @@
                     fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.maxDate);
                     if (!fuzzyDateRange.valid) {
                         validationError = {
-                            'skyFuzzyDate': {
-                                maxDate: value
-                            }
+                            skyFuzzyDate: {
+                                maxDate: value,
+                            },
                         };
                     }
                 }
@@ -3003,9 +3103,9 @@
                     fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(this.minDate, fuzzyDate);
                     if (!fuzzyDateRange.valid) {
                         validationError = {
-                            'skyFuzzyDate': {
-                                minDate: value
-                            }
+                            skyFuzzyDate: {
+                                minDate: value,
+                            },
                         };
                     }
                 }
@@ -3013,9 +3113,9 @@
                     fuzzyDateRange = this.fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.fuzzyDateService.getCurrentFuzzyDate());
                     if (!fuzzyDateRange.valid) {
                         validationError = {
-                            'skyFuzzyDate': {
-                                futureDisabled: value
-                            }
+                            skyFuzzyDate: {
+                                futureDisabled: value,
+                            },
                         };
                     }
                 }
@@ -3077,20 +3177,18 @@
         };
         /* 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.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.14", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, decorators: [{
                 type: i0.Directive,
@@ -3098,8 +3196,8 @@
                         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: [{
@@ -3162,9 +3260,7 @@
             SkyDatepickerComponent,
             SkyDatepickerInputDirective,
             SkyFuzzyDatepickerInputDirective] });
-    SkyDatepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, providers: [
-            SkyDatepickerService
-        ], imports: [[
+    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,
@@ -3209,9 +3305,7 @@
                             SkyDatepickerInputDirective,
                             SkyFuzzyDatepickerInputDirective,
                         ],
-                        providers: [
-                            SkyDatepickerService
-                        ]
+                        providers: [SkyDatepickerService],
                     }]
             }] });
 
@@ -3250,7 +3344,7 @@
             return {
                 calculatorId: this.calculatorId,
                 startDate: startDate,
-                endDate: endDate
+                endDate: endDate,
             };
         };
         /**
@@ -3288,7 +3382,7 @@
                 var today = new Date();
                 return {
                     startDate: today,
-                    endDate: today
+                    endDate: today,
                 };
             },
             enumerable: false,
@@ -3300,7 +3394,7 @@
                 tomorrow.setDate(tomorrow.getDate() + 1);
                 return {
                     startDate: tomorrow,
-                    endDate: tomorrow
+                    endDate: tomorrow,
                 };
             },
             enumerable: false,
@@ -3312,7 +3406,7 @@
                 yesterday.setDate(yesterday.getDate() - 1);
                 return {
                     startDate: yesterday,
-                    endDate: yesterday
+                    endDate: yesterday,
                 };
             },
             enumerable: false,
@@ -3329,7 +3423,7 @@
                 endDate.setDate(endDate.getDate() - endDate.getDay() + 6);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3346,7 +3440,7 @@
                 endDate.setDate(endDate.getDate() - endDate.getDay() + 13);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3360,7 +3454,7 @@
                 endDate.setDate(endDate.getDate() - endDate.getDay() - 1);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3375,7 +3469,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3392,7 +3486,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3410,7 +3504,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3428,7 +3522,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3446,7 +3540,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3466,7 +3560,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3484,7 +3578,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3503,7 +3597,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3521,7 +3615,7 @@
                 endDate.setDate(0);
                 return {
                     startDate: startDate,
-                    endDate: endDate
+                    endDate: endDate,
                 };
             },
             enumerable: false,
@@ -3592,7 +3686,7 @@
             }
             return {
                 startDate: startDate,
-                endDate: endDate
+                endDate: endDate,
             };
         };
         return SkyDateRangeRelativeValue;
@@ -3603,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,
@@ -3627,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; },
+        },
     ];
 
     /**
@@ -3782,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);
                 });
             });
@@ -3805,7 +3897,7 @@
                     getValue: defaultConfig.getValue,
                     validate: defaultConfig.validate,
                     shortDescription: '',
-                    type: defaultConfig.type
+                    type: defaultConfig.type,
                 };
                 tasks.push(_this.resourcesService
                     .getString(defaultConfig.shortDescriptionResourceKey)
@@ -3841,12 +3933,12 @@
     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;
@@ -3890,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 */
@@ -3904,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,
@@ -3926,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.
@@ -4044,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;
@@ -4074,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) {
@@ -4137,8 +4229,8 @@
                 errors = {
                     skyDateRange: {
                         calculatorId: idControl.value,
-                        errors: result
-                    }
+                        errors: result,
+                    },
                 };
             }
             else {
@@ -4189,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();
@@ -4224,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 () {
@@ -4233,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) {
@@ -4276,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 () {
@@ -4298,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.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"], 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 });
+            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: [{
@@ -4357,14 +4449,12 @@
                 i3.SkyI18nModule,
                 SkyDatepickerModule,
                 SkyDatetimeResourcesModule,
-                i2$1.SkyInputBoxModule
+                i2$1.SkyInputBoxModule,
             ]] });
     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: [
                             i5.CommonModule,
                             i2$2.FormsModule,
@@ -4372,12 +4462,10 @@
                             i3.SkyI18nModule,
                             SkyDatepickerModule,
                             SkyDatetimeResourcesModule,
-                            i2$1.SkyInputBoxModule
+                            i2$1.SkyInputBoxModule,
                         ],
-                        exports: [
-                            SkyDateRangePickerComponent
-                        ],
-                        providers: [SkyDateRangeService]
+                        exports: [SkyDateRangePickerComponent],
+                        providers: [SkyDateRangeService],
                     }]
             }] });
 
@@ -4385,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 () {
@@ -4473,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);
                 });
@@ -4491,7 +4580,7 @@
             /* istanbul ignore else */
             if (this.control && this.control.parent) {
                 this.control.setValue(this.modelValue, {
-                    emitEvent: false
+                    emitEvent: false,
                 });
                 this.changeDetector.markForCheck();
             }
@@ -4510,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;
         };
@@ -4530,9 +4625,9 @@
             /* istanbul ignore next */
             if (value.local === 'Invalid date') {
                 return {
-                    'skyTime': {
-                        invalid: control.value
-                    }
+                    skyTime: {
+                        invalid: control.value,
+                    },
                 };
             }
             return undefined;
@@ -4568,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;
             }
@@ -4591,18 +4686,12 @@
         return SkyTimepickerInputDirective;
     }());
     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 });
+    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
@@ -4684,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);
             },
@@ -4719,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);
             },
@@ -4736,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;
             },
@@ -4783,7 +4873,7 @@
             if (this.inputBoxHostService) {
                 this.inputBoxHostService.populate({
                     inputTemplate: this.inputTemplateRef,
-                    buttonsTemplate: this.triggerButtonTemplateRef
+                    buttonsTemplate: this.triggerButtonTemplateRef,
                 });
             }
         };
@@ -4815,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;
                     }
@@ -4828,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;
@@ -4888,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, {
@@ -4896,7 +4984,7 @@
                 enableAutoFit: true,
                 horizontalAlignment: 'right',
                 isSticky: true,
-                placement: 'below'
+                placement: 'below',
             });
             this.affixer = affixer;
         };
@@ -4911,7 +4999,7 @@
             var _this = this;
             var overlay = this.overlayService.create({
                 enableClose: false,
-                enablePointerEvents: false
+                enablePointerEvents: false,
             });
             overlay.backdropClick
                 .pipe(operators.takeUntil(this.timepickerUnsubscribe))
@@ -4959,15 +5047,15 @@
         return SkyTimepickerComponent;
     }());
     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\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: 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 });
+    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: [{
@@ -4980,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,
                         }]
                 }] } });
 
@@ -5012,15 +5100,13 @@
         return SkyTimepickerModule;
     }());
     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,
+    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] });
+            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,
@@ -5028,15 +5114,12 @@
                 SkyDatetimeResourcesModule,
                 i1.SkyAffixModule,
                 i1.SkyOverlayModule,
-                i3$2.SkyThemeModule
+                i3$2.SkyThemeModule,
             ]] });
     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: [
                             i5.CommonModule,
                             i3.SkyI18nModule,
@@ -5044,12 +5127,9 @@
                             SkyDatetimeResourcesModule,
                             i1.SkyAffixModule,
                             i1.SkyOverlayModule,
-                            i3$2.SkyThemeModule
+                            i3$2.SkyThemeModule,
                         ],
-                        exports: [
-                            SkyTimepickerInputDirective,
-                            SkyTimepickerComponent
-                        ]
+                        exports: [SkyTimepickerInputDirective, SkyTimepickerComponent],
                     }]
             }] });