@skyux/datetime 5.0.0 → 5.1.0

package/bundles/skyux-datetime.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@skyux/i18n'), require('moment'), require('@angular/common'), require('@angular/forms'), require('@skyux/forms'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/theme')) :
-    typeof define === 'function' && define.amd ? define('@skyux/datetime', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@skyux/i18n', 'moment', '@angular/common', '@angular/forms', '@skyux/forms', '@skyux/core', '@skyux/indicators', '@skyux/theme'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.datetime = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.i3, global.moment, global.ng.common, global.ng.forms, global.i2$1, global.i1, global.i2, global.i3$2));
-}(this, (function (exports, i0, rxjs, operators, i3, moment, i3$1, i2$2, i2$1, i1, i2, i3$2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@skyux/i18n'), require('moment'), require('@angular/common'), require('@angular/forms'), require('@skyux/forms'), require('@skyux/core'), require('@skyux/indicators'), require('@skyux/theme'), require('@skyux/popovers')) :
+    typeof define === 'function' && define.amd ? define('@skyux/datetime', ['exports', '@angular/core', 'rxjs', 'rxjs/operators', '@skyux/i18n', 'moment', '@angular/common', '@angular/forms', '@skyux/forms', '@skyux/core', '@skyux/indicators', '@skyux/theme', '@skyux/popovers'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.skyux = global.skyux || {}, global.skyux.datetime = {}), global.ng.core, global.rxjs, global.rxjs.operators, global.i3, global.moment, global.ng.common, global.ng.forms, global.i2$1, global.i1, global.i2, global.i3$2, global.i3$1));
+})(this, (function (exports, i0, rxjs, operators, i3, moment, i5, i2$2, i2$1, i1, i2, i3$2, i3$1) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,26 +15,25 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
 
     // This class is mostly ported from the Angular 4.x DatePipe in order to maintain the old
     var SkyDateFormatUtility = /** @class */ (function () {
@@ -53,7 +52,7 @@
                 handleInvalidDate(value);
             }
             // Use moment to avoid inconsistencies between browsers interpreting the value differently.
-            var momentDate = moment__default['default'](value);
+            var momentDate = moment__default["default"](value);
             if (momentDate.isValid()) {
                 date = momentDate.toDate();
             }
@@ -130,9 +129,9 @@
         };
         return SkyDatePipe;
     }());
-    SkyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatePipe, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    SkyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatePipe, name: "skyDate", pure: false });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatePipe, decorators: [{
+    SkyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipe, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SkyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipe, name: "skyDate", pure: false });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipe, decorators: [{
                 type: i0.Pipe,
                 args: [{
                         name: 'skyDate',
@@ -168,14 +167,14 @@
         }
         return SkyDatetimeResourcesModule;
     }());
-    SkyDatetimeResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyDatetimeResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, exports: [i3.SkyI18nModule] });
-    SkyDatetimeResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, providers: [{
+    SkyDatetimeResourcesModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyDatetimeResourcesModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, exports: [i3.SkyI18nModule] });
+    SkyDatetimeResourcesModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, providers: [{
                 provide: i3.SKY_LIB_RESOURCES_PROVIDERS,
                 useClass: SkyDatetimeResourcesProvider,
                 multi: true
             }], imports: [i3.SkyI18nModule] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatetimeResourcesModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         exports: [i3.SkyI18nModule],
@@ -217,7 +216,7 @@
          * If not provided, the locale will be taken from the browser's default locale.
          */
         SkyFuzzyDateService.prototype.getLocaleShortFormat = function (locale) {
-            return moment__default['default'].localeData(locale || this.currentLocale).longDateFormat('L');
+            return moment__default["default"].localeData(locale || this.currentLocale).longDateFormat('L');
         };
         /**
          * Formats a fuzzy date by using the provided format and locale strings.
@@ -272,7 +271,7 @@
             var year = fuzzyDate.year || this.getDefaultYear(fuzzyDate);
             var month = fuzzyDate.month > 0 ? (fuzzyDate.month - 1) : 0;
             var day = fuzzyDate.day || 1;
-            return moment__default['default']([year, month, day]);
+            return moment__default["default"]([year, month, day]);
         };
         /**
          * Gets a string instance of a fuzzy date.
@@ -381,7 +380,7 @@
                 }
             }
             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;
                 }
@@ -415,7 +414,7 @@
             };
         };
         SkyFuzzyDateService.prototype.getCurrentFuzzyDate = function () {
-            var currentDate = moment__default['default']();
+            var currentDate = moment__default["default"]();
             return {
                 day: currentDate.date(),
                 month: currentDate.month() + 1,
@@ -465,10 +464,10 @@
             var monthAsNumber = parseInt(month, 10);
             // If the month component is a string ("Janaury"), we check to see if it is a valid month
             if (isNaN(monthAsNumber)) {
-                if (!moment__default['default'](month, 'MMMM').isValid()) {
+                if (!moment__default["default"](month, 'MMMM').isValid()) {
                     return;
                 }
-                returnValue = parseInt(moment__default['default']().month(month).format('M'), 10);
+                returnValue = parseInt(moment__default["default"]().month(month).format('M'), 10);
             }
             else {
                 returnValue = monthAsNumber;
@@ -548,9 +547,9 @@
         };
         return SkyFuzzyDateService;
     }());
-    SkyFuzzyDateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyFuzzyDateService, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyFuzzyDateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyFuzzyDateService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyFuzzyDateService, decorators: [{
+    SkyFuzzyDateService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDateService, deps: [{ token: i3__namespace.SkyAppLocaleProvider }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyFuzzyDateService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDateService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDateService, decorators: [{
                 type: i0.Injectable,
                 args: [{
                         providedIn: 'root'
@@ -591,9 +590,9 @@
         };
         return SkyFuzzyDatePipe;
     }());
-    SkyFuzzyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    SkyFuzzyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyFuzzyDatePipe, decorators: [{
+    SkyFuzzyDatePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    SkyFuzzyDatePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatePipe, decorators: [{
                 type: i0.Pipe,
                 args: [{
                         name: 'skyFuzzyDate',
@@ -606,19 +605,19 @@
         }
         return SkyDatePipeModule;
     }());
-    SkyDatePipeModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatePipeModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyDatePipeModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatePipeModule, declarations: [SkyDatePipe,
-            SkyFuzzyDatePipe], imports: [i3$1.CommonModule,
+    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.7", ngImport: i0__namespace, type: SkyDatePipeModule, providers: [
+    SkyDatePipeModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipeModule, providers: [
             SkyDatePipe,
             SkyFuzzyDatePipe
         ], imports: [[
-                i3$1.CommonModule,
+                i5.CommonModule,
                 SkyDatetimeResourcesModule
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatePipeModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatePipeModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
@@ -630,7 +629,7 @@
                             SkyFuzzyDatePipe
                         ],
                         imports: [
-                            i3$1.CommonModule,
+                            i5.CommonModule,
                             SkyDatetimeResourcesModule
                         ],
                         exports: [
@@ -807,9 +806,9 @@
         };
         return SkyDatepickerAdapterService;
     }());
-    SkyDatepickerAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerAdapterService, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyDatepickerAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerAdapterService });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerAdapterService, decorators: [{
+    SkyDatepickerAdapterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerAdapterService, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyDatepickerAdapterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerAdapterService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerAdapterService, decorators: [{
                 type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }]; } });
 
@@ -820,25 +819,25 @@
          * Sets moment's global locale.
          */
         SkyDateFormatter.setLocale = function (locale) {
-            moment__default['default'].locale(locale || SkyDateFormatter.defaultLocale);
+            moment__default["default"].locale(locale || SkyDateFormatter.defaultLocale);
         };
         /**
          * Returns the preferred short date format for the current locale.
          */
         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);
