@skyux/datetime 7.4.2 → 7.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/documentation.json +70 -70
  2. package/esm2020/lib/modules/date-pipe/date-format-utility.mjs +3 -1
  3. package/esm2020/lib/modules/date-range-picker/date-range-picker.component.mjs +7 -7
  4. package/esm2020/lib/modules/date-range-picker/types/date-range-calculation.mjs +1 -1
  5. package/esm2020/lib/modules/date-range-picker/types/date-range-calculator-type.mjs +2 -2
  6. package/esm2020/lib/modules/date-range-picker/types/date-range-calculator.mjs +2 -2
  7. package/esm2020/lib/modules/date-range-picker/types/date-range.mjs +1 -1
  8. package/esm2020/lib/modules/datepicker/datepicker-calendar-change.mjs +1 -1
  9. package/esm2020/lib/modules/datepicker/datepicker-calendar-inner.component.mjs +2 -2
  10. package/esm2020/lib/modules/datepicker/datepicker-config.service.mjs +2 -2
  11. package/esm2020/lib/modules/datepicker/datepicker-custom-date.mjs +1 -1
  12. package/esm2020/lib/modules/datepicker/datepicker-input-fuzzy.directive.mjs +10 -10
  13. package/esm2020/lib/modules/datepicker/datepicker-input.directive.mjs +9 -9
  14. package/esm2020/lib/modules/datepicker/datepicker.component.mjs +6 -6
  15. package/esm2020/lib/modules/datepicker/datepicker.service.mjs +2 -2
  16. package/esm2020/lib/modules/datepicker/daypicker-button.component.mjs +1 -1
  17. package/esm2020/lib/modules/datepicker/daypicker-cell.component.mjs +1 -1
  18. package/esm2020/lib/modules/datepicker/fuzzy-date.mjs +1 -1
  19. package/esm2020/lib/modules/datepicker/fuzzy-date.service.mjs +2 -2
  20. package/esm2020/lib/modules/timepicker/timepicker.component.mjs +10 -10
  21. package/esm2020/lib/modules/timepicker/timepicker.directive.mjs +3 -3
  22. package/esm2020/lib/modules/timepicker/timepicker.interface.mjs +1 -1
  23. package/fesm2015/skyux-datetime.mjs +47 -45
  24. package/fesm2015/skyux-datetime.mjs.map +1 -1
  25. package/fesm2020/skyux-datetime.mjs +47 -45
  26. package/fesm2020/skyux-datetime.mjs.map +1 -1
  27. package/lib/modules/date-range-picker/date-range-picker.component.d.ts +6 -6
  28. package/lib/modules/date-range-picker/types/date-range-calculation.d.ts +1 -1
  29. package/lib/modules/date-range-picker/types/date-range-calculator-type.d.ts +1 -1
  30. package/lib/modules/date-range-picker/types/date-range-calculator.d.ts +4 -4
  31. package/lib/modules/date-range-picker/types/date-range.d.ts +2 -2
  32. package/lib/modules/datepicker/datepicker-calendar-change.d.ts +1 -1
  33. package/lib/modules/datepicker/datepicker-config.service.d.ts +4 -4
  34. package/lib/modules/datepicker/datepicker-custom-date.d.ts +2 -2
  35. package/lib/modules/datepicker/datepicker-input-fuzzy.directive.d.ts +8 -8
  36. package/lib/modules/datepicker/datepicker-input.directive.d.ts +7 -7
  37. package/lib/modules/datepicker/datepicker.service.d.ts +1 -1
  38. package/lib/modules/datepicker/daypicker-button.component.d.ts +1 -1
  39. package/lib/modules/datepicker/daypicker-cell.component.d.ts +2 -2
  40. package/lib/modules/datepicker/fuzzy-date.d.ts +3 -3
  41. package/lib/modules/timepicker/timepicker.component.d.ts +1 -1
  42. package/lib/modules/timepicker/timepicker.directive.d.ts +3 -3
  43. package/lib/modules/timepicker/timepicker.interface.d.ts +7 -7
  44. package/package.json +8 -8
