@skyux/datetime 11.26.0 → 11.28.0

package/fesm2022/skyux-datetime.mjs

@@ -1,21 +1,19 @@
 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, signal, computed, runInInjectionContext, booleanAttribute, HostBinding } from '@angular/core';
+import { NgModule, inject, Injectable, Pipe, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, DestroyRef, output, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener, Injector, viewChildren, signal, computed, 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, filter, map, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import moment from 'moment';
 import * as i2$3 from '@skyux/forms';
-import { SkyFormErrorModule, SKY_FORM_ERRORS_ENABLED, SkyInputBoxModule, SkyFormErrorsModule } from '@skyux/forms';
+import { SKY_FORM_ERRORS_ENABLED, SkyInputBoxModule, SkyFormErrorsModule, SkyFormErrorModule } from '@skyux/forms';
 import * as i2 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, FormsModule, FormControl, FormBuilder, NgControl, StatusChangeEvent, TouchedChangeEvent, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, FormBuilder, NgControl, StatusChangeEvent, TouchedChangeEvent, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@skyux/core';
-import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyLogService } from '@skyux/core';
-import * as i4$1 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
+import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyLogService, SkyAffixModule } from '@skyux/core';
 import * as i2$1 from '@skyux/icon';
 import { SkyIconModule } from '@skyux/icon';
 import * as i2$2 from '@skyux/indicators';
@@ -141,11 +139,11 @@ SkyLibResourcesService.addResources(RESOURCES);
  * Import into any component library module that needs to use resource strings.
  */
 class SkyDatetimeResourcesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatetimeResourcesModule, imports: [SkyI18nModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatetimeResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyDatetimeResourcesModule, exports: [SkyI18nModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatetimeResourcesModule, imports: [SkyI18nModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatetimeResourcesModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyI18nModule],
@@ -227,10 +225,10 @@ class SkyDateService {
         }
         return SkyIntlDateFormatter.format(date, locale || this.#defaultLocale, this.#ALIASES[pattern] || pattern);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -291,10 +289,10 @@ class SkyDatePipe {
         const format = this.#format || this.#defaultFormat;
         this.#formattedValue = this.#dateSvc.format(this.#value, locale, format);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyDatePipe, name: "skyDate", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyDatePipe, name: "skyDate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyDate',
@@ -697,10 +695,10 @@ class SkyFuzzyDateService {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -740,10 +738,10 @@ class SkyFuzzyDatePipe {
         const fuzzyDateLocale = locale || this.#fuzzyDateService.getCurrentLocale();
         return this.#fuzzyDateService.format(value, fuzzyDateFormat, fuzzyDateLocale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyFuzzyDatePipe, deps: [{ token: SkyFuzzyDateService }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyFuzzyDatePipe, name: "skyFuzzyDate", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyFuzzyDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyFuzzyDate',
@@ -752,11 +750,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
         }], ctorParameters: () => [{ type: SkyFuzzyDateService }] });
 
 class SkyDatePipeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyDatePipeModule, declarations: [SkyDatePipe, SkyFuzzyDatePipe], imports: [SkyDatetimeResourcesModule], exports: [SkyDatePipe, SkyFuzzyDatePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [SkyDatetimeResourcesModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatePipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyDatePipeModule, declarations: [SkyDatePipe, SkyFuzzyDatePipe], imports: [SkyDatetimeResourcesModule], exports: [SkyDatePipe, SkyFuzzyDatePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatePipeModule, providers: [SkyDatePipe, SkyFuzzyDatePipe], imports: [SkyDatetimeResourcesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatePipeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatePipeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyDatePipe, SkyFuzzyDatePipe],
@@ -1152,12 +1150,12 @@ class SkyDatepickerCalendarInnerComponent {
         }
         return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: { customDates: "customDates", startingDay: "startingDay", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate" }, outputs: { selectedDateChange: "selectedDateChange", calendarModeChange: "calendarModeChange" }, usesOnChanges: true, ngImport: i0, template: "@if (datepickerMode) {\n  <div class=\"sky-datepicker-calendar-inner\">\n    <div class=\"sky-datepicker-calendar-header\">\n      <span class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          [attr.aria-label]=\"previousLabel\"\n          (click)=\"moveCalendar($event, -1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n        </button>\n      </span>\n      <span class=\"sky-datepicker-header-center\">\n        <!-- display: inline -->\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          [id]=\"datepickerId + '-title'\"\n          [disabled]=\"datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepickerMode === maxMode\n          }\"\n          (click)=\"toggleModeCalendar($event)\"\n          >{{ title }}</button\n        >\n      </span>\n      <span class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          [attr.aria-label]=\"nextLabel\"\n          (click)=\"moveCalendar($event, 1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n        </button>\n      </span>\n    </div>\n    <ng-content />\n  </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-chevron-size: inherit;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-datepicker-calendar-inner{--sky-override-chevron-color: var(--sky-color-text-default);--sky-override-datepicker-box-shadow: inset 0 0 0 1px var(--modern-color-gray-15);--sky-override-datepicker-button-active-border-width: var(--modern-size-1);--sky-override-datepicker-button-background-color: var(--modern-color-white);--sky-override-datepicker-button-background-color-active: var( --modern-color-white );--sky-override-datepicker-button-background-color-hover: var( --modern-color-white );--sky-override-datepicker-button-border-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-override-datepicker-button-border-color-transparent: var( --modern-color-transparent );--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-horizontal-padding: 10px;--sky-override-datepicker-month-year-button-padding: 5px 7px;--sky-override-datepicker-nav-button-padding: 5px 7px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 5px;--sky-override-datepicker-weekday-font-size: 12.8px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner .sky-datepicker-calendar-header .sky-btn-default{line-height:1}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-yearpicker td{width:20%}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-monthpicker td{width:33%}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border);box-shadow:var(--sky-override-datepicker-box-shadow)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-bottomless-top-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-right-m)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-left-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-override-datepicker-button-border-color-transparent, var(--sky-color-border-action-tertiary-active)))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-border-color-transparent, var(--sky-border-width-action-disabled)) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-balanced-xs))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-calendar-title{font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-emphasized));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-pillarbox-1_4-top-s) var(--sky-space-inset-pillarbox-1_4-right-s) var(--sky-space-inset-pillarbox-1_4-bottom-s) var(--sky-space-inset-pillarbox-1_4-left-s))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-active-border-width, var(--sky-border-width-action-active)) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-datepicker-chevron-size, var(--sky-size-icon-s))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-space-inset-pillarbox-1_2-top-s) var(--sky-space-inset-pillarbox-1_2-right-s) var(--sky-space-inset-pillarbox-1_2-bottom-s) var(--sky-space-inset-pillarbox-1_2-left-s))}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarInnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-datepicker-inner', encapsulation: ViewEncapsulation.None, template: "@if (datepickerMode) {\n  <div class=\"sky-datepicker-calendar-inner\">\n    <div class=\"sky-datepicker-calendar-header\">\n      <span class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          [attr.aria-label]=\"previousLabel\"\n          (click)=\"moveCalendar($event, -1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n        </button>\n      </span>\n      <span class=\"sky-datepicker-header-center\">\n        <!-- 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"] }]
+            args: [{ encapsulation: ViewEncapsulation.None, imports: [CommonModule, SkyIconModule], selector: 'sky-datepicker-inner', standalone: true, template: "@if (datepickerMode) {\n  <div class=\"sky-datepicker-calendar-inner\">\n    <div class=\"sky-datepicker-calendar-header\">\n      <span class=\"sky-datepicker-header-left\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-previous\"\n          [attr.aria-label]=\"previousLabel\"\n          (click)=\"moveCalendar($event, -1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-left\" />\n        </button>\n      </span>\n      <span class=\"sky-datepicker-header-center\">\n        <!-- display: inline -->\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-calendar-title\"\n          [id]=\"datepickerId + '-title'\"\n          [disabled]=\"datepickerMode === maxMode\"\n          [ngClass]=\"{\n            'sky-btn-disabled': datepickerMode === maxMode\n          }\"\n          (click)=\"toggleModeCalendar($event)\"\n          >{{ title }}</button\n        >\n      </span>\n      <span class=\"sky-datepicker-header-right\">\n        <button\n          type=\"button\"\n          class=\"sky-btn sky-btn-default sky-btn-sm sky-datepicker-btn-next\"\n          [attr.aria-label]=\"nextLabel\"\n          (click)=\"moveCalendar($event, 1)\"\n        >\n          <sky-icon class=\"sky-datepicker-chevron\" icon=\"chevron-right\" />\n        </button>\n      </span>\n    </div>\n    <ng-content />\n  </div>\n}\n", styles: [".sky-datepicker-calendar-inner:not(.sky-theme-modern *){--sky-override-button-box-shadow: none;--sky-override-chevron-color: #212327;--sky-override-datepicker-background-color: #ffffff;--sky-override-datepicker-border: 1px solid #e2e3e4;--sky-override-datepicker-border-color-hover: #eeeeef;--sky-override-datepicker-border-radius: 5px;--sky-override-datepicker-button-background-color: #ffffff;--sky-override-datepicker-button-background-color-active: #eeeeef;--sky-override-datepicker-button-background-color-disabled: #ffffff;--sky-override-datepicker-button-background-color-hover: #eeeeef;--sky-override-datepicker-button-border: 2px solid #ffffff;--sky-override-datepicker-button-selected-background: #c1e8fb;--sky-override-datepicker-button-selected-border: 2px solid #00b4f1;--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-chevron-size: inherit;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-day-btn-line-height: 1.5;--sky-override-datepicker-day-button-padding: 5px 10px;--sky-override-datepicker-day-button-size: 100%;--sky-override-datepicker-focus-outline: auto;--sky-override-datepicker-horizontal-padding: 0;--sky-override-datepicker-month-year-button-padding: 6px 12px;--sky-override-datepicker-nav-button-padding: 5px 10px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-secondary-date-color: #686c73;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 0;--sky-override-datepicker-weekday-font-size: 12px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern:not(.sky-theme-brand-blackbaud) .sky-datepicker-calendar-inner{--sky-override-chevron-color: var(--sky-color-text-default);--sky-override-datepicker-box-shadow: inset 0 0 0 1px var(--modern-color-gray-15);--sky-override-datepicker-button-active-border-width: var(--modern-size-1);--sky-override-datepicker-button-background-color: var(--modern-color-white);--sky-override-datepicker-button-background-color-active: var( --modern-color-white );--sky-override-datepicker-button-background-color-hover: var( --modern-color-white );--sky-override-datepicker-button-border-color-disabled: var( --sky-color-background-action-secondary-disabled );--sky-override-datepicker-button-border-color-transparent: var( --modern-color-transparent );--sky-override-datepicker-calendar-top-padding: 0;--sky-override-datepicker-day-btn-font-size: 12px;--sky-override-datepicker-horizontal-padding: 10px;--sky-override-datepicker-month-year-button-padding: 5px 7px;--sky-override-datepicker-nav-button-padding: 5px 7px;--sky-override-datepicker-nav-space: 0;--sky-override-datepicker-table-border-spacing: 2px;--sky-override-datepicker-td-padding: 1px;--sky-override-datepicker-title-font-style: 700;--sky-override-datepicker-vertical-padding: 5px;--sky-override-datepicker-weekday-font-size: 12.8px;--sky-override-datepicker-weekday-font-weight: 900}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner .sky-datepicker-calendar-header .sky-btn-default{line-height:1}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-yearpicker td{width:20%}.sky-theme-modern.sky-theme-brand-blackbaud .sky-datepicker-calendar-inner sky-monthpicker td{width:33%}.sky-datepicker-calendar-inner{border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s));background-color:var(--sky-override-datepicker-background-color, var(--sky-color-background-container-menu));border:var(--sky-override-datepicker-border);box-shadow:var(--sky-override-datepicker-box-shadow)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-header{width:100%;display:flex;padding:var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-bottomless-top-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-right-m)) 0 var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-bottomless-left-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container{padding:var(--sky-override-datepicker-calendar-top-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-vertical-padding, var(--sky-space-inset-balanced-m)) var(--sky-override-datepicker-horizontal-padding, var(--sky-space-inset-balanced-m))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible{outline:var(--sky-override-datepicker-focus-outline, none)}.sky-datepicker-calendar-inner .sky-datepicker-calendar-table-container:focus-visible .sky-btn.sky-btn-active{border:var(--sky-override-datepicker-button-selected-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-color-border-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-btn-default{background-color:var(--sky-override-datepicker-button-background-color, var(--sky-color-background-action-tertiary-base));border:var(--sky-override-datepicker-button-border, none);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-base) var(--sky-color-border-action-tertiary-base))}.sky-datepicker-calendar-inner .sky-btn-default:hover{background-color:var(--sky-override-datepicker-button-background-color-hover, var(--sky-color-background-action-tertiary-hover));border-color:var(--sky-override-datepicker-border-color-hover);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-hover) var(--sky-color-border-action-tertiary-hover))}.sky-datepicker-calendar-inner .sky-btn-default:active{background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-active) var(--sky-override-datepicker-button-border-color-transparent, var(--sky-color-border-action-tertiary-active)))}.sky-datepicker-calendar-inner .sky-btn-default:focus-visible:not(:active){box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-action-focus) var(--sky-color-border-action-tertiary-focus), var(--sky-elevation-focus))}.sky-datepicker-calendar-inner .sky-btn-default.sky-btn.sky-datepicker-btn-date.sky-btn-disabled{background-color:var(--sky-override-datepicker-button-background-color-disabled, var(--sky-color-background-action-tertiary-disabled));box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-border-color-transparent, var(--sky-border-width-action-disabled)) var(--sky-color-border-action-tertiary-disabled))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next,.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-balanced-xs))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-previous{margin-right:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-btn-next{margin-left:var(--sky-override-datepicker-nav-space, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner .sky-btn-default.sky-datepicker-calendar-title{font-weight:var(--sky-override-datepicker-title-font-style, var(--sky-font-style-emphasized));padding:var(--sky-override-datepicker-nav-button-padding, var(--sky-space-inset-pillarbox-1_4-top-s) var(--sky-space-inset-pillarbox-1_4-right-s) var(--sky-space-inset-pillarbox-1_4-bottom-s) var(--sky-space-inset-pillarbox-1_4-left-s))}.sky-datepicker-calendar-inner .sky-datepicker-btn-date{min-width:100%}.sky-datepicker-calendar-inner .sky-btn-sm.sky-datepicker-btn-date{font-size:var(--sky-override-datepicker-day-btn-font-size, var(--sky-font-size-body-m));height:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn));line-height:var(--sky-override-datepicker-day-btn-line-height, var(--sky-font-line_height-body-m));min-width:var(--sky-override-datepicker-day-button-size, 0);padding:var(--sky-override-datepicker-day-button-padding, 0);width:var(--sky-override-datepicker-day-button-size, var(--sky-size-picker_btn))}.sky-datepicker-calendar-inner .sky-datepicker-center{text-align:center}.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected,.sky-datepicker-calendar-inner .sky-btn.sky-btn-default.sky-datepicker-btn-selected:hover{background-color:var(--sky-override-datepicker-button-selected-background, var(--sky-color-background-selected-soft));border:var(--sky-override-datepicker-button-selected-border);box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-border-width-selected-s) var(--sky-color-border-selected))}.sky-datepicker-calendar-inner .sky-btn.sky-btn-active{box-shadow:var(--sky-override-button-box-shadow, inset 0 0 0 var(--sky-override-datepicker-button-active-border-width, var(--sky-border-width-action-active)) var(--sky-color-border-action-tertiary-active));background-color:var(--sky-override-datepicker-button-background-color-active, var(--sky-color-background-action-tertiary-active))}.sky-datepicker-calendar-inner .sky-datepicker-secondary{color:var(--sky-override-datepicker-secondary-date-color, var(--sky-color-text-deemphasized))}.sky-datepicker-calendar-inner .sky-datepicker-calendar-title{width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-left{text-align:left}.sky-datepicker-calendar-inner .sky-datepicker-header-center{display:flex;width:100%}.sky-datepicker-calendar-inner .sky-datepicker-header-right{text-align:right}.sky-datepicker-calendar-inner table{border-spacing:var(--sky-override-datepicker-table-border-spacing, var(--sky-space-gap-action_group-s))}.sky-datepicker-calendar-inner table td{padding:var(--sky-override-datepicker-td-padding, 0)}.sky-datepicker-calendar-inner table th{padding-bottom:var(--sky-override-datepicker-td-padding, calc(var(--sky-space-gap-text_action-xs) - var(--sky-space-gap-action_group-s)))}.sky-datepicker-chevron{color:var(--sky-override-chevron-color, var(--sky-color-icon-deemphasized));font-size:var(--sky-override-datepicker-chevron-size, var(--sky-size-icon-s))}sky-yearpicker .sky-btn.sky-btn-default,sky-monthpicker .sky-btn.sky-btn-default{padding:var(--sky-override-datepicker-month-year-button-padding, var(--sky-space-inset-pillarbox-1_2-top-s) var(--sky-space-inset-pillarbox-1_2-right-s) var(--sky-space-inset-pillarbox-1_2-bottom-s) var(--sky-space-inset-pillarbox-1_2-left-s))}.sky-datepicker-weekday-text{font-size:var(--sky-override-datepicker-weekday-font-size, var(--sky-font-size-body-m));font-weight:var(--sky-override-datepicker-weekday-font-weight, var(--sky-font-style-emphasized))}\n"] }]
         }], propDecorators: { customDates: [{
                 type: Input
             }], startingDay: [{
@@ -1201,10 +1199,10 @@ class SkyDatepickerCalendarLabelPipe {
         }
         return formattedValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, isStandalone: true, name: "skyDatepickerCalendarLabel" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, isStandalone: true, name: "skyDatepickerCalendarLabel" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarLabelPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyDatepickerCalendarLabel',
@@ -1212,29 +1210,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                 }]
         }] });
 
