@skyux/datetime 11.40.0 → 11.42.0

package/fesm2022/skyux-datetime.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { NgModule, inject, Injectable, Pipe, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, DestroyRef, output, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener, Injector, viewChildren, signal, computed, runInInjectionContext, booleanAttribute, HostBinding } from '@angular/core';
+import { NgModule, inject, Injectable, Pipe, EventEmitter, Component, ViewEncapsulation, Input, Output, input, computed, effect, ChangeDetectionStrategy, ViewChild, DestroyRef, output, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener, Injector, viewChildren, signal, runInInjectionContext, booleanAttribute, HostBinding } from '@angular/core';
 import * as i1 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule, SkyAppLocaleProvider, SkyIntlDateFormatter } from '@skyux/i18n';
 import { Subject, takeUntil as takeUntil$1, fromEvent, of, filter, map, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
@@ -7,18 +7,18 @@ import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import moment from 'moment';
 import * as i2$3 from '@skyux/forms';
 import { SKY_FORM_ERRORS_ENABLED, SkyInputBoxModule, SkyFormErrorsModule, SkyFormErrorModule } from '@skyux/forms';
-import * as i2 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 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 * as i1$2 from '@skyux/core';
 import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyLogService, SkyAffixModule } from '@skyux/core';
-import * as i2$1 from '@skyux/icon';
+import * as i2 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
 import * as i2$2 from '@skyux/indicators';
 import { SkyWaitModule } from '@skyux/indicators';
-import * as i4 from '@skyux/popovers';
+import * as i2$1 from '@skyux/popovers';
 import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
 import * as i3 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