@@ -23,6 +23,7 @@ import { SkyThemeModule } from '@skyux/theme';
23
23
 
24
24
  // This class is mostly ported from the Angular 4.x DatePipe in order to maintain the old
25
25
  class SkyDateFormatUtility {
26
+ /* spell-checker:enable */
26
27
  static format(locale, value, pattern) {
27
28
  let date;
28
29
  if (isBlank(value) || value !== value) {
@@ -45,6 +46,7 @@ class SkyDateFormatUtility {
45
46
  return SkyIntlDateFormatter.format(date, locale, SkyDateFormatUtility._ALIASES[pattern] || pattern);
46
47
  }
47
48
  }
49
+ /* spell-checker:disable */
48
50
  SkyDateFormatUtility._ALIASES = {
49
51
  medium: 'yMMMdjms',
50
52
  short: 'yMdjm',
@@ -551,7 +553,7 @@ _SkyFuzzyDateService_currentLocale = new WeakMap(), _SkyFuzzyDateService_ngUnsub
551
553
  }, _SkyFuzzyDateService_getMonthNumber = function _SkyFuzzyDateService_getMonthNumber(month) {
552
554
  let returnValue;
553
555
  const monthAsNumber = parseInt(month, 10);
554
- // If the month component is a string ("Janaury"), we check to see if it is a valid month
556
+ // If the month component is a string ("January"), we check to see if it is a valid month
555
557
  if (isNaN(monthAsNumber)) {
556
558
  if (!moment(month, 'MMMM').isValid()) {
557
559
  return;
@@ -704,7 +706,7 @@ var _SkyDateRangeCalculator_instances, _SkyDateRangeCalculator_config, _SkyDateR
704
706
  class SkyDateRangeCalculator {
705
707
  constructor(
706
708
  /**
707
- * Provides a calculator ID to specify calculator objects that represent date ranges.
709
+ * The calculator ID that specifies calculator objects that represent date ranges.
708
710
  */
709
711
  calculatorId, config) {
710
712
  this.calculatorId = calculatorId;
@@ -868,7 +870,7 @@ var SkyDateRangeCalculatorId;
868
870
  })(SkyDateRangeCalculatorId || (SkyDateRangeCalculatorId = {}));
869
871
 
870
872
  /**
871
- * Indicates the types of calculations available for a date range calculator.
873
+ * The types of calculations available for a date range calculator.
872
874
  */
873
875
  var SkyDateRangeCalculatorType;
874
876
  (function (SkyDateRangeCalculatorType) {
@@ -1152,7 +1154,7 @@ class SkyDatepickerCalendarInnerComponent {
1152
1154
  select(date, isManual = true) {
1153
1155
  this.activeDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
1154
1156
  /*
1155
- Only actually select date if in minmode (day picker mode).
1157
+ Only actually select date if in minMode (day picker mode).
1156
1158
  Otherwise, just change the active view for the datepicker.
1157
1159
  */
1158
1160
  if (this.datepickerMode === this.minMode) {
@@ -1280,7 +1282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
1280
1282
  class SkyDatepickerConfigService {
1281
1283
  constructor() {
1282
1284
  /**
1283
- * Specifies the starting day of the week in the calendar,
1285
+ * The starting day of the week in the calendar,
1284
1286
  * where `0` sets the starting day to Sunday.
1285
1287
  * @default 0
1286
1288
  */
@@ -1302,7 +1304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
1302
1304
  class SkyDatepickerService {
1303
1305
  constructor() {
1304
1306
  /**
1305
- * Specifies if a key date popover is currently displayed.
1307
+ * Whether a key date popover is currently displayed.
1306
1308
  * Useful for communicating across all daypicker siblings when a popover is displayed.
1307
1309
  */
1308
1310
  this.keyDatePopoverStream = new Subject();
@@ -1899,7 +1901,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
1899
1901
  }]
1900
1902
  }] } });
1901
1903
 
1902
- 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;
1904
+ 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;
1903
1905
  let nextId$1 = 0;
1904
1906
  /**
1905
1907
  * Creates the datepicker button and calendar.
@@ -1929,7 +1931,7 @@ class SkyDatepickerComponent {
1929
1931
  _SkyDatepickerComponent_customDatesSubscription.set(this, void 0);
1930
1932
  _SkyDatepickerComponent_ngUnsubscribe.set(this, new Subject());
1931
1933
  _SkyDatepickerComponent_overlay.set(this, void 0);
1932
- _SkyDatepickerComponent_overlayKeydownListner.set(this, void 0);
1934
+ _SkyDatepickerComponent_overlayKeydownListener.set(this, void 0);
1933
1935
  _SkyDatepickerComponent__calendarRef.set(this, void 0);
1934
1936
  _SkyDatepickerComponent__disabled.set(this, false);
1935
1937
  _SkyDatepickerComponent__selectedDate.set(this, void 0);
@@ -2061,7 +2063,7 @@ class SkyDatepickerComponent {
2061
2063
  }
2062
2064
  }
2063
2065
  }
2064
- _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() {
2066
+ _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() {
2065
2067
  var _a;
2066
2068
  __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyAffixer).call(this);
2067
2069
  __classPrivateFieldGet(this, _SkyDatepickerComponent_instances, "m", _SkyDatepickerComponent_destroyOverlay).call(this);
@@ -2127,7 +2129,7 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
2127
2129
  __classPrivateFieldSet(this, _SkyDatepickerComponent_overlay, undefined, "f");
2128
2130
  }
2129
2131
  }, _SkyDatepickerComponent_addKeydownListener = function _SkyDatepickerComponent_addKeydownListener() {
2130
- __classPrivateFieldSet(this, _SkyDatepickerComponent_overlayKeydownListner, fromEvent(window.document, 'keydown')
2132
+ __classPrivateFieldSet(this, _SkyDatepickerComponent_overlayKeydownListener, fromEvent(window.document, 'keydown')
2131
2133
  .pipe(takeUntil(__classPrivateFieldGet(this, _SkyDatepickerComponent_ngUnsubscribe, "f")))
2132
2134
  .subscribe((event) => {
2133
2135
  var _a;
@@ -2141,7 +2143,7 @@ _SkyDatepickerComponent_affixer = new WeakMap(), _SkyDatepickerComponent_calenda
2141
2143
  __classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f").next();
2142
2144
  __classPrivateFieldGet(this, _SkyDatepickerComponent_calendarUnsubscribe, "f").complete();
2143
2145
  __classPrivateFieldSet(this, _SkyDatepickerComponent_calendarUnsubscribe, new Subject(), "f");
2144
- (_a = __classPrivateFieldGet(this, _SkyDatepickerComponent_overlayKeydownListner, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe();
2146
+ (_a = __classPrivateFieldGet(this, _SkyDatepickerComponent_overlayKeydownListener, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe();
2145
2147
  }, _SkyDatepickerComponent_cancelCustomDatesSubscription = function _SkyDatepickerComponent_cancelCustomDatesSubscription() {
2146
2148
  if (__classPrivateFieldGet(this, _SkyDatepickerComponent_customDatesSubscription, "f")) {
2147
2149
  __classPrivateFieldGet(this, _SkyDatepickerComponent_customDatesSubscription, "f").unsubscribe();
@@ -2210,7 +2212,7 @@ class SkyFuzzyDatepickerInputDirective {
2210
2212
  constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, resourcesService, datepickerComponent) {
2211
2213
  _SkyFuzzyDatepickerInputDirective_instances.add(this);
2212
2214
  /**
2213
- * Indicates whether to disable date validation on the fuzzy datepicker input.
2215
+ * Whether to disable date validation on the fuzzy datepicker input.
2214
2216
  * @default false
2215
2217
  */
2216
2218
  this.skyDatepickerNoValidate = false;
@@ -2265,7 +2267,7 @@ class SkyFuzzyDatepickerInputDirective {
2265
2267
  });
2266
2268
  }
2267
2269
  /**
2268
- * Specifies the date format for the input. Place this attribute on the `input` element
2270
+ * The date format for the input. Place this attribute on the `input` element
2269
2271
  * to override the default in `SkyDatepickerConfigService`.
2270
2272
  * @default "MM/DD/YYYY"
2271
2273
  */
@@ -2284,7 +2286,7 @@ class SkyFuzzyDatepickerInputDirective {
2284
2286
  __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_preferredShortDateFormat, "f"));
2285
2287
  }
2286
2288
  /**
2287
- * Indicates whether to disable the datepicker.
2289
+ * Whether to disable the datepicker.
2288
2290
  * @default false
2289
2291
  */
2290
2292
  set disabled(value) {
@@ -2296,7 +2298,7 @@ class SkyFuzzyDatepickerInputDirective {
2296
2298
  return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__disabled, "f");
2297
2299
  }
2298
2300
  /**
2299
- * Indicates whether to prevent users from specifying dates that are in the future.
2301
+ * Whether to prevent users from specifying dates that are in the future.
2300
2302
  * Place this attribute on the `input` element.
2301
2303
  * @default false
2302
2304
  */
@@ -2308,7 +2310,7 @@ class SkyFuzzyDatepickerInputDirective {
2308
2310
  return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__futureDisabled, "f");
2309
2311
  }
2310
2312
  /**
2311
- * Specifies the latest fuzzy date allowed. Place this attribute on the `input` element
2313
+ * The latest fuzzy date allowed. Place this attribute on the `input` element
2312
2314
  * to prevent fuzzy dates after a specified date. This property accepts
2313
2315
  * a `SkyFuzzyDate` value that includes numeric month, day, and year values.
2314
2316
  * For example: `{ month: 1, day: 1, year: 2027 }`.
@@ -2322,7 +2324,7 @@ class SkyFuzzyDatepickerInputDirective {
2322
2324
  return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__maxDate, "f");
2323
2325
  }
2324
2326
  /**
2325
- * Specifies the earliest fuzzy date allowed. Place this attribute on the `input` element
2327
+ * The earliest fuzzy date allowed. Place this attribute on the `input` element
2326
2328
  * to prevent fuzzy dates before a specified date. This property accepts a `SkyFuzzyDate` value
2327
2329
  * that includes numeric month, day, and year values.
2328
2330
  * For example: `{ month: 1, day: 1, year: 2007 }`.
@@ -2336,7 +2338,7 @@ class SkyFuzzyDatepickerInputDirective {
2336
2338
  return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__minDate, "f");
2337
2339
  }
2338
2340
  /**
2339
- * Specifies the starting day of the week in the calendar, where `0` sets the starting day
2341
+ * The starting day of the week in the calendar, where `0` sets the starting day
2340
2342
  * to Sunday. Place this attribute on the `input` element to override the default
2341
2343
  * in `SkyDatepickerConfigService`.
2342
2344
  * @default 0
@@ -2351,7 +2353,7 @@ class SkyFuzzyDatepickerInputDirective {
2351
2353
  return __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective__startingDay, "f") || __classPrivateFieldGet(this, _SkyFuzzyDatepickerInputDirective_configService, "f").startingDay;
2352
2354
  }
2353
2355
  /**
2354
- * Indicates whether to require the year in fuzzy dates.
2356
+ * Whether to require the year in fuzzy dates.
2355
2357
  * @default false
2356
2358
  */
2357
2359
  set yearRequired(value) {
@@ -2391,7 +2393,7 @@ class SkyFuzzyDatepickerInputDirective {
2391
2393
  }
2392
2394
  ngAfterViewInit() {
2393
2395
  // This is needed to address a bug in Angular 4.
2394
- // When a control value is set intially, its value is not represented on the view.
2396
+ // When a control value is set initially, its value is not represented on the view.
2395
2397
  // See: https://github.com/angular/angular/issues/13792
2396
2398
  // Of note is the parent check which allows us to determine if the form is reactive.
2397
2399
  // Without this check there is a changed before checked error
@@ -2667,7 +2669,7 @@ class SkyDatepickerInputDirective {
2667
2669
  constructor(adapter, changeDetector, configService, elementRef, localeProvider, renderer, resourcesService, datepickerComponent) {
2668
2670
  _SkyDatepickerInputDirective_instances.add(this);
2669
2671
  /**
2670
- * Indicates whether to disable date validation on the datepicker input.
2672
+ * Whether to disable date validation on the datepicker input.
2671
2673
  * @default false
2672
2674
  */
2673
2675
  this.skyDatepickerNoValidate = false;
@@ -2724,7 +2726,7 @@ class SkyDatepickerInputDirective {
2724
2726
  });
2725
2727
  }
2726
2728
  /**
2727
- * Specifies the date format for the input. Place this attribute on the `input` element
2729
+ * The date format for the input. Place this attribute on the `input` element
2728
2730
  * to override the default in the `SkyDatepickerConfigService`.
2729
2731
  * @default "MM/DD/YYYY"
2730
2732
  */
@@ -2742,7 +2744,7 @@ class SkyDatepickerInputDirective {
2742
2744
  __classPrivateFieldGet(this, _SkyDatepickerInputDirective_preferredShortDateFormat, "f"));
2743
2745
  }
2744
2746
  /**
2745
- * Indicates whether to disable the datepicker.
2747
+ * Whether to disable the datepicker.
2746
2748
  * @default false
2747
2749
  */
2748
2750
  set disabled(value) {
@@ -2754,7 +2756,7 @@ class SkyDatepickerInputDirective {
2754
2756
  return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__disabled, "f");
2755
2757
  }
2756
2758
  /**
2757
- * Specifies the latest date that is available in the calendar. Place this attribute on
2759
+ * The latest date that is available in the calendar. Place this attribute on
2758
2760
  * the `input` element to override the default in `SkyDatepickerConfigService`.
2759
2761
  */
2760
2762
  set maxDate(value) {
@@ -2767,7 +2769,7 @@ class SkyDatepickerInputDirective {
2767
2769
  return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__maxDate, "f") || __classPrivateFieldGet(this, _SkyDatepickerInputDirective_configService, "f").maxDate;
2768
2770
  }
2769
2771
  /**
2770
- * Specifies the earliest date that is available in the calendar. Place this attribute on
2772
+ * The earliest date that is available in the calendar. Place this attribute on
2771
2773
  * 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.
2772
2774
  */
2773
2775
  set minDate(value) {
@@ -2795,7 +2797,7 @@ class SkyDatepickerInputDirective {
2795
2797
  }
2796
2798
  }
2797
2799
  /**
2798
- * Specifies the starting day of the week in the calendar, where `0` sets the starting day
2800
+ * The starting day of the week in the calendar, where `0` sets the starting day
2799
2801
  * to Sunday. Place this attribute on the `input` element to override the default
2800
2802
  * in `SkyDatepickerConfigService`.
2801
2803
  * @default 0
@@ -2810,7 +2812,7 @@ class SkyDatepickerInputDirective {
2810
2812
  return __classPrivateFieldGet(this, _SkyDatepickerInputDirective__startingDay, "f") || __classPrivateFieldGet(this, _SkyDatepickerInputDirective_configService, "f").startingDay;
2811
2813
  }
2812
2814
  /**
2813
- * Indicates whether the format of the date value must match the format from the `dateFormat` value.
2815
+ * Whether the format of the date value must match the format from the `dateFormat` value.
2814
2816
  * If this property is `true` and the datepicker input directive cannot find an exact match, then
2815
2817
  * the input is marked as invalid.
2816
2818
  * If this property is `false` and the datepicker input directive cannot find an exact match, then
@@ -2847,7 +2849,7 @@ class SkyDatepickerInputDirective {
2847
2849
  }
2848
2850
  ngAfterViewInit() {
2849
2851
  // This is needed to address a bug in Angular 4.
2850
- // When a control value is set intially, its value is not represented on the view.
2852
+ // When a control value is set initially, its value is not represented on the view.
2851
2853
  // See: https://github.com/angular/angular/issues/13792
2852
2854
  // Of note is the parent check which allows us to determine if the form is reactive.
2853
2855
  // Without this check there is a changed before checked error
@@ -3757,12 +3759,12 @@ class SkyDateRangePickerComponent {
3757
3759
  constructor(changeDetector, dateRangeService, formBuilder, localeProvider, ngZone, themeSvc) {
3758
3760
  _SkyDateRangePickerComponent_instances.add(this);
3759
3761
  /**
3760
- * Indicates whether to require users to specify a start date.
3762
+ * Whether to require users to specify a start date.
3761
3763
  * @default false
3762
3764
  */
3763
3765
  this.startDateRequired = false;
3764
3766
  /**
3765
- * Indicates whether to require users to specify a end date.
3767
+ * Whether to require users to specify a end date.
3766
3768
  * @default false
3767
3769
  */
3768
3770
  this.endDateRequired = false;
@@ -3835,7 +3837,7 @@ class SkyDateRangePickerComponent {
3835
3837
  });
3836
3838
  }
3837
3839
  /**
3838
- * Specifies IDs for the date range options to include in the picker's dropdown.
3840
+ * IDs for the date range options to include in the picker's dropdown.
3839
3841
  * The options specify calculator objects that return two `Date` objects to represent date ranges.
3840
3842
  * By default, this property includes all `SkyDateRangeCalculatorId` values.
3841
3843
  */
@@ -3869,7 +3871,7 @@ class SkyDateRangePickerComponent {
3869
3871
  return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__calculatorIds, "f");
3870
3872
  }
