@skyux/datetime 11.21.0 → 11.23.0

package/fesm2022/skyux-datetime.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { NgModule, inject, Injectable, Pipe, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, output, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener, DestroyRef, Injector, signal, computed, booleanAttribute, HostBinding } from '@angular/core';
+import { NgModule, inject, Injectable, Pipe, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, DestroyRef, output, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener, Injector, signal, computed, runInInjectionContext, booleanAttribute, HostBinding } from '@angular/core';
 import * as i1 from '@skyux/i18n';
-import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyAppLocaleProvider, SkyIntlDateFormatter } from '@skyux/i18n';
+import { SkyLibResourcesService, SkyI18nModule, SkyAppLocaleProvider, SkyIntlDateFormatter } from '@skyux/i18n';
 import { Subject, takeUntil as takeUntil$1, fromEvent, filter, map, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import moment from 'moment';
@@ -137,36 +137,18 @@ const RESOURCES = {
     },
 };
 SkyLibResourcesService.addResources(RESOURCES);
-class SkyDatetimeResourcesProvider {
-    getString(localeInfo, name) {
-        return getLibStringForLocale(RESOURCES, localeInfo.locale, name);
-    }
-}
 /**
  * Import into any component library module that needs to use resource strings.
  */
 class SkyDatetimeResourcesModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatetimeResourcesModule, providers: [
-            {
-                provide: SKY_LIB_RESOURCES_PROVIDERS,
-                useClass: SkyDatetimeResourcesProvider,
-                multi: true,
-            },
-        ], imports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatetimeResourcesModule, imports: [SkyI18nModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
-                    providers: [
-                        {
-                            provide: SKY_LIB_RESOURCES_PROVIDERS,
-                            useClass: SkyDatetimeResourcesProvider,
-                            multi: true,
-                        },
-                    ],
                 }]
         }] });
 
