@skyux/datetime 10.19.0 → 10.20.0

package/fesm2022/skyux-datetime.mjs

@@ -1,25 +1,25 @@
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { NgModule, inject, Injectable, Pipe, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener, booleanAttribute, HostBinding } from '@angular/core';
-import * as i3 from '@skyux/i18n';
+import { NgModule, inject, Injectable, Pipe, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener, ChangeDetectorRef, Injector, booleanAttribute, HostBinding } from '@angular/core';
+import * as i1 from '@skyux/i18n';
 import { SkyLibResourcesService, getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS, SkyAppLocaleProvider, SkyIntlDateFormatter } from '@skyux/i18n';
-import { Subject, takeUntil as takeUntil$1, fromEvent, BehaviorSubject, forkJoin, combineLatest } from 'rxjs';
+import { Subject, takeUntil as takeUntil$1, fromEvent, BehaviorSubject, forkJoin, distinctUntilChanged as distinctUntilChanged$1, merge } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged, first, map } from 'rxjs/operators';
 import moment from 'moment';
 import * as i2$3 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
-import * as i1 from '@skyux/core';
-import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyIdModule } from '@skyux/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, FormBuilder, FormControl, NgControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import * as i2$2 from '@skyux/forms';
 import { SkyFormFieldLabelTextRequiredService, SkyInputBoxModule } from '@skyux/forms';
 import * as i4$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
+import * as i1$1 from '@skyux/core';
+import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule } from '@skyux/core';
 import * as i2$1 from '@skyux/indicators';
 import { SkyIconModule, SkyWaitModule } from '@skyux/indicators';
 import * as i4 from '@skyux/popovers';
 import { SkyPopoverMessageType, SkyPopoverModule } from '@skyux/popovers';
-import * as i3$1 from '@skyux/theme';
+import * as i3 from '@skyux/theme';
 import { SkyThemeModule } from '@skyux/theme';
 
 /* istanbul ignore file */
@@ -691,7 +691,7 @@ class SkyFuzzyDateService {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i3.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyFuzzyDateService, deps: [{ token: i1.SkyAppLocaleProvider }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyFuzzyDateService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyFuzzyDateService, decorators: [{
@@ -699,7 +699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i3.SkyAppLocaleProvider }] });
+        }], ctorParameters: () => [{ type: i1.SkyAppLocaleProvider }] });
 
 /**
  * Formats date values using two or more date tokens that represent the day, month,
@@ -2148,15 +2148,15 @@ class SkyDatepickerComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$2.SkyInputBoxHostService, optional: true }, { token: i3$1.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", dateFormatChange: "dateFormatChange", openChange: "openChange" }, 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  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\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      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      #triggerButtonRef\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\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    #calendarRef\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    </sky-datepicker-calendar>\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "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: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$2.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", dateFormatChange: "dateFormatChange", openChange: "openChange" }, 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  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\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      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      #triggerButtonRef\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\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    #calendarRef\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    </sky-datepicker-calendar>\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "startAtDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-datepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\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      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      #triggerButtonRef\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\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    #calendarRef\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    </sky-datepicker-calendar>\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$2.SkyInputBoxHostService, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyOverlayService }, { type: i2$2.SkyInputBoxHostService, decorators: [{
                     type: Optional
-                }] }, { type: i3$1.SkyThemeService, decorators: [{
+                }] }, { type: i3.SkyThemeService, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional
@@ -2648,7 +2648,7 @@ class SkyFuzzyDatepickerInputDirective {
         }
         this.#setInputElementValue(formattedDate || '');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyFuzzyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: SkyFuzzyDateService }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", 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: "17.3.4", type: SkyFuzzyDatepickerInputDirective, selector: "[skyFuzzyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", futureDisabled: "futureDisabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", yearRequired: "yearRequired" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()" } }, providers: [
             SKY_FUZZY_DATEPICKER_VALUE_ACCESSOR,
             SKY_FUZZY_DATEPICKER_VALIDATOR,
@@ -2663,7 +2663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                         SKY_FUZZY_DATEPICKER_VALIDATOR,
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: SkyFuzzyDateService }, { type: i3.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
@@ -3161,7 +3161,7 @@ class SkyDatepickerInputDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDatepickerInputDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDatepickerConfigService }, { token: i0.ElementRef }, { token: i3.SkyAppLocaleProvider }, { token: i0.Renderer2 }, { token: SkyDatepickerComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", 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: "17.3.4", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: { dateFormat: "dateFormat", disabled: "disabled", maxDate: "maxDate", minDate: "minDate", startAtDate: "startAtDate", skyDatepickerInput: "skyDatepickerInput", skyDatepickerNoValidate: "skyDatepickerNoValidate", startingDay: "startingDay", strict: "strict" }, host: { listeners: { "change": "onInputChange($event)", "blur": "onInputBlur()", "input": "onInput()" } }, providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDatepickerInputDirective, decorators: [{
@@ -3170,7 +3170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                     selector: '[skyDatepickerInput]',
                     providers: [SKY_DATEPICKER_VALUE_ACCESSOR, SKY_DATEPICKER_VALIDATOR],
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDatepickerConfigService }, { type: i0.ElementRef }, { type: i3.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
@@ -3303,12 +3303,13 @@ class SkyDateRangePickerEndDateResourceKeyPipe {
         return 'skyux_date_range_picker_before_date_label';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, isStandalone: true, name: "skyDateRangePickerEndDateResourceKey" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerEndDateResourceKeyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyDateRangePickerEndDateResourceKey',
+                    standalone: true,
                 }]
         }] });
 
@@ -3320,15 +3321,71 @@ class SkyDateRangePickerStartDateResourceKeyPipe {
         return 'skyux_date_range_picker_after_date_label';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, isStandalone: true, name: "skyDateRangePickerStartDateResourceKey" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerStartDateResourceKeyPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'skyDateRangePickerStartDateResourceKey',
+                    standalone: true,
                 }]
         }] });
 
+/**
+ * Represents the calculator.
+ */
+class SkyDateRangeCalculator {
+    #config;
+    constructor(
+    /**
+     * The calculator ID that specifies calculator objects that represent date ranges.
+     */
+    calculatorId, config) {
+        this.calculatorId = calculatorId;
+        this.#config = config;
+        this.type = config.type;
+        this.shortDescription = config.shortDescription;
+        this._shortDescriptionResourceKey = config._shortDescriptionResourceKey;
+    }
+    /**
+     * Gets the current value of the calculator.
+     * @param startDateInput The start date.
+     * @param endDateInput The end date.
+     */
+    getValue(startDateInput, endDateInput) {
+        const result = this.#config.getValue(startDateInput, endDateInput);
+        let startDate = null;
+        if (result.startDate instanceof Date) {
+            startDate = this.#parseDateWithoutTime(result.startDate);
+        }
+        let endDate = null;
+        if (result.endDate instanceof Date) {
+            endDate = this.#parseDateWithoutTime(result.endDate);
+        }
+        return {
+            calculatorId: this.calculatorId,
+            startDate,
+            endDate,
+        };
+    }
+    /**
+     * Performs synchronous validation against the control.
+     */
+    validate(value) {
+        if (!this.#config.validate) {
+            return null;
+        }
+        return this.#config.validate(value);
+    }
+    /**
+     * Get a date object without time information.
+     * See: https://stackoverflow.com/a/38050824/6178885
+     */
+    #parseDateWithoutTime(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+}
+
 /**
  * `SkyDateRangeCalculatorId` values specify calculator objects that return
  * two `Date` objects to represent date ranges. The values populate the options
@@ -3447,60 +3504,6 @@ var SkyDateRangeCalculatorId;
     SkyDateRangeCalculatorId[SkyDateRangeCalculatorId["NextFiscalYear"] = 21] = "NextFiscalYear";
 })(SkyDateRangeCalculatorId || (SkyDateRangeCalculatorId = {}));
 
-/**
- * Represents the calculator.
- */
-class SkyDateRangeCalculator {
-    #config;
-    constructor(
-    /**
-     * The calculator ID that specifies calculator objects that represent date ranges.
-     */
-    calculatorId, config) {
-        this.calculatorId = calculatorId;
-        this.#config = config;
-        this.type = config.type;
-        this.shortDescription = config.shortDescription;
-    }
-    /**
-     * Gets the current value of the calculator.
-     * @param startDateInput The start date.
-     * @param endDateInput The end date.
-     */
-    getValue(startDateInput, endDateInput) {
-        const result = this.#config.getValue(startDateInput, endDateInput);
-        let startDate = null;
-        if (result.startDate instanceof Date) {
-            startDate = this.#parseDateWithoutTime(result.startDate);
-        }
-        let endDate = null;
-        if (result.endDate instanceof Date) {
-            endDate = this.#parseDateWithoutTime(result.endDate);
-        }
-        return {
-            calculatorId: this.calculatorId,
-            startDate,
-            endDate,
-        };
-    }
-    /**
-     * Performs synchronous validation against the control.
-     */
-    validate(value) {
-        if (!this.#config.validate) {
-            return null;
-        }
-        return this.#config.validate(value);
-    }
-    /**
-     * Get a date object without time information.
-     * See: https://stackoverflow.com/a/38050824/6178885
-     */
-    #parseDateWithoutTime(date) {
-        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-    }
-}
-
 /**
  * Need to add the following to classes which contain static methods.
  * See: https://github.com/ng-packagr/ng-packagr/issues/641
@@ -3750,6 +3753,30 @@ class SkyDateRangeRelativeValue {
     }
 }
 
+const SKY_DEFAULT_CALCULATOR_IDS = [
+    SkyDateRangeCalculatorId.AnyTime,
+    SkyDateRangeCalculatorId.Before,
+    SkyDateRangeCalculatorId.After,
+    SkyDateRangeCalculatorId.SpecificRange,
+    SkyDateRangeCalculatorId.Yesterday,
+    SkyDateRangeCalculatorId.Today,
+    SkyDateRangeCalculatorId.Tomorrow,
+    SkyDateRangeCalculatorId.LastWeek,
+    SkyDateRangeCalculatorId.ThisWeek,
+    SkyDateRangeCalculatorId.NextWeek,
+    SkyDateRangeCalculatorId.LastMonth,
+    SkyDateRangeCalculatorId.ThisMonth,
+    SkyDateRangeCalculatorId.NextMonth,
+    SkyDateRangeCalculatorId.LastQuarter,
+    SkyDateRangeCalculatorId.ThisQuarter,
+    SkyDateRangeCalculatorId.NextQuarter,
+    SkyDateRangeCalculatorId.LastCalendarYear,
+    SkyDateRangeCalculatorId.ThisCalendarYear,
+    SkyDateRangeCalculatorId.NextCalendarYear,
+    SkyDateRangeCalculatorId.LastFiscalYear,
+    SkyDateRangeCalculatorId.ThisFiscalYear,
+    SkyDateRangeCalculatorId.NextFiscalYear,
+];
 const SKY_DEFAULT_CALCULATOR_CONFIGS = [
     {
         calculatorId: SkyDateRangeCalculatorId.AnyTime,
@@ -3900,16 +3927,24 @@ const SKY_DEFAULT_CALCULATOR_CONFIGS = [
  * Creates and manages `SkyDateRangeCalculator` instances.
  */
 class SkyDateRangeService {
+    get calculators() {
+        return this.#calculators;
+    }
     // Start the count higher than the number of available values
     // provided in the SkyDateRangeCalculatorId enum.
     static { this.lastId = 1000; }
     #calculatorReadyStream = new BehaviorSubject(false);
-    #calculatorConfigs = {};
     #calculators = [];
+    #ngUnsubscribe = new Subject();
     #resourcesService;
     constructor(resourcesService) {
         this.#resourcesService = resourcesService;
-        this.#createDefaultCalculators();
+        this.#calculators = this.#createDefaultCalculators();
+        this.#resolveResourcesStrings(this.#calculators);
+    }
+    ngOnDestroy() {
+        this.#ngUnsubscribe.next();
+        this.#ngUnsubscribe.complete();
     }
     /**
      * Creates a custom date range calculator.
@@ -3921,9 +3956,24 @@ class SkyDateRangeService {
         this.#calculators.push(calculator);
         return calculator;
     }
+    /**
+     * Returns calculators from an array of calculator IDs.
+     * @param calculatorIds The array of calculator IDs.
+     */
+    filterCalculators(calculatorIds) {
+        const filtered = [];
+        for (const calculatorId of calculatorIds) {
+            const found = this.#calculators.find((c) => c.calculatorId === calculatorId);
+            if (found) {
+                filtered.push(found);
+            }
+        }
+        return filtered;
+    }
     /**
      * Returns calculators from an array of calculator IDs.
      * @param ids The array of calculator IDs.
+     * @deprecated Call `filterCalculators()` instead.
      */
     getCalculators(ids) {
         const promises = ids.map((id) => {
@@ -3934,9 +3984,10 @@ class SkyDateRangeService {
     /**
      * Returns a calculator from a calculator ID.
      * @param id The calculator ID.
+     * @deprecated Call `filterCalculators()` instead.
      */
     getCalculatorById(id) {
-        const calculatorId = parseInt(id, 10);
+        const calculatorId = +id;
         const found = this.#calculators.find((calculator) => {
             return calculator.calculatorId === calculatorId;
         });
@@ -3950,36 +4001,45 @@ class SkyDateRangeService {
             });
         });
     }