3871
3873
  /**
3872
- * Specifies a date format for
3874
+ * The date format for
3873
3875
  * [the `sky-datepicker` components](https://developer.blackbaud.com/skyux/components/datepicker)
3874
3876
  * that make up the date range picker. The text input is a composite component of
3875
3877
  * up to two `sky-datepicker` components.
@@ -3883,7 +3885,7 @@ class SkyDateRangePickerComponent {
3883
3885
  return __classPrivateFieldGet(this, _SkyDateRangePickerComponent__dateFormat, "f");
3884
3886
  }
3885
3887
  /**
3886
- * Indicates whether to disable the date range picker.
3888
+ * Whether to disable the date range picker.
3887
3889
  * @default false
3888
3890
  */
3889
3891
  set disabled(value) {
@@ -3921,7 +3923,7 @@ class SkyDateRangePickerComponent {
3921
3923
  __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_setValue).call(this, newValue, false);
3922
3924
  __classPrivateFieldGet(this, _SkyDateRangePickerComponent_instances, "m", _SkyDateRangePickerComponent_resetFormGroupValue).call(this);
3923
3925
  // This is needed to address a bug in Angular 4.
3924
- // When a control value is set intially, its value is not represented on the view.
3926
+ // When a control value is set initially, its value is not represented on the view.
3925
3927
  // See: https://github.com/angular/angular/issues/13792
3926
3928
  /* istanbul ignore else */
3927
3929
  if (__classPrivateFieldGet(this, _SkyDateRangePickerComponent_control, "f")) {
@@ -4250,7 +4252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImpo
4250
4252
  }]
