@skyux/datetime 11.16.0 → 11.18.0

package/fesm2022/skyux-datetime.mjs

@@ -1,16 +1,17 @@
 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, ChangeDetectorRef, Injector, booleanAttribute, HostBinding } from '@angular/core';
+import { NgModule, inject, Injectable, Pipe, EventEmitter, Component, ViewEncapsulation, Input, Output, ChangeDetectionStrategy, ViewChild, output, EnvironmentInjector, ElementRef, TemplateRef, Optional, Inject, forwardRef, Directive, HostListener, DestroyRef, Injector, signal, computed, booleanAttribute, HostBinding } from '@angular/core';
 import * 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, distinctUntilChanged as distinctUntilChanged$1, merge, filter } from 'rxjs';
+import { Subject, takeUntil as takeUntil$1, fromEvent, filter, map, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import moment from 'moment';
 import * as i2$3 from '@skyux/forms';
 import { SkyFormErrorModule, SKY_FORM_ERRORS_ENABLED, SkyInputBoxModule, SkyFormErrorsModule } from '@skyux/forms';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i2$4 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, FormBuilder, FormControl, NgControl, TouchedChangeEvent, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, FormControl, FormBuilder, NgControl, StatusChangeEvent, TouchedChangeEvent, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@skyux/core';
 import { SkyLiveAnnouncerService, SkyAppFormat, SkyAffixAutoFitContext, SKY_STACKING_CONTEXT, SkyAffixModule, SkyLogService } from '@skyux/core';
 import * as i4$1 from '@angular/cdk/a11y';
@@ -1602,11 +1603,11 @@ class SkyDayPickerComponent {
         return undefined;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{ label.abbr }}</b>\n          </small>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track row) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDayPickerComponent, selector: "sky-daypicker", inputs: { customDates: "customDates", isWaiting: "isWaiting" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange" }, ngImport: i0, template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label.full) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{ label.abbr }}</b>\n          </small>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track $index) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "component", type: i2$2.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "component", type: SkyDayPickerCellComponent, selector: "sky-daypicker-cell", inputs: ["activeDateHasChanged", "date"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDayPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-daypicker', template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{ label.abbr }}</b>\n          </small>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track row) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'sky-daypicker', template: "<table\n  class=\"sky-daypicker-table\"\n  role=\"grid\"\n  [attr.aria-labelledby]=\"datepicker.datepickerId + '-title'\"\n>\n  <thead>\n    <tr>\n      @for (label of labels; track label.full) {\n        <th scope=\"col\" class=\"sky-datepicker-center sky-datepicker-weekdays\">\n          <small [attr.aria-label]=\"label.full\">\n            <b>{{ label.abbr }}</b>\n          </small>\n        </th>\n      }\n    </tr>\n  </thead>\n  <tbody>\n    <!-- Wait indicator for async custom date stream -->\n    <sky-wait [isWaiting]=\"isWaiting\" />\n    @for (row of rows; track $index) {\n      <tr role=\"row\">\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <sky-daypicker-cell\n              [activeDateHasChanged]=\"activeDateHasChanged\"\n              [date]=\"date\"\n            />\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }], propDecorators: { customDates: [{
                 type: Input
             }], calendarDateRangeChange: [{
@@ -1682,11 +1683,11 @@ class SkyMonthPickerComponent {
         this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatMonthLabel);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMonthPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0, template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track row) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyMonthPickerComponent, selector: "sky-monthpicker", ngImport: i0, template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track $index) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyMonthPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-monthpicker', template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track row) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'sky-monthpicker', template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track $index) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"text-center\" role=\"gridcell\" [id]=\"date.uid\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatMonthLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }] });
 
 /**
@@ -1763,11 +1764,11 @@ class SkyYearPickerComponent {
         this.datepicker.announceDate(this.datepicker.activeDate, this.datepicker.formatYearLabel);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyYearPickerComponent, deps: [{ token: SkyDatepickerCalendarInnerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0, template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track row) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-row\" role=\"gridcell\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyYearPickerComponent, selector: "sky-yearpicker", ngImport: i0, template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track $index) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-row\" role=\"gridcell\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SkyDatepickerCalendarLabelPipe, name: "skyDatepickerCalendarLabel" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyYearPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sky-yearpicker', template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track row) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-row\" role=\"gridcell\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
+            args: [{ selector: 'sky-yearpicker', template: "<table role=\"grid\">\n  <tbody>\n    @for (row of rows; track $index) {\n      <tr>\n        @for (date of row; track date.uid) {\n          <td class=\"sky-datepicker-row\" role=\"gridcell\">\n            <button\n              type=\"button\"\n              class=\"sky-btn sky-btn-default sky-datepicker-btn-date\"\n              tabindex=\"-1\"\n              [ngClass]=\"{\n                'sky-datepicker-btn-selected': date.selected,\n                'sky-btn-disabled': date.disabled,\n                'sky-btn-active': datepicker.isActive(date)\n              }\"\n              [attr.aria-label]=\"\n                date.date\n                  | skyDatepickerCalendarLabel: datepicker.formatYearLabel\n              \"\n              [disabled]=\"date.disabled\"\n              (click)=\"datepicker.selectCalendar($event, date.date)\"\n            >\n              <span [ngClass]=\"{ 'sky-datepicker-current': date.current }\">{{\n                date.label\n              }}</span>\n            </button>\n          </td>\n        }\n      </tr>\n    }\n  </tbody>\n</table>\n" }]
         }], ctorParameters: () => [{ type: SkyDatepickerCalendarInnerComponent }] });
 
 /**
@@ -1951,6 +1952,11 @@ class SkyDatepickerComponent {
          * @internal
          */
         this.openChange = new EventEmitter();