+    /**
+     * Returns default date range calculators with unresolved resources strings.
+     */
     #createDefaultCalculators() {
-        const tasks = [];
-        // Get resource strings for short descriptions.
-        SKY_DEFAULT_CALCULATOR_CONFIGS.forEach((defaultConfig) => {
-            const config = {
+        const calculators = [];
+        for (const defaultConfig of SKY_DEFAULT_CALCULATOR_CONFIGS) {
+            calculators.push(new SkyDateRangeCalculator(defaultConfig.calculatorId, {
                 getValue: defaultConfig.getValue,
                 validate: defaultConfig.validate,
                 shortDescription: '',
+                _shortDescriptionResourceKey: defaultConfig.shortDescriptionResourceKey,
                 type: defaultConfig.type,
-            };
-            tasks.push(this.#resourcesService
-                .getString(defaultConfig.shortDescriptionResourceKey)
-                .pipe(first(), map((value) => {
-                config.shortDescription = value;
-            })));
-            this.#calculatorConfigs[defaultConfig.calculatorId] = config;
+            }));
+        }
+        return calculators;
+    }
+    /**
+     * Resolves locale resources strings for the provided calculators.
+     * @deprecated The resources strings are resolved in the template, so we'll
+     * remove this functionality in a later major version of SKY UX.
+     */
+    #resolveResourcesStrings(calculators) {
+        const tasks = [];
+        calculators.forEach((calculator) => {
+            if (calculator._shortDescriptionResourceKey) {
+                tasks.push(this.#resourcesService
+                    .getString(calculator._shortDescriptionResourceKey)
+                    .pipe(takeUntil(this.#ngUnsubscribe), map((value) => {
+                    calculator.shortDescription = value;
+                })));
+            }
         });
         forkJoin(tasks)
-            .pipe(first())
+            .pipe(takeUntil(this.#ngUnsubscribe))
             .subscribe(() => {
-            const calculatorIds = Object.keys(this.#calculatorConfigs);
-            const calculators = calculatorIds.map((calculatorId) => {
-                const id = parseInt(calculatorId, 10);
-                return new SkyDateRangeCalculator(id, this.#calculatorConfigs[id]);
-            });
-            this.#calculators = calculators;
             this.#calculatorReadyStream.next(true);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangeService, deps: [{ token: i3.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangeService, deps: [{ token: i1.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangeService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangeService, decorators: [{
@@ -3987,388 +4047,341 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i3.SkyLibResourcesService }] });
+        }], ctorParameters: () => [{ type: i1.SkyLibResourcesService }] });
 