+            return moment__default["default"](date.getTime()).format(format);
         };
         SkyDateFormatter.prototype.getDateFromString = function (dateString, format, 
         /* istanbul ignore next */
         strict) {
             if (strict === void 0) { strict = false; }
-            var momentValue = moment__default['default'](dateString, format, strict);
+            var momentValue = moment__default["default"](dateString, format, strict);
             if (!momentValue.isValid()) {
-                momentValue = moment__default['default'](dateString, 'YYYY-MM-DDThh:mm:ss.SZ', strict);
+                momentValue = moment__default["default"](dateString, 'YYYY-MM-DDThh:mm:ss.SZ', strict);
             }
             return momentValue.toDate();
         };
@@ -891,6 +890,7 @@
                 39: 'right',
                 40: 'down'
             };
+            this.ngUnsubscribe = new rxjs.Subject();
         }
         Object.defineProperty(SkyDatepickerCalendarInnerComponent.prototype, "selectedDate", {
             get: function () {
@@ -916,6 +916,10 @@
         SkyDatepickerCalendarInnerComponent.prototype.ngOnChanges = function (changes) {
             this.refreshView();
         };
+        SkyDatepickerCalendarInnerComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         SkyDatepickerCalendarInnerComponent.prototype.setCompareHandler = function (handler, type) {
             if (type === 'day') {
                 this.compareHandlerDay = handler;
@@ -1019,6 +1023,7 @@
             }
         };
         SkyDatepickerCalendarInnerComponent.prototype.createDateObject = function (date, format, isSecondary, id) {
+            var customDateMatch = this.getCustomDate(date);
             var dateObject = {
                 date: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
                 label: this.dateFilter(date, format),
@@ -1026,7 +1031,9 @@
                 disabled: this.isDisabled(date),
                 current: this.compare(date, new Date()) === 0,
                 secondary: isSecondary,
-                uid: id
+                uid: id,
+                keyDate: customDateMatch ? customDateMatch.keyDate : undefined,
+                keyDateText: customDateMatch ? customDateMatch.keyDateText : []
             };
             return dateObject;
         };
@@ -1114,23 +1121,39 @@
                 this.refreshView();
             }
         };
+        /**
+         * Date is disabled if it meets any of these criteria:
+         * 1. Date falls outside the min or max dates set by the SkyDatepickerConfigService.
+         * 2. Date is marked as disabled in the customDates array.
+         */
         SkyDatepickerCalendarInnerComponent.prototype.isDisabled = function (date) {
-            return ((this.minDate && this.compare(date, this.minDate) < 0)
-                || (this.maxDate && this.compare(date, this.maxDate) > 0));
+            var customDate = this.getCustomDate(date);
+            return ((this.minDate && this.compare(date, this.minDate) < 0) ||
+                (this.maxDate && this.compare(date, this.maxDate) > 0)) ||
+                (customDate && customDate.disabled);
+        };
+        SkyDatepickerCalendarInnerComponent.prototype.getCustomDate = function (date) {
+            if (this.customDates) {
+                return this.customDates.find(function (customDate) {
+                    return customDate.date.getTime() === date.getTime();
+                });
+            }
         };
         return SkyDatepickerCalendarInnerComponent;
     }());
-    SkyDatepickerCalendarInnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    SkyDatepickerCalendarInnerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: { startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  *ngIf=\"datepickerMode\"\n  class=\"sky-datepicker-calendar-inner\"\n  (keydown)=\"onKeydown($event)\">\n  <ng-content></ng-content>\n</div>\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-chevron-modern{display:none}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner:focus-within{border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron-default{display:none}.sky-theme-modern .sky-datepicker-chevron-modern{display:inline;font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerCalendarInnerComponent, decorators: [{
+    SkyDatepickerCalendarInnerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDatepickerCalendarInnerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  *ngIf=\"datepickerMode\"\n  class=\"sky-datepicker-calendar-inner\"\n  (keydown)=\"onKeydown($event)\">\n  <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',
-                        templateUrl: './datepicker-calendar-inner.component.html',
-                        styleUrls: ['./datepicker-calendar-inner.component.scss'],
+                        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"],
                         encapsulation: i0.ViewEncapsulation.None
                     }]
