npm - @skyux/datetime - Versions diffs - 13.7.0 → 13.7.2 - Mend

@skyux/datetime 13.7.0 → 13.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/skyux-datetime.mjs +50 -62
package/fesm2022/skyux-datetime.mjs.map +1 -1
package/index.d.ts +15 -19
package/package.json +8 -8

package/fesm2022/skyux-datetime.mjs CHANGED Viewed

@@ -1,26 +1,26 @@
 import * as i0 from '@angular/core';
 import { NgModule, inject, Injectable, Pipe, EventEmitter, Output, Input, ViewEncapsulation, Component, input, computed, effect, ChangeDetectionStrategy, ViewChild, DestroyRef, output, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, HostListener, Directive, Injector, viewChildren, signal, runInInjectionContext, booleanAttribute, HostBinding } from '@angular/core';
-import * as i6 from '@skyux/i18n';
-import { SkyLibResourcesService, SkyI18nModule, SkyAppLocaleProvider, SkyIntlDateFormatter } from '@skyux/i18n';
+import * as i1 from '@skyux/i18n';
+import { SkyLibResourcesService, SkyI18nModule, SkyAppLocaleProvider, SkyIntlDateFormatter, SkyLibResourcesPipe } from '@skyux/i18n';
 import { Subject, takeUntil as takeUntil$1, BehaviorSubject, fromEvent, of, filter, map, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import moment from 'moment';
-import * as i2$2 from '@skyux/forms';
+import * as i2$3 from '@skyux/forms';
 import { SkyInputBoxModule, SkyFormErrorsModule, SKY_FORM_ERRORS_ENABLED, SkyFormErrorModule } from '@skyux/forms';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import * as i2$3 from '@angular/forms';
+import * as i2$4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, FormBuilder, NgControl, StatusChangeEvent, TouchedChangeEvent, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1$1 from '@skyux/core';
-import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyLogService, SkyAffixModule } from '@skyux/core';
-import * as i5 from '@skyux/icon';
+import * as i1$2 from '@skyux/core';
+import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyLogService } from '@skyux/core';
+import * as i2 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
 import * as i3 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
-import * as i2$1 from '@skyux/indicators';
+import * as i2$2 from '@skyux/indicators';
 import { SkyWaitModule } from '@skyux/indicators';
-import * as i2 from '@skyux/popovers';
+import * as i2$1 from '@skyux/popovers';
 import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
 /* istanbul ignore file */
@@ -379,14 +379,13 @@ class SkyDatePipe {
         this.#formattedValue = this.#dateSvc.format(this.#value, locale, format);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyDatePipe, isStandalone: false, name: "skyDate", pure: false }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyDatePipe, isStandalone: true, name: "skyDate", pure: false }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyDate',
                     pure: false,
-                    standalone: false,
                 }]
         }], ctorParameters: () => [] });