-const SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SkyDateRangePickerComponent),
-    multi: true,
-};
-const SKY_DATE_RANGE_PICKER_VALIDATOR = {
-    provide: NG_VALIDATORS,
-    useExisting: forwardRef(() => SkyDateRangePickerComponent),
-    multi: true,
-};
-let uniqueId = 0;
-/**
- * Acts as a form control with a form model of type `SkyDateRangeCalculation`.
- * @example
- * ```
- * <sky-date-range-picker
- *   formControlName="myPicker"
- * >
- * </sky-date-range-picker>
- * ```
- */
+function areDateRangesEqual(rangeA, rangeB) {
+    return (!!rangeA &&
+        !!rangeB &&
+        rangeA.calculatorId === rangeB.calculatorId &&
+        areDatesEqual(rangeA.startDate, rangeB.startDate) &&
+        areDatesEqual(rangeA.endDate, rangeB.endDate));
+}
+function areDatesEqual(a, b) {
+    if (typeof a !== typeof b) {
+        return false;
+    }
+    if (!a && !b) {
+        return true;
+    }
+    if (typeof a === 'string' && a === b) {
+        return true;
+    }
+    return a instanceof Date && b instanceof Date && a.getTime() === b.getTime();
+}
+function isNullOrUndefined(value) {
+    return value === undefined || value === null;
+}
+function isPartialValue(value) {
+    return (isNullOrUndefined(value) ||
+        isNullOrUndefined(value.calculatorId) ||
+        !('endDate' in value) ||
+        !('startDate' in value));
+}
 class SkyDateRangePickerComponent {
     /**
      * IDs for the date range options to include in the picker's dropdown.
      * The options specify calculator objects that return two `Date` objects to represent date ranges.
      * By default, this property includes all `SkyDateRangeCalculatorId` values.
      */
-    set calculatorIds(value) {
-        this.#_calculatorIds = value || [
-            SkyDateRangeCalculatorId.AnyTime,
-            SkyDateRangeCalculatorId.Before,
-            SkyDateRangeCalculatorId.After,
-            SkyDateRangeCalculatorId.SpecificRange,
-            SkyDateRangeCalculatorId.Yesterday,
-            SkyDateRangeCalculatorId.Today,
-            SkyDateRangeCalculatorId.Tomorrow,
-            SkyDateRangeCalculatorId.LastWeek,
-            SkyDateRangeCalculatorId.ThisWeek,
-            SkyDateRangeCalculatorId.NextWeek,
-            SkyDateRangeCalculatorId.LastMonth,
-            SkyDateRangeCalculatorId.ThisMonth,
-            SkyDateRangeCalculatorId.NextMonth,
-            SkyDateRangeCalculatorId.LastQuarter,
-            SkyDateRangeCalculatorId.ThisQuarter,
-            SkyDateRangeCalculatorId.NextQuarter,
-            SkyDateRangeCalculatorId.LastCalendarYear,
-            SkyDateRangeCalculatorId.ThisCalendarYear,
-            SkyDateRangeCalculatorId.NextCalendarYear,
-            SkyDateRangeCalculatorId.LastFiscalYear,
-            SkyDateRangeCalculatorId.ThisFiscalYear,
-            SkyDateRangeCalculatorId.NextFiscalYear,
-        ];
+    set calculatorIds(calculatorIds) {
+        const currentCalculatorId = this.#getValue().calculatorId;
+        this.#_calculatorIds = calculatorIds ?? SKY_DEFAULT_CALCULATOR_IDS;
+        this.calculators = this.#dateRangeSvc.filterCalculators(this.#_calculatorIds);
+        // If the currently selected calculator isn't available anymore,
+        // select the first calculator in the new array.
+        if (!this.#_calculatorIds.includes(currentCalculatorId)) {
+            this.#setValue({ calculatorId: this.calculatorIds[0] }, { emitEvent: true });
+        }
     }
     get calculatorIds() {
         return this.#_calculatorIds;
     }
     /**
-     * The date format for
-     * [the `sky-datepicker` components](https://developer.blackbaud.com/skyux/components/datepicker)
-     * that make up the date range picker. The text input is a composite component of
-     * up to two `sky-datepicker` components.
-     * @default "MM/DD/YYYY"
-     */
-    set dateFormat(value) {
-        this.#_dateFormat = value;
-        this.dateFormatOrDefault = value || this.#preferredShortDateFormat;
-    }
-    get dateFormat() {
-        return this.#_dateFormat;
-    }
-    /**
-     * Whether to disable the date range picker on template-driven forms. Don't use this input on reactive forms because they may overwrite the input or leave the control out of sync.
-     * To set the disabled state on reactive forms, use the `FormControl` instead.
+     * Whether to disable the date range picker on template-driven forms. Don't use
+     * this input on reactive forms because they may overwrite the input or leave
+     * the control out of sync. To set the disabled state on reactive forms,
+     * use the `FormControl` instead.
      * @default false
      */
     set disabled(value) {
-        this.#_disabled = value;
-        if (this.formGroup) {
-            if (this.#_disabled) {
-                this.formGroup.disable();
-            }
-            else {
-                this.formGroup.enable();
-            }
+        if (value) {
+            this.formGroup.disable();
+        }
+        else {
+            this.formGroup.enable();
         }
-        this.#changeDetector.markForCheck();
-    }
-    get disabled() {
-        return this.#_disabled;
     }
     get #calculatorIdControl() {
-        return this.formGroup?.get('calculatorId');
-    }
-    get #defaultCalculator() {
-        return this.calculators[0];
-    }
-    get #defaultValue() {
-        return this.#defaultCalculator?.getValue();
+        return this.formGroup.get('calculatorId');
     }
     get #endDateControl() {
-        return this.formGroup?.get('endDate');
+        return this.formGroup.get('endDate');
     }
     get #startDateControl() {
-        return this.formGroup?.get('startDate');
+        return this.formGroup.get('startDate');
     }
-    #value;
-    set #valueOrDefault(value) {
-        this.#_valueOrDefault = value;
-        this.#updateSelectedCalculator();
-    }
-    get #valueOrDefault() {
-        return this.#_valueOrDefault;
-    }
-    #labelTextRequired;
-    #appFormatter;
-    #control;
-    #preferredShortDateFormat;
-    #ngUnsubscribe;
-    #resourceSvc;
     #_calculatorIds;
-    #_dateFormat;
-    #_disabled;
-    #_valueOrDefault;
+    #_value;
+    #hostControl;
+    #ngUnsubscribe;
+    #notifyChange;
+    #notifyTouched;
     #changeDetector;
-    #dateRangeService;
-    #formBuilder;
-    #localeProvider;
-    #ngZone;
-    constructor(changeDetector, dateRangeService, formBuilder, localeProvider, ngZone, themeSvc) {
-        /**
-         * Whether to require users to specify a start date.
-         * @default false
-         */
-        this.startDateRequired = false;
+    #dateRangeSvc;
+    #injector;
+    #labelTextRequiredSvc;
+    constructor() {
         /**
          * Whether to require users to specify a end date.
-         * @default false
+         * @deprecated Use the `required` directive or Angular's `Validators.required`
+         * on the form control to mark the date range picker as required.
          */
         this.endDateRequired = false;
+        /**
+         * Whether the date range picker requires a value.
+         */
+        this.required = false;
         /**
          * Whether the date range picker is stacked on another form component. When specified, the appropriate
          * vertical spacing is automatically added to the date range picker.
          * @preview
          */
         this.stacked = false;
-        this.dateRangePickerId = `sky-date-range-picker-${uniqueId++}`;
+        /**
+         * Whether to require users to specify a start date.
+         * @deprecated Use the `required` directive or Angular's `Validators.required`
+         * on the form control to mark the date range picker as required.
+         */
+        this.startDateRequired = false;
         this.calculators = [];
-        this.isReady = false;
+        this.hasErrors = false;
         this.showEndDatePicker = false;
         this.showStartDatePicker = false;
-        this.#labelTextRequired = inject(SkyFormFieldLabelTextRequiredService, {
-            optional: true,
-        });
-        this.#appFormatter = inject(SkyAppFormat);
+        this.#_calculatorIds = SKY_DEFAULT_CALCULATOR_IDS;
         this.#ngUnsubscribe = new Subject();
