@skyux/datetime 7.4.2 → 7.6.0

package/fesm2020/skyux-datetime.mjs

@@ -23,6 +23,7 @@ import { SkyThemeModule } from '@skyux/theme';
 
 // This class is mostly ported from the Angular 4.x DatePipe in order to maintain the old
 class SkyDateFormatUtility {
+    /* spell-checker:enable */
     static format(locale, value, pattern) {
         let date;
         if (isBlank(value) || value !== value) {
@@ -45,6 +46,7 @@ class SkyDateFormatUtility {
         return SkyIntlDateFormatter.format(date, locale, SkyDateFormatUtility._ALIASES[pattern] || pattern);
     }
 }
+/* spell-checker:disable */
 SkyDateFormatUtility._ALIASES = {
     medium: 'yMMMdjms',
     short: 'yMdjm',
@@ -550,7 +552,7 @@ _SkyFuzzyDateService_currentLocale = new WeakMap(), _SkyFuzzyDateService_ngUnsub
 }, _SkyFuzzyDateService_getMonthNumber = function _SkyFuzzyDateService_getMonthNumber(month) {
     let returnValue;
     const monthAsNumber = parseInt(month, 10);
-    // If the month component is a string ("Janaury"), we check to see if it is a valid month
+    // If the month component is a string ("January"), we check to see if it is a valid month
     if (isNaN(monthAsNumber)) {
         if (!moment(month, 'MMMM').isValid()) {
             return;
@@ -703,7 +705,7 @@ var _SkyDateRangeCalculator_instances, _SkyDateRangeCalculator_config, _SkyDateR
 class SkyDateRangeCalculator {
     constructor(
     /**
-     * Provides a calculator ID to specify calculator objects that represent date ranges.
+     * The calculator ID that specifies calculator objects that represent date ranges.
      */
     calculatorId, config) {
         this.calculatorId = calculatorId;
@@ -867,7 +869,7 @@ var SkyDateRangeCalculatorId;
 })(SkyDateRangeCalculatorId || (SkyDateRangeCalculatorId = {}));
 
 /**
- * Indicates the types of calculations available for a date range calculator.
+ * The types of calculations available for a date range calculator.
  */
 var SkyDateRangeCalculatorType;
 (function (SkyDateRangeCalculatorType) {
@@ -1151,7 +1153,7 @@ class SkyDatepickerCalendarInnerComponent {
     select(date, isManual = true) {
         this.activeDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
         /*
-            Only actually select date if in minmode (day picker mode).
+            Only actually select date if in minMode (day picker mode).
             Otherwise, just change the active view for the datepicker.
         */
         if (this.datepickerMode === this.minMode) {
@@ -1279,7 +1281,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
 class SkyDatepickerConfigService {
     constructor() {
         /**
-         * Specifies the starting day of the week in the calendar,
+         * The starting day of the week in the calendar,
          * where `0` sets the starting day to Sunday.
          * @default 0
          */
@@ -1301,7 +1303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
 class SkyDatepickerService {
     constructor() {
         /**
-         * Specifies if a key date popover is currently displayed.
+         * Whether a key date popover is currently displayed.
          * Useful for communicating across all daypicker siblings when a popover is displayed.
          */
         this.keyDatePopoverStream = new Subject();
@@ -1894,7 +1896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
                     }]
             }] } });
 
-var _SkyDatepickerComponent_instances, _SkyDatepickerComponent_affixer, _SkyDatepickerComponent_calendarUnsubscribe, _SkyDatepickerComponent_customDatesSubscription, _SkyDatepickerComponent_ngUnsubscribe, _SkyDatepickerComponent_overlay, _SkyDatepickerComponent_overlayKeydownListner, _SkyDatepickerComponent__calendarRef, _SkyDatepickerComponent__disabled, _SkyDatepickerComponent__selectedDate, _SkyDatepickerComponent_affixService, _SkyDatepickerComponent_changeDetector, _SkyDatepickerComponent_coreAdapter, _SkyDatepickerComponent_overlayService, _SkyDatepickerComponent_closePicker, _SkyDatepickerComponent_openPicker, _SkyDatepickerComponent_createAffixer, _SkyDatepickerComponent_destroyAffixer, _SkyDatepickerComponent_createOverlay, _SkyDatepickerComponent_destroyOverlay, _SkyDatepickerComponent_addKeydownListener, _SkyDatepickerComponent_removePickerEventListeners, _SkyDatepickerComponent_cancelCustomDatesSubscription;
+var _SkyDatepickerComponent_instances, _SkyDatepickerComponent_affixer, _SkyDatepickerComponent_calendarUnsubscribe, _SkyDatepickerComponent_customDatesSubscription, _SkyDatepickerComponent_ngUnsubscribe, _SkyDatepickerComponent_overlay, _SkyDatepickerComponent_overlayKeydownListener, _SkyDatepickerComponent__calendarRef, _SkyDatepickerComponent__disabled, _SkyDatepickerComponent__selectedDate, _SkyDatepickerComponent_affixService, _SkyDatepickerComponent_changeDetector, _SkyDatepickerComponent_coreAdapter, _SkyDatepickerComponent_overlayService, _SkyDatepickerComponent_closePicker, _SkyDatepickerComponent_openPicker, _SkyDatepickerComponent_createAffixer, _SkyDatepickerComponent_destroyAffixer, _SkyDatepickerComponent_createOverlay, _SkyDatepickerComponent_destroyOverlay, _SkyDatepickerComponent_addKeydownListener, _SkyDatepickerComponent_removePickerEventListeners, _SkyDatepickerComponent_cancelCustomDatesSubscription;
 let nextId$1 = 0;
 /**
  * Creates the datepicker button and calendar.
@@ -1924,7 +1926,7 @@ class SkyDatepickerComponent {
         _SkyDatepickerComponent_customDatesSubscription.set(this, void 0);
         _SkyDatepickerComponent_ngUnsubscribe.set(this, new Subject());
         _SkyDatepickerComponent_overlay.set(this, void 0);
-        _SkyDatepickerComponent_overlayKeydownListner.set(this, void 0);
+        _SkyDatepickerComponent_overlayKeydownListener.set(this, void 0);
         _SkyDatepickerComponent__calendarRef.set(this, void 0);
         _SkyDatepickerComponent__disabled.set(this, false);
         _SkyDatepickerComponent__selectedDate.set(this, void 0);
@@ -2056,7 +2058,7 @@ class SkyDatepickerComponent {
         }
     }
 }
-_SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calendarUnsubscribe = new WeakMap(), _SkyDatepickerComponent_customDatesSubscription = new WeakMap(), _SkyDatepickerComponent_ngUnsubscribe = new WeakMap(), _SkyDatepickerComponent_overlay = new WeakMap(), _SkyDatepickerComponent_overlayKeydownListner = new WeakMap(), _SkyDatepickerComponent__calendarRef = new WeakMap(), _SkyDatepickerComponent__disabled = new WeakMap(), _SkyDatepickerComponent__selectedDate = new WeakMap(), _SkyDatepickerComponent_affixService = new WeakMap(), _SkyDatepickerComponent_changeDetector = new WeakMap(), _SkyDatepickerComponent_coreAdapter = new WeakMap(), _SkyDatepickerComponent_overlayService = new WeakMap(), _SkyDatepickerComponent_instances = new WeakSet(), _SkyDatepickerComponent_closePicker = function _SkyDatepickerComponent_closePicker() {
+_SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calendarUnsubscribe = new WeakMap(), _SkyDatepickerComponent_customDatesSubscription = new WeakMap(), _SkyDatepickerComponent_ngUnsubscribe = new WeakMap(), _SkyDatepickerComponent_overlay = new WeakMap(), _SkyDatepickerComponent_overlayKeydownListener = new WeakMap(), _SkyDatepickerComponent__calendarRef = new WeakMap(), _SkyDatepickerComponent__disabled = new WeakMap(), _SkyDatepickerComponent__selectedDate = new WeakMap(), _SkyDatepickerComponent_affixService = new WeakMap(), _SkyDatepickerComponent_changeDetector = new WeakMap(), _SkyDatepickerComponent_coreAdapter = new WeakMap(), _SkyDatepickerComponent_overlayService = new WeakMap(), _SkyDatepickerComponent_instances = new WeakSet(), _SkyDatepickerComponent_closePicker = function _SkyDatepickerComponent_closePicker() {
     __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
     __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyOverlay).call(this);
     __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_removePickerEventListeners).call(this);
@@ -2121,7 +2123,7 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
         __classPrivateFieldSet(this, _SkyDatepickerComponent_overlay, undefined, "f");
     }
 }, _SkyDatepickerComponent_addKeydownListener = function _SkyDatepickerComponent_addKeydownListener() {
-    __classPrivateFieldSet(this, _SkyDatepickerComponent_overlayKeydownListner, fromEvent(window.document, 'keydown')
+    __classPrivateFieldSet(this, _SkyDatepickerComponent_overlayKeydownListener, fromEvent(window.document, 'keydown')
         .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_ngUnsubscribe, "f")))
         .subscribe((event) => {
         const key = event.key?.toLowerCase();
@@ -2133,7 +2135,7 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
     __classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f").next();
     __classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f").complete();
     __classPrivateFieldSet(this, _SkyDatepickerComponent_calendarUnsubscribe, new Subject(), "f");
-    __classPrivateFieldGet(this, _SkyDatepickerComponent_overlayKeydownListner, "f")?.unsubscribe();
+    __classPrivateFieldGet(this, _SkyDatepickerComponent_overlayKeydownListener, "f")?.unsubscribe();
 }, _SkyDatepickerComponent_cancelCustomDatesSubscription = function _SkyDatepickerComponent_cancelCustomDatesSubscription() {
     if (__classPrivateFieldGet(this, _SkyDatepickerComponent_customDatesSubscription, "f")) {
         __classPrivateFieldGet(this, _SkyDatepickerComponent_customDatesSubscription, "f").unsubscribe();
@@ -2200,7 +2202,7 @@ class SkyFuzzyDatepickerInputDirective {
     constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, resourcesService, datepickerComponent) {
         _SkyFuzzyDatepickerInputDirective_instances.add(this);
         /**
-         * Indicates whether to disable date validation on the fuzzy datepicker input.
+         * Whether to disable date validation on the fuzzy datepicker input.
          * @default false
          */
         this.skyDatepickerNoValidate = false;
@@ -2255,7 +2257,7 @@ class SkyFuzzyDatepickerInputDirective {
         });
     }
     /**
-     * Specifies the date format for the input. Place this attribute on the `input` element
+     * The date format for the input. Place this attribute on the `input` element
      * to override the default in `SkyDatepickerConfigService`.
      * @default "MM/DD/YYYY"
      */
@@ -2274,7 +2276,7 @@ class SkyFuzzyDatepickerInputDirective {
             __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat, "f"));
     }
     /**
-     * Indicates whether to disable the datepicker.
+     * Whether to disable the datepicker.
      * @default false
      */
     set disabled(value) {
@@ -2286,7 +2288,7 @@ class SkyFuzzyDatepickerInputDirective {
         return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__disabled, "f");
     }
     /**
-     * Indicates whether to prevent users from specifying dates that are in the future.
+     * Whether to prevent users from specifying dates that are in the future.
      * Place this attribute on the `input` element.
      * @default false
      */
@@ -2298,7 +2300,7 @@ class SkyFuzzyDatepickerInputDirective {
         return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__futureDisabled, "f");
     }
     /**
-     * Specifies the latest fuzzy date allowed. Place this attribute on the `input` element
+     * The latest fuzzy date allowed. Place this attribute on the `input` element
      * to prevent fuzzy dates after a specified date. This property accepts
      * a `SkyFuzzyDate` value that includes numeric month, day, and year values.
      * For example: `{ month: 1, day: 1, year: 2027 }`.
@@ -2312,7 +2314,7 @@ class SkyFuzzyDatepickerInputDirective {
         return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__maxDate, "f");
     }
     /**
-     * Specifies the earliest fuzzy date allowed. Place this attribute on the `input` element
+     * The earliest fuzzy date allowed. Place this attribute on the `input` element
      * to prevent fuzzy dates before a specified date. This property accepts a `SkyFuzzyDate` value
      * that includes numeric month, day, and year values.
      * For example: `{ month: 1, day: 1, year: 2007 }`.
@@ -2326,7 +2328,7 @@ class SkyFuzzyDatepickerInputDirective {
         return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__minDate, "f");
     }
     /**
-     * Specifies the starting day of the week in the calendar, where `0` sets the starting day
+     * The starting day of the week in the calendar, where `0` sets the starting day
      * to Sunday. Place this attribute on the `input` element to override the default
      * in `SkyDatepickerConfigService`.
      * @default 0
@@ -2341,7 +2343,7 @@ class SkyFuzzyDatepickerInputDirective {
         return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__startingDay, "f") || __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_configService, "f").startingDay;
     }
     /**
-     * Indicates whether to require the year in fuzzy dates.
+     * Whether to require the year in fuzzy dates.
      * @default false
      */
     set yearRequired(value) {
@@ -2380,7 +2382,7 @@ class SkyFuzzyDatepickerInputDirective {
     }
     ngAfterViewInit() {
         // This is needed to address a bug in Angular 4.
-        // When a control value is set intially, its value is not represented on the view.
+        // When a control value is set initially, its value is not represented on the view.
         // See: https://github.com/angular/angular/issues/13792
         // Of note is the parent check which allows us to determine if the form is reactive.
         // Without this check there is a changed before checked error
@@ -2650,7 +2652,7 @@ class SkyDatepickerInputDirective {
     constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
         _SkyDatepickerInputDirective_instances.add(this);
         /**
-         * Indicates whether to disable date validation on the datepicker input.
+         * Whether to disable date validation on the datepicker input.
          * @default false
          */
         this.skyDatepickerNoValidate = false;
@@ -2707,7 +2709,7 @@ class SkyDatepickerInputDirective {
         });
     }
     /**
-     * Specifies the date format for the input. Place this attribute on the `input` element
+     * The date format for the input. Place this attribute on the `input` element
      * to override the default in the `SkyDatepickerConfigService`.
      * @default "MM/DD/YYYY"
      */
@@ -2725,7 +2727,7 @@ class SkyDatepickerInputDirective {
             __classPrivateFieldGet(this, _SkyDatepickerInputDirective_preferredShortDateFormat, "f"));
     }
     /**
-     * Indicates whether to disable the datepicker.
+     * Whether to disable the datepicker.
      * @default false
      */
     set disabled(value) {
@@ -2737,7 +2739,7 @@ class SkyDatepickerInputDirective {
         return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__disabled, "f");
     }
     /**
-     * Specifies the latest date that is available in the calendar. Place this attribute on
+     * The latest date that is available in the calendar. Place this attribute on
      * the `input` element to override the default in `SkyDatepickerConfigService`.
      */
     set maxDate(value) {
@@ -2750,7 +2752,7 @@ class SkyDatepickerInputDirective {
         return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__maxDate, "f") || __classPrivateFieldGet(this, _SkyDatepickerInputDirective_configService, "f").maxDate;
     }
     /**
-     * Specifies the earliest date that is available in the calendar. Place this attribute on
+     * The earliest date that is available in the calendar. Place this attribute on
      * the `input` element to override the default in `SkyDatepickerConfigService`. To avoid validation errors, the time associated with the minimum date must be midnight. This is necessary because the datepicker automatically sets the time on the `Date` object for selected dates to midnight in the current user's time zone.
      */
     set minDate(value) {
@@ -2778,7 +2780,7 @@ class SkyDatepickerInputDirective {
         }
     }
     /**
-     * Specifies the starting day of the week in the calendar, where `0` sets the starting day
+     * The starting day of the week in the calendar, where `0` sets the starting day
      * to Sunday. Place this attribute on the `input` element to override the default
      * in `SkyDatepickerConfigService`.
      * @default 0
@@ -2793,7 +2795,7 @@ class SkyDatepickerInputDirective {
         return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__startingDay, "f") || __classPrivateFieldGet(this, _SkyDatepickerInputDirective_configService, "f").startingDay;
     }
     /**
-     * Indicates whether the format of the date value must match the format from the `dateFormat` value.
+     * Whether the format of the date value must match the format from the `dateFormat` value.
      * If this property is `true` and the datepicker input directive cannot find an exact match, then
      * the input is marked as invalid.
      * If this property is `false` and the datepicker input directive cannot find an exact match, then
@@ -2830,7 +2832,7 @@ class SkyDatepickerInputDirective {
     }
     ngAfterViewInit() {
         // This is needed to address a bug in Angular 4.
-        // When a control value is set intially, its value is not represented on the view.
+        // When a control value is set initially, its value is not represented on the view.
         // See: https://github.com/angular/angular/issues/13792
         // Of note is the parent check which allows us to determine if the form is reactive.
         // Without this check there is a changed before checked error
@@ -3736,12 +3738,12 @@ class SkyDateRangePickerComponent {
     constructor(changeDetector, dateRangeService, formBuilder, localeProvider, ngZone, themeSvc) {
         _SkyDateRangePickerComponent_instances.add(this);
         /**
-         * Indicates whether to require users to specify a start date.
+         * Whether to require users to specify a start date.
          * @default false
          */
         this.startDateRequired = false;
         /**
-         * Indicates whether to require users to specify a end date.
+         * Whether to require users to specify a end date.
          * @default false
          */
         this.endDateRequired = false;
@@ -3816,7 +3818,7 @@ class SkyDateRangePickerComponent {
         });
     }
     /**
-     * Specifies IDs for the date range options to include in the picker's dropdown.
+     * IDs for the date range options to include in the picker's dropdown.
      * The options specify calculator objects that return two `Date` objects to represent date ranges.
      * By default, this property includes all `SkyDateRangeCalculatorId` values.
      */