@@ -1171,11 +1153,11 @@ class SkyDatepickerCalendarInnerComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "@if (datepickerMode) {\n  <div class=\"sky-datepicker-calendar-inner\">\n    <div class=\"sky-datepicker-calendar-header\">\n      <span class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          [attr.aria-label]=\"previousLabel\"\n          (click)=\"moveCalendar($event, -1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n        </button>\n      </span>\n      <span class=\"sky-datepicker-header-center\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          [id]=\"datepickerId + '-title'\"\n          [disabled]=\"datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepickerMode === maxMode\n          }\"\n          (click)=\"toggleModeCalendar($event)\"\n        >\n          <strong>{{ title }}</strong>\n        </button>\n      </span>\n      <span class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          [attr.aria-label]=\"nextLabel\"\n          (click)=\"moveCalendar($event, 1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n        </button>\n      </span>\n    </div>\n    <ng-content />\n  </div>\n}\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:none}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron{font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "@if (datepickerMode) {\n  <div class=\"sky-datepicker-calendar-inner\">\n    <div class=\"sky-datepicker-calendar-header\">\n      <span class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          [attr.aria-label]=\"previousLabel\"\n          (click)=\"moveCalendar($event, -1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n        </button>\n      </span>\n      <span class=\"sky-datepicker-header-center\">\n        <!-- display: inline -->\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          [id]=\"datepickerId + '-title'\"\n          [disabled]=\"datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepickerMode === maxMode\n          }\"\n          (click)=\"toggleModeCalendar($event)\"\n          >{{ title }}</button\n        >\n      </span>\n      <span class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          [attr.aria-label]=\"nextLabel\"\n          (click)=\"moveCalendar($event, 1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n        </button>\n      </span>\n    </div>\n    <ng-content />\n  </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-chevron-size: inherit;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-datepicker-calendar-inner{--sky-override-chevron-color: var(--sky-color-text-default);--sky-override-datepicker-box-shadow: inset 0 0 0 1px var(--modern-color-gray-15);--sky-override-datepicker-button-active-border-width: var(--modern-size-1);--sky-override-datepicker-button-background-color: var(--modern-color-white);--sky-override-datepicker-button-background-color-active: var( --modern-color-white );--sky-override-datepicker-button-background-color-hover: var( --modern-color-white );--sky-override-datepicker-button-border-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-override-datepicker-button-border-color-transparent: var( --modern-color-transparent );--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-horizontal-padding: 10px;--sky-override-datepicker-month-year-button-padding: 5px 7px;--sky-override-datepicker-nav-button-padding: 5px 7px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 5px;--sky-override-datepicker-weekday-font-size: 12.8px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner .sky-datepicker-calendar-header .sky-btn-default{line-height:1}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-yearpicker td{width:20%}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-monthpicker td{width:33%}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border);box-shadow:var(--sky-override-datepicker-box-shadow)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-bottomless-top-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-right-m)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-left-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-override-datepicker-button-border-color-transparent, var(--sky-color-border-action-tertiary-active)))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-border-color-transparent, var(--sky-border-width-action-disabled)) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-balanced-xs))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-calendar-title{font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-emphasized));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-pillarbox-1_4-top-s) var(--sky-space-inset-pillarbox-1_4-right-s) var(--sky-space-inset-pillarbox-1_4-bottom-s) var(--sky-space-inset-pillarbox-1_4-left-s))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-active-border-width, var(--sky-border-width-action-active)) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-datepicker-chevron-size, var(--sky-size-icon-s))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-space-inset-pillarbox-1_2-top-s) var(--sky-space-inset-pillarbox-1_2-right-s) var(--sky-space-inset-pillarbox-1_2-bottom-s) var(--sky-space-inset-pillarbox-1_2-left-s))}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-datepicker-inner', encapsulation: ViewEncapsulation.None, template: "@if (datepickerMode) {\n  <div class=\"sky-datepicker-calendar-inner\">\n    <div class=\"sky-datepicker-calendar-header\">\n      <span class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          [attr.aria-label]=\"previousLabel\"\n          (click)=\"moveCalendar($event, -1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n        </button>\n      </span>\n      <span class=\"sky-datepicker-header-center\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          [id]=\"datepickerId + '-title'\"\n          [disabled]=\"datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepickerMode === maxMode\n          }\"\n          (click)=\"toggleModeCalendar($event)\"\n        >\n          <strong>{{ title }}</strong>\n        </button>\n      </span>\n      <span class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          [attr.aria-label]=\"nextLabel\"\n          (click)=\"moveCalendar($event, 1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n        </button>\n      </span>\n    </div>\n    <ng-content />\n  </div>\n}\n", styles: [".sky-datepicker-calendar-inner{border-radius:5px;background-color:#fff;border-top:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;border-right:1px solid #e2e3e4}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex}.sky-datepicker-calendar-inner .sky-btn-default{border-color:transparent;border:2px solid #ffffff}.sky-datepicker-calendar-inner .sky-btn-default:hover{border-color:#eeeeef}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:#c1e8fb;border:2px solid #00b4f1}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:none}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:#686c73}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-theme-modern .sky-datepicker-calendar-inner{border:none;box-shadow:inset 0 0 0 1px #d2d2d2;border-radius:6px;padding:5px 10px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:none}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default{border:none;box-shadow:inset 0 0 0 1px transparent;padding:5px 7px}.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-active,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default:hover{border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-datepicker-calendar-inner .sky-datepicker-btn-selected,.sky-theme-modern .sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern .sky-btn-sm.sky-datepicker-btn-date{height:30px;min-width:0;padding:0;width:30px}.sky-theme-modern .sky-datepicker-chevron{font-size:16px}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner{background-color:transparent}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner:not(:focus-within){border:none;box-shadow:inset 0 0 0 1px #686c73}.sky-theme-modern.sky-theme-mode-dark .sky-datepicker-calendar-inner .sky-datepicker-btn-selected{background-color:#009cd1}\n"] }]
+            args: [{ selector: 'sky-datepicker-inner', encapsulation: ViewEncapsulation.None, template: "@if (datepickerMode) {\n  <div class=\"sky-datepicker-calendar-inner\">\n    <div class=\"sky-datepicker-calendar-header\">\n      <span class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          [attr.aria-label]=\"previousLabel\"\n          (click)=\"moveCalendar($event, -1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n        </button>\n      </span>\n      <span class=\"sky-datepicker-header-center\">\n        <!-- display: inline -->\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          [id]=\"datepickerId + '-title'\"\n          [disabled]=\"datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepickerMode === maxMode\n          }\"\n          (click)=\"toggleModeCalendar($event)\"\n          >{{ title }}</button\n        >\n      </span>\n      <span class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          [attr.aria-label]=\"nextLabel\"\n          (click)=\"moveCalendar($event, 1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n        </button>\n      </span>\n    </div>\n    <ng-content />\n  </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-chevron-size: inherit;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-datepicker-calendar-inner{--sky-override-chevron-color: var(--sky-color-text-default);--sky-override-datepicker-box-shadow: inset 0 0 0 1px var(--modern-color-gray-15);--sky-override-datepicker-button-active-border-width: var(--modern-size-1);--sky-override-datepicker-button-background-color: var(--modern-color-white);--sky-override-datepicker-button-background-color-active: var( --modern-color-white );--sky-override-datepicker-button-background-color-hover: var( --modern-color-white );--sky-override-datepicker-button-border-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-override-datepicker-button-border-color-transparent: var( --modern-color-transparent );--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-horizontal-padding: 10px;--sky-override-datepicker-month-year-button-padding: 5px 7px;--sky-override-datepicker-nav-button-padding: 5px 7px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 5px;--sky-override-datepicker-weekday-font-size: 12.8px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner .sky-datepicker-calendar-header .sky-btn-default{line-height:1}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-yearpicker td{width:20%}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-monthpicker td{width:33%}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border);box-shadow:var(--sky-override-datepicker-box-shadow)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-bottomless-top-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-right-m)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-left-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-override-datepicker-button-border-color-transparent, var(--sky-color-border-action-tertiary-active)))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-border-color-transparent, var(--sky-border-width-action-disabled)) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-balanced-xs))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-calendar-title{font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-emphasized));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-pillarbox-1_4-top-s) var(--sky-space-inset-pillarbox-1_4-right-s) var(--sky-space-inset-pillarbox-1_4-bottom-s) var(--sky-space-inset-pillarbox-1_4-left-s))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-active-border-width, var(--sky-border-width-action-active)) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-datepicker-chevron-size, var(--sky-size-icon-s))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-space-inset-pillarbox-1_2-top-s) var(--sky-space-inset-pillarbox-1_2-right-s) var(--sky-space-inset-pillarbox-1_2-bottom-s) var(--sky-space-inset-pillarbox-1_2-left-s))}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"] }]
         }], propDecorators: { customDates: [{
                 type: Input
             }], startingDay: [{
@@ -1275,11 +1257,11 @@ class SkyDayPickerButtonComponent {
         this.datepicker = datepicker;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0, template: "@if (date) {\n  <button\n    class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n    tabindex=\"-1\"\n    type=\"button\"\n    [disabled]=\"date.disabled\"\n    [ngClass]=\"{\n      'sky-datepicker-btn-selected': date.selected,\n      'sky-btn-disabled': date.disabled,\n      'sky-btn-active': datepicker.isActive(date),\n      'sky-datepicker-btn-disabled': date.disabled,\n      'sky-datepicker-btn-key-date': date.keyDate\n    }\"\n    [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\n    (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n  >\n    <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n      {{ date.label }}\n    </span>\n  </button>\n}\n", styles: [".sky-datepicker-btn-disabled{font-style:italic}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:5px;width:5px;background-color:#d93a3d;border-radius:50%;left:15px;top:22px}:host-context(.sky-theme-modern) .sky-datepicker-btn-key-date:before{left:12px}.sky-theme-modern .sky-datepicker-btn-key-date:before{left:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0, template: "@if (date) {\n  <button\n    class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n    tabindex=\"-1\"\n    type=\"button\"\n    [disabled]=\"date.disabled\"\n    [ngClass]=\"{\n      'sky-datepicker-btn-selected': date.selected,\n      'sky-btn-disabled': date.disabled,\n      'sky-btn-active': datepicker.isActive(date),\n      'sky-datepicker-btn-disabled': date.disabled,\n      'sky-datepicker-btn-key-date': date.keyDate\n    }\"\n    [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\n    (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n  >\n    <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n      {{ date.label }}\n    </span>\n  </button>\n}\n", styles: [".sky-datepicker-btn-date:not(.sky-theme-modern *){--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-color: #d93a3d;--sky-override-daypicker-key-date-left: 15px;--sky-override-daypicker-key-date-size: 5px;--sky-override-daypicker-key-date-top: 22px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-datepicker-btn-date{--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-left: 12px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxs) / 2))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-daypicker-button', template: "@if (date) {\n  <button\n    class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n    tabindex=\"-1\"\n    type=\"button\"\n    [disabled]=\"date.disabled\"\n    [ngClass]=\"{\n      'sky-datepicker-btn-selected': date.selected,\n      'sky-btn-disabled': date.disabled,\n      'sky-btn-active': datepicker.isActive(date),\n      'sky-datepicker-btn-disabled': date.disabled,\n      'sky-datepicker-btn-key-date': date.keyDate\n    }\"\n    [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\n    (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n  >\n    <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n      {{ date.label }}\n    </span>\n  </button>\n}\n", styles: [".sky-datepicker-btn-disabled{font-style:italic}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:5px;width:5px;background-color:#d93a3d;border-radius:50%;left:15px;top:22px}:host-context(.sky-theme-modern) .sky-datepicker-btn-key-date:before{left:12px}.sky-theme-modern .sky-datepicker-btn-key-date:before{left:12px}\n"] }]
+            args: [{ selector: 'sky-daypicker-button', template: "@if (date) {\n  <button\n    class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n    tabindex=\"-1\"\n    type=\"button\"\n    [disabled]=\"date.disabled\"\n    [ngClass]=\"{\n      'sky-datepicker-btn-selected': date.selected,\n      'sky-btn-disabled': date.disabled,\n      'sky-btn-active': datepicker.isActive(date),\n      'sky-datepicker-btn-disabled': date.disabled,\n      'sky-datepicker-btn-key-date': date.keyDate\n    }\"\n    [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\n    (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n  >\n    <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n      {{ date.label }}\n    </span>\n  </button>\n}\n", styles: [".sky-datepicker-btn-date:not(.sky-theme-modern *){--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-color: #d93a3d;--sky-override-daypicker-key-date-left: 15px;--sky-override-daypicker-key-date-size: 5px;--sky-override-daypicker-key-date-top: 22px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-datepicker-btn-date{--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-left: 12px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxs) / 2))}\n"] }]
         }], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { date: [{
                 type: Input
             }] } });
@@ -1603,11 +1585,11 @@ class SkyDayPickerComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label.full) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{ label.abbr }}</b>\n          </small>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track $index) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label.full) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <!-- display: inline -->\n          <span\n            class=\"sky-datepicker-weekday-text\"\n            [attr.aria-label]=\"label.full\"\n            >{{ label.abbr }}</span\n          >\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track $index) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-daypicker', template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label.full) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{ label.abbr }}</b>\n          </small>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track $index) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'sky-daypicker', template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label.full) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <!-- display: inline -->\n          <span\n            class=\"sky-datepicker-weekday-text\"\n            [attr.aria-label]=\"label.full\"\n            >{{ label.abbr }}</span\n          >\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track $index) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { customDates: [{
                 type: Input
             }], calendarDateRangeChange: [{
@@ -1858,6 +1840,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     }]
             }] } });
 