-        this.#resourceSvc = inject(SkyLibResourcesService);
-        this.#_calculatorIds = [
-            SkyDateRangeCalculatorId.AnyTime,
-            SkyDateRangeCalculatorId.Before,
-            SkyDateRangeCalculatorId.After,
-            SkyDateRangeCalculatorId.SpecificRange,
-            SkyDateRangeCalculatorId.Yesterday,
-            SkyDateRangeCalculatorId.Today,
-            SkyDateRangeCalculatorId.Tomorrow,
-            SkyDateRangeCalculatorId.LastWeek,
-            SkyDateRangeCalculatorId.ThisWeek,
-            SkyDateRangeCalculatorId.NextWeek,
-            SkyDateRangeCalculatorId.LastMonth,
-            SkyDateRangeCalculatorId.ThisMonth,
-            SkyDateRangeCalculatorId.NextMonth,
-            SkyDateRangeCalculatorId.LastQuarter,
-            SkyDateRangeCalculatorId.ThisQuarter,
-            SkyDateRangeCalculatorId.NextQuarter,
-            SkyDateRangeCalculatorId.LastCalendarYear,
-            SkyDateRangeCalculatorId.ThisCalendarYear,
-            SkyDateRangeCalculatorId.NextCalendarYear,
-            SkyDateRangeCalculatorId.LastFiscalYear,
-            SkyDateRangeCalculatorId.ThisFiscalYear,
-            SkyDateRangeCalculatorId.NextFiscalYear,
-        ];
-        this.#_disabled = false;
-        /* istanbul ignore next */
-        // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
-        this.#onChange = (_) => { };
-        /* istanbul ignore next */
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        this.#onTouched = () => { };
-        this.#changeDetector = changeDetector;
-        this.#dateRangeService = dateRangeService;
-        this.#formBuilder = formBuilder;
-        this.#localeProvider = localeProvider;
-        this.#ngZone = ngZone;
-        this.dateFormatOrDefault = this.dateFormat;
-        this.#localeProvider
-            .getLocaleInfo()
-            .pipe(takeUntil(this.#ngUnsubscribe))
-            .subscribe((localeInfo) => {
-            SkyDateFormatter.setLocale(localeInfo.locale);
-            this.#preferredShortDateFormat =
-                SkyDateFormatter.getPreferredShortDateFormat();
-            this.dateFormatOrDefault =
-                this.dateFormat || this.#preferredShortDateFormat;
+        this.#changeDetector = inject(ChangeDetectorRef);
+        this.#dateRangeSvc = inject(SkyDateRangeService);
+        this.#injector = inject(Injector);
+        this.#labelTextRequiredSvc = inject(SkyFormFieldLabelTextRequiredService, {
+            optional: true,
         });
-        // Update icons when theme changes.
-        /* istanbul ignore next */
-        themeSvc?.settingsChange
-            .pipe(takeUntil(this.#ngUnsubscribe))
-            .subscribe(() => {
-            this.#changeDetector.markForCheck();
+        this.calculators = this.#dateRangeSvc.calculators;
+        this.selectedCalculator = this.calculators[0];
+        const initialValue = this.#getDefaultValue(this.selectedCalculator);
+        this.#_value = initialValue;
+        this.formGroup = inject(FormBuilder).group({
+            calculatorId: new FormControl(initialValue.calculatorId),
+            startDate: new FormControl(initialValue.startDate),
+            endDate: new FormControl(initialValue.endDate),
         });
     }
     ngOnInit() {
-        this.#createForm();
-        this.#updateCalculators().then(() => {
-            if (!this.#value || !this.#value.calculatorId) {
-                this.#valueOrDefault = this.#defaultValue;
+        if (this.#labelTextRequiredSvc) {
+            this.#labelTextRequiredSvc.validateLabelText(this.label);
+            if (!this.label) {
+                this.display = 'none';
             }
-            this.#addEventListeners();
-            this.isReady = true;
-            this.#showRelevantFormFields();
-            // We need to let Angular be stable and have rendered the components prior to setting the values and form controls. This ensures all initial validation will be ran correctly.
-            this.#ngZone.onStable.pipe(first()).subscribe(() => {
-                // Fill in any unprovided values after the calculators have been initialized.
-                // For example, if the control is initialized with only the `calculatorId`,
-                // allow the calculator to fill in the missing start and end dates.
-                const defaultValue = this.selectedCalculator?.getValue(this.#valueOrDefault?.startDate, this.#valueOrDefault?.endDate);
-                const newValue = Object.assign({}, defaultValue, this.#valueOrDefault);
-                this.#setValue(newValue, false);
-                this.#resetFormGroupValue();
-                // This is needed to address a bug in Angular 4.
-                // When a control value is set initially, its value is not represented on the view.
-                // See: https://github.com/angular/angular/issues/13792
-                /* istanbul ignore else */
-                if (this.#control) {
-                    this.#control.setValue(this.#valueOrDefault, {
-                        emitEvent: false,
-                    });
-                }
-            });
-        });
-        this.#resourceSvc
-            .getString('skyux_datepicker_format_hint_text')
-            .pipe(takeUntil(this.#ngUnsubscribe))
-            .subscribe((templateString) => {
-            this.hostHintText = this.#appFormatter.formatText(templateString, this.dateFormatOrDefault);
-        });
-        if (this.#labelTextRequired && !this.label) {
-            this.display = 'none';
         }
-        this.#labelTextRequired?.validateLabelText(this.label);
     }
-    ngOnChanges(changes) {
-        if (changes['calculatorIds'] &&
-            changes['calculatorIds'].firstChange === false) {
-            this.#updateCalculators().then(() => {
-                const id = this.#calculatorIdControl?.value;
-                // Maintain the currently selected values if the calculators change after
-                // a value has been chosen.
-                const found = this.calculators.find((calculator) => {
-                    return calculator.calculatorId === id;
+    ngAfterViewInit() {
+        this.#hostControl = this.#injector.get(NgControl, null, {
+            optional: true,
+            self: true,
+        })?.control;
+        // Set a default value on the control if it's undefined on init.
+        // We need to use setTimeout to avoid interfering with the first
+        // validation cycle.
+        if (isPartialValue(this.#hostControl?.value)) {
+            setTimeout(() => {
+                this.#hostControl?.setValue(this.#getValue(), {
+                    emitEvent: false,
+                    onlySelf: true,
                 });
-                /* istanbul ignore else */
-                if (!found) {
-                    const newValue = this.#defaultCalculator?.getValue();
-                    this.#setValue(newValue);
-                    this.#resetFormGroupValue(newValue);
-                    this.#showRelevantFormFields();
+            });
+        }
+        // Update the view when "required" or "disabled" states are changed on the
+        // host control.
+        this.#hostControl?.statusChanges
+            .pipe(distinctUntilChanged$1(), takeUntil$1(this.#ngUnsubscribe))
+            .subscribe(() => {
+            this.#changeDetector.markForCheck();
+        });
+        // Start listening for changes after the first change detection cycle.
+        setTimeout(() => {
+            this.formGroup.valueChanges
+                .pipe(distinctUntilChanged$1(areDateRangesEqual), takeUntil$1(this.#ngUnsubscribe))
+                .subscribe((value) => {
+                if (!isNullOrUndefined(value?.calculatorId)) {
+                    // The select element sets the calculator ID to a string, but we
+                    // need it to be a number.
+                    value.calculatorId = +value.calculatorId;
+                    // If the calculator ID is changed, we need to reset the start and
+                    // end date values and wait until the next valueChanges event to
+                    // notify the host control.
+                    if (value.calculatorId !== this.#getValue().calculatorId) {
+                        this.#setValue({ calculatorId: value.calculatorId }, { emitEvent: true });
+                        return;
+                    }
+                }
+                this.#setValue(value, { emitEvent: false });
+                const newValue = this.#getValue();
+                // Update the host control if the value is different.
+                if (!areDateRangesEqual(this.#hostControl?.value, newValue)) {
+                    this.#notifyChange?.(newValue);
                 }
             });
+        });
+        // If the datepickers' statuses change, we want to retrigger the host
+        // control's validation so that their errors are reflected back to the host.
+        merge(this.#startDateControl.statusChanges, this.#endDateControl.statusChanges)
+            .pipe(distinctUntilChanged$1(), takeUntil$1(this.#ngUnsubscribe))
+            .subscribe(() => {
+            // Use a setTimeout to avoid an ExpressionChangedAfterChecked error,
+            // since multiple calls to updateValueAndValidity in the same
+            // cycle may collide with one another.
+            setTimeout(() => {
+                this.#hostControl?.updateValueAndValidity({
+                    emitEvent: false,
+                    onlySelf: true,
+                });
+            });
+        });
+        this.#updatePickerVisibility(this.selectedCalculator);
+    }
+    /**
+     * Check for touched status in ngDoCheck since Angular does not (currently)
+     * have an API to respond to touched status changes from the host control.
+     * @see https://github.com/angular/angular/issues/17736#issuecomment-310812368
+     * TODO: Angular 18 introduces a new API to respond to these statuses.
+     * @see https://github.com/angular/angular/issues/10887#issuecomment-2035267400
+     */
+    ngDoCheck() {
+        const control = this.#hostControl;
+        const touched = this.formGroup.touched;
+        if (control) {
+            if (control.touched && !touched) {
+                this.formGroup.markAllAsTouched();
+                this.#changeDetector.markForCheck();
+            }
+            else if (control.untouched && touched) {
+                this.formGroup.markAsUntouched();
+                this.#changeDetector.markForCheck();
+            }
+            this.hasErrors = !!control.errors && (control.touched || control.dirty);
         }
     }
     ngOnDestroy() {
         this.#ngUnsubscribe.next();
         this.#ngUnsubscribe.complete();
     }
-    onFieldBlur() {
-        this.#onTouched();
+    // Implemented as part of ControlValueAccessor.
+    registerOnChange(fn) {
+        this.#notifyChange = fn;
     }
-    writeValue(value) {
-        // Only update the underlying controls when the calculators are ready.
-        const notifyChange = false;
-        // (We still need to save the initial value set by the consumer's form, however.)
-        this.#setValue(value, notifyChange);
-        if (this.isReady) {
-            // When the control's value is set to `null`,
-            // set it to the default value.
-            if (!value) {
-                this.#onChange(this.#defaultValue);
-            }
-            this.#resetFormGroupValue();
-            this.#showRelevantFormFields();
-        }
+    // Implemented as part of ControlValueAccessor.
+    registerOnTouched(fn) {
+        this.#notifyTouched = fn;
+    }
+    // Implemented as part of ControlValueAccessor.
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
     }
+    // Implemented as part of Validator.
     validate(control) {
-        if (!this.#control) {
-            this.#control = control;
-        }
-        if (!this.isReady) {
-            return null;
-        }
-        const value = control.value;
-        const idControl = this.#calculatorIdControl;
-        const result = this.selectedCalculator?.validate(value);
         let errors = null;
-        if (result) {
+        const calculatorErrors = this.selectedCalculator.validate(control.value);
+        const startDateErrors = this.#startDateControl.errors;
+        const endDateErrors = this.#endDateControl.errors;
+        if (calculatorErrors) {
             errors = {
                 skyDateRange: {
-                    calculatorId: idControl?.value,
-                    errors: result,
+                    calculatorId: this.#getValue().calculatorId,
+                    errors: calculatorErrors,
                 },
             };
         }
-        else {
-            let startErrors = null;
-            let endErrors = null;
-            if (this.#startDateControl) {
-                startErrors = this.#startDateControl.errors;
-            }
-            if (this.#endDateControl) {
-                endErrors = this.#endDateControl.errors;
-            }
-            errors = startErrors || endErrors;
+        if (this.showStartDatePicker && startDateErrors) {
+            errors ||= {};
+            errors = { ...errors, ...startDateErrors };
         }
-        if (!errors) {
-            // Clear any errors on the calculator select.
-            idControl?.setErrors(null);
-            return null;
+        if (this.showEndDatePicker && endDateErrors) {
+            errors ||= {};
+            errors = { ...errors, ...endDateErrors };
         }
-        idControl?.setErrors(errors);
-        idControl?.markAsTouched();
-        idControl?.markAsDirty();
-        // Need to mark the control as touched for the error messages to appear.
-        this.#control.markAsTouched();
-        // Notify the view to display any errors.
+        // Set errors on the calculator select so that they appear beneath it.
+        this.#calculatorIdControl.setErrors(errors);
         this.#changeDetector.markForCheck();
         return errors;
     }
-    registerOnChange(fn) {
-        this.#onChange = fn;
+    // Implemented as part of ControlValueAccessor.
+    // The date range picker always has a value, so if the consumer passes in a
+    // partial value (via `patchValue`) or null, we need to update the host control's
+    // value with the complete value after it's been modified.
+    writeValue(value) {
+        this.#patchValue(value);
+        // Update the host control if it is set to a partial or null value.
+        if (isPartialValue(value)) {
+            this.#hostControl?.setValue(this.#getValue(), {
+                emitEvent: false,
+                onlySelf: true,
+            });
+        }
     }
-    registerOnTouched(fn) {
-        this.#onTouched = fn;
+    isRequired() {
+        return !!(this.required || this.#hostControl?.hasValidator(Validators.required));
     }
-    setDisabledState(disabled) {
-        this.disabled = disabled;
+    onBlur() {
+        this.#notifyTouched?.();
     }
-    #setValue(value, notifyChange = true) {
-        const isNewValue = !this.#dateRangesEqual(this.#value, value);
-        if (isNewValue) {
-            this.#value = value;
-            if (!value || value.calculatorId === undefined) {
-                this.#valueOrDefault = this.#defaultValue;
-            }
-            else {
-                this.#valueOrDefault = value;
-            }
-            if (notifyChange) {
-                this.#onChange(this.#valueOrDefault);
-            }
+    #getCalculator(calculatorId) {
+        const found = this.calculators.find((c) => c.calculatorId === calculatorId);
+        /*safety check: should not happen*/
+        /*istanbul ignore if*/
+        if (!found) {
+            throw new Error(`A date range calculator with ID (${calculatorId}) could not be found.`);
         }
+        return found;
     }
-    #patchValue(value) {
-        const newValue = Object.assign({}, this.#valueOrDefault, value);
-        this.#setValue(newValue);
+    #getDefaultValue(calculator) {
+        return calculator.getValue();
     }
-    #createForm() {
-        this.formGroup = this.#formBuilder.group({
-            calculatorId: new UntypedFormControl(),
-            startDate: new UntypedFormControl(),
-            endDate: new UntypedFormControl(),
-        });
-        if (this.disabled) {
-            this.formGroup.disable();
+    #getValue() {
+        return this.#_value;
+    }
+    #patchValue(partialValue) {
+        this.#setValue(isNullOrUndefined(partialValue)
+            ? null
+            : { ...this.#getValue(), ...partialValue }, { emitEvent: true });
+    }
+    /**
+     * Sets the value to be used by the date range picker form control.
+     */
+    #setValue(value, options) {
+        const oldValue = this.#getValue();
+        const valueOrDefault = !value || isNullOrUndefined(value.calculatorId)
+            ? this.#getDefaultValue(this.calculators[0])
+            : {
+                ...this.#getDefaultValue(this.#getCalculator(value.calculatorId)),
+                ...value,
+            };
+        // Ensure falsy values are set to null.
+        valueOrDefault.endDate = valueOrDefault.endDate || null;
+        valueOrDefault.startDate = valueOrDefault.startDate || null;
+        if (!areDateRangesEqual(oldValue, valueOrDefault)) {
+            this.#_value = valueOrDefault;
+            this.selectedCalculator = this.#getCalculator(valueOrDefault.calculatorId);
+            if (oldValue.calculatorId !== valueOrDefault.calculatorId) {
+                this.#updatePickerVisibility(this.selectedCalculator);
+            }
+            if (options?.emitEvent) {
+                this.formGroup.setValue(valueOrDefault);
+            }
         }
     }
-    #showRelevantFormFields() {
-        const calculator = this.selectedCalculator;
+    #updatePickerVisibility(calculator) {
         let showEndDatePicker = false;
         let showStartDatePicker = false;
-        switch (calculator?.type) {
+        switch (calculator.type) {
             case SkyDateRangeCalculatorType.Before:
                 showEndDatePicker = true;
                 break;
@@ -4386,144 +4399,73 @@ class SkyDateRangePickerComponent {
         this.showStartDatePicker = showStartDatePicker;
         this.#changeDetector.markForCheck();
     }
-    #resetFormGroupValue(value) {
-        this.formGroup?.reset(value || this.#valueOrDefault);
-    }
-    #addEventListeners() {
-        // Watch for selected calculator change.
-        this.#calculatorIdControl?.valueChanges
-            .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
-            .subscribe((value) => {
-            if (value !== this.#valueOrDefault?.calculatorId) {
-                const id = parseInt(value, 10);
-                // if the component is disabled during form creation, null is passed
-                // as the value of the calculator id control
-                // only handle the value changes if the calculator id is a number
-                /* istanbul ignore else */
-                if (!isNaN(id)) {
-                    const calculator = this.#getCalculatorById(id);
-                    const newValue = calculator?.getValue();
-                    this.#setValue(newValue);
-                    this.#resetFormGroupValue(newValue);
-                    this.#showRelevantFormFields();
-                }
-            }
-            this.#control?.updateValueAndValidity({ emitEvent: false });
-        });
-        // Watch for start date value changes.
-        this.#startDateControl?.valueChanges
-            .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
-            .subscribe((startDate) => {
-            this.#patchValue({ startDate });
-        });
-        // Watch for end date value changes.
-        this.#endDateControl?.valueChanges
-            .pipe(distinctUntilChanged(), takeUntil(this.#ngUnsubscribe))
-            .subscribe((endDate) => {
-            this.#patchValue({ endDate });
-        });
-        // Safety check
-        /* istanbul ignore else */
-        if (this.#startDateControl && this.#endDateControl) {
-            // Detect errors from the date inputs and update ng- classes on picker.
-            combineLatest([
-                this.#startDateControl.statusChanges,
-                this.#endDateControl.statusChanges,
-            ])
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe(() => {
-                this.#updateBasedOnControls();
-            });
-        }
-        else if (this.#startDateControl) {
-            this.#startDateControl.statusChanges
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe(() => {
-                this.#updateBasedOnControls();
-            });
-        }
-        else if (this.#endDateControl) {
-            this.#endDateControl.statusChanges
-                .pipe(takeUntil(this.#ngUnsubscribe))
-                .subscribe(() => {
-                this.#updateBasedOnControls();
-            });
-        }
-    }
-    #updateBasedOnControls() {
-        this.#changeDetector.markForCheck();
-        // Wait for initial validation to complete.
-        this.#ngZone.onStable.pipe(first()).subscribe(() => {
-            this.#control?.updateValueAndValidity({ emitEvent: false });
-        });
-    }
-    #updateCalculators() {
-        return this.#dateRangeService
-            .getCalculators(this.calculatorIds)
-            .then((calculators) => {
-            this.calculators = calculators;
-            // Ensure that any previously set value is used to determine the selected calculator
-            this.#updateSelectedCalculator();
-            this.#changeDetector.markForCheck();
-        });
-    }
-    #getCalculatorById(id) {
-        return this.calculators.find((calculator) => {
-            return calculator.calculatorId === id;
-        });
-    }
-    #dateRangesEqual(rangeA, rangeB) {
-        return (!!rangeA && !!rangeB && JSON.stringify(rangeA) === JSON.stringify(rangeB));
-    }
-    #updateSelectedCalculator() {
-        this.selectedCalculator = this.#valueOrDefault
-            ? this.#getCalculatorById(this.#valueOrDefault.calculatorId)
-            : undefined;
-    }
-    /* istanbul ignore next */
-    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
-    #onChange;
-    /* istanbul ignore next */
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    #onTouched;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SkyDateRangeService }, { token: i2$3.UntypedFormBuilder }, { token: i3.SkyAppLocaleProvider }, { token: i0.NgZone }, { token: i3$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", type: SkyDateRangePickerComponent, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: "disabled", label: "label", hintText: "hintText", startDateRequired: "startDateRequired", endDateRequired: "endDateRequired", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", stacked: ["stacked", "stacked", booleanAttribute] }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked", "style.display": "this.display" } }, providers: [
-            SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
-            SKY_DATE_RANGE_PICKER_VALIDATOR,
-        ], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"isReady && formGroup\"\n  class=\"sky-date-range-picker\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker && !showEndDatePicker\n    }\"\n  >\n    <sky-input-box\n      [disabled]=\"disabled\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [labelText]=\"\n        label || ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n      [hintText]=\"hintText\"\n    >\n      <select\n        class=\"sky-form-control\"\n        formControlName=\"calculatorId\"\n        [attr.id]=\"dateRangePickerId + '-select-calculator'\"\n        (blur)=\"onFieldBlur()\"\n      >\n        <option\n          *ngFor=\"let calculator of calculators\"\n          [value]=\"calculator.calculatorId\"\n        >\n          {{ calculator.shortDescription }}\n        </option>\n      </select>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker && !showEndDatePicker\n    }\"\n    [hidden]=\"!showStartDatePicker\"\n  >\n    <sky-input-box [disabled]=\"disabled\">\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-start-date'\"\n        [ngClass]=\"{ 'sky-control-label-required': startDateRequired }\"\n      >\n        {{\n          selectedCalculator?.type\n            | skyDateRangePickerStartDateResourceKey\n            | skyLibResources\n        }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          class=\"sky-form-control\"\n          formControlName=\"startDate\"\n          [attr.aria-label]=\"\n            label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator?.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : label)\n              : (selectedCalculator?.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [attr.id]=\"dateRangePickerId + '-start-date'\"\n          [required]=\"!!startDateRequired\"\n          [dateFormat]=\"dateFormatOrDefault\"\n          (blur)=\"onFieldBlur()\"\n          skyDatepickerInput\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker }\"\n    [hidden]=\"!showEndDatePicker\"\n  >\n    <sky-input-box [disabled]=\"disabled\">\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-end-date'\"\n        [ngClass]=\"{ 'sky-control-label-required': endDateRequired }\"\n      >\n        {{\n          selectedCalculator?.type\n            | skyDateRangePickerEndDateResourceKey\n            | skyLibResources\n        }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          class=\"sky-form-control\"\n          formControlName=\"endDate\"\n          skyDatepickerInput\n          [attr.aria-label]=\"\n            label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator?.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : label)\n              : (selectedCalculator?.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [attr.id]=\"dateRangePickerId + '-end-date'\"\n          [dateFormat]=\"dateFormatOrDefault\"\n          [required]=\"!!endDateRequired\"\n          (blur)=\"onFieldBlur()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-date-range-picker{display:flex}@media (max-width: 768px){.sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}: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-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}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}}: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%}: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:5px}: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:5px}@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%}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "component", type: i2$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.4", type: SkyDateRangePickerComponent, isStandalone: true, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: ["disabled", "disabled", booleanAttribute], endDateRequired: ["endDateRequired", "endDateRequired", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", hintText: "hintText", label: "label", required: ["required", "required", booleanAttribute], stacked: ["stacked", "stacked", booleanAttribute], startDateRequired: ["startDateRequired", "startDateRequired", booleanAttribute] }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked", "style.display": "this.display" } }, providers: [
+            {
+                provide: NG_VALIDATORS,
+                useExisting: SkyDateRangePickerComponent,
+                multi: true,
+            },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: SkyDateRangePickerComponent,
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n  class=\"sky-date-range-picker\"\n  [formGroup]=\"formGroup\"\n  (focusout)=\"onBlur()\"\n>\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker && !showEndDatePicker\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"hasErrors\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        label || ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select\n        formControlName=\"calculatorId\"\n        [required]=\"isRequired()\"\n        (blur)=\"onBlur()\"\n      >\n        <option\n          *ngFor=\"let calculator of calculators\"\n          [value]=\"calculator.calculatorId\"\n        >\n          {{\n            calculator._shortDescriptionResourceKey\n              ? (calculator._shortDescriptionResourceKey | skyLibResources)\n              : calculator.shortDescription\n          }}\n        </option>\n      </select>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper\"\n    [hidden]=\"!showStartDatePicker\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker && !showEndDatePicker\n    }\"\n  >\n    <sky-input-box\n      [errorsScreenReaderOnly]=\"true\"\n      [hasErrors]=\"hasErrors\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker>\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : label)\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"\n            showStartDatePicker && (startDateRequired || isRequired())\n          \"\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\"\n    [hidden]=\"!showEndDatePicker\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker }\"\n  >\n    <sky-input-box\n      [errorsScreenReaderOnly]=\"true\"\n      [hasErrors]=\"hasErrors\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker>\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : label)\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker && (endDateRequired || isRequired())\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-date-range-picker{display:flex}@media (max-width: 768px){.sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}: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-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}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}}: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%}: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:5px}: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:5px}@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%}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange"] }, { 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$2.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText", "errorsScreenReaderOnly"] }, { kind: "directive", type: i2$2.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-date-range-picker', providers: [
-                        SKY_DATE_RANGE_PICKER_VALUE_ACCESSOR,
-                        SKY_DATE_RANGE_PICKER_VALIDATOR,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"isReady && formGroup\"\n  class=\"sky-date-range-picker\"\n  [formGroup]=\"formGroup\"\n>\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker && !showEndDatePicker\n    }\"\n  >\n    <sky-input-box\n      [disabled]=\"disabled\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [labelText]=\"\n        label || ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n      [hintText]=\"hintText\"\n    >\n      <select\n        class=\"sky-form-control\"\n        formControlName=\"calculatorId\"\n        [attr.id]=\"dateRangePickerId + '-select-calculator'\"\n        (blur)=\"onFieldBlur()\"\n      >\n        <option\n          *ngFor=\"let calculator of calculators\"\n          [value]=\"calculator.calculatorId\"\n        >\n          {{ calculator.shortDescription }}\n        </option>\n      </select>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker && !showEndDatePicker\n    }\"\n    [hidden]=\"!showStartDatePicker\"\n  >\n    <sky-input-box [disabled]=\"disabled\">\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-start-date'\"\n        [ngClass]=\"{ 'sky-control-label-required': startDateRequired }\"\n      >\n        {{\n          selectedCalculator?.type\n            | skyDateRangePickerStartDateResourceKey\n            | skyLibResources\n        }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          class=\"sky-form-control\"\n          formControlName=\"startDate\"\n          [attr.aria-label]=\"\n            label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator?.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : label)\n              : (selectedCalculator?.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [attr.id]=\"dateRangePickerId + '-start-date'\"\n          [required]=\"!!startDateRequired\"\n          [dateFormat]=\"dateFormatOrDefault\"\n          (blur)=\"onFieldBlur()\"\n          skyDatepickerInput\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker }\"\n    [hidden]=\"!showEndDatePicker\"\n  >\n    <sky-input-box [disabled]=\"disabled\">\n      <label\n        class=\"sky-control-label\"\n        [attr.for]=\"dateRangePickerId + '-end-date'\"\n        [ngClass]=\"{ 'sky-control-label-required': endDateRequired }\"\n      >\n        {{\n          selectedCalculator?.type\n            | skyDateRangePickerEndDateResourceKey\n            | skyLibResources\n        }}\n      </label>\n\n      <sky-datepicker>\n        <input\n          class=\"sky-form-control\"\n          formControlName=\"endDate\"\n          skyDatepickerInput\n          [attr.aria-label]=\"\n            label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator?.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : label)\n              : (selectedCalculator?.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [attr.id]=\"dateRangePickerId + '-end-date'\"\n          [dateFormat]=\"dateFormatOrDefault\"\n          [required]=\"!!endDateRequired\"\n          (blur)=\"onFieldBlur()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-date-range-picker{display:flex}@media (max-width: 768px){.sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}: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-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}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}}: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%}: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:5px}: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:5px}@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%}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SkyDateRangeService }, { type: i2$3.UntypedFormBuilder }, { type: i3.SkyAppLocaleProvider }, { type: i0.NgZone }, { type: i3$1.SkyThemeService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { calculatorIds: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        SkyDatepickerModule,
+                        SkyDateRangePickerEndDateResourceKeyPipe,
+                        SkyDateRangePickerStartDateResourceKeyPipe,
+                        SkyDatetimeResourcesModule,
+                        SkyInputBoxModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: SkyDateRangePickerComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: SkyDateRangePickerComponent,
+                            multi: true,
+                        },
+                    ], selector: 'sky-date-range-picker', standalone: true, template: "<div\n  class=\"sky-date-range-picker\"\n  [formGroup]=\"formGroup\"\n  (focusout)=\"onBlur()\"\n>\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker && !showEndDatePicker\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"hasErrors\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        label || ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select\n        formControlName=\"calculatorId\"\n        [required]=\"isRequired()\"\n        (blur)=\"onBlur()\"\n      >\n        <option\n          *ngFor=\"let calculator of calculators\"\n          [value]=\"calculator.calculatorId\"\n        >\n          {{\n            calculator._shortDescriptionResourceKey\n              ? (calculator._shortDescriptionResourceKey | skyLibResources)\n              : calculator.shortDescription\n          }}\n        </option>\n      </select>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper\"\n    [hidden]=\"!showStartDatePicker\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        showStartDatePicker && !showEndDatePicker\n    }\"\n  >\n    <sky-input-box\n      [errorsScreenReaderOnly]=\"true\"\n      [hasErrors]=\"hasErrors\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker>\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : label)\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"\n            showStartDatePicker && (startDateRequired || isRequired())\n          \"\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\"\n    [hidden]=\"!showEndDatePicker\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker }\"\n  >\n    <sky-input-box\n      [errorsScreenReaderOnly]=\"true\"\n      [hasErrors]=\"hasErrors\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker>\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : label)\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker && (endDateRequired || isRequired())\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-date-range-picker{display:flex}@media (max-width: 768px){.sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}}: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-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}@media (min-width: 768px){:host .sky-date-range-picker{flex-direction:initial}:host .sky-date-range-picker-form-group{flex-basis:33.3333333333%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:5px}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:5px}}: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%}: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:5px}: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:5px}@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%}:host-context(.sky-theme-modern) .sky-date-range-picker-form-group{padding:0}@media (min-width: 768px){:host-context(.sky-theme-modern) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}.sky-theme-modern .sky-date-range-picker-form-group{padding:0}@media (min-width: 768px){.sky-theme-modern .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { calculatorIds: [{
                 type: Input
             }], dateFormat: [{
                 type: Input
             }], disabled: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], hintText: [{
-                type: Input
-            }], startDateRequired: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], endDateRequired: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], helpPopoverContent: [{
                 type: Input
             }], helpPopoverTitle: [{
                 type: Input
+            }], hintText: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], stacked: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }, {
                 type: HostBinding,
                 args: ['class.sky-margin-stacked-lg']
+            }], startDateRequired: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], display: [{
                 type: HostBinding,
                 args: ['style.display']
@@ -4531,41 +4473,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
 
 class SkyDateRangePickerModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerModule, declarations: [SkyDateRangePickerComponent,
-            SkyDateRangePickerEndDateResourceKeyPipe,
-            SkyDateRangePickerStartDateResourceKeyPipe], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            SkyDatepickerModule,
-            SkyDatetimeResourcesModule,
-            SkyIdModule,
-            SkyInputBoxModule], exports: [SkyDateRangePickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            SkyDatepickerModule,
-            SkyDatetimeResourcesModule,
-            SkyIdModule,
-            SkyInputBoxModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerModule, imports: [SkyDateRangePickerComponent], exports: [SkyDateRangePickerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerModule, imports: [SkyDateRangePickerComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyDateRangePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SkyDateRangePickerComponent,
-                        SkyDateRangePickerEndDateResourceKeyPipe,
-                        SkyDateRangePickerStartDateResourceKeyPipe,
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        SkyDatepickerModule,
-                        SkyDatetimeResourcesModule,
-                        SkyIdModule,
-                        SkyInputBoxModule,
-                    ],
                     exports: [SkyDateRangePickerComponent],
+                    imports: [SkyDateRangePickerComponent],
                 }]
         }] });
 
