@skyux/datetime 12.2.0 → 12.4.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 (13) hide show
  1. package/fesm2022/skyux-datetime-testing.mjs +225 -2
  2. package/fesm2022/skyux-datetime-testing.mjs.map +1 -1
  3. package/fesm2022/skyux-datetime.mjs +21 -31
  4. package/fesm2022/skyux-datetime.mjs.map +1 -1
  5. package/lib/modules/timepicker/timepicker.directive.d.ts +1 -0
  6. package/package.json +9 -9
  7. package/testing/modules/timepicker/timepicker-harness-filters.d.ts +6 -0
  8. package/testing/modules/timepicker/timepicker-harness.d.ts +42 -0
  9. package/testing/modules/timepicker/timepicker-input-harness.d.ts +18 -0
  10. package/testing/modules/timepicker/timepicker-selector-column-harness.d.ts +24 -0
  11. package/testing/modules/timepicker/timepicker-selector-harness-filters.d.ts +7 -0
  12. package/testing/modules/timepicker/timepicker-selector-harness.d.ts +36 -0
  13. package/testing/public-api.d.ts +4 -0
package/fesm2022/skyux-datetime.mjs CHANGED
@@ -3262,8 +3262,8 @@ class SkyFuzzyDatepickerInputDirective {
3262
3262
  }
3263
3263
  /* istanbul ignore next */
3264
3264
  #fuzzyDatesEqual(dateA, dateB) {
3265
- return (dateA !== undefined &&
3266
- dateB !== undefined &&
3265
+ return !!(dateA &&
3266
+ dateB &&
3267
3267
  ((!dateA.day && !dateB.day) || dateA.day === dateB.day) &&
3268
3268
  ((!dateA.month && !dateB.month) || dateA.month === dateB.month) &&
3269
3269
  ((!dateA.year && !dateB.year) || dateA.year === dateB.year));
@@ -4869,7 +4869,8 @@ class SkyTimepickerComponent {
4869
4869
  this.#openPicker();
4870
4870
  }
4871
4871
  highlightMinute(selectedMinute, minute) {
4872
- return Math.floor(selectedMinute / 5) === minute / 5;
4872
+ const radix = this.is8601 ? 15 : 5;
4873
+ return Math.floor(selectedMinute / radix) === minute / radix;
4873
4874
  }
4874
4875
  #closePicker() {
4875
4876
  this.#destroyAffixer();
@@ -4974,11 +4975,11 @@ class SkyTimepickerComponent {
4974
4975
  this.#overlayKeyupListener?.unsubscribe();
4975
4976
  }
4976
4977
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1$2.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$2.SkyCoreAdapterService }, { token: i1$2.SkyOverlayService }, { token: i2$3.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
4977
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyTimepickerComponent, isStandalone: false, 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 @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n #triggerButtonRef\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]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n >\n <sky-icon iconName=\"clock\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n #timepickerRef\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 >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n @for (hour of hours; track hour) {\n <li>\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 }\n </ol>\n </section>\n <section class=\"sky-timepicker-column\">\n <ol>\n @for (minute of minutes; track minute) {\n <li>\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{\n 'sky-btn-active': highlightMinute(selectedMinute, minute)\n }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n }\n </ol>\n </section>\n @if (!is8601) {\n <section 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 }\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:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-focus-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-theme-modern:not(.sky-theme-brand-base) .sky-timepicker-container{--sky-override-timepicker-border: solid 1px #cdcfd2;--sky-override-timepicker-button-background-color: var(--modern-color-white);--sky-override-timepicker-button-padding-vertical: var(--modern-size-5);--sky-override-timepicker-button-selected-hover-border-color: var( --modern-color-blue-50 );--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-content-space: var(--modern-space-s) var(--modern-space-s) 0 var(--modern-space-s);--sky-override-timepicker-font-size: 16px;--sky-override-timepicker-footer-padding-horizontal: var(--modern-size-10);--sky-override-timepicker-text-color: var(--modern-color-black)}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s));border:var(--sky-override-timepicker-border, none)}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-separator-light) solid var(--sky-color-border-separator-light));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{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m));width:100%;height:100%}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-action-tertiary-hover)))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-selected)));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.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;padding:var(--sky-override-timepicker-content-space, var(--sky-space-inset-balanced-m));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m))}.sky-timepicker-footer .sky-timepicker-column{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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4978
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SkyTimepickerComponent, isStandalone: false, 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 @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n #triggerButtonRef\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]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n >\n <sky-icon iconName=\"clock\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n #timepickerRef\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 >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column sky-timepicker-column-hours\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n @for (hour of hours; track hour) {\n <li>\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 }\n </ol>\n </section>\n <section class=\"sky-timepicker-column sky-timepicker-column-minutes\">\n <ol>\n @for (minute of minutes; track minute) {\n <li>\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{\n 'sky-btn-active': highlightMinute(selectedMinute, minute)\n }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n }\n </ol>\n </section>\n @if (!is8601) {\n <section class=\"sky-timepicker-column sky-timepicker-column-meridies\">\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 }\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:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-focus-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-theme-modern:not(.sky-theme-brand-base) .sky-timepicker-container{--sky-override-timepicker-border: solid 1px #cdcfd2;--sky-override-timepicker-button-background-color: var(--modern-color-white);--sky-override-timepicker-button-padding-vertical: var(--modern-size-5);--sky-override-timepicker-button-selected-hover-border-color: var( --modern-color-blue-50 );--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-content-space: var(--modern-space-s) var(--modern-space-s) 0 var(--modern-space-s);--sky-override-timepicker-font-size: 16px;--sky-override-timepicker-footer-padding-horizontal: var(--modern-size-10);--sky-override-timepicker-text-color: var(--modern-color-black)}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s));border:var(--sky-override-timepicker-border, none)}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-separator-light) solid var(--sky-color-border-separator-light));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{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m));width:100%;height:100%}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-action-tertiary-hover)))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-selected)));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.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;padding:var(--sky-override-timepicker-content-space, var(--sky-space-inset-balanced-m));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m))}.sky-timepicker-footer .sky-timepicker-column{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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
4978
4979
  }