+        /**
+         * Fires when a user selects a date from the calendar.
+         * @internal
+         */
+        this.calendarDateChange = output();
         this.dateChange = new EventEmitter();
         this.isDaypickerWaiting = false;
         this.isOpen = false;
@@ -2008,6 +2014,7 @@ class SkyDatepickerComponent {
         });
     }
     onSelectedDateChange(value) {
+        this.calendarDateChange.emit(value);
         this.dateChange.emit(value);
         this.#closePicker();
     }
@@ -2172,7 +2179,7 @@ class SkyDatepickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerComponent, deps: [{ token: i1$1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i1$1.SkyOverlayService }, { token: i2$3.SkyInputBoxHostService, optional: true }, { token: i3.SkyThemeService, optional: true }, { token: SKY_STACKING_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", dateFormatChange: "dateFormatChange", openChange: "openChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    #calendarRef\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n  >\n    <sky-datepicker-calendar\n      cdkTrapFocus\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startAtDate]=\"startAtDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "startAtDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: { pickerClass: "pickerClass" }, outputs: { calendarDateRangeChange: "calendarDateRangeChange", dateFormatChange: "dateFormatChange", openChange: "openChange", calendarDateChange: "calendarDateChange" }, viewQueries: [{ propertyName: "calendar", first: true, predicate: SkyDatepickerCalendarComponent, descendants: true }, { propertyName: "calendarRef", first: true, predicate: ["calendarRef"], descendants: true, read: ElementRef }, { propertyName: "calendarTemplateRef", first: true, predicate: ["calendarTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "triggerButtonRef", first: true, predicate: ["triggerButtonRef"], descendants: true, read: ElementRef }, { propertyName: "inputTemplateRef", first: true, predicate: ["inputTemplateRef"], descendants: true, read: TemplateRef, static: true }, { propertyName: "triggerButtonTemplateRef", first: true, predicate: ["triggerButtonTemplateRef"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"sky-datepicker\">\n  @if (!inputBoxHostService) {\n    <div class=\"sky-input-group\">\n      <ng-container *ngTemplateOutlet=\"inputTemplateRef\" />\n      <ng-container *ngTemplateOutlet=\"triggerButtonTemplateRef\" />\n    </div>\n  }\n</div>\n\n<ng-template #inputTemplateRef>\n  <ng-content />\n</ng-template>\n\n<ng-template #triggerButtonTemplateRef>\n  <div class=\"sky-input-group-btn\">\n    <button\n      #triggerButtonRef\n      aria-haspopup=\"dialog\"\n      class=\"sky-btn sky-btn-default sky-input-group-datepicker-btn\"\n      type=\"button\"\n      [attr.aria-controls]=\"isOpen ? calendarId : null\"\n      [attr.aria-expanded]=\"isOpen\"\n      [attr.aria-label]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [attr.id]=\"triggerButtonId\"\n      [attr.title]=\"\n        inputBoxHostService?.labelText\n          ? ('skyux_datepicker_trigger_button_label_context'\n            | skyLibResources: inputBoxHostService?.labelText)\n          : ('skyux_datepicker_trigger_button_label' | skyLibResources)\n      \"\n      [disabled]=\"disabled\"\n      (click)=\"onTriggerButtonClick()\"\n    >\n      <sky-icon icon=\"calendar\" size=\"lg\" />\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #calendarTemplateRef>\n  <div\n    #calendarRef\n    class=\"sky-datepicker-calendar-container sky-shadow sky-elevation-4\"\n    role=\"dialog\"\n    [attr.aria-labelledby]=\"triggerButtonId\"\n    [attr.id]=\"calendarId\"\n    [class.sky-datepicker-hidden]=\"!isVisible\"\n  >\n    <sky-datepicker-calendar\n      cdkTrapFocus\n      [customDates]=\"customDates\"\n      [isDaypickerWaiting]=\"isDaypickerWaiting\"\n      [maxDate]=\"maxDate\"\n      [minDate]=\"minDate\"\n      [startAtDate]=\"startAtDate\"\n      [startingDay]=\"startingDay\"\n      (calendarDateRangeChange)=\"onCalendarDateRangeChange($event)\"\n      (calendarModeChange)=\"onCalendarModeChange()\"\n      (selectedDateChange)=\"onSelectedDateChange($event)\"\n    />\n  </div>\n</ng-template>\n", styles: [".sky-datepicker-calendar-container{position:fixed;border-radius:5px}.sky-datepicker-hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i4$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant"] }, { kind: "component", type: SkyDatepickerCalendarComponent, selector: "sky-datepicker-calendar", inputs: ["customDates", "isDaypickerWaiting", "minDate", "maxDate", "startAtDate", "selectedDate", "startingDay"], outputs: ["calendarDateRangeChange", "calendarModeChange", "selectedDateChange"] }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDatepickerComponent, decorators: [{
             type: Component,
@@ -4076,6 +4083,58 @@ function isPartialValue(value) {
         !('startDate' in value));
 }
 class SkyDateRangePickerComponent {
+    constructor() {
+        this.#dateRangeSvc = inject(SkyDateRangeService);
+        this.#destroyRef = inject(DestroyRef);
+        this.#injector = inject(Injector);
+        this.#logger = inject(SkyLogService);
+        /**
+         * 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.
+         */
+        this.stacked = false;
+        this.calculators = this.#dateRangeSvc.calculators;
+        this.selectedCalculator = this.calculators[0];
+        this.showEndDatePicker = signal(false);
+        this.showStartDatePicker = signal(false);
+        this.#calculatorIdControl = new FormControl(this.#getValue().calculatorId, { nonNullable: true });
+        this.#calculatorIdInvalid = this.#createStatusChangeSignal(this.#calculatorIdControl);
+        this.#calculatorIdTouched = this.#createTouchedChangeSignal(this.#calculatorIdControl);
+        this.#endDateControl = new FormControl(this.#getValue().endDate);
+        this.#endDateInvalid = this.#createStatusChangeSignal(this.#endDateControl);
+        this.#endDateTouched = this.#createTouchedChangeSignal(this.#endDateControl);
+        this.#startDateControl = new FormControl(this.#getValue().startDate);
+        this.#startDateInvalid = this.#createStatusChangeSignal(this.#startDateControl);
+        this.#startDateTouched = this.#createTouchedChangeSignal(this.#startDateControl);
+        this.formGroup = inject(FormBuilder).group({
+            calculatorId: this.#calculatorIdControl,
+            startDate: this.#startDateControl,
+            endDate: this.#endDateControl,
+        });
+        this.calculatorIdHasErrors = computed(() => {
+            const touched = this.#calculatorIdTouched();
+            const invalid = this.#calculatorIdInvalid();
+            return touched && invalid;
+        });
+        this.endDateHasErrors = computed(() => {
+            const calculatorIdHasErrors = this.calculatorIdHasErrors();
+            const touched = this.#endDateTouched();
+            const invalid = this.#endDateInvalid();
+            return calculatorIdHasErrors || (touched && invalid);
+        });
+        this.startDateHasErrors = computed(() => {
+            const calculatorIdHasErrors = this.calculatorIdHasErrors();
+            const touched = this.#startDateTouched();
+            const invalid = this.#startDateInvalid();
+            return calculatorIdHasErrors || (touched && invalid);
+        });
+        this.#_calculatorIds = SKY_DEFAULT_CALCULATOR_IDS;
+        this.#_value = this.selectedCalculator.getValue();
+    }
+    #dateRangeSvc;
+    #destroyRef;
+    #injector;
+    #logger;
     /**
      * 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.
@@ -4088,7 +4147,7 @@ class SkyDateRangePickerComponent {
         // 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 });
+            this.#setValue({ calculatorId: this.calculatorIds[0] });
         }
     }
     get calculatorIds() {
@@ -4125,53 +4184,20 @@ class SkyDateRangePickerComponent {
     get label() {
         return this.#_label;
     }
-    get #calculatorIdControl() {
-        return this.formGroup.get('calculatorId');
-    }
-    get #endDateControl() {
-        return this.formGroup.get('endDate');
-    }
-    get #startDateControl() {
-        return this.formGroup.get('startDate');
-    }
+    #notifyChange;
+    #notifyTouched;
+    #calculatorIdControl;
+    #calculatorIdInvalid;
+    #calculatorIdTouched;
+    #endDateControl;
+    #endDateInvalid;
+    #endDateTouched;
+    #startDateControl;
+    #startDateInvalid;
+    #startDateTouched;
     #_calculatorIds;
     #_label;
     #_value;
-    #ngUnsubscribe;
-    #notifyChange;
-    #notifyTouched;
-    #changeDetector;
-    #dateRangeSvc;
-    #injector;
-    #logger;
-    constructor() {
-        /**
-         * 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.
-         */
-        this.stacked = false;
-        this.calculatorIdHasErrors = false;
-        this.calculators = [];
-        this.endDateHasErrors = false;
-        this.showEndDatePicker = false;
-        this.showStartDatePicker = false;
-        this.startDateHasErrors = false;
-        this.#_calculatorIds = SKY_DEFAULT_CALCULATOR_IDS;
-        this.#ngUnsubscribe = new Subject();
-        this.#changeDetector = inject(ChangeDetectorRef);
-        this.#dateRangeSvc = inject(SkyDateRangeService);
-        this.#injector = inject(Injector);
-        this.#logger = inject(SkyLogService);
-        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),
-        });
-    }
     ngAfterViewInit() {
         this.hostControl = this.#injector.get(NgControl, null, {
             optional: true,
@@ -4184,88 +4210,25 @@ class SkyDateRangePickerComponent {
             setTimeout(() => {
                 this.hostControl?.setValue(this.#getValue(), {
                     emitEvent: false,
-                    onlySelf: true,
                 });
             });
         }
