@skyux/datetime 7.4.1 → 7.5.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.
@@ -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;
@@ -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) {
@@ -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();
@@ -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
@@ -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
@@ -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