4979
4980
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
4980
4981
  type: Component,
4981
- args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-timepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n #triggerButtonRef\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]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n >\n <sky-icon iconName=\"clock\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n #timepickerRef\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 >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n @for (hour of hours; track hour) {\n <li>\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 }\n </ol>\n </section>\n <section class=\"sky-timepicker-column\">\n <ol>\n @for (minute of minutes; track minute) {\n <li>\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{\n 'sky-btn-active': highlightMinute(selectedMinute, minute)\n }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n }\n </ol>\n </section>\n @if (!is8601) {\n <section 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 }\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:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-focus-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-theme-modern:not(.sky-theme-brand-base) .sky-timepicker-container{--sky-override-timepicker-border: solid 1px #cdcfd2;--sky-override-timepicker-button-background-color: var(--modern-color-white);--sky-override-timepicker-button-padding-vertical: var(--modern-size-5);--sky-override-timepicker-button-selected-hover-border-color: var( --modern-color-blue-50 );--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-content-space: var(--modern-space-s) var(--modern-space-s) 0 var(--modern-space-s);--sky-override-timepicker-font-size: 16px;--sky-override-timepicker-footer-padding-horizontal: var(--modern-size-10);--sky-override-timepicker-text-color: var(--modern-color-black)}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s));border:var(--sky-override-timepicker-border, none)}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-separator-light) solid var(--sky-color-border-separator-light));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{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m));width:100%;height:100%}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-action-tertiary-hover)))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-selected)));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.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;padding:var(--sky-override-timepicker-content-space, var(--sky-space-inset-balanced-m));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m))}.sky-timepicker-footer .sky-timepicker-column{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}\n"] }]
4982
+ args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-timepicker\">\n @if (!inputBoxHostService) {\n <div class=\"sky-input-group\">\n <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n </div>\n }\n</div>\n\n<ng-template #inputTemplateRef>\n <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n <div class=\"sky-input-group-btn\">\n <button\n #triggerButtonRef\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]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [attr.id]=\"triggerButtonId\"\n [attr.title]=\"\n inputBoxHostService?.labelText\n ? ('skyux_timepicker_button_label_context'\n | skyLibResources: inputBoxHostService?.labelText)\n : ('skyux_timepicker_button_label' | skyLibResources)\n \"\n [disabled]=\"disabled\"\n (click)=\"onTriggerButtonClick()\"\n >\n <sky-icon iconName=\"clock\" iconSize=\"l\" />\n </button>\n </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n <div\n #timepickerRef\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 >\n <div class=\"sky-timepicker-content\">\n <section\n class=\"sky-timepicker-column sky-timepicker-column-hours\"\n [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n >\n <ol>\n @for (hour of hours; track hour) {\n <li>\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 }\n </ol>\n </section>\n <section class=\"sky-timepicker-column sky-timepicker-column-minutes\">\n <ol>\n @for (minute of minutes; track minute) {\n <li>\n <button\n name=\"minute\"\n type=\"button\"\n [ngClass]=\"{\n 'sky-btn-active': highlightMinute(selectedMinute, minute)\n }\"\n (click)=\"setTime($event)\"\n >\n {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n </button>\n </li>\n }\n </ol>\n </section>\n @if (!is8601) {\n <section class=\"sky-timepicker-column sky-timepicker-column-meridies\">\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 }\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:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-focus-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-theme-modern:not(.sky-theme-brand-base) .sky-timepicker-container{--sky-override-timepicker-border: solid 1px #cdcfd2;--sky-override-timepicker-button-background-color: var(--modern-color-white);--sky-override-timepicker-button-padding-vertical: var(--modern-size-5);--sky-override-timepicker-button-selected-hover-border-color: var( --modern-color-blue-50 );--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-content-space: var(--modern-space-s) var(--modern-space-s) 0 var(--modern-space-s);--sky-override-timepicker-font-size: 16px;--sky-override-timepicker-footer-padding-horizontal: var(--modern-size-10);--sky-override-timepicker-text-color: var(--modern-color-black)}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s));border:var(--sky-override-timepicker-border, none)}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-separator-light) solid var(--sky-color-border-separator-light));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{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m));width:100%;height:100%}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-action-tertiary-hover)))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-selected)));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.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;padding:var(--sky-override-timepicker-content-space, var(--sky-space-inset-balanced-m));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m))}.sky-timepicker-footer .sky-timepicker-column{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}\n"] }]
4982
4983
  }], ctorParameters: () => [{ type: i1$2.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1$2.SkyCoreAdapterService }, { type: i1$2.SkyOverlayService }, { type: i2$3.SkyInputBoxHostService, decorators: [{
4983
4984
  type: Optional
4984
4985
  }] }, { type: i3.SkyThemeService, decorators: [{
@@ -4992,31 +4993,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
4992
4993
  type: Output
4993
4994
  }], timepickerRef: [{
4994
4995
  type: ViewChild,
4995
- args: ['timepickerRef', {
4996
- read: ElementRef,
4997
- }]
4996
+ args: ['timepickerRef', { read: ElementRef }]
4998
4997
  }], timepickerTemplateRef: [{
4999
4998
  type: ViewChild,
5000
- args: ['timepickerTemplateRef', {
5001
- read: TemplateRef,
5002
- }]
4999
+ args: ['timepickerTemplateRef', { read: TemplateRef }]
5003
5000
  }], triggerButtonRef: [{
5004
5001
  type: ViewChild,
5005
- args: ['triggerButtonRef', {
5006
- read: ElementRef,
5007
- }]
5002
+ args: ['triggerButtonRef', { read: ElementRef }]
5008
5003
  }], inputTemplateRef: [{
5009
5004
  type: ViewChild,
5010
- args: ['inputTemplateRef', {
5011
- read: TemplateRef,
5012
- static: true,
5013
- }]
5005
+ args: ['inputTemplateRef', { read: TemplateRef, static: true }]
5014
5006
  }], triggerButtonTemplateRef: [{
5015
5007
  type: ViewChild,
5016
- args: ['triggerButtonTemplateRef', {
5017
- read: TemplateRef,
5018
- static: true,
5019
- }]
5008
+ args: ['triggerButtonTemplateRef', { read: TemplateRef, static: true }]
5020
5009
  }] } });