-        // 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;
-                    // Reset the start and end date values if the calculator ID changes.
-                    if (value.calculatorId !== this.#getValue().calculatorId) {
-                        delete value.endDate;
-                        delete value.startDate;
-                    }
-                }
-                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))
+        this.formGroup.events
+            .pipe(filter((evt) => evt instanceof StatusChangeEvent), map((evt) => evt.status), distinctUntilChanged$1(), takeUntilDestroyed(this.#destroyRef))
             .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.hostControl?.updateValueAndValidity({
+                emitEvent: false,
+                onlySelf: true,
             });
         });
+        // Mark all fields as touched if the host control is touched.
         this.hostControl?.events
-            .pipe(filter((event) => event instanceof TouchedChangeEvent), takeUntil$1(this.#ngUnsubscribe))
+            .pipe(filter((evt) => evt instanceof TouchedChangeEvent), map((evt) => evt.touched), distinctUntilChanged$1(), takeUntilDestroyed(this.#destroyRef))
             .subscribe(() => {
             this.formGroup.markAllAsTouched();
         });
-        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;
-        if (control) {
-            this.startDateHasErrors =
-                this.#controlHasErrors(this.#startDateControl) ||
-                    this.#controlHasErrors(this.#calculatorIdControl);
-            this.endDateHasErrors =
-                this.#controlHasErrors(this.#endDateControl) ||
-                    this.#controlHasErrors(this.#calculatorIdControl);
-            this.calculatorIdHasErrors = this.#controlHasErrors(this.#calculatorIdControl);
-            this.#changeDetector.markForCheck();
-        }
-    }
-    #controlHasErrors(control) {
-        return !!control.errors && (control.touched || control.dirty);
-    }
-    ngOnDestroy() {
-        this.#ngUnsubscribe.next();
-        this.#ngUnsubscribe.complete();
     }
     // Implemented as part of ControlValueAccessor.
     registerOnChange(fn) {
@@ -4295,15 +4258,14 @@ class SkyDateRangePickerComponent {
         }
         // Set calculator errors on the select so that they appear beneath it.
         this.#calculatorIdControl.setErrors(errors);
-        if (this.showStartDatePicker && startDateErrors) {
+        if (this.showStartDatePicker() && startDateErrors) {
             errors ||= {};
             errors = { ...errors, ...startDateErrors };
         }
-        if (this.showEndDatePicker && endDateErrors) {
+        if (this.showEndDatePicker() && endDateErrors) {
             errors ||= {};
             errors = { ...errors, ...endDateErrors };
         }
-        this.#changeDetector.markForCheck();
         return errors;
     }
     // Implemented as part of ControlValueAccessor.
@@ -4323,36 +4285,64 @@ class SkyDateRangePickerComponent {
     onBlur() {
         this.#notifyTouched?.();
     }
+    /**
+     * Fires when a user changes the selected calculator ID.
+     */
+    onCalculatorIdChange() {
+        // Reset the value when the calculator ID changes.
+        this.#setValue({ calculatorId: +this.#calculatorIdControl.value });
+        this.onDateChange();
+    }
+    /**
+     * Fires when a user interacts with a date range picker.
+     */
+    onDateChange() {
+        // Wait until the form control is updated before retrieving its value.
+        setTimeout(() => {
+            this.#notifyChange?.(this.formGroup.getRawValue());
+        });
+    }
     #getCalculator(calculatorId) {
         const found = this.calculators.find((c) => c.calculatorId === calculatorId);
-        /*safety check: should not happen*/
-        /*istanbul ignore if*/
+        /*istanbul ignore if: safety check*/
         if (!found) {
             throw new Error(`A date range calculator with ID (${calculatorId}) could not be found.`);
         }
         return found;
     }
-    #getDefaultValue(calculator) {
-        return calculator.getValue();
-    }
     #getValue() {
-        return this.#_value;
+        // Important! Return a clone to avoid changing the properties by reference.
+        return { ...this.#_value };
     }
     #patchValue(partialValue) {
-        this.#setValue(isNullOrUndefined(partialValue)
-            ? null
-            : { ...this.#getValue(), ...partialValue }, { emitEvent: true });
+        if (isNullOrUndefined(partialValue)) {
+            this.#setValue(null);
+            return;
+        }
+        const oldValue = this.#getValue();
+        // If the new ID is distinct, erase the old start and end dates because
+        // they're no longer applicable.
+        if (!isNullOrUndefined(partialValue.calculatorId) &&
+            oldValue.calculatorId !== partialValue.calculatorId) {
+            delete oldValue.endDate;
+            delete oldValue.startDate;
+        }
+        const value = {
+            ...oldValue,
+            ...partialValue,
+        };
+        this.#setValue(value);
     }
     /**
      * Sets the value to be used by the date range picker form control.
      */
-    #setValue(value, options) {
+    #setValue(value) {
         const oldValue = this.#getValue();
         const isValueEmpty = !value || isNullOrUndefined(value.calculatorId);
         const valueOrDefault = isValueEmpty
-            ? this.#getDefaultValue(this.calculators[0])
+            ? this.calculators[0].getValue()
             : {
-                ...this.#getDefaultValue(this.#getCalculator(value.calculatorId)),
+                ...this.#getCalculator(value.calculatorId).getValue(),
                 ...value,
             };
         // Ensure falsy values are set to null.
@@ -4360,13 +4350,11 @@ class SkyDateRangePickerComponent {
         valueOrDefault.startDate = valueOrDefault.startDate || null;
         if (!areDateRangesEqual(oldValue, valueOrDefault)) {
             this.#_value = valueOrDefault;
-            this.selectedCalculator = this.#getCalculator(valueOrDefault.calculatorId);
             if (oldValue.calculatorId !== valueOrDefault.calculatorId) {
+                this.selectedCalculator = this.#getCalculator(valueOrDefault.calculatorId);
                 this.#updatePickerVisibility(this.selectedCalculator);
             }
-            if (options?.emitEvent) {
-                this.formGroup.patchValue(valueOrDefault);
-            }
+            this.formGroup.patchValue(valueOrDefault);
         }
     }
     #updatePickerVisibility(calculator) {
@@ -4386,9 +4374,14 @@ class SkyDateRangePickerComponent {
             default:
                 break;
         }
-        this.showEndDatePicker = showEndDatePicker;
-        this.showStartDatePicker = showStartDatePicker;
-        this.#changeDetector.markForCheck();
+        this.showEndDatePicker.set(showEndDatePicker);
+        this.showStartDatePicker.set(showStartDatePicker);
+    }
+    #createStatusChangeSignal(control) {
+        return toSignal(control.events.pipe(filter((evt) => evt instanceof StatusChangeEvent), map((evt) => evt.status === 'INVALID'), takeUntilDestroyed(this.#destroyRef)));
+    }
+    #createTouchedChangeSignal(control) {
+        return toSignal(control.events.pipe(filter((evt) => evt instanceof TouchedChangeEvent), map((evt) => evt.touched), takeUntilDestroyed(this.#destroyRef)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.8", type: SkyDateRangePickerComponent, isStandalone: true, selector: "sky-date-range-picker", inputs: { calculatorIds: "calculatorIds", dateFormat: "dateFormat", disabled: ["disabled", "disabled", booleanAttribute], helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", hintText: "hintText", label: "label", labelText: "labelText", stacked: ["stacked", "stacked", booleanAttribute], helpKey: "helpKey" }, host: { properties: { "class.sky-margin-stacked-lg": "this.stacked" } }, providers: [
@@ -4403,7 +4396,7 @@ class SkyDateRangePickerComponent {
                 multi: true,
             },
             { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-        ], ngImport: i0, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker && !showEndDatePicker\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"calculatorIdHasErrors\"\n      [helpKey]=\"helpKey\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        labelText ||\n        label ||\n        ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select formControlName=\"calculatorId\" (blur)=\"onBlur()\">\n        @for (calculator of calculators; track calculator) {\n          <option [value]=\"calculator.calculatorId\">\n            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          [errorName]=\"'endDateBeforeStartDate'\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <ng-content select=\"sky-form-error\" />\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      [hasErrors]=\"startDateHasErrors\"\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            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker\"\n        />\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      [hasErrors]=\"endDateHasErrors\"\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            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}@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 .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0}}: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}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0}@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}:host-context(.sky-theme-modern) :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .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}.sky-theme-modern :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}@media (min-width: 768px){.sky-theme-modern :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-lg) .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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], ngImport: i0, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"calculatorIdHasErrors()\"\n      [helpKey]=\"helpKey\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        labelText ||\n        label ||\n        ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select\n        formControlName=\"calculatorId\"\n        (blur)=\"onBlur()\"\n        (change)=\"onCalculatorIdChange()\"\n      >\n        @for (calculator of calculators; track calculator.calculatorId) {\n          <option [value]=\"calculator.calculatorId\">\n            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          [errorName]=\"'endDateBeforeStartDate'\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <ng-content select=\"sky-form-error\" />\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      [hasErrors]=\"startDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper\"\n    [hidden]=\"!showEndDatePicker()\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"endDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}@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 .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0}}: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}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0}@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}:host-context(.sky-theme-modern) :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .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}.sky-theme-modern :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}@media (min-width: 768px){.sky-theme-modern :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-lg) .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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SkyDatepickerModule }, { kind: "component", type: SkyDatepickerComponent, selector: "sky-datepicker", inputs: ["pickerClass"], outputs: ["calendarDateRangeChange", "dateFormatChange", "openChange", "calendarDateChange"] }, { kind: "directive", type: SkyDatepickerInputDirective, selector: "[skyDatepickerInput]", inputs: ["dateFormat", "disabled", "maxDate", "minDate", "startAtDate", "skyDatepickerInput", "skyDatepickerNoValidate", "startingDay", "strict"] }, { kind: "pipe", type: SkyDateRangePickerEndDateResourceKeyPipe, name: "skyDateRangePickerEndDateResourceKey" }, { kind: "pipe", type: SkyDateRangePickerStartDateResourceKeyPipe, name: "skyDateRangePickerStartDateResourceKey" }, { kind: "ngmodule", type: SkyDatetimeResourcesModule }, { kind: "pipe", type: i1.SkyLibResourcesPipe, name: "skyLibResources" }, { kind: "ngmodule", type: SkyInputBoxModule }, { kind: "component", type: i2$3.λ10, selector: "sky-input-box", inputs: ["hasErrors", "disabled", "labelText", "characterLimit", "stacked", "helpPopoverTitle", "helpPopoverContent", "helpKey", "hintText"] }, { kind: "directive", type: i2$3.λ20, selector: "input:not([skyId]):not(.sky-form-control),select:not([skyId]):not(.sky-form-control),textarea:not([skyId]):not(.sky-form-control)", inputs: ["autocomplete"] }, { kind: "component", type: i2$3.λ22, selector: "sky-form-error", inputs: ["errorName", "errorText"] }, { kind: "ngmodule", type: SkyFormErrorsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: SkyDateRangePickerComponent, decorators: [{
             type: Component,
@@ -4429,8 +4422,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImpor
                             multi: true,
                         },
                         { provide: SKY_FORM_ERRORS_ENABLED, useValue: true },
-                    ], selector: 'sky-date-range-picker', standalone: true, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker && !showEndDatePicker\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"calculatorIdHasErrors\"\n      [helpKey]=\"helpKey\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        labelText ||\n        label ||\n        ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select formControlName=\"calculatorId\" (blur)=\"onBlur()\">\n        @for (calculator of calculators; track calculator) {\n          <option [value]=\"calculator.calculatorId\">\n            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          [errorName]=\"'endDateBeforeStartDate'\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <ng-content select=\"sky-form-error\" />\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      [hasErrors]=\"startDateHasErrors\"\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            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker\"\n        />\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      [hasErrors]=\"endDateHasErrors\"\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            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}@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 .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0}}: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}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0}@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}:host-context(.sky-theme-modern) :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .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}.sky-theme-modern :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}@media (min-width: 768px){.sky-theme-modern :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { calculatorIds: [{
+                    ], selector: 'sky-date-range-picker', standalone: true, template: "<div class=\"sky-date-range-picker\" [formGroup]=\"formGroup\">\n  <div\n    class=\"sky-date-range-picker-form-group\"\n    [ngClass]=\"{\n      'sky-date-range-picker-last-input':\n        !showStartDatePicker() && !showEndDatePicker()\n    }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"calculatorIdHasErrors()\"\n      [helpKey]=\"helpKey\"\n      [helpPopoverContent]=\"helpPopoverContent\"\n      [helpPopoverTitle]=\"helpPopoverTitle\"\n      [hintText]=\"hintText\"\n      [labelText]=\"\n        labelText ||\n        label ||\n        ('skyux_date_range_picker_default_label' | skyLibResources)\n      \"\n    >\n      <select\n        formControlName=\"calculatorId\"\n        (blur)=\"onBlur()\"\n        (change)=\"onCalculatorIdChange()\"\n      >\n        @for (calculator of calculators; track calculator.calculatorId) {\n          <option [value]=\"calculator.calculatorId\">\n            {{\n              calculator._shortDescriptionResourceKey\n                ? (calculator._shortDescriptionResourceKey | skyLibResources)\n                : calculator.shortDescription\n            }}\n          </option>\n        }\n      </select>\n      @if (\n        hostControl?.errors?.['skyDateRange']?.errors?.[\n          'endDateBeforeStartDate'\n        ] && labelText\n      ) {\n        <sky-form-error\n          [errorName]=\"'endDateBeforeStartDate'\"\n          [errorText]=\"\n            'skyux_date_range_picker_end_date_before_start_date_error_label_text'\n              | skyLibResources\n          \"\n        />\n      }\n      <ng-content select=\"sky-form-error\" />\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      [hasErrors]=\"startDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerStartDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"startDate\"\n          name=\"startDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerStartDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerStartDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showStartDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n  <div\n    class=\"sky-date-range-picker-form-group sky-date-range-datepicker-wrapper\"\n    [hidden]=\"!showEndDatePicker()\"\n    [ngClass]=\"{ 'sky-date-range-picker-last-input': showEndDatePicker() }\"\n  >\n    <sky-input-box\n      [hasErrors]=\"endDateHasErrors()\"\n      [labelText]=\"\n        selectedCalculator.type\n          | skyDateRangePickerEndDateResourceKey\n          | skyLibResources\n      \"\n    >\n      <sky-datepicker (calendarDateChange)=\"onDateChange()\">\n        <input\n          formControlName=\"endDate\"\n          name=\"endDate\"\n          skyDatepickerInput\n          type=\"text\"\n          [attr.aria-label]=\"\n            labelText || label\n              ? ('skyux_date_range_picker_default_aria_label'\n                | skyLibResources\n                  : (selectedCalculator.type\n                      | skyDateRangePickerEndDateResourceKey\n                      | skyLibResources)\n                  : (labelText ? labelText : label))\n              : (selectedCalculator.type\n                | skyDateRangePickerEndDateResourceKey\n                | skyLibResources)\n          \"\n          [dateFormat]=\"dateFormat\"\n          [required]=\"showEndDatePicker()\"\n          (change)=\"onDateChange()\"\n        />\n      </sky-datepicker>\n    </sky-input-box>\n  </div>\n</div>\n", styles: [":host{display:block}.sky-date-range-picker{display:flex}:host .sky-date-range-picker{flex-direction:column}:host .sky-date-range-picker-form-group{flex-basis:100%}:host .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}:host-context(.sky-responsive-container-xs) .sky-date-range-picker,:host-context(.sky-responsive-container-sm) .sky-date-range-picker,:host-context(.sky-responsive-container-md) .sky-date-range-picker,:host-context(.sky-responsive-container-lg) .sky-date-range-picker{flex-direction:column}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group,:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group{flex-basis:100%}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:first-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:first-of-type){padding-left:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(:last-of-type),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(:last-of-type){padding-right:initial}:host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:var(--sky-margin-stacked-lg)}@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 .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0}}: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}:host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-bottom:0}@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}:host-context(.sky-theme-modern) :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}@media (min-width: 768px){:host-context(.sky-theme-modern) :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),:host-context(.sky-theme-modern) :host-context(.sky-responsive-container-lg) .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}.sky-theme-modern :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}.sky-theme-modern :host-context(.sky-responsive-container-xs) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:0}@media (min-width: 768px){.sky-theme-modern :host .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}}.sky-theme-modern :host-context(.sky-responsive-container-sm) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-md) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input),.sky-theme-modern :host-context(.sky-responsive-container-lg) .sky-date-range-picker-form-group:not(.sky-date-range-picker-last-input){margin-right:20px}\n"] }]
+        }], propDecorators: { calculatorIds: [{
                 type: Input
             }], dateFormat: [{
                 type: Input