-            }], propDecorators: { startingDay: [{
+            }], propDecorators: { customDates: [{
+                    type: i0.Input
+                }], startingDay: [{
                     type: i0.Input
                 }], minDate: [{
                     type: i0.Input
@@ -1155,29 +1178,208 @@
         }
         return SkyDatepickerConfigService;
     }());
-    SkyDatepickerConfigService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerConfigService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyDatepickerConfigService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerConfigService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerConfigService, decorators: [{
+    SkyDatepickerConfigService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerConfigService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyDatepickerConfigService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerConfigService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerConfigService, decorators: [{
                 type: i0.Injectable,
                 args: [{
                         providedIn: 'root'
                     }]
             }] });
 
+    /**
+     * @internal
+     */
+    var SkyDatepickerService = /** @class */ (function () {
+        function SkyDatepickerService() {
+            /**
+             * Specifies if a key date popover is currently displayed.
+             * Useful for communicating across all daypicker siblings when a popover is displayed.
+             */
+            this.keyDatePopoverStream = new rxjs.Subject();
+        }
+        return SkyDatepickerService;
+    }());
+    SkyDatepickerService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyDatepickerService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerService, decorators: [{
+                type: i0.Injectable
+            }] });
+
+    /**
+     * @internal
+     */
+    var SkyDayPickerButtonComponent = /** @class */ (function () {
+        function SkyDayPickerButtonComponent(datepicker) {
+            this.datepicker = datepicker;
+        }
+        return SkyDayPickerButtonComponent;
+    }());
+    SkyDayPickerButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDayPickerButtonComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0__namespace, template: "<button\n  class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n  tabindex=\"-1\"\n  type=\"button\"\n  [disabled]=\"date.disabled\"\n  [ngClass]=\"{\n      'sky-datepicker-btn-selected': date.selected,\n      'sky-btn-disabled': date.disabled,\n      'sky-btn-active': datepicker.isActive(date),\n      'sky-datepicker-btn-disabled': date.disabled,\n      'sky-datepicker-btn-key-date': date.keyDate\n    }\"\n  (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n>\n  <span\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"] }] });
+    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"]
+                    }]
+            }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { date: [{
+                    type: i0.Input
+                }] } });
+
+    /**
+     * @internal
+     */
+    var SkyDayPickerCellComponent = /** @class */ (function () {
+        function SkyDayPickerCellComponent(datepicker, datepickerService) {
+            this.datepicker = datepicker;
+            this.datepickerService = datepickerService;
+            this.hasTooltip = false;
+            this.popoverController = new rxjs.Subject();
+            this.activeUid = '';
+            this.cancelPopover = false;
+            this.popoverOpen = false;
+            this.ngUnsubscribe = new rxjs.Subject();
+        }
+        SkyDayPickerCellComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.hasTooltip =
+                this.date.keyDate &&
+                    this.date.keyDateText &&
+                    this.date.keyDateText.length > 0 &&
+                    this.date.keyDateText[0].length > 0;
+            // show the tooltip if this is the active date and is not the
+            // initial active date (activeDateHasChanged)
+            if (this.datepicker.isActive(this.date) &&
+                this.activeDateHasChanged &&
+                this.hasTooltip) {
+                this.activeUid = this.date.uid;
+                this.showTooltip();
+            }
+            if (this.hasTooltip) {
+                this.datepickerService.keyDatePopoverStream
+                    .pipe(operators.takeUntil(this.ngUnsubscribe))
+                    .subscribe(function (date) {
+                    if (date) {
+                        _this.activeUid = date.uid;
+                    }
+                    else {
+                        _this.activeUid = '';
+                    }
+                    // If this day has an open popover and they have moved off of the day close the popover.
+                    if (_this.date.uid !== _this.activeUid) {
+                        _this.hideTooltip();
+                    }
+                });
+            }
+        };
+        SkyDayPickerCellComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
+        SkyDayPickerCellComponent.prototype.onDayMouseenter = function () {
+            this.cancelPopover = false;
+            if (this.hasTooltip) {
+                this.showTooltip();
+                this.datepickerService.keyDatePopoverStream.next(this.date);
+            }
+        };
+        SkyDayPickerCellComponent.prototype.onDayMouseleave = function () {
+            this.cancelPopover = true;
+            if (this.hasTooltip) {
+                this.hideTooltip();
+            }
+            this.datepickerService.keyDatePopoverStream.next(undefined);
+        };
+        SkyDayPickerCellComponent.prototype.onPopoverClosed = function () {
+            this.popoverOpen = false;
+        };
+        SkyDayPickerCellComponent.prototype.onPopoverOpened = function () {
+            this.popoverOpen = true;
+            /* istanbul ignore else */
+            if (this.cancelPopover) {
+                // If the popover gets opened just as a mouseout event happens, close it.
+                this.hideTooltip();
+                this.cancelPopover = false;
+            }
+        };
+        SkyDayPickerCellComponent.prototype.getKeyDateLabel = function () {
+            if (this.hasTooltip) {
+                return this.date.keyDateText.join(', ');
+            }
+            else {
+                return '';
+            }
+        };
+        SkyDayPickerCellComponent.prototype.hideTooltip = function () {
+            /* istanbul ignore else */
+            if (this.popoverOpen) {
+                this.popoverController.next({ type: i3$1.SkyPopoverMessageType.Close });
+            }
+        };
+        SkyDayPickerCellComponent.prototype.showTooltip = function () {
+            var _this = this;
+            /* istanbul ignore else */
+            if (this.hasTooltip &&
+                !this.popoverOpen) {
+                /**
+                 * Delay 1/2 second before opening the popover as long as mouse hasn't moved off the date.
+                 */
+                setTimeout(function () {
+                    if (!_this.cancelPopover &&
+                        _this.activeUid === _this.date.uid) {
+                        _this.popoverController.next({ type: i3$1.SkyPopoverMessageType.Open });
+                    }
+                }, 500);
+            }
+        };
+        return SkyDayPickerCellComponent;
+    }());
+    SkyDayPickerCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDayPickerCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: "activeDateHasChanged", date: "date" }, ngImport: i0__namespace, template: "<div *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 });
+    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
+                    }]
+            }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerService }]; }, propDecorators: { activeDateHasChanged: [{
+                    type: i0.Input
+                }], date: [{
+                    type: i0.Input
+                }] } });
+
     /**
      * @internal
      */
     var SkyDayPickerComponent = /** @class */ (function () {
         function SkyDayPickerComponent(datepicker) {
+            this.calendarDateRangeChange = new i0.EventEmitter();
+            this.isWaiting = false;
+            this.activeDateHasChanged = false;
             this.labels = [];
             this.rows = [];
             this.weekNumbers = [];
             this.daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+            this.ngUnsubscribe = new rxjs.Subject();
             this.datepicker = datepicker;
         }
+        Object.defineProperty(SkyDayPickerComponent.prototype, "customDates", {
+            set: function (value) {
+                /* istanbul ignore else */
+                if (value) {
+                    this.applyCustomDates(value, this.rows);
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
         SkyDayPickerComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.datepicker.stepDay = { months: 1 };
+            this.initialDate = this.datepicker.activeDate.getDate();
             this.datepicker.setRefreshViewHandler(function () {
                 _this.refreshDayView();
             }, 'day');
@@ -1187,6 +1389,10 @@
             }, 'day');
             this.datepicker.refreshView();
         };
+        SkyDayPickerComponent.prototype.ngOnDestroy = function () {
+            this.ngUnsubscribe.next();
+            this.ngUnsubscribe.complete();
+        };
         SkyDayPickerComponent.prototype.getDates = function (startDate, n) {
             var dates = new Array(n);
             var current = new Date(startDate.getTime());
@@ -1214,6 +1420,9 @@
                 ? 7 - difference
                 : -difference;
             var firstDate = new Date(firstDayOfMonth.getTime());
+            if (this.datepicker.activeDate.getDate() !== this.initialDate) {
+                this.activeDateHasChanged = true;
+            }
             /* istanbul ignore else */
             /* sanity check */
             if (numDisplayedFromPreviousMonth > 0) {
@@ -1235,7 +1444,15 @@
             }
             this.title =
                 this.datepicker.dateFilter(this.datepicker.activeDate, this.datepicker.formatDayTitle);
+            var oldDateRange = this.getDateRange(this.rows);
             this.rows = this.datepicker.createCalendarRows(pickerDates, 7);
+            var newDateRange = this.getDateRange(this.rows);
+            if (!this.dateRangeRowsAreEqual(oldDateRange, newDateRange)) {
+                this.calendarDateRangeChange.next({
+                    startDate: newDateRange.startDate,
+                    endDate: newDateRange.endDate
+                });
+            }
         };
         SkyDayPickerComponent.prototype.keydownDays = function (key, event) {
             var date = this.datepicker.activeDate.getDate();
@@ -1271,18 +1488,81 @@
             return month === 1 && year % 4 === 0 &&
                 (year % 400 === 0 || year % 100 !== 0) ? 29 : this.daysInMonth[month];
         };
+        /**
+         * Applies custom date properties to the existing dates displayed in the calendar.
+         */
+        SkyDayPickerComponent.prototype.applyCustomDates = function (customDates, dateRows) {
+            var date;
+            var newDate;
+            var dateIndex;
+            /* istanbul ignore else */
+            if (customDates && dateRows) {
+                customDates.forEach(function (customDate) {
+                    dateIndex = -1;
+                    dateRows.forEach(function (row) {
+                        if (dateIndex === -1) {
+                            dateIndex = row.findIndex(function (d) {
+                                return d.date.getTime() === customDate.date.getTime();
+                            });
+                            if (dateIndex > -1) {
+                                date = row[dateIndex];
+                                // Replace the date with a new instance so the display gets updated.
+                                newDate = {
+                                    current: date.current,
+                                    date: date.date,
+                                    disabled: !!date.disabled || !!customDate.disabled,
+                                    keyDate: !!customDate.keyDate || !!date.keyDate,
+                                    keyDateText: customDate.keyDateText || date.keyDateText,
+                                    label: date.label,
+                                    secondary: date.secondary,
+                                    selected: date.selected,
+                                    uid: date.uid
+                                };
+                                row[dateIndex] = newDate;
+                            }
+                        }
+                    });
+                });
+            }
+        };
+        SkyDayPickerComponent.prototype.dateRangeRowsAreEqual = function (rangeA, rangeB) {
+            /* istanbul ignore if */
+            if (!rangeA && !rangeB) {
+                return true;
+            }
+            else if ((rangeA && !rangeB) || (!rangeA && rangeB)) {
+                return false;
+            }
+            return this.compareDays(rangeA.startDate, rangeB.startDate) === 0 &&
+                this.compareDays(rangeA.endDate, rangeB.endDate) === 0;
+        };
+        SkyDayPickerComponent.prototype.getDateRange = function (rows) {
+            /* istanbul ignore else */
+            if (rows && rows.length > 0) {
+                return {
+                    startDate: rows[0][0].date,
+                    endDate: rows[rows.length - 1][rows[rows.length - 1].length - 1].date
+                };
+            }
+        };
         return SkyDayPickerComponent;
     }());
-    SkyDayPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: SkyDayPickerComponent, selector: "sky-daypicker", ngImport: i0__namespace, template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\"\n  class=\"sky-daypicker-wrapper\"\n>\n  <table\n    class=\"sky-daypicker-table\"\n    role=\"grid\"\n    [attr.aria-labelledby]=\"datepicker.datepickerId+'-title'\"\n  >\n    <thead>\n      <tr>\n        <th\n          class=\"sky-datepicker-header-left\"\n          scope=\"col\"\n        >\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n            (click)=\"datepicker.moveCalendar($event, -1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-left\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-left\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n        <th\n          scope=\"col\"\n          [attr.colspan]=\"5\"\n        >\n          <button\n            [id]=\"datepicker.datepickerId + '-title'\"\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n            (click)=\"datepicker.toggleModeCalendar($event)\"\n            [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n            [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            >\n            <strong>{{title}}</strong>\n          </button>\n        </th>\n        <th\n          class=\"sky-datepicker-header-right\"\n          scope=\"col\"\n        >\n          <button\n            type=\"button\"\n            class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n            (click)=\"datepicker.moveCalendar($event, 1)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\"\n            >\n            <sky-icon\n              class=\"sky-datepicker-chevron-default\"\n              icon=\"chevron-right\"\n            ></sky-icon>\n            <sky-icon\n              class=\"sky-datepicker-chevron-modern\"\n              icon=\"chevron-right\"\n              iconType=\"skyux\"\n            ></sky-icon>\n          </button>\n        </th>\n      </tr>\n      <tr>\n        <th\n          scope=\"col\"\n          *ngFor=\"let label of labels\"\n          class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{label.abbr}}</b>\n          </small>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <ng-template\n        ngFor\n        [ngForOf]=\"rows\"\n        let-row=\"$implicit\"\n        let-index=\"index\"\n        >\n        <tr role=\"row\">\n          <td\n            *ngFor=\"let date of row\"\n            class=\"sky-datepicker-center\"\n            role=\"gridcell\"\n            [id]=\"date.uid\"\n            >\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n              [ngClass]=\"{ 'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n              tabindex=\"-1\"\n              >\n              <span\n                [ngClass]=\"{'sky-datepicker-secondary': date.secondary }\"\n                >{{date.label}}</span>\n            </button>\n          </td>\n        </tr>\n      </ng-template>\n    </tbody>\n  </table>\n</div>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDayPickerComponent, decorators: [{
+    SkyDayPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDayPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0__namespace, template: "<div *ngIf=\"datepicker.datepickerMode === 'day'\"\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"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDayPickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-daypicker',
-                        templateUrl: 'daypicker.component.html',
-                        styleUrls: ['./daypicker.component.scss']
+                        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"]
                     }]