@@ -785,7 +784,7 @@ class SkyFuzzyDateService {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i6.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
@@ -793,7 +792,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i6.SkyAppLocaleProvider }] });
+        }], ctorParameters: () => [{ type: i1.SkyAppLocaleProvider }] });
 /**
  * Formats date values using two or more date tokens that represent the day, month,
@@ -829,28 +828,25 @@ class SkyFuzzyDatePipe {
         return this.#fuzzyDateService.format(value, fuzzyDateFormat, fuzzyDateLocale);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyFuzzyDatePipe, isStandalone: false, name: "skyFuzzyDate", pure: false }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyFuzzyDatePipe, isStandalone: true, name: "skyFuzzyDate", pure: false }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyFuzzyDate',
                     pure: false,
-                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: SkyFuzzyDateService }] });
 class SkyDatePipeModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyDatePipeModule, declarations: [SkyDatePipe, SkyFuzzyDatePipe], imports: [SkyDatetimeResourcesModule], exports: [SkyDatePipe, SkyFuzzyDatePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [SkyDatetimeResourcesModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyDatePipeModule, imports: [SkyDatetimeResourcesModule, SkyDatePipe, SkyFuzzyDatePipe], exports: [SkyDatePipe, SkyFuzzyDatePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatePipeModule, imports: [SkyDatetimeResourcesModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatePipeModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SkyDatePipe, SkyFuzzyDatePipe],
-                    providers: [SkyDatePipe, SkyFuzzyDatePipe],
-                    imports: [SkyDatetimeResourcesModule],
+                    imports: [SkyDatetimeResourcesModule, SkyDatePipe, SkyFuzzyDatePipe],
                     exports: [SkyDatePipe, SkyFuzzyDatePipe],
                 }]
         }] });
@@ -1242,7 +1238,7 @@ class SkyDatepickerCalendarInnerComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyDatepickerCalendarInnerComponent, isStandalone: true, 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-datepicker-btn-previous\"\n          [attr.aria-label]=\"previousLabel\"\n          [skyThemeClass]=\"{\n            'sky-btn-default sky-btn-sm': 'default',\n            'sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"moveCalendar($event, -1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" iconName=\"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-datepicker-calendar-title\"\n          [id]=\"datepickerId + '-title'\"\n          [disabled]=\"datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepickerMode === maxMode\n          }\"\n          [skyThemeClass]=\"{\n            'sky-btn-default sky-btn-sm': 'default',\n            'sky-btn-link': 'modern'\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-datepicker-btn-next\"\n          [attr.aria-label]=\"nextLabel\"\n          [skyThemeClass]=\"{\n            'sky-btn-default sky-btn-sm': 'default',\n            'sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"moveCalendar($event, 1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" iconName=\"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-button-box-shadow-focus: 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-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-month-year-button-width: auto;--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-title-font-weight: 12px;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.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)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-header-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-right)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-comp-datepicker-calendar-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-right)) var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-calendar-space-inset-bottom)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-left))}.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-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{font-size:var(--sky-override-datepicker-title-font-weight, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-default));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-link{color:var(--sky-color-text-default);padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.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-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-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-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}.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-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))}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-comp-datepicker-m_y_button-space-inset-top) var(--sky-comp-datepicker-m_y_button-space-inset-right) var(--sky-comp-datepicker-m_y_button-space-inset-bottom) var(--sky-comp-datepicker-m_y_button-space-inset-left))}sky-yearpicker td{width:var(--sky-override-datepicker-month-year-button-width, 20%)}sky-monthpicker td{width:var(--sky-override-datepicker-month-year-button-width, 33%)}.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyDatepickerCalendarInnerComponent, isStandalone: true, 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-datepicker-btn-previous\"\n          [attr.aria-label]=\"previousLabel\"\n          [skyThemeClass]=\"{\n            'sky-btn-default sky-btn-sm': 'default',\n            'sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"moveCalendar($event, -1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" iconName=\"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-datepicker-calendar-title\"\n          [id]=\"datepickerId + '-title'\"\n          [disabled]=\"datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepickerMode === maxMode\n          }\"\n          [skyThemeClass]=\"{\n            'sky-btn-default sky-btn-sm': 'default',\n            'sky-btn-link': 'modern'\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-datepicker-btn-next\"\n          [attr.aria-label]=\"nextLabel\"\n          [skyThemeClass]=\"{\n            'sky-btn-default sky-btn-sm': 'default',\n            'sky-btn-icon-borderless': 'modern'\n          }\"\n          (click)=\"moveCalendar($event, 1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" iconName=\"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-button-box-shadow-focus: 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-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-month-year-button-width: auto;--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-title-font-weight: 12px;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.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)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-header-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-right)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-header-space-inset-left))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-comp-datepicker-calendar-space-inset-top)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-right)) var(--sky-override-datepicker-vertical-padding, var(--sky-comp-datepicker-calendar-space-inset-bottom)) var(--sky-override-datepicker-horizontal-padding, var(--sky-comp-datepicker-calendar-space-inset-left))}.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-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left));height:auto;width:auto}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{font-size:var(--sky-override-datepicker-title-font-weight, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-default));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.sky-datepicker-calendar-inner .sky-btn-link{color:var(--sky-color-text-default);padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-comp-button-borderless-space-inset-top) var(--sky-comp-button-borderless-space-inset-right) var(--sky-comp-button-borderless-space-inset-bottom) var(--sky-comp-button-borderless-space-inset-left))}.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-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow-focus, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-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-border-width-action-disabled) var(--sky-color-border-action-tertiary-disabled))}.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-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))}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-comp-datepicker-m_y_button-space-inset-top) var(--sky-comp-datepicker-m_y_button-space-inset-right) var(--sky-comp-datepicker-m_y_button-space-inset-bottom) var(--sky-comp-datepicker-m_y_button-space-inset-left))}sky-yearpicker td{width:var(--sky-override-datepicker-month-year-button-width, 20%)}sky-monthpicker td{width:var(--sky-override-datepicker-month-year-button-width, 33%)}.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i3.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
             type: Component,
@@ -1316,7 +1312,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             type: Pipe,
             args: [{
                     name: 'skyDatepickerCalendarLabel',
-                    standalone: true,
                 }]
         }] });
@@ -1328,7 +1323,7 @@ class SkyDayPickerButtonComponent {
         this.datepicker = datepicker;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyDayPickerButtonComponent, isStandalone: true, 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}.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-xxxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxxs));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-xxxs) / 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-xxxs) / 2))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyDayPickerButtonComponent, isStandalone: true, 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}.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-xxxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxxs));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-xxxs) / 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-xxxs) / 2))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
             type: Component,
@@ -1412,7 +1407,7 @@ class SkyDayPickerCellComponent {
         this.popoverController.next({ type: SkyPopoverMessageType.Open });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDayPickerCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyDayPickerCellComponent, isStandalone: true, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: { classPropertyName: "activeDateHasChanged", publicName: "activeDateHasChanged", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (hasTooltip()) {\n  <div\n    class=\"sky-daypicker-cell\"\n    skyPopoverPlacement=\"left\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [skyPopover]=\"dayInfoPopover\"\n    [skyPopoverMessageStream]=\"popoverController\"\n    (mouseenter)=\"onDayMouseenter()\"\n    (mouseleave)=\"onDayMouseleave()\"\n  >\n    <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n    <sky-popover #dayInfoPopover>\n      @for (text of date()?.keyDateText; track text) {\n        <div>\n          {{ text }}\n        </div>\n      }\n    </sky-popover>\n  </div>\n} @else {\n  <div\n    class=\"sky-daypicker-cell\"\n    (mouseenter)=\"onDayMouseenter()\"\n    (mouseleave)=\"onDayMouseleave()\"\n  >\n    <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n  </div>\n}\n\n<ng-template #daypickerButtonTemplateRef>\n  <sky-daypicker-button [date]=\"date()\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i2.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i2.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyDayPickerCellComponent, isStandalone: true, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: { classPropertyName: "activeDateHasChanged", publicName: "activeDateHasChanged", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (hasTooltip()) {\n  <div\n    class=\"sky-daypicker-cell\"\n    skyPopoverPlacement=\"left\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [skyPopover]=\"dayInfoPopover\"\n    [skyPopoverMessageStream]=\"popoverController\"\n    (mouseenter)=\"onDayMouseenter()\"\n    (mouseleave)=\"onDayMouseleave()\"\n  >\n    <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n    <sky-popover #dayInfoPopover>\n      @for (text of date()?.keyDateText; track text) {\n        <div>\n          {{ text }}\n        </div>\n      }\n    </sky-popover>\n  </div>\n} @else {\n  <div\n    class=\"sky-daypicker-cell\"\n    (mouseenter)=\"onDayMouseenter()\"\n    (mouseleave)=\"onDayMouseleave()\"\n  >\n    <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n  </div>\n}\n\n<ng-template #daypickerButtonTemplateRef>\n  <sky-daypicker-button [date]=\"date()\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i2$1.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i2$1.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
             type: Component,
@@ -1620,7 +1615,7 @@ class SkyDayPickerComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyDayPickerComponent, isStandalone: true, 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: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i2$1.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyDayPickerComponent, isStandalone: true, 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: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
             type: Component,
@@ -1700,7 +1695,7 @@ class SkyMonthPickerComponent {
         this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatMonthLabel);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyMonthPickerComponent, isStandalone: true, selector: "sky-monthpicker", ngImport: i0, template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track $index) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyMonthPickerComponent, isStandalone: true, selector: "sky-monthpicker", ngImport: i0, template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track $index) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
             type: Component,
@@ -1781,7 +1776,7 @@ class SkyYearPickerComponent {
         this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatYearLabel);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyYearPickerComponent, isStandalone: true, selector: "sky-yearpicker", ngImport: i0, template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track $index) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-row\" role=\"gridcell\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyYearPickerComponent, isStandalone: true, selector: "sky-yearpicker", ngImport: i0, template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track $index) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-row\" role=\"gridcell\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
             type: Component,
@@ -2299,8 +2294,8 @@ class SkyDatepickerComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$2.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: "20.3.0", type: SkyDatepickerComponent, isStandalone: true, 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 iconName=\"calendar-ltr\" iconSize=\"l\" />\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "startAtDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1$2.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$2.SkyCoreAdapterService }, { token: i1$2.SkyOverlayService }, { token: i2$3.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyDatepickerComponent, isStandalone: true, 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 iconName=\"calendar-ltr\" iconSize=\"l\" />\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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "startAtDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
             type: Component,
@@ -2310,7 +2305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         SkyDatetimeResourcesModule,
                         SkyIconModule,
                     ], providers: [SkyDatepickerHostService], selector: 'sky-datepicker', 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 iconName=\"calendar-ltr\" iconSize=\"l\" />\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$2.SkyInputBoxHostService, decorators: [{
+        }], ctorParameters: () => [{ type: i1$2.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1$2.SkyCoreAdapterService }, { type: i1$2.SkyOverlayService }, { type: i2$3.SkyInputBoxHostService, decorators: [{
                     type: Optional
                 }] }, { type: i3.SkyThemeService, decorators: [{
                     type: Optional
@@ -2836,7 +2831,7 @@ class SkyDatepickerInputDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i6.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", 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: "20.3.0", type: SkyDatepickerInputDirective, isStandalone: true, 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: "20.3.0", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
@@ -2847,9 +2842,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                     },
                     providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR],
                     selector: '[skyDatepickerInput]',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i6.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i1.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { dateFormat: [{
                 type: Input
@@ -3331,7 +3325,7 @@ class SkyFuzzyDatepickerInputDirective {
         }
         this.#setInputElementValue(formattedDate || '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i6.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", 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: "20.3.0", type: SkyFuzzyDatepickerInputDirective, isStandalone: true, 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,
@@ -3348,9 +3342,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
                         SKY_FUZZY_DATEPICKER_VALIDATOR,
                     ],
                     selector: '[skyFuzzyDatepickerInput]',
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i6.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i1.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { dateFormat: [{
                 type: Input
@@ -3467,7 +3460,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             type: Pipe,
             args: [{
                     name: 'skyDateRangePickerEndDateResourceKey',
-                    standalone: true,
                 }]
         }] });
@@ -3485,7 +3477,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
             type: Pipe,
             args: [{
                     name: 'skyDateRangePickerStartDateResourceKey',
-                    standalone: true,
                 }]
         }] });
@@ -4552,7 +4543,7 @@ class SkyDateRangePickerComponent {
                 multi: true,
             },
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], viewQueries: [{ propertyName: "datepickers", predicate: SkyDatepickerComponent, descendants: true, isSignal: 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 formControlName=\"calculatorId\" (change)=\"onCalculatorIdChange()\">\n        @for (calculator of calculators; track calculator.calculatorId) {\n          <option [value]=\"calculator.calculatorId\">\n            {{ calculator.shortDescription$ | async }}\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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.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$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.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$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.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: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$2.λ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$2.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "datepickers", predicate: SkyDatepickerComponent, descendants: true, isSignal: 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 formControlName=\"calculatorId\" (change)=\"onCalculatorIdChange()\">\n        @for (calculator of calculators; track calculator.calculatorId) {\n          <option [value]=\"calculator.calculatorId\">\n            {{ calculator.shortDescription$ | async }}\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: i1$1.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: "ngmodule", type: SkyDatetimeResourcesModule }, { 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 }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
             type: Component,
@@ -4979,13 +4970,19 @@ class SkyTimepickerComponent {
         /* istanbul ignore next */
         this.#overlayKeyupListener?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$2.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: "20.3.0", type: SkyTimepickerComponent, isStandalone: false, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon iconName=\"clock\" iconSize=\"l\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    #timepickerRef\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column sky-timepicker-column-hours\"\n        [ngClass]=\"{ 'sky-timepicker-24hour-hours': 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\n        class=\"sky-timepicker-column sky-timepicker-column-minutes\"\n        [ngClass]=\"{ 'sky-timepicker-24hour-minutes': is8601 }\"\n      >\n        <ol>\n          @for (minute of minutes; track minute) {\n            <li>\n              <button\n                name=\"minute\"\n                type=\"button\"\n                [ngClass]=\"{\n                  'sky-btn-active': highlightMinute(selectedMinute, minute)\n                }\"\n                (click)=\"setTime($event)\"\n              >\n                {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n              </button>\n            </li>\n          }\n        </ol>\n      </section>\n      @if (!is8601) {\n        <section class=\"sky-timepicker-column sky-timepicker-column-meridies\">\n          <ol>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n                (click)=\"setTime($event)\"\n              >\n                AM\n              </button>\n            </li>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n                (click)=\"setTime($event)\"\n              >\n                PM\n              </button>\n            </li>\n          </ol>\n        </section>\n      }\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-box-shadow: none;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-height: 100%;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-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-button-width: 100%;--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-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))}.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-container-base) solid var(--sky-color-border-container-base));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, auto) var(--sky-override-timepicker-button-padding-horizontal, auto);width:var(--sky-override-timepicker-button-width, var(--sky-size-picker_btn));height:var(--sky-override-timepicker-button-height, var(--sky-size-picker_btn))}.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-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active):not(: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-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) 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-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-color-border-selected));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-column-meridies ol li button,.sky-timepicker-column.sky-timepicker-24hour-minutes ol li button{height:100%}.sky-timepicker-column.sky-timepicker-24hour-hours ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour-hours ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-comp-timepicker-content-space-inset-top) var(--sky-comp-timepicker-content-space-inset-right) var(--sky-comp-timepicker-content-space-inset-bottom) var(--sky-comp-timepicker-content-space-inset-left));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-comp-timepicker-footer-space-inset-top)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-right)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-bottom)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-left))}.sky-timepicker-footer .sky-timepicker-column{width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "pipe", type: i6.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1$2.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$2.SkyCoreAdapterService }, { token: i1$2.SkyOverlayService }, { token: i2$3.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: SkyTimepickerComponent, isStandalone: true, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon iconName=\"clock\" iconSize=\"l\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    #timepickerRef\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column sky-timepicker-column-hours\"\n        [class.sky-timepicker-24hour-hours]=\"is8601\"\n      >\n        <ol>\n          @for (hour of hours; track hour) {\n            <li>\n              <button\n                name=\"hour\"\n                type=\"button\"\n                [class.sky-btn-active]=\"selectedHour === hour\"\n                (click)=\"setTime($event)\"\n              >\n                {{ hour }}\n              </button>\n            </li>\n          }\n        </ol>\n      </section>\n      <section\n        class=\"sky-timepicker-column sky-timepicker-column-minutes\"\n        [class.sky-timepicker-24hour-minutes]=\"is8601\"\n      >\n        <ol>\n          @for (minute of minutes; track minute) {\n            <li>\n              <button\n                name=\"minute\"\n                type=\"button\"\n                [class.sky-btn-active]=\"highlightMinute(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 sky-timepicker-column-meridies\">\n          <ol>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [class.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                [class.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-box-shadow: none;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-height: 100%;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-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-button-width: 100%;--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-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))}.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-container-base) solid var(--sky-color-border-container-base));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, auto) var(--sky-override-timepicker-button-padding-horizontal, auto);width:var(--sky-override-timepicker-button-width, var(--sky-size-picker_btn));height:var(--sky-override-timepicker-button-height, var(--sky-size-picker_btn))}.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-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active):not(: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-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) 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-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-color-border-selected));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-column-meridies ol li button,.sky-timepicker-column.sky-timepicker-24hour-minutes ol li button{height:100%}.sky-timepicker-column.sky-timepicker-24hour-hours ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour-hours ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-comp-timepicker-content-space-inset-top) var(--sky-comp-timepicker-content-space-inset-right) var(--sky-comp-timepicker-content-space-inset-bottom) var(--sky-comp-timepicker-content-space-inset-left));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-comp-timepicker-footer-space-inset-top)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-right)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-bottom)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-left))}.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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"sky-timepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon iconName=\"clock\" iconSize=\"l\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    #timepickerRef\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column sky-timepicker-column-hours\"\n        [ngClass]=\"{ 'sky-timepicker-24hour-hours': 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\n        class=\"sky-timepicker-column sky-timepicker-column-minutes\"\n        [ngClass]=\"{ 'sky-timepicker-24hour-minutes': is8601 }\"\n      >\n        <ol>\n          @for (minute of minutes; track minute) {\n            <li>\n              <button\n                name=\"minute\"\n                type=\"button\"\n                [ngClass]=\"{\n                  'sky-btn-active': highlightMinute(selectedMinute, minute)\n                }\"\n                (click)=\"setTime($event)\"\n              >\n                {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n              </button>\n            </li>\n          }\n        </ol>\n      </section>\n      @if (!is8601) {\n        <section class=\"sky-timepicker-column sky-timepicker-column-meridies\">\n          <ol>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n                (click)=\"setTime($event)\"\n              >\n                AM\n              </button>\n            </li>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n                (click)=\"setTime($event)\"\n              >\n                PM\n              </button>\n            </li>\n          </ol>\n        </section>\n      }\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-box-shadow: none;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-height: 100%;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-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-button-width: 100%;--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-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))}.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-container-base) solid var(--sky-color-border-container-base));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, auto) var(--sky-override-timepicker-button-padding-horizontal, auto);width:var(--sky-override-timepicker-button-width, var(--sky-size-picker_btn));height:var(--sky-override-timepicker-button-height, var(--sky-size-picker_btn))}.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-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active):not(: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-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) 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-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-color-border-selected));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-column-meridies ol li button,.sky-timepicker-column.sky-timepicker-24hour-minutes ol li button{height:100%}.sky-timepicker-column.sky-timepicker-24hour-hours ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour-hours ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-comp-timepicker-content-space-inset-top) var(--sky-comp-timepicker-content-space-inset-right) var(--sky-comp-timepicker-content-space-inset-bottom) var(--sky-comp-timepicker-content-space-inset-left));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-comp-timepicker-footer-space-inset-top)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-right)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-bottom)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-left))}.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$2.SkyInputBoxHostService, decorators: [{