-class SkyDatepickerConfigService {
-    constructor() {
-        /**
-         * The starting day of the week in the calendar,
-         * where `0` sets the starting day to Sunday.
-         * @default 0
-         */
-        this.startingDay = 0;
+/**
+ * @internal
+ */
+class SkyDayPickerButtonComponent {
+    constructor(datepicker) {
+        this.datepicker = datepicker;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [CommonModule, SkyDatepickerCalendarLabelPipe], selector: 'sky-daypicker-button', standalone: true, template: "@if (date) {\n  <button\n    class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n    tabindex=\"-1\"\n    type=\"button\"\n    [disabled]=\"date.disabled\"\n    [ngClass]=\"{\n      'sky-datepicker-btn-selected': date.selected,\n      'sky-btn-disabled': date.disabled,\n      'sky-btn-active': datepicker.isActive(date),\n      'sky-datepicker-btn-disabled': date.disabled,\n      'sky-datepicker-btn-key-date': date.keyDate\n    }\"\n    [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\n    (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n  >\n    <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n      {{ date.label }}\n    </span>\n  </button>\n}\n", styles: [".sky-datepicker-btn-date:not(.sky-theme-modern *){--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-color: #d93a3d;--sky-override-daypicker-key-date-left: 15px;--sky-override-daypicker-key-date-size: 5px;--sky-override-daypicker-key-date-top: 22px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-datepicker-btn-date{--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-left: 12px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxs) / 2))}\n"] }]
+        }], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { date: [{
+                type: Input
+            }] } });
 
 /**
+ * Manages the state of the calendar picker.
  * @internal
  */
-class SkyDatepickerService {
+class SkyDatepickerCalendarService {
     constructor() {
         /**
          * Whether a key date popover is currently displayed.
@@ -1242,30 +1239,13 @@ class SkyDatepickerService {
          */
         this.keyDatePopoverStream = new Subject();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerService }); }
+    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.8", ngImport: i0, type: SkyDatepickerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarService, decorators: [{
             type: Injectable
         }] });
 
-/**
- * @internal
- */
-class SkyDayPickerButtonComponent {
-    constructor(datepicker) {
-        this.datepicker = datepicker;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerButtonComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: { date: "date" }, ngImport: i0, template: "@if (date) {\n  <button\n    class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n    tabindex=\"-1\"\n    type=\"button\"\n    [disabled]=\"date.disabled\"\n    [ngClass]=\"{\n      'sky-datepicker-btn-selected': date.selected,\n      'sky-btn-disabled': date.disabled,\n      'sky-btn-active': datepicker.isActive(date),\n      'sky-datepicker-btn-disabled': date.disabled,\n      'sky-datepicker-btn-key-date': date.keyDate\n    }\"\n    [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\n    (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n  >\n    <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n      {{ date.label }}\n    </span>\n  </button>\n}\n", styles: [".sky-datepicker-btn-date:not(.sky-theme-modern *){--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-color: #d93a3d;--sky-override-daypicker-key-date-left: 15px;--sky-override-daypicker-key-date-size: 5px;--sky-override-daypicker-key-date-top: 22px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-datepicker-btn-date{--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-left: 12px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxs) / 2))}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-daypicker-button', template: "@if (date) {\n  <button\n    class=\"sky-btn sky-btn-sm sky-btn-default sky-datepicker-btn-date\"\n    tabindex=\"-1\"\n    type=\"button\"\n    [disabled]=\"date.disabled\"\n    [ngClass]=\"{\n      'sky-datepicker-btn-selected': date.selected,\n      'sky-btn-disabled': date.disabled,\n      'sky-btn-active': datepicker.isActive(date),\n      'sky-datepicker-btn-disabled': date.disabled,\n      'sky-datepicker-btn-key-date': date.keyDate\n    }\"\n    [attr.aria-label]=\"date.date | skyDatepickerCalendarLabel\"\n    (click)=\"datepicker.selectCalendar($event, date.date, true)\"\n  >\n    <span [ngClass]=\"{ 'sky-datepicker-secondary': date.secondary }\">\n      {{ date.label }}\n    </span>\n  </button>\n}\n", styles: [".sky-datepicker-btn-date:not(.sky-theme-modern *){--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-color: #d93a3d;--sky-override-daypicker-key-date-left: 15px;--sky-override-daypicker-key-date-size: 5px;--sky-override-daypicker-key-date-top: 22px}:host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-datepicker-btn-date{--sky-override-daypicker-disabled-style: italic;--sky-override-daypicker-key-date-left: 12px;--sky-override-daypicker-key-date-top: 22px}.sky-datepicker-btn-disabled{font-style:var(--sky-override-daypicker-disabled-style)}.sky-datepicker-btn-key-date{position:relative}.sky-datepicker-btn-key-date:before{position:absolute;content:\"\";height:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));width:var(--sky-override-daypicker-key-date-size, var(--sky-size-icon-xxs));background-color:var(--sky-override-daypicker-key-date-color, var(--sky-color-icon-danger));border-radius:50%;left:var(--sky-override-daypicker-key-date-left, calc(50% - var(--sky-size-icon-xxs) / 2));top:var(--sky-override-daypicker-key-date-top, calc(50% + var(--sky-font-size-body-m) * var(--sky-font-line_height-body-m) / 2 - var(--sky-size-icon-xxs) / 2))}\n"] }]
-        }], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { date: [{
-                type: Input
-            }] } });
-
 /**
  * @internal
  */