-            }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
+            }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; }, propDecorators: { customDates: [{
+                    type: i0.Input
+                }], calendarDateRangeChange: [{
+                    type: i0.Output
+                }], isWaiting: [{
+                    type: i0.Input
+                }] } });
 
     /**
      * @internal
@@ -1355,14 +1635,14 @@
         };
         return SkyMonthPickerComponent;
     }());
-    SkyMonthPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0__namespace, template: "<table *ngIf=\"datepicker.datepickerMode==='month'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th\n        class=\"sky-datepicker-header-left\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button></th>\n      <th [attr.colspan]=\"((datepicker.monthColLimit - 2) <= 0) ? 1 : datepicker.monthColLimit - 2\">\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === maxMode\"\n          [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === maxMode}\"\n          tabindex=\"-1\"\n          >\n          <strong>{{title}}</strong>\n        </button>\n      </th>\n      <th\n        class=\"sky-datepicker-header-right\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td\n        *ngFor=\"let date of row\"\n        class=\"text-center\"\n        role=\"gridcell\"\n        id=\"{{date.uid}}\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n          >\n          <span [ngClass]=\"{'sky-datepicker-current': date.current}\">{{date.label}}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyMonthPickerComponent, decorators: [{
+    SkyMonthPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyMonthPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0__namespace, template: "<table *ngIf=\"datepicker.datepickerMode==='month'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th\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"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyMonthPickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-monthpicker',
-                        templateUrl: 'monthpicker.component.html',
-                        styleUrls: ['./monthpicker.component.scss']
+                        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"]
                     }]
             }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
 
@@ -1436,14 +1716,14 @@
         };
         return SkyYearPickerComponent;
     }());
-    SkyYearPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0__namespace, template: "<table *ngIf=\"datepicker.datepickerMode==='year'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th\n        class=\"sky-datepicker-header-left\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          (click)=\"datepicker.moveCalendar($event, -1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-left\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-left\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n      <th [attr.colspan]=\"((datepicker.yearColLimit - 2) <= 0) ? 1 : datepicker.yearColLimit - 2\">\n        <button\n          [id]=\"datepicker.datepickerId + '-title'\"\n          role=\"heading\"\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          (click)=\"datepicker.toggleModeCalendar($event)\"\n          [disabled]=\"datepicker.datepickerMode === datepicker.maxMode\"\n          [ngClass]=\"{'sky-btn-disabled': datepicker.datepickerMode === datepicker.maxMode}\"\n          tabindex=\"-1\"\n          >\n          <strong>{{title}}</strong>\n        </button>\n      </th>\n      <th\n        class=\"sky-datepicker-header-right\"\n      >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          (click)=\"datepicker.moveCalendar($event, 1)\"\n          tabindex=\"-1\"\n          >\n          <sky-icon\n            class=\"sky-datepicker-chevron-default\"\n            icon=\"chevron-right\"\n          ></sky-icon>\n          <sky-icon\n            class=\"sky-datepicker-chevron-modern\"\n            icon=\"chevron-right\"\n            iconType=\"skyux\"\n          ></sky-icon>\n        </button>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows\">\n      <td\n        *ngFor=\"let date of row\"\n        class=\"sky-datepicker-row\"\n        role=\"gridcell\"\n        >\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n          [ngClass]=\"{'sky-datepicker-btn-selected': date.selected, 'sky-btn-disabled': date.disabled, 'sky-btn-active': datepicker.isActive(date)}\"\n          [disabled]=\"date.disabled\"\n          (click)=\"datepicker.selectCalendar($event, date.date)\"\n          tabindex=\"-1\"\n          >\n          <span\n            [ngClass]=\"{'sky-datepicker-current': date.current }\">{{date.label}}</span>\n        </button>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: [":host-context(.sky-theme-modern) :host:focus{outline:none}.sky-theme-modern :host:focus{outline:none}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyYearPickerComponent, decorators: [{
+    SkyYearPickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyYearPickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0__namespace, template: "<table *ngIf=\"datepicker.datepickerMode==='year'\" role=\"grid\">\n  <thead>\n    <tr>\n      <th\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"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyYearPickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-yearpicker',
-                        templateUrl: 'yearpicker.component.html',
-                        styleUrls: ['./yearpicker.component.scss']
+                        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"]
                     }]
             }], ctorParameters: function () { return [{ type: SkyDatepickerCalendarInnerComponent }]; } });
 
@@ -1455,8 +1735,9 @@
             this.adapter = adapter;
             this.config = config;
             this.elementRef = elementRef;
-            this.selectedDateChange = new i0.EventEmitter(undefined);
+            this.calendarDateRangeChange = new i0.EventEmitter();
             this.calendarModeChange = new i0.EventEmitter();
+            this.selectedDateChange = new i0.EventEmitter(undefined);
             this._now = new Date();
             this.formatter = new SkyDateFormatter();
             this.configureOptions();
@@ -1489,6 +1770,9 @@
         SkyDatepickerCalendarComponent.prototype.configureOptions = function () {
             Object.assign(this, this.config);
         };
+        SkyDatepickerCalendarComponent.prototype.onCalendarDateRangeChange = function (event) {
+            this.calendarDateRangeChange.next(event);
+        };
         SkyDatepickerCalendarComponent.prototype.onCalendarModeChange = function (event) {
             this.calendarModeChange.emit(event);
         };
@@ -1513,17 +1797,21 @@
         };
         return SkyDatepickerCalendarComponent;
     }());
-    SkyDatepickerCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: { minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate", startingDay: "startingDay" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, providers: [SkyDatepickerAdapterService], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: SkyDatepickerCalendarInnerComponent, descendants: true, read: SkyDatepickerCalendarInnerComponent, static: true }], ngImport: i0__namespace, template: "<div class=\"sky-datepicker-calendar\">\n  <sky-datepicker-inner\n      [selectedDate]=\"selectedDate\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [startingDay]=\"startingDay\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange($event)\">\n    <sky-daypicker tabindex=\"0\"></sky-daypicker>\n    <sky-monthpicker tabindex=\"0\"></sky-monthpicker>\n    <sky-yearpicker tabindex=\"0\"></sky-yearpicker>\n  </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], components: [{ type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["startingDay", "minDate", "maxDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { type: SkyDayPickerComponent, selector: "sky-daypicker" }, { type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { type: SkyYearPickerComponent, selector: "sky-yearpicker" }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerCalendarComponent, decorators: [{
+    SkyDatepickerCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerAdapterService }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDatepickerCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: { customDates: "customDates", isDaypickerWaiting: "isDaypickerWaiting", minDate: "minDate", maxDate: "maxDate", selectedDate: "selectedDate", startingDay: "startingDay" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", calendarModeChange: "calendarModeChange", selectedDateChange: "selectedDateChange" }, providers: [SkyDatepickerAdapterService], viewQueries: [{ propertyName: "_datepicker", first: true, predicate: SkyDatepickerCalendarInnerComponent, descendants: true, read: SkyDatepickerCalendarInnerComponent, static: true }], ngImport: i0__namespace, template: "<div\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" }] });
+    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',
-                        templateUrl: './datepicker-calendar.component.html',
-                        styleUrls: ['./datepicker-calendar.component.scss'],
+                        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"],
                         providers: [SkyDatepickerAdapterService]
                     }]
-            }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: SkyDatepickerConfigService }, { type: i0__namespace.ElementRef }]; }, propDecorators: { minDate: [{
+            }], ctorParameters: function () { return [{ type: SkyDatepickerAdapterService }, { type: SkyDatepickerConfigService }, { type: i0__namespace.ElementRef }]; }, propDecorators: { customDates: [{
+                    type: i0.Input
+                }], isDaypickerWaiting: [{
+                    type: i0.Input
+                }], minDate: [{
                     type: i0.Input
                 }], maxDate: [{
                     type: i0.Input
@@ -1531,10 +1819,12 @@
                     type: i0.Input
                 }], startingDay: [{
                     type: i0.Input
-                }], selectedDateChange: [{
+                }], calendarDateRangeChange: [{
                     type: i0.Output
                 }], calendarModeChange: [{
                     type: i0.Output
+                }], selectedDateChange: [{
+                    type: i0.Output
                 }], _datepicker: [{
                     type: i0.ViewChild,
                     args: [SkyDatepickerCalendarInnerComponent, {
@@ -1560,7 +1850,14 @@
              * Adds a class to the datepicker.
              */
             this.pickerClass = '';