@@ -3850,7 +3852,7 @@ class SkyDateRangePickerComponent {
         return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__calculatorIds, "f");
     }
     /**
-     * Specifies a date format for
+     * The date format for
      * [the `sky-datepicker` components](https://developer.blackbaud.com/skyux/components/datepicker)
      * that make up the date range picker. The text input is a composite component of
      * up to two `sky-datepicker` components.
@@ -3864,7 +3866,7 @@ class SkyDateRangePickerComponent {
         return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__dateFormat, "f");
     }
     /**
-     * Indicates whether to disable the date range picker.
+     * Whether to disable the date range picker.
      * @default false
      */
     set disabled(value) {
@@ -3901,7 +3903,7 @@ class SkyDateRangePickerComponent {
                 __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_setValue).call(this, newValue, false);
                 __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_resetFormGroupValue).call(this);
                 // This is needed to address a bug in Angular 4.
-                // When a control value is set intially, its value is not represented on the view.
+                // When a control value is set initially, its value is not represented on the view.
                 // See: https://github.com/angular/angular/issues/13792
                 /* istanbul ignore else */
                 if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent_control, "f")) {
@@ -4224,7 +4226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
                 }]
         }] });
 
-var _SkyTimepickerComponent_instances, _SkyTimepickerComponent_affixer, _SkyTimepickerComponent_timepickerUnsubscribe, _SkyTimepickerComponent_ngUnsubscribe, _SkyTimepickerComponent_overlay, _SkyTimepickerComponent_overlayKeydownListner, _SkyTimepickerComponent__disabled, _SkyTimepickerComponent__timepickerRef, _SkyTimepickerComponent_affixService, _SkyTimepickerComponent_changeDetector, _SkyTimepickerComponent_coreAdapter, _SkyTimepickerComponent_overlayService, _SkyTimepickerComponent_closePicker, _SkyTimepickerComponent_openPicker, _SkyTimepickerComponent_createAffixer, _SkyTimepickerComponent_destroyAffixer, _SkyTimepickerComponent_createOverlay, _SkyTimepickerComponent_destroyOverlay, _SkyTimepickerComponent_addKeydownListener, _SkyTimepickerComponent_removePickerEventListeners;
+var _SkyTimepickerComponent_instances, _SkyTimepickerComponent_affixer, _SkyTimepickerComponent_timepickerUnsubscribe, _SkyTimepickerComponent_ngUnsubscribe, _SkyTimepickerComponent_overlay, _SkyTimepickerComponent_overlayKeydownListener, _SkyTimepickerComponent__disabled, _SkyTimepickerComponent__timepickerRef, _SkyTimepickerComponent_affixService, _SkyTimepickerComponent_changeDetector, _SkyTimepickerComponent_coreAdapter, _SkyTimepickerComponent_overlayService, _SkyTimepickerComponent_closePicker, _SkyTimepickerComponent_openPicker, _SkyTimepickerComponent_createAffixer, _SkyTimepickerComponent_destroyAffixer, _SkyTimepickerComponent_createOverlay, _SkyTimepickerComponent_destroyOverlay, _SkyTimepickerComponent_addKeydownListener, _SkyTimepickerComponent_removePickerEventListeners;
 let nextId = 0;
 /**
  * Creates a SKY UX-themed replacement for the HTML `input` element with `type="time"`.
@@ -4252,7 +4254,7 @@ class SkyTimepickerComponent {
         _SkyTimepickerComponent_timepickerUnsubscribe.set(this, new Subject());
         _SkyTimepickerComponent_ngUnsubscribe.set(this, new Subject());
         _SkyTimepickerComponent_overlay.set(this, void 0);
-        _SkyTimepickerComponent_overlayKeydownListner.set(this, void 0);
+        _SkyTimepickerComponent_overlayKeydownListener.set(this, void 0);
         _SkyTimepickerComponent__disabled.set(this, false);
         _SkyTimepickerComponent__timepickerRef.set(this, void 0);
         _SkyTimepickerComponent_affixService.set(this, void 0);
@@ -4359,7 +4361,7 @@ class SkyTimepickerComponent {
     set timepickerRef(value) {
         if (value) {
             __classPrivateFieldSet(this, _SkyTimepickerComponent__timepickerRef, value, "f");
-            // Wait for the timepicker component to render before guaging dimensions.
+            // Wait for the timepicker component to render before gauging dimensions.
             setTimeout(() => {
                 __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
                 __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_createAffixer).call(this);
@@ -4438,7 +4440,7 @@ class SkyTimepickerComponent {
         this.localeFormat = data.localeFormat;
         this.minuteMultiplier = data.minuteMultiplier;
     }
-    onCloseButtonCick() {
+    onCloseButtonClick() {
         __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_closePicker).call(this);
     }
     setTime(event) {
@@ -4463,7 +4465,7 @@ class SkyTimepickerComponent {
         __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_openPicker).call(this);
     }
 }
-_SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepickerUnsubscribe = new WeakMap(), _SkyTimepickerComponent_ngUnsubscribe = new WeakMap(), _SkyTimepickerComponent_overlay = new WeakMap(), _SkyTimepickerComponent_overlayKeydownListner = new WeakMap(), _SkyTimepickerComponent__disabled = new WeakMap(), _SkyTimepickerComponent__timepickerRef = new WeakMap(), _SkyTimepickerComponent_affixService = new WeakMap(), _SkyTimepickerComponent_changeDetector = new WeakMap(), _SkyTimepickerComponent_coreAdapter = new WeakMap(), _SkyTimepickerComponent_overlayService = new WeakMap(), _SkyTimepickerComponent_instances = new WeakSet(), _SkyTimepickerComponent_closePicker = function _SkyTimepickerComponent_closePicker() {
+_SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepickerUnsubscribe = new WeakMap(), _SkyTimepickerComponent_ngUnsubscribe = new WeakMap(), _SkyTimepickerComponent_overlay = new WeakMap(), _SkyTimepickerComponent_overlayKeydownListener = new WeakMap(), _SkyTimepickerComponent__disabled = new WeakMap(), _SkyTimepickerComponent__timepickerRef = new WeakMap(), _SkyTimepickerComponent_affixService = new WeakMap(), _SkyTimepickerComponent_changeDetector = new WeakMap(), _SkyTimepickerComponent_coreAdapter = new WeakMap(), _SkyTimepickerComponent_overlayService = new WeakMap(), _SkyTimepickerComponent_instances = new WeakSet(), _SkyTimepickerComponent_closePicker = function _SkyTimepickerComponent_closePicker() {
     __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
     __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyOverlay).call(this);
     __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_removePickerEventListeners).call(this);
@@ -4527,7 +4529,7 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
         __classPrivateFieldSet(this, _SkyTimepickerComponent_overlay, undefined, "f");
     }
 }, _SkyTimepickerComponent_addKeydownListener = function _SkyTimepickerComponent_addKeydownListener() {
-    __classPrivateFieldSet(this, _SkyTimepickerComponent_overlayKeydownListner, fromEvent(window.document, 'keydown')
+    __classPrivateFieldSet(this, _SkyTimepickerComponent_overlayKeydownListener, fromEvent(window.document, 'keydown')
         .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f")))
         .subscribe((event) => {
         const key = event.key?.toLowerCase();
@@ -4544,13 +4546,13 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
         __classPrivateFieldSet(this, _SkyTimepickerComponent_timepickerUnsubscribe, new Subject(), "f");
     }
     /* istanbul ignore next */