@@ -1151,7 +1151,7 @@ class SkyDatepickerCalendarInnerComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          [attr.aria-label]=\"previousLabel\"\n          (click)=\"moveCalendar($event, -1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n        </button>\n      </span>\n      <span class=\"sky-datepicker-header-center\">\n        <!-- display: inline -->\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          [id]=\"datepickerId + '-title'\"\n          [disabled]=\"datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepickerMode === maxMode\n          }\"\n          (click)=\"toggleModeCalendar($event)\"\n          >{{ title }}</button\n        >\n      </span>\n      <span class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          [attr.aria-label]=\"nextLabel\"\n          (click)=\"moveCalendar($event, 1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n        </button>\n      </span>\n    </div>\n    <ng-content />\n  </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-chevron-size: inherit;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-datepicker-calendar-inner{--sky-override-chevron-color: var(--sky-color-text-default);--sky-override-datepicker-box-shadow: inset 0 0 0 1px var(--modern-color-gray-15);--sky-override-datepicker-button-active-border-width: var(--modern-size-1);--sky-override-datepicker-button-background-color: var(--modern-color-white);--sky-override-datepicker-button-background-color-active: var( --modern-color-white );--sky-override-datepicker-button-background-color-hover: var( --modern-color-white );--sky-override-datepicker-button-border-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-override-datepicker-button-border-color-transparent: var( --modern-color-transparent );--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-horizontal-padding: 10px;--sky-override-datepicker-month-year-button-padding: 5px 7px;--sky-override-datepicker-nav-button-padding: 5px 7px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 5px;--sky-override-datepicker-weekday-font-size: 12.8px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner .sky-datepicker-calendar-header .sky-btn-default{line-height:1}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-yearpicker td{width:20%}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-monthpicker td{width:33%}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border);box-shadow:var(--sky-override-datepicker-box-shadow)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-bottomless-top-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-right-m)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-left-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-override-datepicker-button-border-color-transparent, var(--sky-color-border-action-tertiary-active)))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-border-color-transparent, var(--sky-border-width-action-disabled)) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-balanced-xs))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-calendar-title{font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-emphasized));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-pillarbox-1_4-top-s) var(--sky-space-inset-pillarbox-1_4-right-s) var(--sky-space-inset-pillarbox-1_4-bottom-s) var(--sky-space-inset-pillarbox-1_4-left-s))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-active-border-width, var(--sky-border-width-action-active)) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-datepicker-chevron-size, var(--sky-size-icon-s))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-space-inset-pillarbox-1_2-top-s) var(--sky-space-inset-pillarbox-1_2-right-s) var(--sky-space-inset-pillarbox-1_2-bottom-s) var(--sky-space-inset-pillarbox-1_2-left-s))}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          [attr.aria-label]=\"previousLabel\"\n          (click)=\"moveCalendar($event, -1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n        </button>\n      </span>\n      <span class=\"sky-datepicker-header-center\">\n        <!-- display: inline -->\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          [id]=\"datepickerId + '-title'\"\n          [disabled]=\"datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepickerMode === maxMode\n          }\"\n          (click)=\"toggleModeCalendar($event)\"\n          >{{ title }}</button\n        >\n      </span>\n      <span class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          [attr.aria-label]=\"nextLabel\"\n          (click)=\"moveCalendar($event, 1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n        </button>\n      </span>\n    </div>\n    <ng-content />\n  </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-chevron-size: inherit;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-datepicker-calendar-inner{--sky-override-chevron-color: var(--sky-color-text-default);--sky-override-datepicker-box-shadow: inset 0 0 0 1px var(--modern-color-gray-15);--sky-override-datepicker-button-active-border-width: var(--modern-size-1);--sky-override-datepicker-button-background-color: var(--modern-color-white);--sky-override-datepicker-button-background-color-active: var( --modern-color-white );--sky-override-datepicker-button-background-color-hover: var( --modern-color-white );--sky-override-datepicker-button-border-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-override-datepicker-button-border-color-transparent: var( --modern-color-transparent );--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-horizontal-padding: 10px;--sky-override-datepicker-month-year-button-padding: 5px 7px;--sky-override-datepicker-nav-button-padding: 5px 7px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 5px;--sky-override-datepicker-weekday-font-size: 12.8px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner .sky-datepicker-calendar-header .sky-btn-default{line-height:1}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-yearpicker td{width:20%}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-monthpicker td{width:33%}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border);box-shadow:var(--sky-override-datepicker-box-shadow)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-bottomless-top-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-right-m)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-left-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-override-datepicker-button-border-color-transparent, var(--sky-color-border-action-tertiary-active)))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-border-color-transparent, var(--sky-border-width-action-disabled)) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-balanced-xs))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-calendar-title{font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-emphasized));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-pillarbox-1_4-top-s) var(--sky-space-inset-pillarbox-1_4-right-s) var(--sky-space-inset-pillarbox-1_4-bottom-s) var(--sky-space-inset-pillarbox-1_4-left-s))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-active-border-width, var(--sky-border-width-action-active)) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-datepicker-chevron-size, var(--sky-size-icon-s))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-space-inset-pillarbox-1_2-top-s) var(--sky-space-inset-pillarbox-1_2-right-s) var(--sky-space-inset-pillarbox-1_2-bottom-s) var(--sky-space-inset-pillarbox-1_2-left-s))}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"], dependencies: [{ kind: "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: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
             type: Component,
@@ -1174,6 +1174,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Manages the state of the calendar picker.
+ * @internal
+ */
+class SkyDatepickerCalendarService {
+    constructor() {
+        /**
+         * Whether a key date popover is currently displayed.
+         * Useful for communicating across all daypicker siblings when a popover is displayed.
+         */
+        this.keyDatePopoverStream = new Subject();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * Formats date values according to formatting rules.
  * @example
@@ -1218,7 +1237,7 @@ class SkyDayPickerButtonComponent {
         this.datepicker = datepicker;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-datepicker-btn-date{--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-left: 12px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxs) / 2))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-datepicker-btn-date{--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-left: 12px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxs) / 2))}\n"], dependencies: [{ kind: "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: "18.2.13", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
             type: Component,
@@ -1228,141 +1247,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 /**
- * Manages the state of the calendar picker.
  * @internal
  */