+            /**
+             * Fires when the range of displayed dates in the calendar changes. Provides the
+             * current range of displayed dates and a mutable `customDate` property consumers can use
+             * to modify individual dates on the calendar.
+             */
+            this.calendarDateRangeChange = new i0.EventEmitter();
             this.dateChange = new i0.EventEmitter();
+            this.isDaypickerWaiting = false;
             this.isOpen = false;
             this.isVisible = false;
             this.ngUnsubscribe = new rxjs.Subject();
@@ -1699,6 +1996,34 @@
                 this.openPicker();
             }
         };
+        SkyDatepickerComponent.prototype.onCalendarDateRangeChange = function (event) {
+            var _this = this;
+            /* istanbul ignore else */
+            if (event) {
+                this.cancelCustomDatesSubscription();
+                var args = {
+                    startDate: event.startDate,
+                    endDate: event.endDate,
+                    customDates: undefined
+                };
+                this.calendarDateRangeChange.emit(args);
+                // If consumer has added an observable to the args, watch for incoming custom dates.
+                /* istanbul ignore else */
+                if (args.customDates) {
+                    this.isDaypickerWaiting = true;
+                    // Avoid an ExpressionChangedAfterItHasBeenCheckedError.
+                    this.changeDetector.detectChanges();
+                    this.customDatesSubscription = args.customDates
+                        .pipe(operators.debounceTime(250))
+                        .subscribe(function (result) {
+                        _this.customDates = result;
+                        _this.isDaypickerWaiting = false;
+                        // Trigger change detection in child components to show changes in the calendar.
+                        _this.changeDetector.markForCheck();
+                    });
+                }
+            }
+        };
         SkyDatepickerComponent.prototype.closePicker = function () {
             this.destroyAffixer();
             this.destroyOverlay();
@@ -1790,16 +2115,22 @@
             }
             (_a = this.overlayKeydownListner) === null || _a === void 0 ? void 0 : _a.unsubscribe();
         };