4251
4253
  }] });
4252
4254
 
4253
- 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;
4255
+ 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;
4254
4256
  let nextId = 0;
4255
4257
  /**
4256
4258
  * Creates a SKY UX-themed replacement for the HTML `input` element with `type="time"`.
@@ -4278,7 +4280,7 @@ class SkyTimepickerComponent {
4278
4280
  _SkyTimepickerComponent_timepickerUnsubscribe.set(this, new Subject());
4279
4281
  _SkyTimepickerComponent_ngUnsubscribe.set(this, new Subject());
4280
4282
  _SkyTimepickerComponent_overlay.set(this, void 0);
4281
- _SkyTimepickerComponent_overlayKeydownListner.set(this, void 0);
4283
+ _SkyTimepickerComponent_overlayKeydownListener.set(this, void 0);
4282
4284
  _SkyTimepickerComponent__disabled.set(this, false);
4283
4285
  _SkyTimepickerComponent__timepickerRef.set(this, void 0);
4284
4286
  _SkyTimepickerComponent_affixService.set(this, void 0);
@@ -4383,7 +4385,7 @@ class SkyTimepickerComponent {
4383
4385
  set timepickerRef(value) {
4384
4386
  if (value) {
4385
4387
  __classPrivateFieldSet(this, _SkyTimepickerComponent__timepickerRef, value, "f");
4386
- // Wait for the timepicker component to render before guaging dimensions.
4388
+ // Wait for the timepicker component to render before gauging dimensions.
4387
4389
  setTimeout(() => {
4388
4390
  __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
4389
4391
  __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_createAffixer).call(this);
@@ -4462,7 +4464,7 @@ class SkyTimepickerComponent {
4462
4464
  this.localeFormat = data.localeFormat;
4463
4465
  this.minuteMultiplier = data.minuteMultiplier;
4464
4466
  }
4465
- onCloseButtonCick() {
4467
+ onCloseButtonClick() {
4466
4468
  __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_closePicker).call(this);
4467
4469
  }
4468
4470
  setTime(event) {
@@ -4487,7 +4489,7 @@ class SkyTimepickerComponent {
4487
4489
  __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_openPicker).call(this);
4488
4490
  }
4489
4491
  }
4490
- _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() {
4492
+ _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() {
4491
4493
  var _a;
4492
4494
  __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyAffixer).call(this);
4493
4495
  __classPrivateFieldGet(this, _SkyTimepickerComponent_instances, "m", _SkyTimepickerComponent_destroyOverlay).call(this);
@@ -4552,7 +4554,7 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
4552
4554
  __classPrivateFieldSet(this, _SkyTimepickerComponent_overlay, undefined, "f");
4553
4555
  }
4554
4556
  }, _SkyTimepickerComponent_addKeydownListener = function _SkyTimepickerComponent_addKeydownListener() {
4555
- __classPrivateFieldSet(this, _SkyTimepickerComponent_overlayKeydownListner, fromEvent(window.document, 'keydown')
4557
+ __classPrivateFieldSet(this, _SkyTimepickerComponent_overlayKeydownListener, fromEvent(window.document, 'keydown')
4556
4558
  .pipe(takeUntil(__classPrivateFieldGet(this, _SkyTimepickerComponent_ngUnsubscribe, "f")))
4557
4559
  .subscribe((event) => {
4558
4560
  var _a;
@@ -4571,13 +4573,13 @@ _SkyTimepickerComponent_affixer = new WeakMap(), _SkyTimepickerComponent_timepic
4571
4573
  __classPrivateFieldSet(this, _SkyTimepickerComponent_timepickerUnsubscribe, new Subject(), "f");
4572
4574
  }
4573
4575
  /* istanbul ignore next */