@@ -1372,13 +1352,13 @@ class SkyDayPickerCellComponent {
             }, 500);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerCellComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }, { token: SkyDatepickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDayPickerCellComponent, 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: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: SkyDayPickerButtonComponent, selector: "sky-daypicker-button", inputs: ["date"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-daypicker-cell', changeDetection: ChangeDetectionStrategy.OnPush, 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: SkyDatepickerService }], propDecorators: { activeDateHasChanged: [{
+            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
@@ -1584,12 +1564,12 @@ class SkyDayPickerComponent {
         }
         return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label.full) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <!-- display: inline -->\n          <span\n            class=\"sky-datepicker-weekday-text\"\n            [attr.aria-label]=\"label.full\"\n            >{{ label.abbr }}</span\n          >\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track $index) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDayPickerComponent, isStandalone: true, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label.full) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <!-- display: inline -->\n          <span\n            class=\"sky-datepicker-weekday-text\"\n            [attr.aria-label]=\"label.full\"\n            >{{ label.abbr }}</span\n          >\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track $index) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }, { kind: "ngmodule", type: SkyWaitModule }, { kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-daypicker', template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label.full) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <!-- display: inline -->\n          <span\n            class=\"sky-datepicker-weekday-text\"\n            [attr.aria-label]=\"label.full\"\n            >{{ label.abbr }}</span\n          >\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track $index) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
+            args: [{ imports: [SkyDayPickerCellComponent, SkyWaitModule], selector: 'sky-daypicker', standalone: true, template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label.full) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <!-- display: inline -->\n          <span\n            class=\"sky-datepicker-weekday-text\"\n            [attr.aria-label]=\"label.full\"\n            >{{ label.abbr }}</span\n          >\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track $index) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { customDates: [{
                 type: Input
             }], calendarDateRangeChange: [{
@@ -1664,12 +1644,12 @@ class SkyMonthPickerComponent {
         this.datepicker.activeDate.setMonth(date);
         this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatMonthLabel);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyMonthPickerComponent, 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: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-monthpicker', 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" }]
+            args: [{ imports: [CommonModule, SkyDatepickerCalendarLabelPipe], selector: 'sky-monthpicker', standalone: true, 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" }]
         }], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }] });
 
 /**
@@ -1745,14 +1725,33 @@ class SkyYearPickerComponent {
         this.datepicker.activeDate.setFullYear(date);
         this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatYearLabel);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyYearPickerComponent, 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: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
+    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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-yearpicker', 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" }]
+            args: [{ imports: [CommonModule, SkyDatepickerCalendarLabelPipe], selector: 'sky-yearpicker', standalone: true, 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" }]
         }], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }] });
 
+class SkyDatepickerConfigService {
+    constructor() {
+        /**
+         * The starting day of the week in the calendar,
+         * where `0` sets the starting day to Sunday.
+         * @default 0
+         */
+        this.startingDay = 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerConfigService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 /**
  * @internal
  */