+        SkyDatepickerComponent.prototype.cancelCustomDatesSubscription = function () {
+            if (this.customDatesSubscription) {
+                this.customDatesSubscription.unsubscribe();
+                this.customDatesSubscription = undefined;
+            }
+        };
         return SkyDatepickerComponent;
     }());
-    SkyDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: i0.ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<div\n  class=\"sky-datepicker\"\n>\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div\n      class=\"sky-input-group\"\n    >\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div\n    class=\"sky-input-group-btn\"\n  >\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_datepicker_trigger_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\"\n        icon=\"calendar\"\n        size=\"lg\"\n      ></sky-icon>\n      <sky-icon *skyThemeIf=\"'modern'\"\n        icon=\"calendar\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n    #calendarRef\n  >\n    <sky-datepicker-calendar\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startingDay]=\"startingDay\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    >\n    </sky-datepicker-calendar>\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["minDate", "maxDate", "selectedDate", "startingDay"], outputs: ["selectedDateChange", "calendarModeChange"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerComponent, decorators: [{
+    SkyDatepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace$1.SkyInputBoxHostService, optional: true }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDatepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: i0.ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<div\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 });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-datepicker',
-                        templateUrl: './datepicker.component.html',
-                        styleUrls: ['./datepicker.component.scss'],
+                        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"],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
             }], ctorParameters: function () {
@@ -1810,6 +2141,8 @@
                         }] }];
         }, propDecorators: { pickerClass: [{
                     type: i0.Input
+                }], calendarDateRangeChange: [{
+                    type: i0.Output
                 }], calendar: [{
                     type: i0.ViewChild,
                     args: [SkyDatepickerCalendarComponent]
@@ -2237,7 +2570,7 @@
                 return true;
             }
             // If not, does it conform to the standard ISO format?
-            var isValidIso = moment__default['default'](value, moment__default['default'].ISO_8601).isValid();
+            var isValidIso = moment__default["default"](value, moment__default["default"].ISO_8601).isValid();
             return isValidIso;
         };
         SkyDatepickerInputDirective.prototype.notifyUpdatedValue = function () {
@@ -2259,13 +2592,13 @@
         };
         return SkyDatepickerInputDirective;
     }());
-    SkyDatepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i0__namespace.Renderer2 }, { token: i3__namespace.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    SkyDatepickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
+    SkyDatepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerInputDirective, deps: [{ token: SkyDatepickerAdapterService }, { token: i0__namespace.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i0__namespace.Renderer2 }, { token: i3__namespace.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SkyDatepickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
             SKY_DATEPICKER_VALUE_ACCESSOR,
             SKY_DATEPICKER_VALIDATOR,
             SkyDatepickerAdapterService
         ], ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerInputDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerInputDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[skyDatepickerInput]',
@@ -2745,12 +3078,12 @@
         };
         return SkyFuzzyDatepickerInputDirective;
     }());
-    SkyFuzzyDatepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", skyFuzzyDatepickerInput: "skyFuzzyDatepickerInput", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
+    SkyFuzzyDatepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0__namespace.ElementRef }, { token: SkyFuzzyDateService }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i0__namespace.Renderer2 }, { token: i3__namespace.SkyLibResourcesService }, { token: SkyDatepickerComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SkyFuzzyDatepickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", skyFuzzyDatepickerInput: "skyFuzzyDatepickerInput", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "keyup": "onInputKeyup()" } }, providers: [
             SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
             SKY_FUZZY_DATEPICKER_VALIDATOR
         ], ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyFuzzyDatepickerInputDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[skyFuzzyDatepickerInput]',
@@ -2797,36 +3130,44 @@
         }
         return SkyDatepickerModule;
     }());
-    SkyDatepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyDatepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
+    SkyDatepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyDatepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
             SkyDatepickerCalendarInnerComponent,
             SkyDayPickerComponent,
             SkyMonthPickerComponent,
             SkyYearPickerComponent,
             SkyDatepickerComponent,
             SkyDatepickerInputDirective,
-            SkyFuzzyDatepickerInputDirective], imports: [i3$1.CommonModule,
+            SkyFuzzyDatepickerInputDirective,
+            SkyDayPickerCellComponent,
+            SkyDayPickerButtonComponent], imports: [i5.CommonModule,
             i3.SkyI18nModule,
             i2$2.FormsModule,
             i2.SkyIconModule,
             SkyDatetimeResourcesModule,
             i1.SkyAffixModule,
             i1.SkyOverlayModule,
-            i3$2.SkyThemeModule], exports: [SkyDatepickerCalendarComponent,
+            i3$2.SkyThemeModule,
+            i3$1.SkyPopoverModule,
+            i2.SkyWaitModule], exports: [SkyDatepickerCalendarComponent,
             SkyDatepickerComponent,
             SkyDatepickerInputDirective,
             SkyFuzzyDatepickerInputDirective] });
-    SkyDatepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerModule, imports: [[
-                i3$1.CommonModule,
+    SkyDatepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, providers: [
+            SkyDatepickerService
+        ], imports: [[
+                i5.CommonModule,
                 i3.SkyI18nModule,
                 i2$2.FormsModule,
                 i2.SkyIconModule,
                 SkyDatetimeResourcesModule,
                 i1.SkyAffixModule,
                 i1.SkyOverlayModule,
-                i3$2.SkyThemeModule
+                i3$2.SkyThemeModule,
+                i3$1.SkyPopoverModule,
+                i2.SkyWaitModule,
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDatepickerModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDatepickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
@@ -2837,23 +3178,30 @@
                             SkyYearPickerComponent,
                             SkyDatepickerComponent,
                             SkyDatepickerInputDirective,
-                            SkyFuzzyDatepickerInputDirective
+                            SkyFuzzyDatepickerInputDirective,
+                            SkyDayPickerCellComponent,
+                            SkyDayPickerButtonComponent,
                         ],
                         imports: [
-                            i3$1.CommonModule,
+                            i5.CommonModule,
                             i3.SkyI18nModule,
                             i2$2.FormsModule,
                             i2.SkyIconModule,
                             SkyDatetimeResourcesModule,
                             i1.SkyAffixModule,
                             i1.SkyOverlayModule,
-                            i3$2.SkyThemeModule
+                            i3$2.SkyThemeModule,
+                            i3$1.SkyPopoverModule,
+                            i2.SkyWaitModule,
                         ],
                         exports: [
                             SkyDatepickerCalendarComponent,
                             SkyDatepickerComponent,
                             SkyDatepickerInputDirective,
-                            SkyFuzzyDatepickerInputDirective
+                            SkyFuzzyDatepickerInputDirective,
+                        ],
+                        providers: [
+                            SkyDatepickerService
                         ]
                     }]
             }] });