5021
5010
 
5022
5011
  const SKY_TIMEPICKER_VALUE_ACCESSOR = {
@@ -5032,6 +5021,7 @@ const SKY_TIMEPICKER_VALIDATOR = {
5032
5021
  class SkyTimepickerInputDirective {
5033
5022
  #_timeFormat = 'hh';
5034
5023
  // TODO: In a future breaking change - grab the parent component through dependency injection and remove this setter.
5024
+ // Also remove the HostBinding that references it.
5035
5025
  /**
5036
5026
  * Creates the timepicker input field and picker. Place this attribute on an `input` element,
5037
5027
  * and wrap the input in a `sky-timepicker` component.
@@ -5045,6 +5035,9 @@ class SkyTimepickerInputDirective {
5045
5035
  this.#_skyTimepickerInput = value;
5046
5036
  this.#updateTimepickerInput();
5047
5037
  }
5038
+ get hostTimepickerInput() {
5039
+ return this.skyTimepickerInput;
5040
+ }
5048
5041
  // TODO: In a future breaking change - make this more specific than "string"
5049
5042
  /**
5050
5043
  * The 12-hour `hh` or 24-hour `HH` time format for the input.
@@ -5105,9 +5098,7 @@ class SkyTimepickerInputDirective {
5105
5098
  // Watch for the control to be added and initialize the value immediately.
5106
5099
  /* istanbul ignore else */
5107
5100
  if (this.#control && this.#control.parent) {
5108
- this.#control.setValue(this.#modelValue, {
5109
- emitEvent: false,
5110
- });
5101
+ this.#control.setValue(this.#modelValue, { emitEvent: false });
5111
5102
  this.#changeDetector.markForCheck();
5112
5103
  }
5113
5104
  }