-class SkyDatepickerCalendarService {
+class SkyDayPickerCellComponent {
+    #calendarSvc;
+    #datepicker;
     constructor() {
+        this.#calendarSvc = inject(SkyDatepickerCalendarService);
+        this.#datepicker = inject(SkyDatepickerCalendarInnerComponent);
         /**
-         * Whether a key date popover is currently displayed.
-         * Useful for communicating across all daypicker siblings when a popover is displayed.
+         * Whether the active date has been changed.
          */
-        this.keyDatePopoverStream = new Subject();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * @internal
- */
-class SkyDayPickerCellComponent {
-    #activeUid;
-    #cancelPopover;
-    #popoverOpen;
-    #ngUnsubscribe;
-    #datepicker;
-    #datepickerService;
-    constructor(datepicker, datepickerService) {
-        this.hasTooltip = false;
+        this.activeDateHasChanged = input(false);
+        /**
+         * The date this picker cell will represent on the calendar.
+         */
+        this.date = input();
+        this.ariaLabel = computed(() => {
+            const date = this.date();
+            if (date?.keyDateText) {
+                return date.keyDateText.join(', ');
+            }
+            /* istanbul ignore next: safety check */
+            return '';
+        });
+        this.hasTooltip = computed(() => {
+            const date = this.date();
+            return (date &&
+                date.keyDate &&
+                date.keyDateText &&
+                date.keyDateText.length > 0 &&
+                date.keyDateText[0].length > 0);
+        });
         this.popoverController = new Subject();
-        this.#activeUid = '';
-        this.#cancelPopover = false;
-        this.#popoverOpen = false;
-        this.#ngUnsubscribe = new Subject();
-        this.#datepicker = datepicker;
-        this.#datepickerService = datepickerService;
-    }
-    ngOnInit() {
-        this.hasTooltip = !!(this.date &&
-            this.date.keyDate &&
-            this.date.keyDateText &&
-            this.date.keyDateText.length > 0 &&
-            this.date.keyDateText[0].length > 0);
         // show the tooltip if this is the active date and is not the
         // initial active date (activeDateHasChanged)
-        if (!!this.date &&
-            this.#datepicker.isActive(this.date) &&
-            this.activeDateHasChanged &&
-            this.hasTooltip) {
-            this.#activeUid = this.date.uid;
-            this.#showTooltip();
-        }
-        if (this.hasTooltip) {
-            this.#datepickerService.keyDatePopoverStream
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe((date) => {
-                if (date) {
-                    this.#activeUid = date.uid;
-                }
-                else {
-                    this.#activeUid = '';
-                }
-                // If this day has an open popover and they have moved off of the day close the popover.
-                if (this.date?.uid !== this.#activeUid) {
-                    this.#hideTooltip();
-                }
-            });
-        }
-    }
-    ngOnDestroy() {
-        this.#ngUnsubscribe.next();
-        this.#ngUnsubscribe.complete();
+        effect(() => {
+            const activeDateHasChanged = this.activeDateHasChanged();
+            const hasTooltip = this.hasTooltip();
+            const date = this.date();
+            if (date &&
+                activeDateHasChanged &&
+                hasTooltip &&
+                this.#datepicker.isActive(date)) {
+                this.#showTooltip();
+            }
+        });
+        // Hide this cell's tooltip if another cell opens a tooltip.
+        this.#calendarSvc.keyDatePopoverStream
+            .pipe(takeUntilDestroyed())
+            .subscribe((popoverDate) => {
+            if (!popoverDate || popoverDate?.uid !== this.date()?.uid) {
+                this.#hideTooltip();
+            }
+        });
     }
     onDayMouseenter() {
-        this.#cancelPopover = false;
-        if (this.hasTooltip) {
+        if (this.hasTooltip()) {
             this.#showTooltip();
-            this.#datepickerService.keyDatePopoverStream.next(this.date);
+            this.#calendarSvc.keyDatePopoverStream.next(this.date());
         }
     }
     onDayMouseleave() {
-        this.#cancelPopover = true;
-        if (this.hasTooltip) {
-            this.#hideTooltip();
-        }
-        this.#datepickerService.keyDatePopoverStream.next(undefined);
-    }
-    onPopoverClosed() {
-        this.#popoverOpen = false;
-    }
-    onPopoverOpened() {
-        this.#popoverOpen = true;
-        /* istanbul ignore else */
-        if (this.#cancelPopover) {
-            // If the popover gets opened just as a mouseout event happens, close it.
+        if (this.hasTooltip()) {
             this.#hideTooltip();
-            this.#cancelPopover = false;
+            this.#calendarSvc.keyDatePopoverStream.next(undefined);
         }
     }
-    getKeyDateLabel() {
-        return this.hasTooltip && this.date?.keyDateText
-            ? this.date.keyDateText.join(', ')
-            : '';
-    }
     #hideTooltip() {
-        /* istanbul ignore else */
-        if (this.#popoverOpen) {
-            this.popoverController.next({ type: SkyPopoverMessageType.Close });
-        }
+        this.popoverController.next({ type: SkyPopoverMessageType.Close });
     }
     #showTooltip() {
-        /* istanbul ignore else */
-        if (this.hasTooltip && !this.#popoverOpen) {
-            /**
-             * Delay 1/2 second before opening the popover as long as mouse hasn't moved off the date.
-             */
-            setTimeout(() => {
-                if (!this.#cancelPopover && this.#activeUid === this.date?.uid) {
-                    this.popoverController.next({ type: SkyPopoverMessageType.Open });
-                }
-            }, 500);
-        }
+        this.popoverController.next({ type: SkyPopoverMessageType.Open });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerCalendarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDayPickerCellComponent, isStandalone: true, selector: "sky-daypicker-cell", inputs: { activeDateHasChanged: "activeDateHasChanged", date: "date" }, ngImport: i0, template: "@if (hasTooltip) {\n  <div\n    class=\"sky-daypicker-cell\"\n    skyPopoverPlacement=\"left\"\n    [attr.aria-label]=\"getKeyDateLabel()\"\n    [skyPopover]=\"dayInfoPopover\"\n    [skyPopoverMessageStream]=\"popoverController\"\n    (mouseenter)=\"onDayMouseenter()\"\n    (mouseleave)=\"onDayMouseleave()\"\n  >\n    <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n    <sky-popover\n      #dayInfoPopover\n      (popoverClosed)=\"onPopoverClosed()\"\n      (popoverOpened)=\"onPopoverOpened()\"\n    >\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: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }, { kind: "ngmodule", type: SkyPopoverModule }, { kind: "component", type: i4.λ6, selector: "sky-popover", inputs: ["alignment", "placement", "popoverTitle", "popoverType"], outputs: ["popoverClosed", "popoverOpened"] }, { kind: "directive", type: i4.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, SkyDayPickerButtonComponent, SkyPopoverModule], selector: 'sky-daypicker-cell', standalone: true, template: "@if (hasTooltip) {\n  <div\n    class=\"sky-daypicker-cell\"\n    skyPopoverPlacement=\"left\"\n    [attr.aria-label]=\"getKeyDateLabel()\"\n    [skyPopover]=\"dayInfoPopover\"\n    [skyPopoverMessageStream]=\"popoverController\"\n    (mouseenter)=\"onDayMouseenter()\"\n    (mouseleave)=\"onDayMouseleave()\"\n  >\n    <ng-container *ngTemplateOutlet=\"daypickerButtonTemplateRef\" />\n    <sky-popover\n      #dayInfoPopover\n      (popoverClosed)=\"onPopoverClosed()\"\n      (popoverOpened)=\"onPopoverOpened()\"\n    >\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" }]
-        }], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }, { type: SkyDatepickerCalendarService }], propDecorators: { activeDateHasChanged: [{
-                type: Input
-            }], date: [{
-                type: Input
-            }] } });
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, SkyDayPickerButtonComponent, SkyPopoverModule], selector: 'sky-daypicker-cell', standalone: true, 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" }]
+        }], ctorParameters: () => [] });
 
 /**
  * @internal
@@ -1645,7 +1609,7 @@ class SkyMonthPickerComponent {
         this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatMonthLabel);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
             type: Component,
@@ -1726,7 +1690,7 @@ class SkyYearPickerComponent {
         this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatYearLabel);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
             type: Component,
@@ -2243,8 +2207,8 @@ class SkyDatepickerComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$3.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    #calendarRef\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n  >\n    <sky-datepicker-calendar\n      cdkTrapFocus\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startAtDate]=\"startAtDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.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: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", 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 icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    #calendarRef\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n  >\n    <sky-datepicker-calendar\n      cdkTrapFocus\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startAtDate]=\"startAtDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "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: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
             type: Component,
@@ -2254,7 +2218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         SkyDatetimeResourcesModule,
                         SkyIconModule,
                     ], providers: [SkyDatepickerHostService], selector: 'sky-datepicker', standalone: true, template: "<div class=\"sky-datepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    #calendarRef\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n  >\n    <sky-datepicker-calendar\n      cdkTrapFocus\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startAtDate]=\"startAtDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyOverlayService }, { type: i2$3.SkyInputBoxHostService, decorators: [{
+        }], 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
@@ -4493,7 +4457,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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
             type: Component,
@@ -4919,13 +4883,13 @@ class SkyTimepickerComponent {
         /* istanbul ignore next */
         this.#overlayKeyupListener?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$3.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"clock\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    #timepickerRef\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          @for (hour of hours; track hour) {\n            <li>\n              <button\n                name=\"hour\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n                (click)=\"setTime($event)\"\n              >\n                {{ hour }}\n              </button>\n            </li>\n          }\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          @for (minute of minutes; track minute) {\n            <li>\n              <button\n                name=\"minute\"\n                type=\"button\"\n                [ngClass]=\"{\n                  'sky-btn-active': highlightMinute(selectedMinute, minute)\n                }\"\n                (click)=\"setTime($event)\"\n              >\n                {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n              </button>\n            </li>\n          }\n        </ol>\n      </section>\n      @if (!is8601) {\n        <section class=\"sky-timepicker-column\">\n          <ol>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n                (click)=\"setTime($event)\"\n              >\n                AM\n              </button>\n            </li>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n                (click)=\"setTime($event)\"\n              >\n                PM\n              </button>\n            </li>\n          </ol>\n        </section>\n      }\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-focus-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-timepicker-container{--sky-override-timepicker-border: solid 1px #cdcfd2;--sky-override-timepicker-button-background-color: var(--modern-color-white);--sky-override-timepicker-button-padding-vertical: var(--modern-size-5);--sky-override-timepicker-button-selected-hover-border-color: var( --modern-color-blue-50 );--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-content-space: var(--modern-space-s) var(--modern-space-s) 0 var(--modern-space-s);--sky-override-timepicker-font-size: 16px;--sky-override-timepicker-footer-padding-horizontal: var(--modern-size-10);--sky-override-timepicker-text-color: var(--modern-color-black)}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s));border:var(--sky-override-timepicker-border, none)}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-separator-light) solid var(--sky-color-border-separator-light));column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m));width:100%;height:100%}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-action-tertiary-hover)))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-selected)));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-space-inset-balanced-m));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m))}.sky-timepicker-footer .sky-timepicker-column{width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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: "18.2.13", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"clock\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    #timepickerRef\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          @for (hour of hours; track hour) {\n            <li>\n              <button\n                name=\"hour\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n                (click)=\"setTime($event)\"\n              >\n                {{ hour }}\n              </button>\n            </li>\n          }\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          @for (minute of minutes; track minute) {\n            <li>\n              <button\n                name=\"minute\"\n                type=\"button\"\n                [ngClass]=\"{\n                  'sky-btn-active': highlightMinute(selectedMinute, minute)\n                }\"\n                (click)=\"setTime($event)\"\n              >\n                {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n              </button>\n            </li>\n          }\n        </ol>\n      </section>\n      @if (!is8601) {\n        <section class=\"sky-timepicker-column\">\n          <ol>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n                (click)=\"setTime($event)\"\n              >\n                AM\n              </button>\n            </li>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n                (click)=\"setTime($event)\"\n              >\n                PM\n              </button>\n            </li>\n          </ol>\n        </section>\n      }\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-focus-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-timepicker-container{--sky-override-timepicker-border: solid 1px #cdcfd2;--sky-override-timepicker-button-background-color: var(--modern-color-white);--sky-override-timepicker-button-padding-vertical: var(--modern-size-5);--sky-override-timepicker-button-selected-hover-border-color: var( --modern-color-blue-50 );--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-content-space: var(--modern-space-s) var(--modern-space-s) 0 var(--modern-space-s);--sky-override-timepicker-font-size: 16px;--sky-override-timepicker-footer-padding-horizontal: var(--modern-size-10);--sky-override-timepicker-text-color: var(--modern-color-black)}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s));border:var(--sky-override-timepicker-border, none)}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-separator-light) solid var(--sky-color-border-separator-light));column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m));width:100%;height:100%}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-action-tertiary-hover)))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-selected)));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-space-inset-balanced-m));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m))}.sky-timepicker-footer .sky-timepicker-column{width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-timepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"clock\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    #timepickerRef\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          @for (hour of hours; track hour) {\n            <li>\n              <button\n                name=\"hour\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n                (click)=\"setTime($event)\"\n              >\n                {{ hour }}\n              </button>\n            </li>\n          }\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          @for (minute of minutes; track minute) {\n            <li>\n              <button\n                name=\"minute\"\n                type=\"button\"\n                [ngClass]=\"{\n                  'sky-btn-active': highlightMinute(selectedMinute, minute)\n                }\"\n                (click)=\"setTime($event)\"\n              >\n                {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n              </button>\n            </li>\n          }\n        </ol>\n      </section>\n      @if (!is8601) {\n        <section class=\"sky-timepicker-column\">\n          <ol>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'AM' }\"\n                (click)=\"setTime($event)\"\n              >\n                AM\n              </button>\n            </li>\n            <li>\n              <button\n                name=\"meridie\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedMeridies === 'PM' }\"\n                (click)=\"setTime($event)\"\n              >\n                PM\n              </button>\n            </li>\n          </ol>\n        </section>\n      }\n    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container:not(.sky-theme-modern *){--sky-override-timepicker-background-color: #eeeeef;--sky-override-timepicker-border-radius: 5px;--sky-override-timepicker-button-active-background-color: #e2e3e4;--sky-override-timepicker-button-background-color: #ffffff;--sky-override-timepicker-button-border-radius: 3px;--sky-override-timepicker-button-focus-outline-offset: -2px;--sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto 5px;--sky-override-timepicker-button-hover-active-focus-border-radius: 0;--sky-override-timepicker-button-hover-active-focus-box-shadow: none;--sky-override-timepicker-button-hover-background-color: #eeeeef;--sky-override-timepicker-button-padding-horizontal: 15px;--sky-override-timepicker-button-padding-vertical: 5px;--sky-override-timepicker-button-selected-background-color: #c1e8fb;--sky-override-timepicker-button-selected-box-shadow: inset 0 0 0 2px #00b4f1;--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-column-gap: 10px;--sky-override-timepicker-column-meride-divider: 1px solid #e2e3e4;--sky-override-timepicker-content-space: 10px 10px 0 10px;--sky-override-timepicker-font-size: 15px;--sky-override-timepicker-footer-padding-horizontal: 10px;--sky-override-timepicker-footer-padding-vertical: 10px;--sky-override-timepicker-text-color: #000}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-timepicker-container{--sky-override-timepicker-border: solid 1px #cdcfd2;--sky-override-timepicker-button-background-color: var(--modern-color-white);--sky-override-timepicker-button-padding-vertical: var(--modern-size-5);--sky-override-timepicker-button-selected-hover-border-color: var( --modern-color-blue-50 );--sky-override-timepicker-column-border: 1px solid #e2e3e4;--sky-override-timepicker-content-space: var(--modern-space-s) var(--modern-space-s) 0 var(--modern-space-s);--sky-override-timepicker-font-size: 16px;--sky-override-timepicker-footer-padding-horizontal: var(--modern-size-10);--sky-override-timepicker-text-color: var(--modern-color-black)}.sky-timepicker-container{position:fixed;font-size:var(--sky-override-timepicker-font-size);background-color:var(--sky-override-timepicker-background-color, var(--sky-color-background-container-menu));border-radius:var(--sky-override-timepicker-border-radius, var(--sky-border-radius-s));border:var(--sky-override-timepicker-border, none)}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:var(--sky-override-timepicker-column-meride-divider);flex:1}.sky-timepicker-column ol{border:var(--sky-override-timepicker-column-border, var(--sky-border-width-separator-light) solid var(--sky-color-border-separator-light));column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{background-color:var(--sky-override-timepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border-width:0;border-color:var(--sky-color-border-action-tertiary-base);color:var(--sky-override-timepicker-text-color, var(--sky-color-text-default));cursor:pointer;padding:var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-button-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-button-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m));width:100%;height:100%}.sky-timepicker-column ol li button:focus-visible:not(:active){outline:var(--sky-override-timepicker-button-focus-outline);outline-offset:var(--sky-override-timepicker-button-focus-outline-offset);border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-timepicker-column ol li button:hover:not(.sky-btn-active){border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-timepicker-button-hover-background-color, var(--sky-color-background-action-tertiary-hover));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-action-tertiary-hover)))}.sky-timepicker-column ol li button:active{background-color:var(--sky-override-timepicker-button-active-background-color, var(--sky-color-background-action-tertiary-active));border-radius:var(--sky-override-timepicker-button-hover-active-focus-border-radius, var(--sky-border-radius-s));box-shadow:var(--sky-override-timepicker-button-hover-active-focus-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-timepicker-column ol li button.sky-btn-active{background-color:var(--sky-override-timepicker-button-selected-background-color, var(--sky-color-background-selected-soft));box-shadow:var(--sky-override-timepicker-button-selected-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-override-timepicker-button-selected-hover-border-color, var(--sky-color-border-selected)));border-radius:var(--sky-override-timepicker-button-border-radius, var(--sky-border-radius-s))}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex;padding:var(--sky-override-timepicker-content-space, var(--sky-space-inset-balanced-m));gap:var(--sky-override-timepicker-column-gap, var(--sky-space-gap-action_group-m))}.sky-timepicker-footer{margin:0;padding:var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-top-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-right-m)) var(--sky-override-timepicker-footer-padding-vertical, var(--sky-space-inset-pillarbox-2_3-bottom-m)) var(--sky-override-timepicker-footer-padding-horizontal, var(--sky-space-inset-pillarbox-2_3-left-m))}.sky-timepicker-footer .sky-timepicker-column{width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyOverlayService }, { type: i2$3.SkyInputBoxHostService, decorators: [{
+        }], 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