@@ -3474,13 +3822,10 @@
     // Start the count higher than the number of available values
     // provided in the SkyDateRangeCalculatorId enum.
     SkyDateRangeService.lastId = 1000;
-    SkyDateRangeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDateRangeService, deps: [{ token: i3__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-    SkyDateRangeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDateRangeService, providedIn: 'root' });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDateRangeService, decorators: [{
-                type: i0.Injectable,
-                args: [{
-                        providedIn: 'root'
-                    }]
+    SkyDateRangeService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangeService, deps: [{ token: i3__namespace.SkyLibResourcesService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    SkyDateRangeService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangeService });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangeService, decorators: [{
+                type: i0.Injectable
             }], ctorParameters: function () { return [{ type: i3__namespace.SkyLibResourcesService }]; } });
 
     /* tslint:disable:no-forward-ref no-use-before-declare */
@@ -3948,17 +4293,17 @@
         };
         return SkyDateRangePickerComponent;
     }());
-    SkyDateRangePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
+    SkyDateRangePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2__namespace$2.FormBuilder }, { token: i3__namespace.SkyAppLocaleProvider }, { token: i1__namespace.SkyAppWindowRef }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyDateRangePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired" }, providers: [
             SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
             SKY_DATE_RANGE_PICKER_VALIDATOR
-        ], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"isReady\"\n  class=\"sky-date-range-picker\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"sky-date-range-picker-form-group\"\n  >\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-select-calculator'\"\n      >\n        {{ label || 'skyux_date_range_picker_default_label' | skyLibResources }}\n      </label>\n      <select\n        class=\"sky-form-control\"\n        formControlName=\"calculatorId\"\n        [attr.id]=\"dateRangePickerId + '-select-calculator'\"\n        (blur)=\"onFieldBlur()\"\n      >\n        <option *ngFor=\"let calculator of calculators\"\n          [value]=\"calculator.calculatorId\"\n        >\n          {{ calculator.shortDescription }}\n        </option>\n      </select>\n    </sky-input-box>\n  </div>\n\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [hidden]=\"!showStartDatePicker\"\n  >\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-start-date'\"\n        [ngClass]=\"{ 'sky-control-label-required' : startDateRequired }\"\n      >\n        {{ startDateLabelResourceKey | skyLibResources }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"startDate\"\n          [attr.aria-label]=\"startDateLabelResourceKey | skyLibResources\"\n          [attr.id]=\"dateRangePickerId + '-start-date'\"\n          [attr.placeholder]=\"dateFormat\"\n          [required]=\"startDateRequired\"\n          [dateFormat]=\"dateFormat\"\n          (blur)=\"onFieldBlur()\"\n          skyDatepickerInput\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [hidden]=\"!showEndDatePicker\"\n  >\n    <sky-input-box>\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-end-date'\"\n        [ngClass]=\"{ 'sky-control-label-required' : endDateRequired }\"\n      >\n        {{ endDateLabelResourceKey | skyLibResources }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          formControlName=\"endDate\"\n          skyDatepickerInput\n          [attr.aria-label]=\"endDateLabelResourceKey | skyLibResources\"\n          [attr.id]=\"dateRangePickerId + '-end-date'\"\n          [attr.placeholder]=\"dateFormat\"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"endDateRequired\"\n          (blur)=\"onFieldBlur()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker{display:flex;margin-left:-5px;margin-right:-5px}.sky-date-range-picker-form-group{padding-left:5px;padding-right:5px}.sky-date-range-picker-form-group:last-child{margin-bottom:0}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:calc(100% / 3);margin-bottom:0}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{margin:0 20px 0 0}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0;margin:0 0 20px}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group{margin:0 20px 0 0}}:host-context(.sky-theme-modern .sky-responsive-container-xs) .sky-date-range-picker-form-group{margin:0 0 20px}:host-context(.sky-theme-modern .sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-theme-modern .sky-responsive-container-lg) .sky-date-range-picker-form-group{margin:0 20px 0 0}\n"], components: [{ type: i2__namespace$1.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled"] }, { type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { type: i2__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDateRangePickerComponent, decorators: [{
+        ], 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 });
+    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',
-                        templateUrl: './date-range-picker.component.html',
-                        styleUrls: ['./date-range-picker.component.scss'],
+                        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"],
                         providers: [
                             SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
                             SKY_DATE_RANGE_PICKER_VALIDATOR
@@ -3988,16 +4333,16 @@
         }
         return SkyDateRangePickerModule;
     }());
-    SkyDateRangePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDateRangePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyDateRangePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent], imports: [i3$1.CommonModule,
+    SkyDateRangePickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyDateRangePickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent], imports: [i5.CommonModule,
             i2$2.FormsModule,
             i2$2.ReactiveFormsModule,
             i3.SkyI18nModule,
             SkyDatepickerModule,
             SkyDatetimeResourcesModule,
             i2$1.SkyInputBoxModule], exports: [SkyDateRangePickerComponent] });
-    SkyDateRangePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDateRangePickerModule, imports: [[
-                i3$1.CommonModule,
+    SkyDateRangePickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, providers: [SkyDateRangeService], imports: [[
+                i5.CommonModule,
                 i2$2.FormsModule,
                 i2$2.ReactiveFormsModule,
                 i3.SkyI18nModule,
@@ -4005,14 +4350,14 @@
                 SkyDatetimeResourcesModule,
                 i2$1.SkyInputBoxModule
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyDateRangePickerModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyDateRangePickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
                             SkyDateRangePickerComponent
                         ],
                         imports: [
-                            i3$1.CommonModule,
+                            i5.CommonModule,
                             i2$2.FormsModule,
                             i2$2.ReactiveFormsModule,
                             i3.SkyI18nModule,
@@ -4022,7 +4367,8 @@
                         ],
                         exports: [
                             SkyDateRangePickerComponent
-                        ]
+                        ],
+                        providers: [SkyDateRangeService]
                     }]
             }] });
 
@@ -4185,7 +4531,7 @@
         SkyTimepickerInputDirective.prototype.setInputValue = function (value) {
             var formattedValue = '';
             if (value) {
-                var output = moment__default['default'](value).format(value.customFormat);
+                var output = moment__default["default"](value).format(value.customFormat);
                 /* istanbul ignore else */
                 if (output !== 'Invalid date') {
                     formattedValue = output;
@@ -4213,12 +4559,12 @@
                     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),
+                    '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;
@@ -4235,12 +4581,12 @@
         };
         return SkyTimepickerInputDirective;
     }());
-    SkyTimepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: SkyTimepickerInputDirective, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" } }, providers: [
+    SkyTimepickerInputDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerInputDirective, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i3__namespace.SkyLibResourcesService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    SkyTimepickerInputDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.14", type: SkyTimepickerInputDirective, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" } }, providers: [
             SKY_TIMEPICKER_VALUE_ACCESSOR,
             SKY_TIMEPICKER_VALIDATOR
         ], usesOnChanges: true, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyTimepickerInputDirective, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerInputDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
                         selector: '[skyTimepickerInput]',