4574
- (_a = __classPrivateFieldGet(this, _SkyTimepickerComponent_overlayKeydownListner, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe();
4576
+ (_a = __classPrivateFieldGet(this, _SkyTimepickerComponent_overlayKeydownListener, "f")) === null || _a === void 0 ? void 0 : _a.unsubscribe();
4575
4577
  };
4576
4578
  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 });
4577
- 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 });
4579
+ 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 });
4578
4580
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.11", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
4579
4581
  type: Component,
4580
- 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"] }]
4582
+ 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"] }]
4581
4583
  }], ctorParameters: function () {
4582
4584
  return [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$1.SkyInputBoxHostService, decorators: [{
4583
4585
  type: Optional
@@ -4668,7 +4670,7 @@ class SkyTimepickerInputDirective {
4668
4670
  }
4669
4671
  // TODO: In a future breaking change - make this more specific than "string"
4670
4672
  /**
4671
- * Specifies the 12-hour `hh` or 24-hour `HH` time format for the input.
4673
+ * The 12-hour `hh` or 24-hour `HH` time format for the input.
4672
4674
  * @default "hh"
4673
4675
  */
4674
4676
  set timeFormat(value) {
@@ -4678,7 +4680,7 @@ class SkyTimepickerInputDirective {
4678
4680
  return __classPrivateFieldGet(this, _SkyTimepickerInputDirective__timeFormat, "f");
4679
4681
  }
4680
4682
  /**
4681
- * Indicates whether to disable the timepicker.
4683
+ * Whether to disable the timepicker.
4682
4684
  * @default false
4683
4685
  */
4684
4686
  get disabled() {