@@ -1806,12 +1805,17 @@ class SkyDatepickerCalendarComponent {
             this.datepicker?.select(this.startAtDate ?? new Date(), false);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: { customDates: "customDates", isDaypickerWaiting: "isDaypickerWaiting", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate", startingDay: "startingDay" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", calendarModeChange: "calendarModeChange", selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: SkyDatepickerCalendarInnerComponent, descendants: true, read: SkyDatepickerCalendarInnerComponent, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker-calendar\">\n  <sky-datepicker-inner\n    [customDates]=\"customDates\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [startAtDate]=\"startAtDate\"\n    [selectedDate]=\"selectedDate\"\n    [startingDay]=\"startingDay\"\n    (calendarModeChange)=\"onCalendarModeChange($event)\"\n    (selectedDateChange)=\"onSelectedDateChange($event)\"\n  >\n    <div\n      class=\"sky-datepicker-calendar-table-container\"\n      autofocus\n      tabindex=\"0\"\n      (keydown)=\"datepicker?.onKeydown($event)\"\n    >\n      @if (datepicker?.datepickerMode === 'day') {\n        <sky-daypicker\n          [customDates]=\"customDates\"\n          [isWaiting]=\"isDaypickerWaiting\"\n          (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n        />\n      } @else if (datepicker?.datepickerMode === 'month') {\n        <sky-monthpicker />\n      } @else if (datepicker?.datepickerMode === 'year') {\n        <sky-yearpicker />\n      }\n    </div>\n  </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], dependencies: [{ kind: "component", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["customDates", "startingDay", "minDate", "maxDate", "startAtDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { kind: "component", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: ["customDates", "isWaiting"], outputs: ["calendarDateRangeChange"] }, { kind: "component", type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { kind: "component", type: SkyYearPickerComponent, selector: "sky-yearpicker" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarComponent, deps: [{ token: SkyDatepickerConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDatepickerCalendarComponent, isStandalone: true, selector: "sky-datepicker-calendar", inputs: { customDates: "customDates", isDaypickerWaiting: "isDaypickerWaiting", minDate: "minDate", maxDate: "maxDate", startAtDate: "startAtDate", selectedDate: "selectedDate", startingDay: "startingDay" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", calendarModeChange: "calendarModeChange", selectedDateChange: "selectedDateChange" }, viewQueries: [{ propertyName: "datepicker", first: true, predicate: SkyDatepickerCalendarInnerComponent, descendants: true, read: SkyDatepickerCalendarInnerComponent, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker-calendar\">\n  <sky-datepicker-inner\n    [customDates]=\"customDates\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [startAtDate]=\"startAtDate\"\n    [selectedDate]=\"selectedDate\"\n    [startingDay]=\"startingDay\"\n    (calendarModeChange)=\"onCalendarModeChange($event)\"\n    (selectedDateChange)=\"onSelectedDateChange($event)\"\n  >\n    <div\n      class=\"sky-datepicker-calendar-table-container\"\n      autofocus\n      tabindex=\"0\"\n      (keydown)=\"datepicker?.onKeydown($event)\"\n    >\n      @if (datepicker?.datepickerMode === 'day') {\n        <sky-daypicker\n          [customDates]=\"customDates\"\n          [isWaiting]=\"isDaypickerWaiting\"\n          (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n        />\n      } @else if (datepicker?.datepickerMode === 'month') {\n        <sky-monthpicker />\n      } @else if (datepicker?.datepickerMode === 'year') {\n        <sky-yearpicker />\n      }\n    </div>\n  </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"], dependencies: [{ kind: "component", type: SkyDatepickerCalendarInnerComponent, selector: "sky-datepicker-inner", inputs: ["customDates", "startingDay", "minDate", "maxDate", "startAtDate", "selectedDate"], outputs: ["selectedDateChange", "calendarModeChange"] }, { kind: "component", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: ["customDates", "isWaiting"], outputs: ["calendarDateRangeChange"] }, { kind: "component", type: SkyMonthPickerComponent, selector: "sky-monthpicker" }, { kind: "component", type: SkyYearPickerComponent, selector: "sky-yearpicker" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-datepicker-calendar', template: "<div class=\"sky-datepicker-calendar\">\n  <sky-datepicker-inner\n    [customDates]=\"customDates\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [startAtDate]=\"startAtDate\"\n    [selectedDate]=\"selectedDate\"\n    [startingDay]=\"startingDay\"\n    (calendarModeChange)=\"onCalendarModeChange($event)\"\n    (selectedDateChange)=\"onSelectedDateChange($event)\"\n  >\n    <div\n      class=\"sky-datepicker-calendar-table-container\"\n      autofocus\n      tabindex=\"0\"\n      (keydown)=\"datepicker?.onKeydown($event)\"\n    >\n      @if (datepicker?.datepickerMode === 'day') {\n        <sky-daypicker\n          [customDates]=\"customDates\"\n          [isWaiting]=\"isDaypickerWaiting\"\n          (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n        />\n      } @else if (datepicker?.datepickerMode === 'month') {\n        <sky-monthpicker />\n      } @else if (datepicker?.datepickerMode === 'year') {\n        <sky-yearpicker />\n      }\n    </div>\n  </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"] }]
+            args: [{ imports: [
+                        SkyDatepickerCalendarInnerComponent,
+                        SkyDayPickerComponent,
+                        SkyMonthPickerComponent,
+                        SkyYearPickerComponent,
+                    ], selector: 'sky-datepicker-calendar', standalone: true, template: "<div class=\"sky-datepicker-calendar\">\n  <sky-datepicker-inner\n    [customDates]=\"customDates\"\n    [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\"\n    [startAtDate]=\"startAtDate\"\n    [selectedDate]=\"selectedDate\"\n    [startingDay]=\"startingDay\"\n    (calendarModeChange)=\"onCalendarModeChange($event)\"\n    (selectedDateChange)=\"onSelectedDateChange($event)\"\n  >\n    <div\n      class=\"sky-datepicker-calendar-table-container\"\n      autofocus\n      tabindex=\"0\"\n      (keydown)=\"datepicker?.onKeydown($event)\"\n    >\n      @if (datepicker?.datepickerMode === 'day') {\n        <sky-daypicker\n          [customDates]=\"customDates\"\n          [isWaiting]=\"isDaypickerWaiting\"\n          (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n        />\n      } @else if (datepicker?.datepickerMode === 'month') {\n        <sky-monthpicker />\n      } @else if (datepicker?.datepickerMode === 'year') {\n        <sky-yearpicker />\n      }\n    </div>\n  </sky-datepicker-inner>\n</div>\n", styles: [".sky-datepicker-calendar{display:block}\n"] }]
         }], ctorParameters: () => [{ type: SkyDatepickerConfigService }], propDecorators: { customDates: [{
                 type: Input
             }], isDaypickerWaiting: [{
@@ -1890,10 +1894,10 @@ class SkyDatepickerHostService {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerHostService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerHostService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerHostService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerHostService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerHostService, decorators: [{
             type: Injectable
         }] });
 
@@ -1971,6 +1975,7 @@ class SkyDatepickerComponent {
     #overlayService;
     #zIndex;
     #datepickerHostSvc;
+    #elementRef;
     constructor(affixService, changeDetector, coreAdapter, overlayService, inputBoxHostService, themeSvc, stackingContext) {
         this.inputBoxHostService = inputBoxHostService;
         /**
@@ -2009,6 +2014,7 @@ class SkyDatepickerComponent {
         this.#environmentInjector = inject(EnvironmentInjector);
         this.#resourceSvc = inject(SkyLibResourcesService);
         this.#datepickerHostSvc = inject(SkyDatepickerHostService);
+        this.#elementRef = inject(ElementRef);
         this.#affixService = affixService;
         this.#changeDetector = changeDetector;
         this.#coreAdapter = coreAdapter;
@@ -2106,6 +2112,14 @@ class SkyDatepickerComponent {
             }
         }
     }
+    /**
+     * Whether the datepicker component contains the provided focus event target.
+     * @internal
+     */
+    containsTarget(target) {
+        return (this.#elementRef.nativeElement.contains(target) ||
+            this.getPickerRef()?.nativeElement.contains(target));
+    }
     /**
      * Gets the element reference of the picker overlay.
      * @internal
@@ -2229,12 +2243,17 @@ class SkyDatepickerComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$3.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", dateFormatChange: "dateFormatChange", openChange: "openChange", calendarDateChange: "calendarDateChange" }, providers: [SkyDatepickerHostService], viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    #calendarRef\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n  >\n    <sky-datepicker-calendar\n      cdkTrapFocus\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startAtDate]=\"startAtDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "startAtDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SkyDatepickerHostService], template: "<div class=\"sky-datepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    #calendarRef\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n  >\n    <sky-datepicker-calendar\n      cdkTrapFocus\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startAtDate]=\"startAtDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container:not(.sky-theme-modern *){--sky-override-datepicker-border-radius: 5px}.sky-datepicker-calendar-container{position:fixed;border-radius:var(--sky-override-datepicker-border-radius, var(--sky-border-radius-s))}.sky-datepicker-hidden{visibility:hidden}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        SkyDatepickerCalendarComponent,
+                        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: [{
                     type: Optional
                 }] }, { type: i3.SkyThemeService, decorators: [{
@@ -2284,28 +2303,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                     }]
             }] } });
 
-const SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR = {
+const SKY_DATEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
+    useExisting: forwardRef(() => SkyDatepickerInputDirective),
     multi: true,
 };
-const SKY_FUZZY_DATEPICKER_VALIDATOR = {
+const SKY_DATEPICKER_VALIDATOR = {
     provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
+    useExisting: forwardRef(() => SkyDatepickerInputDirective),
     multi: true,
 };
-class SkyFuzzyDatepickerInputDirective {
+class SkyDatepickerInputDirective {
     /**
      * The date format for the input. Place this attribute on the `input` element
-     * to override the default in `SkyDatepickerConfigService`.
+     * to override the default in the `SkyDatepickerConfigService`.
      * @default "MM/DD/YYYY"
      */
     set dateFormat(value) {
-        this.#_dateFormat = value;
-        if (this.#value) {
-            const formattedDate = this.#fuzzyDateService.format(this.#value, this.dateFormat, this.#locale);
-            this.#setInputElementValue(formattedDate);
-            this.#changeDetector.markForCheck();
+        /* istanbul ignore else */
+        if (value !== this.#_dateFormat) {
+            this.#_dateFormat = value;
+            this.#applyDateFormat();
         }
     }
     // TODO: Refactor to not have getter logic
@@ -2320,7 +2338,7 @@ class SkyFuzzyDatepickerInputDirective {
      * @default false
      */
     set disabled(value) {
-        this.#_disabled = value;
+        this.#_disabled = value || false;
         this.#datepickerComponent.disabled = value;
         this.#renderer.setProperty(this.#elementRef.nativeElement, 'disabled', value);
     }
@@ -2328,59 +2346,57 @@ class SkyFuzzyDatepickerInputDirective {
         return this.#_disabled;
     }
     /**
-     * Whether to prevent users from specifying dates that are in the future.
-     * Place this attribute on the `input` element.
-     * @default false
-     */
-    set futureDisabled(value) {
-        this.#_futureDisabled = value;
-        this.#datepickerComponent.maxDate = this.#getMaxDate();
-        this.#onValidatorChange();
-    }
-    get futureDisabled() {
-        return this.#_futureDisabled;
-    }
-    /**
-     * The latest fuzzy date allowed. Place this attribute on the `input` element
-     * to prevent fuzzy dates after a specified date. This property accepts
-     * a `SkyFuzzyDate` value that includes numeric month, day, and year values.
-     * For example: `{ month: 1, day: 1, year: 2027 }`.
+     * The latest date that is available in the calendar. Place this attribute on
+     * the `input` element to override the default in `SkyDatepickerConfigService`.
      */
     set maxDate(value) {
         this.#_maxDate = value;
-        this.#datepickerComponent.maxDate = this.#getMaxDate();
+        this.#datepickerComponent.maxDate = this.maxDate;
         this.#onValidatorChange();
     }
+    // TODO: Refactor to not have getter logic
     get maxDate() {
-        return this.#_maxDate;
+        return this.#_maxDate || this.#configService.maxDate;
     }
     /**
-     * The earliest fuzzy date allowed. Place this attribute on the `input` element
-     * to prevent fuzzy dates before a specified date. This property accepts a `SkyFuzzyDate` value
-     * that includes numeric month, day, and year values.
-     * For example: `{ month: 1, day: 1, year: 2007 }`.
+     * The earliest date that is available in the calendar. Place this attribute on
+     * the `input` element to override the default in `SkyDatepickerConfigService`. To avoid validation errors, the time associated with the minimum date must be midnight. This is necessary because the datepicker automatically sets the time on the `Date` object for selected dates to midnight in the current user's time zone.
      */
     set minDate(value) {
         this.#_minDate = value;
-        this.#datepickerComponent.minDate = this.#getMinDate();
+        this.#datepickerComponent.minDate = this.minDate;
         this.#onValidatorChange();
     }
+    // TODO: Refactor to not have getter logic
     get minDate() {
-        return this.#_minDate;
+        return this.#_minDate || this.#configService.minDate;
     }
     /**
-     * The fuzzy date to open the calendar to initially.
-     * This property accepts a `SkyFuzzyDate` value that includes numeric month, day, and year values.
-     * For example: `{ month: 1, day: 1, year: 2007 }`.
+     * The date to open the calendar to initially. Place this attribute on the `input` element to override the default in `SkyDatepickerConfigService`.
      * @default The current date
      */
     set startAtDate(value) {
         this.#_startAtDate = value;
-        this.#datepickerComponent.startAtDate = this.#getStartAtDate();
+        this.#datepickerComponent.startAtDate = this.startAtDate;
     }
     // TODO: Refactor to not have getter logic
     get startAtDate() {
-        return this.#_startAtDate;
+        return this.#_startAtDate || this.#configService.startAtDate;
+    }
+    /**
+     * Creates the datepicker input and calendar. Place this directive on an `input` element,
+     * and wrap the input in a `sky-datepicker` component. The value that users select is driven
+     * through the `ngModel` attribute specified on the `input` element.
+     * @required
+     */
+    set skyDatepickerInput(value) {
+        if (value) {
+            console.warn('[Deprecation warning] You no longer need to provide a template reference variable ' +
+                'to the `skyDatepickerInput` attribute (this will be a breaking change in the next ' +
+                'major version release).\n' +
+                'Do this instead:\n' +
+                '<sky-datepicker>\n  <input skyDatepickerInput />\n</sky-datepicker>');
+        }
     }
     /**
      * The starting day of the week in the calendar, where `0` sets the starting day
@@ -2398,15 +2414,18 @@ class SkyFuzzyDatepickerInputDirective {
         return this.#_startingDay || this.#configService.startingDay;
     }
     /**
-     * Whether to require the year in fuzzy dates.
+     * Whether the format of the date value must match the format from the `dateFormat` value.
+     * If this property is `true` and the datepicker input directive cannot find an exact match, then
+     * the input is marked as invalid.
+     * If this property is `false` and the datepicker input directive cannot find an exact match, then
+     * it attempts to format the string based on the [ISO 8601 standard format](https://www.iso.org/iso-8601-date-and-time-format.html).
      * @default false
      */
-    set yearRequired(value) {
-        this.#_yearRequired = value;
-        this.#onValidatorChange();
+    set strict(value) {
+        this.#_strict = value || false;
     }
-    get yearRequired() {
-        return this.#_yearRequired;
+    get strict() {
+        return this.#_strict;
     }
     get #value() {
         return this.#_value;
@@ -2416,37 +2435,34 @@ class SkyFuzzyDatepickerInputDirective {
     }
     #control;
     #dateFormatter;
-    #locale;
     #preferredShortDateFormat;
     #ngUnsubscribe;
     #notifyTouched;
-    #_futureDisabled;
     #_dateFormat;
     #_disabled;
     #_maxDate;
     #_minDate;
     #_startAtDate;
     #_startingDay;
+    #_strict;
     #_value;
-    #_yearRequired;
     #changeDetector;
     #configService;
     #elementRef;
-    #fuzzyDateService;
+    #localeProvider;
     #renderer;
     #datepickerComponent;
     #datepickerHostSvc;
-    constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, datepickerComponent) {
+    constructor(changeDetector, configService, elementRef, localeProvider, renderer, datepickerComponent) {
         /**
-         * Whether to disable date validation on the fuzzy datepicker input.
+         * Whether to disable date validation on the datepicker input.
          * @default false
          */
         this.skyDatepickerNoValidate = false;
         this.#dateFormatter = new SkyDateFormatter();
         this.#ngUnsubscribe = new Subject();
-        this.#_futureDisabled = false;
         this.#_disabled = false;
-        this.#_yearRequired = false;
+        this.#_strict = false;
         this.#datepickerHostSvc = inject(SkyDatepickerHostService, {
             optional: true,
         });
@@ -2455,24 +2471,23 @@ class SkyFuzzyDatepickerInputDirective {
         // istanbul ignore next
         this.#onValidatorChange = () => { };
         if (!datepickerComponent) {
-            throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
+            throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
                 '`<sky-datepicker>` component!');
         }
         this.#changeDetector = changeDetector;
         this.#configService = configService;
         this.#elementRef = elementRef;
-        this.#fuzzyDateService = fuzzyDateService;
+        this.#localeProvider = localeProvider;
         this.#renderer = renderer;
         this.#datepickerComponent = datepickerComponent;
-        this.#locale = localeProvider.defaultLocale;
-        localeProvider
+        this.#localeProvider
             .getLocaleInfo()
             .pipe(takeUntil(this.#ngUnsubscribe))
             .subscribe((localeInfo) => {
-            this.#locale = localeInfo.locale;
-            SkyDateFormatter.setLocale(this.#locale);
+            SkyDateFormatter.setLocale(localeInfo.locale);
             this.#preferredShortDateFormat =
                 SkyDateFormatter.getPreferredShortDateFormat();
+            this.#applyDateFormat();
         });
         this.#datepickerHostSvc?.focusout
             .pipe(takeUntilDestroyed())
@@ -2484,17 +2499,14 @@ class SkyFuzzyDatepickerInputDirective {
         });
     }
     ngOnInit() {
-        if (this.yearRequired) {
-            if (this.dateFormat?.toLowerCase().indexOf('y') === -1) {
-                throw new Error('You have configured conflicting settings. Year is required and dateFormat does not include year.');
-            }
-        }
         const element = this.#elementRef.nativeElement;
         this.#renderer.addClass(element, 'sky-form-control');
     }
     ngAfterContentInit() {
+        this.#datepickerComponent.dateFormat = this.dateFormat;
         this.#datepickerComponent.dateChange
-            .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
+            .pipe(distinctUntilChanged())
+            .pipe(takeUntil(this.#ngUnsubscribe))
             .subscribe((value) => {
             this.#value = value;
         });
@@ -2520,13 +2532,23 @@ class SkyFuzzyDatepickerInputDirective {
         this.#ngUnsubscribe.complete();
     }
     onInputChange(event) {
-        this.#onValueChange(event.target.value);
-    }
-    onInputBlur() {
-        const formattedDate = this.#fuzzyDateService.format(this.#value, this.dateFormat, this.#locale);
-        if (this.#control?.valid) {
-            this.#setInputElementValue(formattedDate);
+        const value = event.target.value;
+        if (this.skyDatepickerNoValidate) {
+            this.#onValueChange(value);
+            return;
+        }
+        // Don't try to parse the string value into a Date value if it is malformed.
+        if (this.#isDateStringValid(value)) {
+            this.#onValueChange(value);
+            return;
         }
+        this.#_value = value;
+        this.#onChange(value);
+        this.#control?.setErrors({
+            skyDate: {
+                invalid: value,
+            },
+        });
     }
     onInput() {
         this.#control?.markAsDirty();
@@ -2537,79 +2559,64 @@ class SkyFuzzyDatepickerInputDirective {
     validate(control) {
         if (!this.#control) {
             this.#control = control;
+            // Account for any date conversion that may have occurred prior to validation.
+            if (this.#control.value !== this.#value) {
+                this.#control.patchValue(this.#value, { emitEvent: false });
+            }
         }
         if (this.skyDatepickerNoValidate) {
             return null;
         }
-        if (!this.#control.value) {
-            return null;
-        }
         const value = control.value;
-        let fuzzyDate;
-        let validationError = null;
-        if (typeof value === 'string') {
-            fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
-        }
-        else {
-            fuzzyDate = value;
-        }
-        if (!fuzzyDate) {
-            validationError = {
-                skyFuzzyDate: {
-                    invalid: value,
-                },
-            };
+        if (!value) {
+            return null;
         }
-        else {
-            if (!fuzzyDate.year && this.yearRequired) {
-                validationError = {
-                    skyFuzzyDate: {
-                        yearRequired: value,
+        if (value instanceof Date) {
+            const isDateValid = this.#dateFormatter.dateIsValid(value);
+            if (!isDateValid) {
+                // Mark the invalid control as touched so that the input's invalid CSS styles appear.
+                // (This is only required when the invalid value is set by the FormControl constructor.)
+                this.#control.markAsTouched();
+                return {
+                    skyDate: {
+                        invalid: value,
                     },
                 };
             }
-            if (!validationError && fuzzyDate.year) {
-                let fuzzyDateRange;
-                if (this.maxDate) {
-                    fuzzyDateRange = this.#fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.maxDate);
-                    if (!fuzzyDateRange.valid) {
-                        validationError = {
-                            skyFuzzyDate: {
-                                maxDate: value,
-                                maxDateFormatted: this.#dateFormatter.format(fuzzyDateRange.endDate, this.dateFormat),
-                            },
-                        };
-                    }
-                }
-                if (!validationError && this.minDate) {
-                    fuzzyDateRange = this.#fuzzyDateService.getFuzzyDateRange(this.minDate, fuzzyDate);
-                    if (!fuzzyDateRange.valid) {
-                        validationError = {
-                            skyFuzzyDate: {
-                                minDate: value,
-                                minDateFormatted: this.#dateFormatter.format(fuzzyDateRange.startDate, this.dateFormat),
-                            },
-                        };
-                    }
-                }
-                if (!validationError && this.futureDisabled) {
-                    fuzzyDateRange = this.#fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.#fuzzyDateService.getCurrentFuzzyDate());
-                    if (!fuzzyDateRange.valid) {
-                        validationError = {
-                            skyFuzzyDate: {
-                                futureDisabled: value,
-                            },
-                        };
-                    }
-                }
+            const minDate = this.minDate;
+            if (minDate &&
+                this.#dateFormatter.dateIsValid(minDate) &&
+                value < minDate) {
+                return {
+                    skyDate: {
+                        minDate,
+                        minDateFormatted: this.#dateFormatter.format(minDate, this.dateFormat),
+                    },
+                };
+            }
+            const maxDate = this.maxDate;
+            if (maxDate &&
+                this.#dateFormatter.dateIsValid(maxDate) &&
+                value > maxDate) {
+                return {
+                    skyDate: {
+                        maxDate,
+                        maxDateFormatted: this.#dateFormatter.format(maxDate, this.dateFormat),
+                    },
+                };
             }
         }
-        if (validationError) {
+        else {
             // Mark the invalid control as touched so that the input's invalid CSS styles appear.
             // (This is only required when the invalid value is set by the FormControl constructor.)
             this.#control.markAsTouched();
+            return {
+                skyDate: {
+                    invalid: value,
+                },
+            };
         }
-        return validationError;
+        return null;
     }
     registerOnChange(fn) {
         this.#onChange = fn;
@@ -2636,49 +2643,85 @@ class SkyFuzzyDatepickerInputDirective {
             this.#notifyTouched?.();
         }
     }
+    #applyDateFormat() {
+        this.#datepickerComponent.dateFormat = this.dateFormat;
+        if (this.#value) {
+            const formattedDate = this.#dateFormatter.format(this.#value, this.dateFormat);
+            this.#setInputElementValue(formattedDate);
+            this.#changeDetector.markForCheck();
+        }
+    }
     #onValueChange(newValue) {
         this.#value = newValue;
     }
     #setInputElementValue(value) {
         this.#renderer.setProperty(this.#elementRef.nativeElement, 'value', value);
     }
-    #getMaxDate() {
-        if (this.maxDate) {
-            const maxDate = this.#fuzzyDateService.getMomentFromFuzzyDate(this.maxDate);
-            if (maxDate.isValid()) {
-                return maxDate.toDate();
-            }
+    /**
+     * Gets the date value from a value - if possible.
+     * Will not convert unconvertible dates or numbers outside of the current month's number of days.
+     * Returns `undefined` if the value can not be converted.
+     */
+    #getDateValue(value) {
+        if (value instanceof Date) {
+            return value;
         }
-        else if (this.futureDisabled) {
-            return new Date();
+        else if (typeof value === 'string') {
+            return this.#getShortcutOrDateValue(value);
         }
-        return this.#configService.maxDate;
+        return undefined;
     }
-    #getMinDate() {
-        if (this.minDate) {
-            const minDate = this.#fuzzyDateService.getMomentFromFuzzyDate(this.minDate);
-            if (minDate.isValid()) {
-                return minDate.toDate();
+    /**
+     * Converts a string to a date object if the string is a valid date string.
+     * It will also convert numeric input to a date if that number is within the current month's number of days.
+     * If the string can not be converted, `undefined` be returned.
+     */
+    #getShortcutOrDateValue(value) {
+        const num = Number(value);
+        if (Number.isInteger(num)) {
+            // We require 8 digits in order to know that we have all information needed to determine what part of the number is the month (2), day (2), and year (4).
+            if (value.length === 8) {
+                const regex = new RegExp(/\b(MM)\b|\b(DD)\b|\b(YY)\b|\b(YYYY)\b/, 'g');
+                const formatTokensOnly = this.dateFormat
+                    ?.match(regex)
+                    ?.join('')
+                    .replace(new RegExp(/Y+/), 'YYYY');
+                if (formatTokensOnly && formatTokensOnly.length === 8) {
+                    const date = this.#dateFormatter.getDateFromString(value, formatTokensOnly, true);
+                    if (this.#dateFormatter.dateIsValid(date)) {
+                        return date;
+                    }
+                }
+            }
+            const now = new Date();
+            const shortcutDate = new Date(now.getFullYear(), now.getMonth(), num);
+            const daysInMonth = shortcutDate.getDate();
+            if (num > 0 && num <= daysInMonth) {
+                return shortcutDate;
             }
         }
-        return this.#configService.minDate;
-    }
-    #getStartAtDate() {
-        if (this.startAtDate) {
-            const startAtDate = this.#fuzzyDateService.getMomentFromFuzzyDate(this.startAtDate);
-            if (startAtDate.isValid()) {
-                return startAtDate.toDate();
+        else {
+            const date = this.#dateFormatter.getDateFromString(value, this.dateFormat, this.strict);
+            if (this.#dateFormatter.dateIsValid(date)) {
+                return date;
             }
         }
-        return this.#configService.startAtDate;
+        return undefined;
     }
-    /* istanbul ignore next */
-    #fuzzyDatesEqual(dateA, dateB) {
-        return (dateA !== undefined &&
-            dateB !== undefined &&
-            ((!dateA.day && !dateB.day) || dateA.day === dateB.day) &&
-            ((!dateA.month && !dateB.month) || dateA.month === dateB.month) &&
-            ((!dateA.year && !dateB.year) || dateA.year === dateB.year));
+    /**
+     * Validates the input value to ensure it is formatted correctly.
+     */
+    #isDateStringValid(value) {
+        if (!value || typeof value !== 'string') {
+            return true;
+        }
+        // Does the value only include digits, dashes, or slashes?
+        const regexp = /^[\d/-]+$/;
+        const isValid = regexp.test(value);
+        if (isValid) {
+            return true;
+        }
+        return moment(value).isValid();
     }
     // istanbul ignore next
     #onChange;
@@ -2690,124 +2733,112 @@ class SkyFuzzyDatepickerInputDirective {
      * In these cases we do not want to fire `onChange` as it will cause extra `valueChange` and `statusChange` events and the status of the form should not be affected by these changes.
      */
     #updateValue(value, emitEvent = true) {
-        if (this.#_value === value ||
-            (this.#_value === undefined && value === null)) {
+        if (this.#_value === value) {
             return;
         }
-        let fuzzyDate;
-        let fuzzyMoment;
-        let dateValue;
-        let formattedDate;
-        if (value instanceof Date) {
-            dateValue = value;
-            formattedDate = this.#dateFormatter.format(value, this.dateFormat);
-            fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromSelectedDate(value, this.dateFormat);
-        }
-        else if (typeof value === 'string') {
-            fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
-            if (fuzzyDate) {
-                formattedDate = this.#fuzzyDateService.format(fuzzyDate, this.dateFormat, this.#locale);
-            }
-            if (!formattedDate) {
-                formattedDate = value;
+        const isValidDateString = this.#isDateStringValid(value);
+        // If the string value supplied is malformed, do not set the value to its Date equivalent.
+        // (JavaScript's Date parser will convert poorly formatted dates to Date objects, such as "abc 123", which isn't ideal.)
+        if (!isValidDateString) {
+            this.#_value = value;
+            if (emitEvent) {
+                this.#onChange(this.#_value);
             }
-            fuzzyMoment = this.#fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
-            if (fuzzyMoment) {
-                dateValue = fuzzyMoment.toDate();
+            else {
+                this.#control?.setValue(this.#_value, { emitEvent: false });
             }
+            this.#datepickerComponent.selectedDate = this.#_value;
+            this.#setInputElementValue(value);
         }
         else {
-            fuzzyDate = value;
-            formattedDate = this.#fuzzyDateService.format(fuzzyDate, this.dateFormat, this.#locale);
-            fuzzyMoment = this.#fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
-            if (fuzzyMoment) {
-                dateValue = fuzzyMoment.toDate();
+            // This value represents the date value for the input if possible.
+            // This value will take into account all shortcut functionality.
+            const dateValue = this.#getDateValue(value);
+            const areDatesEqual = this.#_value instanceof Date &&
+                dateValue &&
+                dateValue.getTime() === this.#_value.getTime();
+            if (dateValue !== this.#_value || !areDatesEqual) {
+                this.#_value = dateValue || value;
+                if (emitEvent) {
+                    this.#onChange(this.#_value);
+                }
+                else {
+                    this.#control?.setValue(this.#_value, { emitEvent: false });
+                }
+                this.#datepickerComponent.selectedDate = this.#_value;
             }
-        }
-        const areFuzzyDatesEqual = this.#fuzzyDatesEqual(this.#_value, fuzzyDate);
-        const isNewValue = fuzzyDate !== this.#_value || !areFuzzyDatesEqual;
-        this.#_value = fuzzyDate || value;
-        if (isNewValue) {
-            if (emitEvent) {
-                this.#onChange(this.#_value);
+            if (dateValue) {
+                const formattedDateString = this.#dateFormatter.format(dateValue, this.dateFormat);
+                this.#setInputElementValue(formattedDateString);
             }
             else {
-                this.#control?.setValue(this.#_value, { emitEvent: false });
+                this.#setInputElementValue(value || '');
             }
-            this.#datepickerComponent.selectedDate = dateValue;
         }
-        this.#setInputElementValue(formattedDate || '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i1.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "focusout": "onFocusout($event)", "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()" } }, providers: [
-            SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
-            SKY_FUZZY_DATEPICKER_VALIDATOR,
-        ], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i1.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SkyDatepickerInputDirective, isStandalone: true, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "focusout": "onFocusout($event)", "change": "onInputChange($event)", "input": "onInput()" } }, providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[skyFuzzyDatepickerInput]',
-                    providers: [
-                        SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
-                        SKY_FUZZY_DATEPICKER_VALIDATOR,
-                    ],
                     host: {
                         '(focusout)': 'onFocusout($event)',
                     },
+                    providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR],
+                    selector: '[skyDatepickerInput]',
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i1.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i1.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { dateFormat: [{
                 type: Input
             }], disabled: [{
                 type: Input
-            }], futureDisabled: [{
-                type: Input
             }], maxDate: [{
                 type: Input
             }], minDate: [{
                 type: Input
             }], startAtDate: [{
                 type: Input
+            }], skyDatepickerInput: [{
+                type: Input
             }], skyDatepickerNoValidate: [{
                 type: Input
             }], startingDay: [{
                 type: Input
-            }], yearRequired: [{
+            }], strict: [{
                 type: Input
             }], onInputChange: [{
                 type: HostListener,
                 args: ['change', ['$event']]
-            }], onInputBlur: [{
-                type: HostListener,
-                args: ['blur']
             }], onInput: [{
                 type: HostListener,
                 args: ['input']
             }] } });
 
-const SKY_DATEPICKER_VALUE_ACCESSOR = {
+const SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SkyDatepickerInputDirective),
+    useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
     multi: true,
 };
-const SKY_DATEPICKER_VALIDATOR = {
+const SKY_FUZZY_DATEPICKER_VALIDATOR = {
     provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => SkyDatepickerInputDirective),
+    useExisting: forwardRef(() => SkyFuzzyDatepickerInputDirective),
     multi: true,
 };
-class SkyDatepickerInputDirective {
+class SkyFuzzyDatepickerInputDirective {
     /**
      * The date format for the input. Place this attribute on the `input` element
-     * to override the default in the `SkyDatepickerConfigService`.
+     * to override the default in `SkyDatepickerConfigService`.
      * @default "MM/DD/YYYY"
      */
     set dateFormat(value) {
-        /* istanbul ignore else */
-        if (value !== this.#_dateFormat) {
-            this.#_dateFormat = value;
-            this.#applyDateFormat();
+        this.#_dateFormat = value;
+        if (this.#value) {
+            const formattedDate = this.#fuzzyDateService.format(this.#value, this.dateFormat, this.#locale);
+            this.#setInputElementValue(formattedDate);
+            this.#changeDetector.markForCheck();
         }
     }
     // TODO: Refactor to not have getter logic
@@ -2822,7 +2853,7 @@ class SkyDatepickerInputDirective {
      * @default false
      */
     set disabled(value) {
-        this.#_disabled = value || false;
+        this.#_disabled = value;
         this.#datepickerComponent.disabled = value;
         this.#renderer.setProperty(this.#elementRef.nativeElement, 'disabled', value);
     }
@@ -2830,57 +2861,59 @@ class SkyDatepickerInputDirective {
         return this.#_disabled;
     }
     /**
-     * The latest date that is available in the calendar. Place this attribute on
-     * the `input` element to override the default in `SkyDatepickerConfigService`.
+     * Whether to prevent users from specifying dates that are in the future.
+     * Place this attribute on the `input` element.
+     * @default false
+     */
+    set futureDisabled(value) {
+        this.#_futureDisabled = value;
+        this.#datepickerComponent.maxDate = this.#getMaxDate();
+        this.#onValidatorChange();
+    }
+    get futureDisabled() {
+        return this.#_futureDisabled;
+    }
+    /**
+     * The latest fuzzy date allowed. Place this attribute on the `input` element
+     * to prevent fuzzy dates after a specified date. This property accepts
+     * a `SkyFuzzyDate` value that includes numeric month, day, and year values.
+     * For example: `{ month: 1, day: 1, year: 2027 }`.
      */
     set maxDate(value) {
         this.#_maxDate = value;
-        this.#datepickerComponent.maxDate = this.maxDate;
+        this.#datepickerComponent.maxDate = this.#getMaxDate();
         this.#onValidatorChange();
     }
-    // TODO: Refactor to not have getter logic
     get maxDate() {
-        return this.#_maxDate || this.#configService.maxDate;
+        return this.#_maxDate;
     }
     /**
-     * The earliest date that is available in the calendar. Place this attribute on
-     * the `input` element to override the default in `SkyDatepickerConfigService`. To avoid validation errors, the time associated with the minimum date must be midnight. This is necessary because the datepicker automatically sets the time on the `Date` object for selected dates to midnight in the current user's time zone.
+     * The earliest fuzzy date allowed. Place this attribute on the `input` element
+     * to prevent fuzzy dates before a specified date. This property accepts a `SkyFuzzyDate` value
+     * that includes numeric month, day, and year values.
+     * For example: `{ month: 1, day: 1, year: 2007 }`.
      */
     set minDate(value) {
         this.#_minDate = value;
-        this.#datepickerComponent.minDate = this.minDate;
+        this.#datepickerComponent.minDate = this.#getMinDate();
         this.#onValidatorChange();
     }
-    // TODO: Refactor to not have getter logic
     get minDate() {
-        return this.#_minDate || this.#configService.minDate;
+        return this.#_minDate;
     }
     /**
-     * The date to open the calendar to initially. Place this attribute on the `input` element to override the default in `SkyDatepickerConfigService`.
+     * The fuzzy date to open the calendar to initially.
+     * This property accepts a `SkyFuzzyDate` value that includes numeric month, day, and year values.
+     * For example: `{ month: 1, day: 1, year: 2007 }`.
      * @default The current date
      */
     set startAtDate(value) {
         this.#_startAtDate = value;
-        this.#datepickerComponent.startAtDate = this.startAtDate;
+        this.#datepickerComponent.startAtDate = this.#getStartAtDate();
     }
     // TODO: Refactor to not have getter logic
     get startAtDate() {
-        return this.#_startAtDate || this.#configService.startAtDate;
-    }
-    /**
-     * Creates the datepicker input and calendar. Place this directive on an `input` element,
-     * and wrap the input in a `sky-datepicker` component. The value that users select is driven
-     * through the `ngModel` attribute specified on the `input` element.
-     * @required
-     */
-    set skyDatepickerInput(value) {
-        if (value) {
-            console.warn('[Deprecation warning] You no longer need to provide a template reference variable ' +
-                'to the `skyDatepickerInput` attribute (this will be a breaking change in the next ' +
-                'major version release).\n' +
-                'Do this instead:\n' +
-                '<sky-datepicker>\n  <input skyDatepickerInput />\n</sky-datepicker>');
-        }
+        return this.#_startAtDate;
     }
     /**
      * The starting day of the week in the calendar, where `0` sets the starting day
@@ -2898,18 +2931,15 @@ class SkyDatepickerInputDirective {
         return this.#_startingDay || this.#configService.startingDay;
     }
     /**
-     * Whether the format of the date value must match the format from the `dateFormat` value.
-     * If this property is `true` and the datepicker input directive cannot find an exact match, then
-     * the input is marked as invalid.
-     * If this property is `false` and the datepicker input directive cannot find an exact match, then
-     * it attempts to format the string based on the [ISO 8601 standard format](https://www.iso.org/iso-8601-date-and-time-format.html).
+     * Whether to require the year in fuzzy dates.
      * @default false
      */
-    set strict(value) {
-        this.#_strict = value || false;
+    set yearRequired(value) {
+        this.#_yearRequired = value;
+        this.#onValidatorChange();
     }
-    get strict() {
-        return this.#_strict;
+    get yearRequired() {
+        return this.#_yearRequired;
     }
     get #value() {
         return this.#_value;
@@ -2919,34 +2949,37 @@ class SkyDatepickerInputDirective {
     }
     #control;
     #dateFormatter;
+    #locale;
     #preferredShortDateFormat;
     #ngUnsubscribe;
     #notifyTouched;
+    #_futureDisabled;
     #_dateFormat;
     #_disabled;
     #_maxDate;
     #_minDate;
     #_startAtDate;
     #_startingDay;
-    #_strict;
     #_value;
+    #_yearRequired;
     #changeDetector;
     #configService;
     #elementRef;
-    #localeProvider;
+    #fuzzyDateService;
     #renderer;
     #datepickerComponent;
     #datepickerHostSvc;
-    constructor(changeDetector, configService, elementRef, localeProvider, renderer, datepickerComponent) {
+    constructor(changeDetector, configService, elementRef, fuzzyDateService, localeProvider, renderer, datepickerComponent) {
         /**
-         * Whether to disable date validation on the datepicker input.
+         * Whether to disable date validation on the fuzzy datepicker input.
          * @default false
          */
         this.skyDatepickerNoValidate = false;
         this.#dateFormatter = new SkyDateFormatter();
         this.#ngUnsubscribe = new Subject();
+        this.#_futureDisabled = false;
         this.#_disabled = false;
-        this.#_strict = false;
+        this.#_yearRequired = false;
         this.#datepickerHostSvc = inject(SkyDatepickerHostService, {
             optional: true,
         });
@@ -2955,23 +2988,24 @@ class SkyDatepickerInputDirective {
         // istanbul ignore next
         this.#onValidatorChange = () => { };
         if (!datepickerComponent) {
-            throw new Error('You must wrap the `skyDatepickerInput` directive within a ' +
+            throw new Error('You must wrap the `skyFuzzyDatepickerInput` directive within a ' +
                 '`<sky-datepicker>` component!');
         }
         this.#changeDetector = changeDetector;
         this.#configService = configService;
         this.#elementRef = elementRef;
-        this.#localeProvider = localeProvider;
+        this.#fuzzyDateService = fuzzyDateService;
         this.#renderer = renderer;
         this.#datepickerComponent = datepickerComponent;
-        this.#localeProvider
+        this.#locale = localeProvider.defaultLocale;
+        localeProvider
             .getLocaleInfo()
             .pipe(takeUntil(this.#ngUnsubscribe))
             .subscribe((localeInfo) => {
-            SkyDateFormatter.setLocale(localeInfo.locale);
+            this.#locale = localeInfo.locale;
+            SkyDateFormatter.setLocale(this.#locale);
             this.#preferredShortDateFormat =
                 SkyDateFormatter.getPreferredShortDateFormat();
-            this.#applyDateFormat();
         });
         this.#datepickerHostSvc?.focusout
             .pipe(takeUntilDestroyed())
@@ -2983,14 +3017,17 @@ class SkyDatepickerInputDirective {
         });
     }
     ngOnInit() {
+        if (this.yearRequired) {
+            if (this.dateFormat?.toLowerCase().indexOf('y') === -1) {
+                throw new Error('You have configured conflicting settings. Year is required and dateFormat does not include year.');
+            }
+        }
         const element = this.#elementRef.nativeElement;
         this.#renderer.addClass(element, 'sky-form-control');
     }
     ngAfterContentInit() {
-        this.#datepickerComponent.dateFormat = this.dateFormat;
         this.#datepickerComponent.dateChange
-            .pipe(distinctUntilChanged())
-            .pipe(takeUntil(this.#ngUnsubscribe))
+            .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
             .subscribe((value) => {
             this.#value = value;
         });
@@ -3016,23 +3053,13 @@ class SkyDatepickerInputDirective {
         this.#ngUnsubscribe.complete();
     }
     onInputChange(event) {
-        const value = event.target.value;
-        if (this.skyDatepickerNoValidate) {
-            this.#onValueChange(value);
-            return;
-        }
-        // Don't try to parse the string value into a Date value if it is malformed.
-        if (this.#isDateStringValid(value)) {
-            this.#onValueChange(value);
-            return;
+        this.#onValueChange(event.target.value);
+    }
+    onInputBlur() {
+        const formattedDate = this.#fuzzyDateService.format(this.#value, this.dateFormat, this.#locale);
+        if (this.#control?.valid) {
+            this.#setInputElementValue(formattedDate);
         }
-        this.#_value = value;
-        this.#onChange(value);
-        this.#control?.setErrors({
-            skyDate: {
-                invalid: value,
-            },
-        });
     }
     onInput() {
         this.#control?.markAsDirty();
@@ -3043,64 +3070,79 @@ class SkyDatepickerInputDirective {
     validate(control) {
         if (!this.#control) {
             this.#control = control;
-            // Account for any date conversion that may have occurred prior to validation.
-            if (this.#control.value !== this.#value) {
-                this.#control.patchValue(this.#value, { emitEvent: false });
-            }
         }
         if (this.skyDatepickerNoValidate) {
             return null;
         }
-        const value = control.value;
-        if (!value) {
+        if (!this.#control.value) {
             return null;
         }
-        if (value instanceof Date) {
-            const isDateValid = this.#dateFormatter.dateIsValid(value);
-            if (!isDateValid) {
-                // Mark the invalid control as touched so that the input's invalid CSS styles appear.
-                // (This is only required when the invalid value is set by the FormControl constructor.)
-                this.#control.markAsTouched();
-                return {
-                    skyDate: {
-                        invalid: value,
-                    },
-                };
-            }
-            const minDate = this.minDate;
-            if (minDate &&
-                this.#dateFormatter.dateIsValid(minDate) &&
-                value < minDate) {
-                return {
-                    skyDate: {
-                        minDate,
-                        minDateFormatted: this.#dateFormatter.format(minDate, this.dateFormat),
+        const value = control.value;
+        let fuzzyDate;
+        let validationError = null;
+        if (typeof value === 'string') {
+            fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
+        }
+        else {
+            fuzzyDate = value;
+        }
+        if (!fuzzyDate) {
+            validationError = {
+                skyFuzzyDate: {
+                    invalid: value,
+                },
+            };
+        }
+        else {
+            if (!fuzzyDate.year && this.yearRequired) {
+                validationError = {
+                    skyFuzzyDate: {
+                        yearRequired: value,
                     },
                 };
             }
-            const maxDate = this.maxDate;
-            if (maxDate &&
-                this.#dateFormatter.dateIsValid(maxDate) &&
-                value > maxDate) {
-                return {
-                    skyDate: {
-                        maxDate,
-                        maxDateFormatted: this.#dateFormatter.format(maxDate, this.dateFormat),
-                    },
-                };
+            if (!validationError && fuzzyDate.year) {
+                let fuzzyDateRange;
+                if (this.maxDate) {
+                    fuzzyDateRange = this.#fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.maxDate);
+                    if (!fuzzyDateRange.valid) {
+                        validationError = {
+                            skyFuzzyDate: {
+                                maxDate: value,
+                                maxDateFormatted: this.#dateFormatter.format(fuzzyDateRange.endDate, this.dateFormat),
+                            },
+                        };
+                    }
+                }
+                if (!validationError && this.minDate) {
+                    fuzzyDateRange = this.#fuzzyDateService.getFuzzyDateRange(this.minDate, fuzzyDate);
+                    if (!fuzzyDateRange.valid) {
+                        validationError = {
+                            skyFuzzyDate: {
+                                minDate: value,
+                                minDateFormatted: this.#dateFormatter.format(fuzzyDateRange.startDate, this.dateFormat),
+                            },
+                        };
+                    }
+                }
+                if (!validationError && this.futureDisabled) {
+                    fuzzyDateRange = this.#fuzzyDateService.getFuzzyDateRange(fuzzyDate, this.#fuzzyDateService.getCurrentFuzzyDate());
+                    if (!fuzzyDateRange.valid) {
+                        validationError = {
+                            skyFuzzyDate: {
+                                futureDisabled: value,
+                            },
+                        };
+                    }
+                }
             }
         }
-        else {
+        if (validationError) {
             // Mark the invalid control as touched so that the input's invalid CSS styles appear.
             // (This is only required when the invalid value is set by the FormControl constructor.)
             this.#control.markAsTouched();
-            return {
-                skyDate: {
-                    invalid: value,
-                },
-            };
         }
-        return null;
+        return validationError;
     }
     registerOnChange(fn) {
         this.#onChange = fn;
@@ -3127,85 +3169,49 @@ class SkyDatepickerInputDirective {
             this.#notifyTouched?.();
         }
     }
-    #applyDateFormat() {
-        this.#datepickerComponent.dateFormat = this.dateFormat;
-        if (this.#value) {
-            const formattedDate = this.#dateFormatter.format(this.#value, this.dateFormat);
-            this.#setInputElementValue(formattedDate);
-            this.#changeDetector.markForCheck();
-        }
-    }
     #onValueChange(newValue) {
         this.#value = newValue;
     }
     #setInputElementValue(value) {
         this.#renderer.setProperty(this.#elementRef.nativeElement, 'value', value);
     }
-    /**
-     * Gets the date value from a value - if possible.
-     * Will not convert unconvertible dates or numbers outside of the current month's number of days.
-     * Returns `undefined` if the value can not be converted.
-     */
-    #getDateValue(value) {
-        if (value instanceof Date) {
-            return value;
+    #getMaxDate() {
+        if (this.maxDate) {
+            const maxDate = this.#fuzzyDateService.getMomentFromFuzzyDate(this.maxDate);
+            if (maxDate.isValid()) {
+                return maxDate.toDate();
+            }
         }
-        else if (typeof value === 'string') {
-            return this.#getShortcutOrDateValue(value);
+        else if (this.futureDisabled) {
+            return new Date();
         }
-        return undefined;
+        return this.#configService.maxDate;
     }
-    /**
-     * Converts a string to a date object if the string is a valid date string.
-     * It will also convert numeric input to a date if that number is within the current month's number of days.
-     * If the string can not be converted, `undefined` be returned.
-     */
-    #getShortcutOrDateValue(value) {
-        const num = Number(value);
-        if (Number.isInteger(num)) {
-            // We require 8 digits in order to know that we have all information needed to determine what part of the number is the month (2), day (2), and year (4).
-            if (value.length === 8) {
-                const regex = new RegExp(/\b(MM)\b|\b(DD)\b|\b(YY)\b|\b(YYYY)\b/, 'g');
-                const formatTokensOnly = this.dateFormat
-                    ?.match(regex)
-                    ?.join('')
-                    .replace(new RegExp(/Y+/), 'YYYY');
-                if (formatTokensOnly && formatTokensOnly.length === 8) {
-                    const date = this.#dateFormatter.getDateFromString(value, formatTokensOnly, true);
-                    if (this.#dateFormatter.dateIsValid(date)) {
-                        return date;
-                    }
-                }
-            }
-            const now = new Date();
-            const shortcutDate = new Date(now.getFullYear(), now.getMonth(), num);
-            const daysInMonth = shortcutDate.getDate();
-            if (num > 0 && num <= daysInMonth) {
-                return shortcutDate;
+    #getMinDate() {
+        if (this.minDate) {
+            const minDate = this.#fuzzyDateService.getMomentFromFuzzyDate(this.minDate);
+            if (minDate.isValid()) {
+                return minDate.toDate();
             }
         }
-        else {
-            const date = this.#dateFormatter.getDateFromString(value, this.dateFormat, this.strict);
-            if (this.#dateFormatter.dateIsValid(date)) {
-                return date;
+        return this.#configService.minDate;
+    }
+    #getStartAtDate() {
+        if (this.startAtDate) {
+            const startAtDate = this.#fuzzyDateService.getMomentFromFuzzyDate(this.startAtDate);
+            if (startAtDate.isValid()) {
+                return startAtDate.toDate();
             }
         }
-        return undefined;
+        return this.#configService.startAtDate;
     }
-    /**
-     * Validates the input value to ensure it is formatted correctly.
-     */
-    #isDateStringValid(value) {
-        if (!value || typeof value !== 'string') {
-            return true;
-        }
-        // Does the value only include digits, dashes, or slashes?
-        const regexp = /^[\d/-]+$/;
-        const isValid = regexp.test(value);
-        if (isValid) {
-            return true;
-        }
-        return moment(value).isValid();
+    /* istanbul ignore next */
+    #fuzzyDatesEqual(dateA, dateB) {
+        return (dateA !== undefined &&
+            dateB !== undefined &&
+            ((!dateA.day && !dateB.day) || dateA.day === dateB.day) &&
+            ((!dateA.month && !dateB.month) || dateA.month === dateB.month) &&
+            ((!dateA.year && !dateB.year) || dateA.year === dateB.year));
     }
     // istanbul ignore next
     #onChange;
@@ -3217,152 +3223,142 @@ class SkyDatepickerInputDirective {
      * In these cases we do not want to fire `onChange` as it will cause extra `valueChange` and `statusChange` events and the status of the form should not be affected by these changes.
      */
     #updateValue(value, emitEvent = true) {
-        if (this.#_value === value) {
+        if (this.#_value === value ||
+            (this.#_value === undefined && value === null)) {
             return;
         }
-        const isValidDateString = this.#isDateStringValid(value);
-        // If the string value supplied is malformed, do not set the value to its Date equivalent.
-        // (JavaScript's Date parser will convert poorly formatted dates to Date objects, such as "abc 123", which isn't ideal.)
-        if (!isValidDateString) {
-            this.#_value = value;
-            if (emitEvent) {
-                this.#onChange(this.#_value);
+        let fuzzyDate;
+        let fuzzyMoment;
+        let dateValue;
+        let formattedDate;
+        if (value instanceof Date) {
+            dateValue = value;
+            formattedDate = this.#dateFormatter.format(value, this.dateFormat);
+            fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromSelectedDate(value, this.dateFormat);
+        }
+        else if (typeof value === 'string') {
+            fuzzyDate = this.#fuzzyDateService.getFuzzyDateFromString(value, this.dateFormat);
+            if (fuzzyDate) {
+                formattedDate = this.#fuzzyDateService.format(fuzzyDate, this.dateFormat, this.#locale);
             }
-            else {
-                this.#control?.setValue(this.#_value, { emitEvent: false });
+            if (!formattedDate) {
+                formattedDate = value;
+            }
+            fuzzyMoment = this.#fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
+            if (fuzzyMoment) {
+                dateValue = fuzzyMoment.toDate();
             }
-            this.#datepickerComponent.selectedDate = this.#_value;
-            this.#setInputElementValue(value);
         }
         else {
-            // This value represents the date value for the input if possible.
-            // This value will take into account all shortcut functionality.
-            const dateValue = this.#getDateValue(value);
-            const areDatesEqual = this.#_value instanceof Date &&
-                dateValue &&
-                dateValue.getTime() === this.#_value.getTime();
-            if (dateValue !== this.#_value || !areDatesEqual) {
-                this.#_value = dateValue || value;
-                if (emitEvent) {
-                    this.#onChange(this.#_value);
-                }
-                else {
-                    this.#control?.setValue(this.#_value, { emitEvent: false });
-                }
-                this.#datepickerComponent.selectedDate = this.#_value;
+            fuzzyDate = value;
+            formattedDate = this.#fuzzyDateService.format(fuzzyDate, this.dateFormat, this.#locale);
+            fuzzyMoment = this.#fuzzyDateService.getMomentFromFuzzyDate(fuzzyDate);
+            if (fuzzyMoment) {
+                dateValue = fuzzyMoment.toDate();
             }
-            if (dateValue) {
-                const formattedDateString = this.#dateFormatter.format(dateValue, this.dateFormat);
-                this.#setInputElementValue(formattedDateString);
+        }
+        const areFuzzyDatesEqual = this.#fuzzyDatesEqual(this.#_value, fuzzyDate);
+        const isNewValue = fuzzyDate !== this.#_value || !areFuzzyDatesEqual;
+        this.#_value = fuzzyDate || value;
+        if (isNewValue) {
+            if (emitEvent) {
+                this.#onChange(this.#_value);
             }
             else {
-                this.#setInputElementValue(value || '');
+                this.#control?.setValue(this.#_value, { emitEvent: false });
             }
+            this.#datepickerComponent.selectedDate = dateValue;
         }
+        this.#setInputElementValue(formattedDate || '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i1.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "focusout": "onFocusout($event)", "change": "onInputChange($event)", "input": "onInput()" } }, providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i1.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SkyFuzzyDatepickerInputDirective, isStandalone: true, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "focusout": "onFocusout($event)", "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()" } }, providers: [
+            SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
+            SKY_FUZZY_DATEPICKER_VALIDATOR,
+        ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[skyDatepickerInput]',
-                    providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR],
                     host: {
                         '(focusout)': 'onFocusout($event)',
                     },
+                    providers: [
+                        SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
+                        SKY_FUZZY_DATEPICKER_VALIDATOR,
+                    ],
+                    selector: '[skyFuzzyDatepickerInput]',
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i1.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i1.SkyAppLocaleProvider }, { type: i0.Renderer2 }, { type: SkyDatepickerComponent, decorators: [{
                     type: Optional
                 }] }], propDecorators: { dateFormat: [{
                 type: Input
             }], disabled: [{
                 type: Input
+            }], futureDisabled: [{
+                type: Input
             }], maxDate: [{
                 type: Input
             }], minDate: [{
                 type: Input
             }], startAtDate: [{
                 type: Input
-            }], skyDatepickerInput: [{
-                type: Input
             }], skyDatepickerNoValidate: [{
                 type: Input
             }], startingDay: [{
                 type: Input
-            }], strict: [{
+            }], yearRequired: [{
                 type: Input
             }], onInputChange: [{
                 type: HostListener,
                 args: ['change', ['$event']]
+            }], onInputBlur: [{
+                type: HostListener,
+                args: ['blur']
             }], onInput: [{
                 type: HostListener,
                 args: ['input']
             }] } });
 
 class SkyDatepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerModule, declarations: [SkyDatepickerCalendarComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerModule, imports: [SkyDatepickerCalendarComponent,
             SkyDatepickerCalendarInnerComponent,
-            SkyDayPickerComponent,
-            SkyMonthPickerComponent,
-            SkyYearPickerComponent,
             SkyDatepickerComponent,
             SkyDatepickerInputDirective,
-            SkyFuzzyDatepickerInputDirective,
+            SkyDayPickerButtonComponent,
             SkyDayPickerCellComponent,
-            SkyDayPickerButtonComponent], imports: [A11yModule,
-            CommonModule,
-            FormsModule,
-            SkyIconModule,
-            SkyDatepickerCalendarLabelPipe,
-            SkyDatetimeResourcesModule,
-            SkyAffixModule,
-            SkyThemeModule,
-            SkyPopoverModule,
-            SkyWaitModule,
-            SkyFormErrorModule], exports: [SkyDatepickerCalendarComponent,
+            SkyDayPickerComponent,
+            SkyFuzzyDatepickerInputDirective,
+            SkyMonthPickerComponent,
+            SkyYearPickerComponent], exports: [SkyDatepickerCalendarComponent,
             SkyDatepickerComponent,
             SkyDatepickerInputDirective,
             SkyFuzzyDatepickerInputDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerService], imports: [A11yModule,
-            CommonModule,
-            FormsModule,
-            SkyIconModule,
-            SkyDatetimeResourcesModule,
-            SkyAffixModule,
-            SkyThemeModule,
-            SkyPopoverModule,
-            SkyWaitModule,
-            SkyFormErrorModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerModule, providers: [SkyDatepickerCalendarService], imports: [SkyDatepickerCalendarComponent,
+            SkyDatepickerCalendarInnerComponent,
+            SkyDatepickerComponent,
+            SkyDayPickerButtonComponent,
+            SkyDayPickerCellComponent,
+            SkyDayPickerComponent,
+            SkyMonthPickerComponent,
+            SkyYearPickerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDatepickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
+                    imports: [
                         SkyDatepickerCalendarComponent,
                         SkyDatepickerCalendarInnerComponent,
-                        SkyDayPickerComponent,
-                        SkyMonthPickerComponent,
-                        SkyYearPickerComponent,
                         SkyDatepickerComponent,
                         SkyDatepickerInputDirective,
-                        SkyFuzzyDatepickerInputDirective,
-                        SkyDayPickerCellComponent,
                         SkyDayPickerButtonComponent,
-                    ],
-                    imports: [
-                        A11yModule,
-                        CommonModule,
-                        FormsModule,
-                        SkyIconModule,
-                        SkyDatepickerCalendarLabelPipe,
-                        SkyDatetimeResourcesModule,
-                        SkyAffixModule,
-                        SkyThemeModule,
-                        SkyPopoverModule,
-                        SkyWaitModule,
-                        SkyFormErrorModule,
+                        SkyDayPickerCellComponent,
+                        SkyDayPickerComponent,
+                        SkyFuzzyDatepickerInputDirective,
+                        SkyMonthPickerComponent,
+                        SkyYearPickerComponent,
                     ],
                     exports: [
                         SkyDatepickerCalendarComponent,
@@ -3370,7 +3366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                         SkyDatepickerInputDirective,
                         SkyFuzzyDatepickerInputDirective,
                     ],
-                    providers: [SkyDatepickerService],
+                    providers: [SkyDatepickerCalendarService],
                 }]
         }] });
 
@@ -3404,10 +3400,10 @@ class SkyDateRangePickerEndDateResourceKeyPipe {
         }
         return 'skyux_date_range_picker_before_date_label';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, isStandalone: true, name: "skyDateRangePickerEndDateResourceKey" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, isStandalone: true, name: "skyDateRangePickerEndDateResourceKey" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyDateRangePickerEndDateResourceKey',
@@ -3422,10 +3418,10 @@ class SkyDateRangePickerStartDateResourceKeyPipe {
         }
         return 'skyux_date_range_picker_after_date_label';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, isStandalone: true, name: "skyDateRangePickerStartDateResourceKey" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, isStandalone: true, name: "skyDateRangePickerStartDateResourceKey" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyDateRangePickerStartDateResourceKey',
@@ -4108,10 +4104,10 @@ class SkyDateRangeService {
         }
         return calculators;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangeService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangeService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -4150,6 +4146,7 @@ class SkyDateRangePickerComponent {
     constructor() {
         this.#dateRangeSvc = inject(SkyDateRangeService);
         this.#destroyRef = inject(DestroyRef);
+        this.#elementRef = inject(ElementRef);
         this.#injector = inject(Injector);
         this.#logger = inject(SkyLogService);
         /**
@@ -4158,6 +4155,7 @@ class SkyDateRangePickerComponent {
          */
         this.stacked = false;
         this.calculators = this.#dateRangeSvc.calculators;
+        this.datepickers = viewChildren(SkyDatepickerComponent);
         this.selectedCalculator = this.calculators[0];
         this.showEndDatePicker = signal(false);
         this.showStartDatePicker = signal(false);
@@ -4197,6 +4195,7 @@ class SkyDateRangePickerComponent {
     }
     #dateRangeSvc;
     #destroyRef;
+    #elementRef;
     #injector;
     #logger;
     /**
@@ -4352,9 +4351,6 @@ class SkyDateRangePickerComponent {
             });
         }
     }
-    onBlur() {
-        this.#notifyTouched?.();
-    }
     /**
      * Fires when a user changes the selected calculator ID.
      */
@@ -4372,6 +4368,16 @@ class SkyDateRangePickerComponent {
             this.#notifyChange?.(this.formGroup.getRawValue());
         });
     }
+    /**
+     * Fires when the date range picker loses focus.
+     */
+    onFocusout({ relatedTarget }) {
+        if (relatedTarget &&
+            !this.#elementRef.nativeElement.contains(relatedTarget) &&
+            !this.datepickers().some((picker) => picker.containsTarget(relatedTarget))) {
+            this.#notifyTouched?.();
+        }
+    }
     #getCalculator(calculatorId) {
         const found = this.calculators.find((c) => c.calculatorId === calculatorId);
         /*istanbul ignore if: safety check*/
@@ -4462,8 +4468,8 @@ class SkyDateRangePickerComponent {
     #createTouchedChangeSignal(control) {
         return toSignal(control.events.pipe(filter((evt) => evt instanceof TouchedChangeEvent), map((evt) => evt.touched), takeUntilDestroyed(this.#destroyRef)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDateRangePickerComponent, isStandalone: true, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: ["disabled", "disabled", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", hintText: "hintText", label: "label", labelText: "labelText", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, host: { properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SkyDateRangePickerComponent, isStandalone: true, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: ["disabled", "disabled", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", hintText: "hintText", label: "label", labelText: "labelText", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, host: { listeners: { "focusout": "onFocusout($event)" }, properties: { "class.sky-form-field-stacked": "this.stacked" } }, providers: [
             {
                 provide: NG_VALIDATORS,
                 useExisting: SkyDateRangePickerComponent,
@@ -4475,11 +4481,13 @@ class SkyDateRangePickerComponent {
                 multi: true,
             },
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], ngImport: i0, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"calculatorIdHasErrors()\"\n      [helpKey]=\"helpKey\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        labelText ||\n        label ||\n        ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select\n        formControlName=\"calculatorId\"\n        (blur)=\"onBlur()\"\n        (change)=\"onCalculatorIdChange()\"\n      >\n        @for (calculator of calculators; track calculator.calculatorId) {\n          <option [value]=\"calculator.calculatorId\">\n            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          errorName=\"endDateBeforeStartDate\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <span class=\"sky-input-box-descendent-form-error\">\n        <ng-content select=\"sky-form-error\" />\n      </span>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n    [hidden]=\"!showStartDatePicker()\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"startDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n    [hidden]=\"!showEndDatePicker()\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"endDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px;--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg )}:host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], 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            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          errorName=\"endDateBeforeStartDate\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <span class=\"sky-input-box-descendent-form-error\">\n        <ng-content select=\"sky-form-error\" />\n      </span>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n    [hidden]=\"!showStartDatePicker()\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"startDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n    [hidden]=\"!showEndDatePicker()\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"endDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px;--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg )}:host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '(focusout)': 'onFocusout($event)',
+                    }, imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
@@ -4501,7 +4509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             multi: true,
                         },
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], selector: 'sky-date-range-picker', standalone: true, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"calculatorIdHasErrors()\"\n      [helpKey]=\"helpKey\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        labelText ||\n        label ||\n        ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select\n        formControlName=\"calculatorId\"\n        (blur)=\"onBlur()\"\n        (change)=\"onCalculatorIdChange()\"\n      >\n        @for (calculator of calculators; track calculator.calculatorId) {\n          <option [value]=\"calculator.calculatorId\">\n            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          errorName=\"endDateBeforeStartDate\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <span class=\"sky-input-box-descendent-form-error\">\n        <ng-content select=\"sky-form-error\" />\n      </span>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n    [hidden]=\"!showStartDatePicker()\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"startDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n    [hidden]=\"!showEndDatePicker()\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"endDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-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"] }]
+                    ], selector: 'sky-date-range-picker', standalone: true, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-picker-select-calculator\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"calculatorIdHasErrors()\"\n      [helpKey]=\"helpKey\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        labelText ||\n        label ||\n        ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select formControlName=\"calculatorId\" (change)=\"onCalculatorIdChange()\">\n        @for (calculator of calculators; track calculator.calculatorId) {\n          <option [value]=\"calculator.calculatorId\">\n            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          errorName=\"endDateBeforeStartDate\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <span class=\"sky-input-box-descendent-form-error\">\n        <ng-content select=\"sky-form-error\" />\n      </span>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-start-date\"\n    [hidden]=\"!showStartDatePicker()\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"startDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper sky-date-range-picker-end-date\"\n    [hidden]=\"!showEndDatePicker()\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"endDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [".sky-date-range-picker:not(.sky-theme-modern *){--sky-override-date-range-picker-margin-right: 0;--sky-override-date-range-picker-padding-left: 5px;--sky-override-date-range-picker-padding-right: 5px;--sky-override-date-range-picker-responsive-bottom-margin: var( --sky-margin-stacked-lg )}:host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-override-date-range-picker-responsive-bottom-margin, var(--sky-space-gap-form-l));margin-right:0}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}}:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:initial}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:33.3333333333%;padding:0}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:var(--sky-override-date-range-picker-padding-left, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:var(--sky-override-date-range-picker-padding-right, 0)}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0;margin-right:var(--sky-override-date-range-picker-margin-right, var(--sky-space-gap-form-l))}@media (min-width: 768px){:host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}}.sky-responsive-container-sm :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-md :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group,.sky-responsive-container-lg :host-context(sky-filter-inline-item) .sky-date-range-picker-form-group{flex-basis:100%}\n"] }]
         }], propDecorators: { calculatorIds: [{
                 type: Input
             }], dateFormat: [{
@@ -4530,11 +4538,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             }] } });
 
 class SkyDateRangePickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerModule, imports: [SkyDateRangePickerComponent], exports: [SkyDateRangePickerComponent, SkyFormErrorModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerModule, imports: [SkyDateRangePickerComponent, SkyFormErrorModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerModule, imports: [SkyDateRangePickerComponent], exports: [SkyDateRangePickerComponent, SkyFormErrorModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerModule, imports: [SkyDateRangePickerComponent, SkyFormErrorModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SkyDateRangePickerComponent, SkyFormErrorModule],
@@ -4899,10 +4907,10 @@ class SkyTimepickerComponent {
         /* istanbul ignore next */
         this.#overlayKeyupListener?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$3.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyTimepickerComponent, selector: "sky-timepicker", outputs: { selectedTimeChanged: "selectedTimeChanged" }, viewQueries: [{ propertyName: "timepickerRef", first: true, predicate: ["timepickerRef"], descendants: true, read: ElementRef }, { propertyName: "timepickerTemplateRef", first: true, predicate: ["timepickerTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-timepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-timepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? timepickerId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_timepicker_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_timepicker_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"clock\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\n    #timepickerRef\n    class=\"sky-timepicker-container sky-shadow sky-box sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"timepickerId\"\n    [class.sky-timepicker-hidden]=\"!isVisible\"\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          @for (hour of hours; track hour) {\n            <li>\n              <button\n                name=\"hour\"\n                type=\"button\"\n                [ngClass]=\"{ 'sky-btn-active': selectedHour === hour }\"\n                (click)=\"setTime($event)\"\n              >\n                {{ hour }}\n              </button>\n            </li>\n          }\n        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          @for (minute of minutes; track minute) {\n            <li>\n              <button\n                name=\"minute\"\n                type=\"button\"\n                [ngClass]=\"{\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$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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
+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: [{
@@ -5142,10 +5150,10 @@ class SkyTimepickerInputDirective {
     /* istanbul ignore next */
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     #_validatorChange = () => { };
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTimepickerInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: SkyTimepickerInputDirective, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTimepickerInputDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SkyTimepickerInputDirective, selector: "[skyTimepickerInput]", inputs: { skyTimepickerInput: "skyTimepickerInput", timeFormat: "timeFormat", returnFormat: "returnFormat", disabled: "disabled" }, host: { listeners: { "change": "onChange($event)", "blur": "onBlur()" } }, providers: [SKY_TIMEPICKER_VALUE_ACCESSOR, SKY_TIMEPICKER_VALIDATOR], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTimepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[skyTimepickerInput]',
@@ -5168,19 +5176,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
             }] } });
 
 class SkyTimepickerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTimepickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SkyTimepickerModule, declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent], imports: [CommonModule,
             SkyIconModule,
             SkyDatetimeResourcesModule,
             SkyAffixModule,
             SkyThemeModule], exports: [SkyTimepickerInputDirective, SkyTimepickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTimepickerModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTimepickerModule, imports: [CommonModule,
             SkyIconModule,
             SkyDatetimeResourcesModule,
             SkyAffixModule,
             SkyThemeModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyTimepickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyTimepickerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SkyTimepickerInputDirective, SkyTimepickerComponent],