@@ -5155,11 +5146,7 @@ class SkyTimepickerInputDirective {
5155
5146
  }
5156
5147
  /* istanbul ignore next */
5157
5148
  if (value.local === 'Invalid date') {
5158
- return {
5159
- skyTime: {
5160
- invalid: control.value,
5161
- },
5162
- };
5149
+ return { skyTime: { invalid: control.value } };
5163
5150
  }
5164
5151
  return null;
5165
5152
  }
@@ -5217,7 +5204,7 @@ class SkyTimepickerInputDirective {
5217
5204
  // eslint-disable-next-line @typescript-eslint/no-empty-function
5218
5205
  #_validatorChange = () => { };
5219
5206
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTimepickerInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
5220
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: SkyTimepickerInputDirective, isStandalone: false, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
5207
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.1", type: SkyTimepickerInputDirective, isStandalone: false, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" }, properties: { "attr.skyTimepickerInput": "this.hostTimepickerInput" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
5221
5208
  }
5222
5209
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
5223
5210
  type: Directive,
@@ -5228,6 +5215,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
5228
5215
  }]
5229
5216
  }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { skyTimepickerInput: [{
5230
5217
  type: Input
5218
+ }], hostTimepickerInput: [{
5219
+ type: HostBinding,
5220
+ args: ['attr.skyTimepickerInput']
5231
5221
  }], timeFormat: [{
5232
5222
  type: Input
5233
5223
  }], returnFormat: [{