@@ -4923,15 +4838,15 @@ class SkyTimepickerComponent {
         /* istanbul ignore next */
         this.#overlayKeyupListener?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1.SkyCoreAdapterService }, { token: i1.SkyOverlayService }, { token: i2$2.SkyInputBoxHostService, optional: true }, { token: i3$1.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", 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  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\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      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      #triggerButtonRef\n    >\n      <sky-icon icon=\"clock\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\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    #timepickerRef\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours\">\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        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          <li *ngFor=\"let minute of minutes\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\" 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    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol li button.sky-btn-active:hover,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { kind: "pipe", type: i3.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: SkyTimepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$2.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", 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  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\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      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      #triggerButtonRef\n    >\n      <sky-icon icon=\"clock\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\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    #timepickerRef\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours\">\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        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          <li *ngFor=\"let minute of minutes\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\" 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    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol li button.sky-btn-active:hover,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ4, selector: "sky-icon", inputs: ["icon", "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: "17.3.4", ngImport: i0, type: SkyTimepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sky-timepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sky-timepicker\">\n  <ng-container *ngIf=\"!inputBoxHostService\">\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\"></ng-container>\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\"></ng-container>\n    </div>\n  </ng-container>\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      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      #triggerButtonRef\n    >\n      <sky-icon icon=\"clock\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #timepickerTemplateRef>\n  <div\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    #timepickerRef\n  >\n    <div class=\"sky-timepicker-content\">\n      <section\n        class=\"sky-timepicker-column\"\n        [ngClass]=\"{ 'sky-timepicker-24hour': is8601 }\"\n      >\n        <ol>\n          <li *ngFor=\"let hour of hours\">\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        </ol>\n      </section>\n      <section class=\"sky-timepicker-column\">\n        <ol>\n          <li *ngFor=\"let minute of minutes\">\n            <button\n              name=\"minute\"\n              type=\"button\"\n              [ngClass]=\"{ 'sky-btn-active': selectedMinute === minute }\"\n              (click)=\"setTime($event)\"\n            >\n              {{ '00'.substring(0, 2 - minute.toString().length) + minute }}\n            </button>\n          </li>\n        </ol>\n      </section>\n      <section *ngIf=\"!is8601\" 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    </div>\n    <div class=\"sky-timepicker-footer\">\n      <section class=\"sky-timepicker-column\">\n        <button\n          class=\"sky-btn sky-btn-primary\"\n          type=\"button\"\n          (click)=\"onCloseButtonClick()\"\n        >\n          {{ 'skyux_timepicker_close' | skyLibResources }}\n        </button>\n      </section>\n    </div>\n  </div>\n</ng-template>\n", styles: [".sky-timepicker-container{position:fixed;font-size:15px;padding:5px;background-color:#eeeeef;border-radius:5px}.sky-timepicker-container :last-child ol{display:flex;flex-direction:column;height:100%}.sky-timepicker-container :last-child ol li{border-bottom:1px solid #e2e3e4;flex:1}.sky-timepicker-column{margin:5px}.sky-timepicker-column ol{border-top:1px solid #e2e3e4;border-right:1px solid #e2e3e4;border-bottom:1px solid #e2e3e4;border-left:1px solid #e2e3e4;column-gap:1px;columns:2;list-style-type:none;margin:0;padding:0}.sky-timepicker-column ol li{text-align:center;cursor:pointer;margin:0}.sky-timepicker-column ol li button{cursor:pointer}.sky-timepicker-column ol li button:focus{outline:thin dotted;outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}.sky-timepicker-column ol li button:hover{background-color:#eeeeef}.sky-timepicker-column ol li button:active{background-color:#e2e3e4}.sky-timepicker-column ol li button.sky-btn-active:hover{background-color:#c1e8fb}.sky-timepicker-column ol .sky-btn-active{background-color:#c1e8fb;box-shadow:inset 0 0 0 2px #00b4f1;border-radius:3px}.sky-timepicker-column.sky-timepicker-24hour ol{columns:4}.sky-timepicker-column.sky-timepicker-24hour ol li{border-bottom-width:0}.sky-timepicker-content{display:flex}.sky-timepicker-content button{background-color:#fff;border-width:0;padding:5px 15px;width:100%;height:100%}.sky-timepicker-footer{margin:0;padding:0 5px}.sky-timepicker-footer .sky-timepicker-column{margin-left:0;margin-right:0;width:100%}.sky-timepicker-hidden{visibility:hidden}.sky-timepicker-clock-icon-modern,.sky-theme-modern .sky-timepicker-clock-icon-default{display:none}.sky-theme-modern .sky-timepicker-clock-icon-modern{display:inline}.sky-theme-modern .sky-timepicker-container{background-color:#fff;border:solid 1px #cdcfd2;border-radius:6px;font-size:16px}.sky-theme-modern .sky-timepicker-container:focus-within{border:solid 2px #1870B8;padding:4px}.sky-theme-modern .sky-timepicker-container:last-child ol li{border-bottom:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-default{border-width:1px;border-color:transparent;padding:4px 6px;outline:none}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover:not(.sky-btn-active){background-color:transparent}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:hover{box-shadow:inset 0 0 0 1px #00b4f1;border-radius:6px}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:active,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol button:focus{outline:none;border-radius:6px;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol li button.sky-btn-active:hover,.sky-theme-modern .sky-timepicker-container .sky-timepicker-column ol .sky-btn-active{background-color:var(--sky-background-color-input-selected)}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container{color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-container:not(:focus-within){border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol{border-color:#686c73}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol button{background-color:transparent;color:#fbfcfe}.sky-theme-modern.sky-theme-mode-dark .sky-timepicker-column ol .sky-btn-active{background-color:#009cd1}\n"] }]
-        }], ctorParameters: () => [{ type: i1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1.SkyCoreAdapterService }, { type: i1.SkyOverlayService }, { type: i2$2.SkyInputBoxHostService, decorators: [{
+        }], ctorParameters: () => [{ type: i1$1.SkyAffixService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: i1$1.SkyOverlayService }, { type: i2$2.SkyInputBoxHostService, decorators: [{
                     type: Optional
-                }] }, { type: i3$1.SkyThemeService, decorators: [{
+                }] }, { type: i3.SkyThemeService, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
                     type: Optional