+            args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        SkyLibResourcesPipe,
+                        SkyIconModule,
+                        SkyThemeModule,
+                        SkyDatetimeResourcesModule,
+                    ], template: "<div class=\"sky-timepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon iconName=\"clock\" iconSize=\"l\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    #timepickerRef\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column sky-timepicker-column-hours\"\n        [class.sky-timepicker-24hour-hours]=\"is8601\"\n      >\n        <ol>\n          @for (hour of hours; track hour) {\n            <li>\n              <button\n                name=\"hour\"\n                type=\"button\"\n                [class.sky-btn-active]=\"selectedHour === hour\"\n                (click)=\"setTime($event)\"\n              >\n                {{ hour }}\n              </button>\n            </li>\n          }\n        </ol>\n      </section>\n      <section\n        class=\"sky-timepicker-column sky-timepicker-column-minutes\"\n        [class.sky-timepicker-24hour-minutes]=\"is8601\"\n      >\n        <ol>\n          @for (minute of minutes; track minute) {\n            <li>\n              <button\n                name=\"minute\"\n                type=\"button\"\n                [class.sky-btn-active]=\"highlightMinute(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 sky-timepicker-column-meridies\">\n          <ol>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [class.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                [class.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-box-shadow: none;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-height: 100%;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-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-button-width: 100%;--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-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))}.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-container-base) solid var(--sky-color-border-container-base));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, auto) var(--sky-override-timepicker-button-padding-horizontal, auto);width:var(--sky-override-timepicker-button-width, var(--sky-size-picker_btn));height:var(--sky-override-timepicker-button-height, var(--sky-size-picker_btn))}.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-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active):not(: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-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) 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-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-color-border-selected));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-column-meridies ol li button,.sky-timepicker-column.sky-timepicker-24hour-minutes ol li button{height:100%}.sky-timepicker-column.sky-timepicker-24hour-hours ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour-hours ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-comp-timepicker-content-space-inset-top) var(--sky-comp-timepicker-content-space-inset-right) var(--sky-comp-timepicker-content-space-inset-bottom) var(--sky-comp-timepicker-content-space-inset-left));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-comp-timepicker-footer-space-inset-top)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-right)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-comp-timepicker-footer-space-inset-bottom)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-comp-timepicker-footer-space-inset-left))}.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$2.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1$2.SkyCoreAdapterService }, { type: i1$2.SkyOverlayService }, { type: i2$3.SkyInputBoxHostService, decorators: [{
                     type: Optional
                 }] }, { type: i3.SkyThemeService, decorators: [{
                     type: Optional
@@ -5210,14 +5207,13 @@ class SkyTimepickerInputDirective {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     #_validatorChange = () => { };
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyTimepickerInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: SkyTimepickerInputDirective, isStandalone: false, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" }, properties: { "attr.skyTimepickerInput": "this.hostTimepickerInput" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: SkyTimepickerInputDirective, isStandalone: true, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" }, properties: { "attr.skyTimepickerInput": "this.hostTimepickerInput" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyTimepickerInput]',
                     providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR],
-                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { skyTimepickerInput: [{
                 type: Input
@@ -5240,27 +5236,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImpor
 class SkyTimepickerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [CommonModule,
-            SkyIconModule,
-            SkyDatetimeResourcesModule,
-            SkyAffixModule,
-            SkyThemeModule], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyTimepickerModule, imports: [CommonModule,
-            SkyIconModule,
-            SkyDatetimeResourcesModule,
-            SkyAffixModule,
-            SkyThemeModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.0", ngImport: i0, type: SkyTimepickerModule, imports: [SkyDatetimeResourcesModule,
+            SkyTimepickerInputDirective,
+            SkyTimepickerComponent], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyTimepickerModule, imports: [SkyDatetimeResourcesModule,
+            SkyTimepickerComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: SkyTimepickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent],
                     imports: [
-                        CommonModule,
-                        SkyIconModule,
                         SkyDatetimeResourcesModule,
-                        SkyAffixModule,
-                        SkyThemeModule,
+                        SkyTimepickerInputDirective,
+                        SkyTimepickerComponent,
                     ],
                     exports: [SkyTimepickerInputDirective, SkyTimepickerComponent],
                 }]