-    __classPrivateFieldGet(this, _SkyTimepickerComponent_overlayKeydownListner, "f")?.unsubscribe();
+    __classPrivateFieldGet(this, _SkyTimepickerComponent_overlayKeydownListener, "f")?.unsubscribe();
 };
 SkyTimepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$1.SkyInputBoxHostService, optional: true }, { token: i3$2.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SkyTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"clock\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n    #timepickerRef\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours\">\n            <button\n              name=\"hour\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ hour }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          <li *ngFor=\"let minute of minutes\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n        <ol>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n              (click)=\"setTime($event)\"\n            >\n              AM\n            </button>\n          </li>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n              (click)=\"setTime($event)\"\n            >\n              PM\n            </button>\n          </li>\n        </ol>\n      </section>\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonCick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;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,.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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+SkyTimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.11", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"clock\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n    #timepickerRef\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours\">\n            <button\n              name=\"hour\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ hour }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          <li *ngFor=\"let minute of minutes\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n        <ol>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n              (click)=\"setTime($event)\"\n            >\n              AM\n            </button>\n          </li>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n              (click)=\"setTime($event)\"\n            >\n              PM\n            </button>\n          </li>\n        </ol>\n      </section>\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonClick()\"\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;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,.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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "directive", type: i3$2.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-timepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"clock\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n    #timepickerRef\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours\">\n            <button\n              name=\"hour\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ hour }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          <li *ngFor=\"let minute of minutes\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n        <ol>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n              (click)=\"setTime($event)\"\n            >\n              AM\n            </button>\n          </li>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n              (click)=\"setTime($event)\"\n            >\n              PM\n            </button>\n          </li>\n        </ol>\n      </section>\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonCick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;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,.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"] }]
+            args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-timepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content></ng-content>\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"'skyux_timepicker_button_label' | skyLibResources\"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n      #triggerButtonRef\n    >\n      <sky-icon *skyThemeIf=\"'default'\" icon=\"clock-o\" size=\"lg\"></sky-icon>\n      <sky-icon\n        *skyThemeIf=\"'modern'\"\n        icon=\"clock\"\n        size=\"lg\"\n        iconType=\"skyux\"\n      ></sky-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n    #timepickerRef\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours\">\n            <button\n              name=\"hour\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ hour }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          <li *ngFor=\"let minute of minutes\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\" class=\"sky-timepicker-column\">\n        <ol>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n              (click)=\"setTime($event)\"\n            >\n              AM\n            </button>\n          </li>\n          <li>\n            <button\n              name=\"meridie\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n              (click)=\"setTime($event)\"\n            >\n              PM\n            </button>\n          </li>\n        </ol>\n      </section>\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonClick()\"\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;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,.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"] }]
         }], ctorParameters: function () { return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
                     type: Optional
                 }] }, { type: i3$2.SkyThemeService, decorators: [{
@@ -4639,7 +4641,7 @@ class SkyTimepickerInputDirective {
     }
     // TODO: In a future breaking change - make this more specific than "string"
     /**
-     * Specifies the 12-hour `hh` or 24-hour `HH` time format for the input.
+     * The 12-hour `hh` or 24-hour `HH` time format for the input.
      * @default "hh"
      */
     set timeFormat(value) {
@@ -4649,7 +4651,7 @@ class SkyTimepickerInputDirective {
         return __classPrivateFieldGet(this, _SkyTimepickerInputDirective__timeFormat, "f");
     }
     /**
-     * Indicates whether to disable the timepicker.
+     * Whether to disable the timepicker.
      * @default false
      */
     get disabled() {