+/**
+ * Handles interactions between the datepicker host component and the input
+ * directive.
+ * @internal
+ */
+class SkyDatepickerHostService {
+    #destroyRef = inject(DestroyRef);
+    /**
+     * Fires when the picker or trigger button loses focus.
+     */
+    get focusout() {
+        return this.#focusoutObs;
+    }
+    #focusout = new Subject();
+    #focusoutObs = this.#focusout.asObservable();
+    #host;
+    #isInitialized = false;
+    ngOnDestroy() {
+        this.#focusout.complete();
+    }
+    init(host) {
+        if (this.#isInitialized) {
+            throw new Error('The datepicker host service is already initialized.');
+        }
+        this.#host = host;
+        this.#isInitialized = true;
+        const triggerButtonEl = this.#host.triggerButtonRef?.nativeElement;
+        if (triggerButtonEl instanceof Element) {
+            fromEvent(triggerButtonEl, 'focusout')
+                .pipe(takeUntilDestroyed(this.#destroyRef))
+                .subscribe((evt) => {
+                this.#handleFocusoutEvent(evt);
+            });
+        }
+    }
+    isFocusingDatepicker(evt) {
+        const buttonEl = this.#host?.triggerButtonRef?.nativeElement;
+        return buttonEl instanceof Element && buttonEl === evt.relatedTarget;
+    }
+    #handleFocusoutEvent(evt) {
+        if (this.#host) {
+            const relatedTarget = evt.relatedTarget;
+            const overlayEl = this.#host.getPickerRef()?.nativeElement;
+            const isFocusingOverlay = relatedTarget instanceof Element &&
+                !!overlayEl?.contains(relatedTarget);
+            if (relatedTarget === null || !isFocusingOverlay) {
+                this.#focusout.next(evt);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerHostService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerHostService, decorators: [{
+            type: Injectable
+        }] });
+
 let nextId$1 = 0;
 /**
  * Creates the datepicker button and calendar.
@@ -1931,6 +1970,7 @@ class SkyDatepickerComponent {
     #resourceSvc;
     #overlayService;
     #zIndex;
+    #datepickerHostSvc;
     constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
         this.inputBoxHostService = inputBoxHostService;
         /**
@@ -1968,6 +2008,7 @@ class SkyDatepickerComponent {
         this.#dateFormatHintTextTemplateString = '';
         this.#environmentInjector = inject(EnvironmentInjector);
         this.#resourceSvc = inject(SkyLibResourcesService);
+        this.#datepickerHostSvc = inject(SkyDatepickerHostService);
         this.#affixService = affixService;
         this.#changeDetector = changeDetector;
         this.#coreAdapter = coreAdapter;
@@ -1998,6 +2039,9 @@ class SkyDatepickerComponent {
             });
         }
     }
+    ngAfterViewInit() {
+        this.#datepickerHostSvc.init(this);
+    }
     ngOnDestroy() {
         this.dateChange.complete();
         this.openChange.complete();
@@ -2062,6 +2106,13 @@ class SkyDatepickerComponent {
             }
         }
     }
+    /**
+     * Gets the element reference of the picker overlay.
+     * @internal
+     */
+    getPickerRef() {
+        return this.#overlay?.componentRef.location;
+    }
     #closePicker() {
         this.#destroyAffixer();
         this.#destroyOverlay();
@@ -2179,11 +2230,11 @@ class SkyDatepickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$3.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", dateFormatChange: "dateFormatChange", openChange: "openChange", calendarDateChange: "calendarDateChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], 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-datepicker\">\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-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    #calendarRef\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n  >\n    <sky-datepicker-calendar\n      cdkTrapFocus\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startAtDate]=\"startAtDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "startAtDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", dateFormatChange: "dateFormatChange", openChange: "openChange", calendarDateChange: "calendarDateChange" }, providers: [SkyDatepickerHostService], viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], 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-datepicker\">\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-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    #calendarRef\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n  >\n    <sky-datepicker-calendar\n      cdkTrapFocus\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startAtDate]=\"startAtDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "startAtDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-datepicker\">\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-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    #calendarRef\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n  >\n    <sky-datepicker-calendar\n      cdkTrapFocus\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startAtDate]=\"startAtDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"] }]
+            args: [{ selector: 'sky-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyDatepickerHostService], template: "<div class=\"sky-datepicker\">\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-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    #calendarRef\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n  >\n    <sky-datepicker-calendar\n      cdkTrapFocus\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startAtDate]=\"startAtDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyOverlayService }, { type: i2$3.SkyInputBoxHostService, decorators: [{
                     type: Optional
                 }] }, { type: i3.SkyThemeService, decorators: [{
@@ -2368,6 +2419,7 @@ class SkyFuzzyDatepickerInputDirective {
     #locale;
     #preferredShortDateFormat;
     #ngUnsubscribe;
+    #notifyTouched;
     #_futureDisabled;
     #_dateFormat;
     #_disabled;
@@ -2383,6 +2435,7 @@ class SkyFuzzyDatepickerInputDirective {
     #fuzzyDateService;
     #renderer;
     #datepickerComponent;
+    #datepickerHostSvc;
     constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, datepickerComponent) {
         /**
          * Whether to disable date validation on the fuzzy datepicker input.
@@ -2394,13 +2447,11 @@ class SkyFuzzyDatepickerInputDirective {
         this.#_futureDisabled = false;
         this.#_disabled = false;
         this.#_yearRequired = false;
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.#datepickerHostSvc = inject(SkyDatepickerHostService, {
+            optional: true,
+        });
         // istanbul ignore next
         this.#onChange = (_) => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        // istanbul ignore next
-        this.#onTouched = () => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
         // istanbul ignore next
         this.#onValidatorChange = () => { };
         if (!datepickerComponent) {
@@ -2423,6 +2474,14 @@ class SkyFuzzyDatepickerInputDirective {
             this.#preferredShortDateFormat =
                 SkyDateFormatter.getPreferredShortDateFormat();
         });
+        this.#datepickerHostSvc?.focusout
+            .pipe(takeUntilDestroyed())
+            .subscribe((evt) => {
+            const isFocusingInput = evt.relatedTarget === this.#elementRef.nativeElement;
+            if (!isFocusingInput) {
+                this.#notifyTouched?.();
+            }
+        });
     }
     ngOnInit() {
         if (this.yearRequired) {
@@ -2438,7 +2497,6 @@ class SkyFuzzyDatepickerInputDirective {
             .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
             .subscribe((value) => {
             this.#value = value;
-            this.#onTouched();
         });
     }
     ngAfterViewInit() {
@@ -2465,7 +2523,6 @@ class SkyFuzzyDatepickerInputDirective {
         this.#onValueChange(event.target.value);
     }
     onInputBlur() {
-        this.#onTouched();
         const formattedDate = this.#fuzzyDateService.format(this.#value, this.dateFormat, this.#locale);
         if (this.#control?.valid) {
             this.#setInputElementValue(formattedDate);
@@ -2558,7 +2615,7 @@ class SkyFuzzyDatepickerInputDirective {
         this.#onChange = fn;
     }
     registerOnTouched(fn) {
-        this.#onTouched = fn;
+        this.#notifyTouched = fn;
     }
     registerOnValidatorChange(fn) {
         this.#onValidatorChange = fn;
@@ -2574,6 +2631,11 @@ class SkyFuzzyDatepickerInputDirective {
     detectInputValueChange() {
         this.#onValueChange(this.#elementRef.nativeElement.value);
     }
+    onFocusout(evt) {
+        if (!this.#datepickerHostSvc?.isFocusingDatepicker(evt)) {
+            this.#notifyTouched?.();
+        }
+    }
     #onValueChange(newValue) {
         this.#value = newValue;
     }
@@ -2618,13 +2680,8 @@ class SkyFuzzyDatepickerInputDirective {
             ((!dateA.month && !dateB.month) || dateA.month === dateB.month) &&
             ((!dateA.year && !dateB.year) || dateA.year === dateB.year));
     }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     // istanbul ignore next
     #onChange;
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    // istanbul ignore next
-    #onTouched;
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     // istanbul ignore next
     #onValidatorChange;
     /**
@@ -2682,7 +2739,7 @@ class SkyFuzzyDatepickerInputDirective {
         this.#setInputElementValue(formattedDate || '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i1.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()" } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "focusout": "onFocusout($event)", "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()" } }, providers: [
             SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
             SKY_FUZZY_DATEPICKER_VALIDATOR,
         ], ngImport: i0 }); }
@@ -2695,6 +2752,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
                         SKY_FUZZY_DATEPICKER_VALIDATOR,
                     ],
+                    host: {
+                        '(focusout)': 'onFocusout($event)',
+                    },
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i1.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
                     type: Optional
@@ -2861,6 +2921,7 @@ class SkyDatepickerInputDirective {
     #dateFormatter;
     #preferredShortDateFormat;
     #ngUnsubscribe;
+    #notifyTouched;
     #_dateFormat;
     #_disabled;
     #_maxDate;
@@ -2875,6 +2936,7 @@ class SkyDatepickerInputDirective {
     #localeProvider;
     #renderer;
     #datepickerComponent;
+    #datepickerHostSvc;
     constructor(changeDetector, configService, elementRef, localeProvider, renderer, datepickerComponent) {
         /**
          * Whether to disable date validation on the datepicker input.
@@ -2885,13 +2947,11 @@ class SkyDatepickerInputDirective {
         this.#ngUnsubscribe = new Subject();
         this.#_disabled = false;
         this.#_strict = false;
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.#datepickerHostSvc = inject(SkyDatepickerHostService, {
+            optional: true,
+        });
         // istanbul ignore next
         this.#onChange = (_) => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        // istanbul ignore next
-        this.#onTouched = () => { };
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
         // istanbul ignore next
         this.#onValidatorChange = () => { };
         if (!datepickerComponent) {
@@ -2913,6 +2973,14 @@ class SkyDatepickerInputDirective {
                 SkyDateFormatter.getPreferredShortDateFormat();
             this.#applyDateFormat();
         });
+        this.#datepickerHostSvc?.focusout
+            .pipe(takeUntilDestroyed())
+            .subscribe((evt) => {
+            const isFocusingInput = evt.relatedTarget === this.#elementRef.nativeElement;
+            if (!isFocusingInput) {
+                this.#notifyTouched?.();
+            }
+        });
     }
     ngOnInit() {
         const element = this.#elementRef.nativeElement;
@@ -2925,7 +2993,6 @@ class SkyDatepickerInputDirective {
             .pipe(takeUntil(this.#ngUnsubscribe))
             .subscribe((value) => {
             this.#value = value;
-            this.#onTouched();
         });
     }
     ngAfterViewInit() {
@@ -2967,9 +3034,6 @@ class SkyDatepickerInputDirective {
             },
         });
     }
-    onInputBlur() {
-        this.#onTouched();
-    }
     onInput() {
         this.#control?.markAsDirty();
     }
@@ -3042,7 +3106,7 @@ class SkyDatepickerInputDirective {
         this.#onChange = fn;
     }
     registerOnTouched(fn) {
-        this.#onTouched = fn;
+        this.#notifyTouched = fn;
     }
     registerOnValidatorChange(fn) {
         this.#onValidatorChange = fn;
@@ -3058,6 +3122,11 @@ class SkyDatepickerInputDirective {
     detectInputValueChange() {
         this.#onValueChange(this.#elementRef.nativeElement.value);
     }
+    onFocusout(evt) {
+        if (!this.#datepickerHostSvc?.isFocusingDatepicker(evt)) {
+            this.#notifyTouched?.();
+        }
+    }
     #applyDateFormat() {
         this.#datepickerComponent.dateFormat = this.dateFormat;
         if (this.#value) {
@@ -3138,13 +3207,8 @@ class SkyDatepickerInputDirective {
         }
         return moment(value).isValid();
     }
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     // istanbul ignore next
     #onChange;
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    // istanbul ignore next
-    #onTouched;
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     // istanbul ignore next
     #onValidatorChange;
     /**
@@ -3197,13 +3261,16 @@ class SkyDatepickerInputDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i1.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()" } }, providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "focusout": "onFocusout($event)", "change": "onInputChange($event)", "input": "onInput()" } }, providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyDatepickerInput]',
                     providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR],
+                    host: {
+                        '(focusout)': 'onFocusout($event)',
+                    },
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i1.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
                     type: Optional
@@ -3228,9 +3295,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             }], onInputChange: [{
                 type: HostListener,
                 args: ['change', ['$event']]
-            }], onInputBlur: [{
-                type: HostListener,
-                args: ['blur']
             }], onInput: [{
                 type: HostListener,
                 args: ['input']
@@ -4113,7 +4177,7 @@ class SkyDateRangePickerComponent {
         });
         this.calculatorIdHasErrors = computed(() => {
             const touched = this.#calculatorIdTouched();
-            const invalid = this.#calculatorIdInvalid();
+            const invalid = this.#calculatorIdInvalid() || this.#hostHasCustomError?.();
             return touched && invalid;
         });
         this.endDateHasErrors = computed(() => {
@@ -4195,6 +4259,7 @@ class SkyDateRangePickerComponent {
     #startDateControl;
     #startDateInvalid;
     #startDateTouched;
+    #hostHasCustomError;
     #_calculatorIds;
     #_label;
     #_value;
@@ -4203,6 +4268,11 @@ class SkyDateRangePickerComponent {
             optional: true,
             self: true,
         })?.control;
+        runInInjectionContext(this.#injector, () => {
+            if (this.hostControl) {
+                this.#hostHasCustomError = this.#createHostCustomErrorChangeSignal(this.hostControl);
+            }
+        });
         // Set a default value on the control if it's undefined on init.
         // We need to use setTimeout to avoid interfering with the first
         // validation cycle.
@@ -4377,6 +4447,15 @@ class SkyDateRangePickerComponent {
         this.showEndDatePicker.set(showEndDatePicker);
         this.showStartDatePicker.set(showStartDatePicker);
     }
+    #createHostCustomErrorChangeSignal(control) {
+        return toSignal(control.events.pipe(filter((evt) => evt instanceof StatusChangeEvent), map((evt) => {
+            const errors = evt.source.errors ?? [];
+            const knownErrors = ['required', 'skyDate'];
+            return Object.keys(errors).some((error) => {
+                return !knownErrors.includes(error);
+            });
+        })));
+    }
     #createStatusChangeSignal(control) {
         return toSignal(control.events.pipe(filter((evt) => evt instanceof StatusChangeEvent), map((evt) => evt.status === 'INVALID'), takeUntilDestroyed(this.#destroyRef)));
     }
@@ -4396,7 +4475,7 @@ class SkyDateRangePickerComponent {
                 multi: true,
             },
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], ngImport: i0, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"calculatorIdHasErrors()\"\n      [helpKey]=\"helpKey\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        labelText ||\n        label ||\n        ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select\n        formControlName=\"calculatorId\"\n        (blur)=\"onBlur()\"\n        (change)=\"onCalculatorIdChange()\"\n      >\n        @for (calculator of calculators; track calculator.calculatorId) {\n          <option [value]=\"calculator.calculatorId\">\n            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          errorName=\"endDateBeforeStartDate\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <span class=\"sky-input-box-descendent-form-error\">\n        <ng-content select=\"sky-form-error\" />\n      </span>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n    [hidden]=\"!showStartDatePicker()\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"startDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n    [hidden]=\"!showEndDatePicker()\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"endDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg );--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px}:host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"calculatorIdHasErrors()\"\n      [helpKey]=\"helpKey\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        labelText ||\n        label ||\n        ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select\n        formControlName=\"calculatorId\"\n        (blur)=\"onBlur()\"\n        (change)=\"onCalculatorIdChange()\"\n      >\n        @for (calculator of calculators; track calculator.calculatorId) {\n          <option [value]=\"calculator.calculatorId\">\n            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          errorName=\"endDateBeforeStartDate\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <span class=\"sky-input-box-descendent-form-error\">\n        <ng-content select=\"sky-form-error\" />\n      </span>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n    [hidden]=\"!showStartDatePicker()\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"startDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n    [hidden]=\"!showEndDatePicker()\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"endDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px;--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg )}:host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
             type: Component,
@@ -4422,7 +4501,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             multi: true,
                         },
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], selector: 'sky-date-range-picker', standalone: true, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"calculatorIdHasErrors()\"\n      [helpKey]=\"helpKey\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        labelText ||\n        label ||\n        ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select\n        formControlName=\"calculatorId\"\n        (blur)=\"onBlur()\"\n        (change)=\"onCalculatorIdChange()\"\n      >\n        @for (calculator of calculators; track calculator.calculatorId) {\n          <option [value]=\"calculator.calculatorId\">\n            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          errorName=\"endDateBeforeStartDate\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <span class=\"sky-input-box-descendent-form-error\">\n        <ng-content select=\"sky-form-error\" />\n      </span>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n    [hidden]=\"!showStartDatePicker()\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"startDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n    [hidden]=\"!showEndDatePicker()\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"endDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg );--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px}:host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}\n"] }]
+                    ], selector: 'sky-date-range-picker', standalone: true, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"calculatorIdHasErrors()\"\n      [helpKey]=\"helpKey\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        labelText ||\n        label ||\n        ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select\n        formControlName=\"calculatorId\"\n        (blur)=\"onBlur()\"\n        (change)=\"onCalculatorIdChange()\"\n      >\n        @for (calculator of calculators; track calculator.calculatorId) {\n          <option [value]=\"calculator.calculatorId\">\n            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          errorName=\"endDateBeforeStartDate\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <span class=\"sky-input-box-descendent-form-error\">\n        <ng-content select=\"sky-form-error\" />\n      </span>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n    [hidden]=\"!showStartDatePicker()\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"startDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n    [hidden]=\"!showEndDatePicker()\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"endDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px;--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg )}:host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}\n"] }]
         }], propDecorators: { calculatorIds: [{
                 type: Input
             }], dateFormat: [{
@@ -4715,6 +4794,9 @@ class SkyTimepickerComponent {
     onTriggerButtonClick() {
         this.#openPicker();
     }
+    highlightMinute(selectedMinute, minute) {
+        return Math.floor(selectedMinute / 5) === minute / 5;
+    }
     #closePicker() {
         this.#destroyAffixer();
         this.#destroyOverlay();
@@ -4818,11 +4900,11 @@ class SkyTimepickerComponent {
         this.#overlayKeyupListener?.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$3.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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  @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 icon=\"clock\" size=\"lg\" />\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]=\"{ 'sky-btn-active': selectedMinute === minute }\"\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{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-timepicker-container .sky-timepicker-column ol li button.sky-btn-active:hover,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active{background-color:var(--sky-background-color-input-selected)}.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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", 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  @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 icon=\"clock\" size=\"lg\" />\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-blackbaud) .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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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 icon=\"clock\" size=\"lg\" />\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]=\"{ 'sky-btn-active': selectedMinute === minute }\"\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{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-timepicker-container .sky-timepicker-column ol li button.sky-btn-active:hover,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"] }]
+            args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-timepicker\">\n  @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 icon=\"clock\" size=\"lg\" />\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-blackbaud) .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"] }]
         }], ctorParameters: () => [{ type: i1$1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyOverlayService }, { type: i2$3.SkyInputBoxHostService, decorators: [{
                     type: Optional
                 }] }, { type: i3.SkyThemeService, decorators: [{