@@ -4310,11 +4656,11 @@
             get: function () {
                 if (!this.is8601) {
                     /* istanbul ignore next */
-                    return parseInt(moment__default['default'](this.activeTime).format('h'), 0) || 1;
+                    return parseInt(moment__default["default"](this.activeTime).format('h'), 0) || 1;
                 }
                 /* istanbul ignore else */
                 if (this.is8601) {
-                    return moment__default['default'](this.activeTime).hour() + 0;
+                    return moment__default["default"](this.activeTime).hour() + 0;
                 }
             },
             set: function (setHour) {
@@ -4329,10 +4675,10 @@
                 if (this.is8601) {
                     hourOffset = 0;
                 }
-                hour = moment__default['default']({ 'hour': setHour }).add(hourOffset, 'hours').hour();
-                this.activeTime = moment__default['default']({
+                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
+                    'minute': moment__default["default"](this.activeTime).get('minute') + 0
                 }).toDate();
                 this.selectedTimeChanged.emit(this.selectedTime);
             },
@@ -4342,7 +4688,7 @@
         Object.defineProperty(SkyTimepickerComponent.prototype, "selectedMeridies", {
             get: function () {
                 if (this.activeTime) {
-                    return moment__default['default'](this.activeTime).format('A');
+                    return moment__default["default"](this.activeTime).format('A');
                 }
                 return '';
             },
@@ -4350,7 +4696,7 @@
                 /* istanbul ignore else */
                 if (!this.is8601) {
                     if (meridies.trim() !== this.selectedMeridies) {
-                        this.activeTime = moment__default['default'](this.activeTime).add(12, 'hours').toDate();
+                        this.activeTime = moment__default["default"](this.activeTime).add(12, 'hours').toDate();
                         this.selectedTimeChanged.emit(this.selectedTime);
                     }
                 }
@@ -4360,11 +4706,11 @@
         });
         Object.defineProperty(SkyTimepickerComponent.prototype, "selectedMinute", {
             get: function () {
-                return moment__default['default'](this.activeTime).minute() + 0;
+                return moment__default["default"](this.activeTime).minute() + 0;
             },
             set: function (minute) {
-                this.activeTime = moment__default['default']({
-                    'hour': moment__default['default'](this.activeTime).get('hour') + 0,
+                this.activeTime = moment__default["default"]({
+                    'hour': moment__default["default"](this.activeTime).get('hour') + 0,
                     'minute': minute
                 }).toDate();
                 this.selectedTimeChanged.emit(this.selectedTime);
@@ -4375,12 +4721,12 @@
         Object.defineProperty(SkyTimepickerComponent.prototype, "selectedTime", {
             get: function () {
                 var time = {
-                    hour: moment__default['default'](this.activeTime).hour(),
-                    minute: moment__default['default'](this.activeTime).minute(),
-                    meridie: moment__default['default'](this.activeTime).format('A'),
-                    timezone: parseInt(moment__default['default'](this.activeTime).format('Z'), 10),
+                    hour: moment__default["default"](this.activeTime).hour(),
+                    minute: moment__default["default"](this.activeTime).minute(),
+                    meridie: moment__default["default"](this.activeTime).format('A'),
+                    timezone: parseInt(moment__default["default"](this.activeTime).format('Z'), 10),
                     iso8601: this.activeTime,
-                    local: moment__default['default'](this.activeTime).format(this.localeFormat),
+                    local: moment__default["default"](this.activeTime).format(this.localeFormat),
                     customFormat: (typeof this.returnFormat !== 'undefined')
                         ? this.returnFormat : this.localeFormat
                 };
@@ -4603,14 +4949,14 @@
         };
         return SkyTimepickerComponent;
     }());
-    SkyTimepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", 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;-moz-column-gap:1px;column-gap:1px;-moz-columns:2;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{-moz-columns:4;columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern{display:none}.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], components: [{ type: i2__namespace.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "skyLibResources": i3__namespace.SkyLibResourcesPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyTimepickerComponent, decorators: [{
+    SkyTimepickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerComponent, deps: [{ token: i1__namespace.SkyAffixService }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.SkyCoreAdapterService }, { token: i1__namespace.SkyOverlayService }, { token: i2__namespace$1.SkyInputBoxHostService, optional: true }, { token: i3__namespace$2.SkyThemeService, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    SkyTimepickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.14", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: i0.ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: i0.TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: i0.ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<div\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 });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'sky-timepicker',
-                        templateUrl: './timepicker.component.html',
-                        styleUrls: ['./timepicker.component.scss'],
+                        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"],
                         encapsulation: i0.ViewEncapsulation.None,
                         changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
@@ -4656,9 +5002,9 @@
         }
         return SkyTimepickerModule;
     }());
-    SkyTimepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyTimepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    SkyTimepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective,
-            SkyTimepickerComponent], imports: [i3$1.CommonModule,
+    SkyTimepickerModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    SkyTimepickerModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective,
+            SkyTimepickerComponent], imports: [i5.CommonModule,
             i3.SkyI18nModule,
             i2.SkyIconModule,
             SkyDatetimeResourcesModule,
@@ -4666,8 +5012,8 @@
             i1.SkyOverlayModule,
             i3$2.SkyThemeModule], exports: [SkyTimepickerInputDirective,
             SkyTimepickerComponent] });
-    SkyTimepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyTimepickerModule, imports: [[
-                i3$1.CommonModule,
+    SkyTimepickerModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, imports: [[
+                i5.CommonModule,
                 i3.SkyI18nModule,
                 i2.SkyIconModule,
                 SkyDatetimeResourcesModule,
@@ -4675,7 +5021,7 @@
                 i1.SkyOverlayModule,
                 i3$2.SkyThemeModule
             ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: SkyTimepickerModule, decorators: [{
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.14", ngImport: i0__namespace, type: SkyTimepickerModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
@@ -4683,7 +5029,7 @@
                             SkyTimepickerComponent
                         ],
                         imports: [
-                            i3$1.CommonModule,
+                            i5.CommonModule,
                             i3.SkyI18nModule,
                             i2.SkyIconModule,
                             SkyDatetimeResourcesModule,
@@ -4711,15 +5057,15 @@
     exports.SkyFuzzyDatePipe = SkyFuzzyDatePipe;
     exports.SkyFuzzyDateService = SkyFuzzyDateService;
     exports.SkyTimepickerModule = SkyTimepickerModule;
-    exports.λ1 = SkyDatepickerCalendarComponent;
-    exports.λ2 = SkyDatepickerComponent;
-    exports.λ3 = SkyDatepickerInputDirective;
-    exports.λ4 = SkyFuzzyDatepickerInputDirective;
-    exports.λ5 = SkyDateRangePickerComponent;
-    exports.λ6 = SkyTimepickerComponent;
-    exports.λ7 = SkyTimepickerInputDirective;
+    exports["λ1"] = SkyDatepickerCalendarComponent;
+    exports["λ2"] = SkyDatepickerComponent;
+    exports["λ3"] = SkyDatepickerInputDirective;
+    exports["λ4"] = SkyFuzzyDatepickerInputDirective;
+    exports["λ5"] = SkyDateRangePickerComponent;
+    exports["λ6"] = SkyTimepickerComponent;
+    exports["λ7"] = SkyTimepickerInputDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=skyux-datetime.umd.js.map