ngx-strata 0.5.2 → 0.6.0

package/fesm2022/ngx-strata.mjs

@@ -96,6 +96,10 @@ const baseIconConfigs = [
         name: 'check',
         url: 'assets/icons/check.svg'
     },
+    {
+        name: 'calendar',
+        url: 'assets/icons/calendar.svg'
+    }
 ];
 
 const provideBaseIcons = () => {
@@ -1313,6 +1317,8 @@ class StrataActionMenuComponent {
     ...(ngDevMode ? [{ debugName: "actionMenuItems" }] : /* istanbul ignore next */ []));
     placement = input('bottom-end', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    buttonSize = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonSize" }] : /* istanbul ignore next */ []));
     closeOnOutsideClick = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "closeOnOutsideClick" }] : /* istanbul ignore next */ []));
     elementRef = inject(ElementRef);
@@ -1364,17 +1370,17 @@ class StrataActionMenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataActionMenuComponent, isStandalone: true, selector: "st-action-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "actionMenuItems", predicate: StrataActionMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "defaultButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "overlayDirective", first: true, predicate: StrataOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"], dependencies: [{ kind: "component", type: StrataCardComponent, selector: "st-card", inputs: ["elevated", "selectable", "padding", "variant"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataActionMenuComponent, isStandalone: true, selector: "st-action-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, buttonSize: { classPropertyName: "buttonSize", publicName: "buttonSize", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "actionMenuItems", predicate: StrataActionMenuItemComponent, isSignal: true }], viewQueries: [{ propertyName: "defaultButton", first: true, predicate: StrataButtonDirective, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "overlayDirective", first: true, predicate: StrataOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton [size]=\"buttonSize()\"><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"], dependencies: [{ kind: "component", type: StrataCardComponent, selector: "st-card", inputs: ["elevated", "selectable", "padding", "variant"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataActionMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-action-menu', imports: [StrataCardComponent, StrataOverlayDirective, StrataIconComponent, StrataButtonDirective], template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"] }]
+            args: [{ selector: 'st-action-menu', imports: [StrataCardComponent, StrataOverlayDirective, StrataIconComponent, StrataButtonDirective], template: "<div [stOverlay]=\"menu\" [overlayOpen]=\"menuOpen()\" [overlayPlacement]=\"placement()\">\n  <ng-content select=\"button[stButton]\"></ng-content>\n  @if (!projectedButton()) {\n    <button stButton [size]=\"buttonSize()\"><st-icon name=\"more\"></st-icon></button>\n  }\n</div>\n\n<ng-template #menu>\n  <st-card [padding]=\"false\" class=\"action-menu-card\"><ng-content select=\"st-action-menu-item\"></ng-content></st-card>\n</ng-template>\n", styles: ["st-card{width:fit-content}\n"] }]
         }], ctorParameters: () => [], propDecorators: { projectedButton: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataButtonDirective), { ...{
                             descendants: true,
                             read: ElementRef
                         }, isSignal: true }] }], defaultButton: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataButtonDirective), { ...{
                             read: ElementRef
-                        }, isSignal: true }] }], overlayDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataOverlayDirective), { isSignal: true }] }], actionMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataActionMenuItemComponent), { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }] } });
+                        }, isSignal: true }] }], overlayDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataOverlayDirective), { isSignal: true }] }], actionMenuItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataActionMenuItemComponent), { isSignal: true }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], buttonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonSize", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }] } });
 
 class StrataTextStackComponent {
     overflow = input('truncate', /* @ts-ignore */
@@ -1646,6 +1652,1300 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                     }, template: "<ng-content select=\"[stButton], st-divider\" #buttons></ng-content>\n" }]
         }], propDecorators: { justification: [{ type: i0.Input, args: [{ isSignal: true, alias: "justification", required: false }] }] } });
 
+class StrataTimePickerComponent {
+    format = input('24h', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    showSeconds = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+    minuteStep = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    hours = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []));
+    minutes = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []));
+    seconds = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seconds" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    is12h = computed(() => this.format() === '12h', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "is12h" }] : /* istanbul ignore next */ []));
+    isPM = computed(() => this.hours() >= 12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPM" }] : /* istanbul ignore next */ []));
+    meridiem = computed(() => (this.isPM() ? 'PM' : 'AM'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "meridiem" }] : /* istanbul ignore next */ []));
+    displayHours = computed(() => {
+        const h = this.hours();
+        if (!this.is12h()) {
+            return h.toString().padStart(2, '0');
+        }
+        const h12 = h % 12 || 12;
+        return h12.toString().padStart(2, '0');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayHours" }] : /* istanbul ignore next */ []));
+    displayMinutes = computed(() => {
+        return this.minutes().toString().padStart(2, '0');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMinutes" }] : /* istanbul ignore next */ []));
+    displaySeconds = computed(() => {
+        return this.seconds().toString().padStart(2, '0');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displaySeconds" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const val = this.value();
+            this.syncFromValue(val);
+        });
+    }
+    syncFromValue(val) {
+        if (!val) {
+            return;
+        }
+        if (val instanceof Date) {
+            this.hours.set(val.getHours());
+            this.minutes.set(val.getMinutes());
+            this.seconds.set(val.getSeconds());
+            return;
+        }
+        if (typeof val === 'string') {
+            const parts = val.trim().split(':');
+            if (parts.length >= 2) {
+                const h = parseInt(parts[0], 10) || 0;
+                const m = parseInt(parts[1], 10) || 0;
+                const s = parts[2] ? parseInt(parts[2], 10) || 0 : 0;
+                this.hours.set(Math.min(23, Math.max(0, h)));
+                this.minutes.set(Math.min(59, Math.max(0, m)));
+                this.seconds.set(Math.min(59, Math.max(0, s)));
+            }
+        }
+    }
+    incrementHours() {
+        if (this.effectiveDisabled())
+            return;
+        const current = this.hours();
+        this.setHours((current + 1) % 24);
+    }
+    decrementHours() {
+        if (this.effectiveDisabled())
+            return;
+        const current = this.hours();
+        this.setHours((current - 1 + 24) % 24);
+    }
+    incrementMinutes() {
+        if (this.effectiveDisabled())
+            return;
+        const step = Math.max(1, this.minuteStep());
+        const current = this.minutes();
+        const next = (Math.floor(current / step) * step + step) % 60;
+        this.setMinutes(next);
+    }
+    decrementMinutes() {
+        if (this.effectiveDisabled())
+            return;
+        const step = Math.max(1, this.minuteStep());
+        const current = this.minutes();
+        const next = (Math.ceil(current / step) * step - step + 60) % 60;
+        this.setMinutes(next);
+    }
+    incrementSeconds() {
+        if (this.effectiveDisabled())
+            return;
+        const current = this.seconds();
+        this.setSeconds((current + 1) % 60);
+    }
+    decrementSeconds() {
+        if (this.effectiveDisabled())
+            return;
+        const current = this.seconds();
+        this.setSeconds((current - 1 + 60) % 60);
+    }
+    toggleMeridiem() {
+        if (this.effectiveDisabled() || !this.is12h())
+            return;
+        const current = this.hours();
+        if (current >= 12) {
+            this.setHours(current - 12);
+        }
+        else {
+            this.setHours(current + 12);
+        }
+    }
+    setHours(h) {
+        this.hours.set(h);
+        this.emitChange();
+    }
+    setMinutes(m) {
+        this.minutes.set(m);
+        this.emitChange();
+    }
+    setSeconds(s) {
+        this.seconds.set(s);
+        this.emitChange();
+    }
+    emitChange() {
+        const currentVal = this.value();
+        let updated;
+        if (currentVal instanceof Date) {
+            const d = new Date(currentVal);
+            d.setHours(this.hours(), this.minutes(), this.seconds());
+            updated = d;
+        }
+        else {
+            const pad = (n) => n.toString().padStart(2, '0');
+            updated = this.showSeconds()
+                ? `${pad(this.hours())}:${pad(this.minutes())}:${pad(this.seconds())}`
+                : `${pad(this.hours())}:${pad(this.minutes())}`;
+        }
+        this.value.set(updated);
+        this.onChange(updated);
+        this.onTouched();
+    }
+    writeValue(val) {
+        this.value.set(val);
+        this.syncFromValue(val);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataTimePickerComponent, isStandalone: true, selector: "st-time-picker", inputs: { format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.st-time-picker": "true", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => StrataTimePickerComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"st-time-picker-inner\">\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementHours()\"\n      aria-label=\"Increment hours\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementHours()\" (keydown.arrowdown)=\"decrementHours()\">\n      {{ displayHours() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementHours()\"\n      aria-label=\"Decrement hours\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  <span class=\"st-time-sep\">:</span>\n\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementMinutes()\"\n      aria-label=\"Increment minutes\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementMinutes()\" (keydown.arrowdown)=\"decrementMinutes()\">\n      {{ displayMinutes() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementMinutes()\"\n      aria-label=\"Decrement minutes\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  @if (showSeconds()) {\n    <span class=\"st-time-sep\">:</span>\n\n    <div class=\"st-time-col\">\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"incrementSeconds()\"\n        aria-label=\"Increment seconds\"\n      >\n        <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n      </button>\n      <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementSeconds()\" (keydown.arrowdown)=\"decrementSeconds()\">\n        {{ displaySeconds() }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"decrementSeconds()\"\n        aria-label=\"Decrement seconds\"\n      >\n        <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n      </button>\n    </div>\n  }\n\n  @if (is12h()) {\n    <div class=\"st-time-col st-meridiem-col\">\n      <button\n        type=\"button\"\n        class=\"st-meridiem-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"toggleMeridiem()\"\n        aria-label=\"Toggle AM PM\"\n      >\n        {{ meridiem() }}\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;align-items:center;box-sizing:border-box}:host.st-size-sm .st-time-val{min-width:34px;height:32px;font-size:var(--st-font-md);border-radius:var(--st-border-radius-sm)}:host.st-size-sm .st-time-arrow-btn{width:34px;height:20px}:host.st-size-sm .st-time-sep{font-size:var(--st-font-lg);margin:0 2px}:host.st-size-sm .st-meridiem-btn{height:32px;font-size:var(--st-font-xs);padding:0 var(--st-space-2);border-radius:var(--st-border-radius-sm)}:host.st-size-lg .st-time-val{min-width:54px;height:50px;font-size:1.5rem;border-radius:var(--st-border-radius-lg)}:host.st-size-lg .st-time-arrow-btn{width:54px;height:28px}:host.st-size-lg .st-time-sep{font-size:1.75rem;margin:0 6px}:host.st-size-lg .st-meridiem-btn{height:50px;font-size:var(--st-font-md);padding:0 var(--st-space-4);border-radius:var(--st-border-radius-lg)}:host.st-disabled{opacity:.55;pointer-events:none}.st-time-picker-inner{display:inline-flex;align-items:center;gap:var(--st-space-1);padding:0;background:transparent;border:none;color:var(--st-color-text-primary);-webkit-user-select:none;user-select:none}.st-time-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--st-space-1)}.st-time-arrow-btn{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);width:44px;height:24px;border-radius:var(--st-border-radius-sm);transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-time-arrow-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-time-arrow-btn:disabled{opacity:.4;cursor:not-allowed}.st-time-val{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:42px;font-family:var(--st-font-mono);font-size:var(--st-font-lg);font-weight:var(--st-font-weight-semibold);background:transparent;border:1px solid var(--st-border);border-radius:var(--st-border-radius-md);color:var(--st-color-text-primary);outline:none;cursor:default;transition:border-color var(--st-transition-fast)}.st-time-val:focus-visible{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}.st-time-sep{font-weight:var(--st-font-weight-bold);color:var(--st-color-text-secondary);font-size:var(--st-font-xl);margin:0 4px}.st-meridiem-col{margin-left:var(--st-space-1)}.st-meridiem-btn{background:transparent;border:1px solid var(--st-border);color:var(--st-color-text-primary);border-radius:var(--st-border-radius-md);height:42px;font-size:var(--st-font-sm);font-weight:var(--st-font-weight-semibold);padding:0 var(--st-space-3);cursor:pointer;transition:background var(--st-transition-fast),border-color var(--st-transition-fast)}.st-meridiem-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));border-color:var(--st-color-border-strong)}.st-meridiem-btn:disabled{opacity:.4;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-time-picker', imports: [CommonModule, StrataIconComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StrataTimePickerComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class.st-time-picker]': 'true',
+                        '[class.st-disabled]': 'effectiveDisabled()',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null'
+                    }, template: "<div class=\"st-time-picker-inner\">\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementHours()\"\n      aria-label=\"Increment hours\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementHours()\" (keydown.arrowdown)=\"decrementHours()\">\n      {{ displayHours() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementHours()\"\n      aria-label=\"Decrement hours\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  <span class=\"st-time-sep\">:</span>\n\n  <div class=\"st-time-col\">\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"incrementMinutes()\"\n      aria-label=\"Increment minutes\"\n    >\n      <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n    </button>\n    <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementMinutes()\" (keydown.arrowdown)=\"decrementMinutes()\">\n      {{ displayMinutes() }}\n    </span>\n    <button\n      type=\"button\"\n      class=\"st-time-arrow-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"decrementMinutes()\"\n      aria-label=\"Decrement minutes\"\n    >\n      <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n    </button>\n  </div>\n\n  @if (showSeconds()) {\n    <span class=\"st-time-sep\">:</span>\n\n    <div class=\"st-time-col\">\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"incrementSeconds()\"\n        aria-label=\"Increment seconds\"\n      >\n        <st-icon name=\"arrow-up\" size=\"xs\"></st-icon>\n      </button>\n      <span class=\"st-time-val\" tabindex=\"0\" (keydown.arrowup)=\"incrementSeconds()\" (keydown.arrowdown)=\"decrementSeconds()\">\n        {{ displaySeconds() }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"st-time-arrow-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"decrementSeconds()\"\n        aria-label=\"Decrement seconds\"\n      >\n        <st-icon name=\"arrow-down\" size=\"xs\"></st-icon>\n      </button>\n    </div>\n  }\n\n  @if (is12h()) {\n    <div class=\"st-time-col st-meridiem-col\">\n      <button\n        type=\"button\"\n        class=\"st-meridiem-btn\"\n        [disabled]=\"effectiveDisabled()\"\n        (click)=\"toggleMeridiem()\"\n        aria-label=\"Toggle AM PM\"\n      >\n        {{ meridiem() }}\n      </button>\n    </div>\n  }\n</div>\n", styles: [":host{display:inline-flex;align-items:center;box-sizing:border-box}:host.st-size-sm .st-time-val{min-width:34px;height:32px;font-size:var(--st-font-md);border-radius:var(--st-border-radius-sm)}:host.st-size-sm .st-time-arrow-btn{width:34px;height:20px}:host.st-size-sm .st-time-sep{font-size:var(--st-font-lg);margin:0 2px}:host.st-size-sm .st-meridiem-btn{height:32px;font-size:var(--st-font-xs);padding:0 var(--st-space-2);border-radius:var(--st-border-radius-sm)}:host.st-size-lg .st-time-val{min-width:54px;height:50px;font-size:1.5rem;border-radius:var(--st-border-radius-lg)}:host.st-size-lg .st-time-arrow-btn{width:54px;height:28px}:host.st-size-lg .st-time-sep{font-size:1.75rem;margin:0 6px}:host.st-size-lg .st-meridiem-btn{height:50px;font-size:var(--st-font-md);padding:0 var(--st-space-4);border-radius:var(--st-border-radius-lg)}:host.st-disabled{opacity:.55;pointer-events:none}.st-time-picker-inner{display:inline-flex;align-items:center;gap:var(--st-space-1);padding:0;background:transparent;border:none;color:var(--st-color-text-primary);-webkit-user-select:none;user-select:none}.st-time-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--st-space-1)}.st-time-arrow-btn{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);width:44px;height:24px;border-radius:var(--st-border-radius-sm);transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-time-arrow-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-time-arrow-btn:disabled{opacity:.4;cursor:not-allowed}.st-time-val{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:42px;font-family:var(--st-font-mono);font-size:var(--st-font-lg);font-weight:var(--st-font-weight-semibold);background:transparent;border:1px solid var(--st-border);border-radius:var(--st-border-radius-md);color:var(--st-color-text-primary);outline:none;cursor:default;transition:border-color var(--st-transition-fast)}.st-time-val:focus-visible{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}.st-time-sep{font-weight:var(--st-font-weight-bold);color:var(--st-color-text-secondary);font-size:var(--st-font-xl);margin:0 4px}.st-meridiem-col{margin-left:var(--st-space-1)}.st-meridiem-btn{background:transparent;border:1px solid var(--st-border);color:var(--st-color-text-primary);border-radius:var(--st-border-radius-md);height:42px;font-size:var(--st-font-sm);font-weight:var(--st-font-weight-semibold);padding:0 var(--st-space-3);cursor:pointer;transition:background var(--st-transition-fast),border-color var(--st-transition-fast)}.st-meridiem-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));border-color:var(--st-color-border-strong)}.st-meridiem-btn:disabled{opacity:.4;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+function isSameDay(a, b) {
+    if (!a || !b)
+        return false;
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+function isSameMonth(a, b) {
+    if (!a || !b)
+        return false;
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function isSameYear(a, b) {
+    if (!a || !b)
+        return false;
+    return a.getFullYear() === b.getFullYear();
+}
+function isBeforeDay(a, b) {
+    const aDate = new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime();
+    const bDate = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime();
+    return aDate < bDate;
+}
+function isAfterDay(a, b) {
+    const aDate = new Date(a.getFullYear(), a.getMonth(), a.getDate()).getTime();
+    const bDate = new Date(b.getFullYear(), b.getMonth(), b.getDate()).getTime();
+    return aDate > bDate;
+}
+function isWithinDayRange(date, start, end) {
+    if (!start || !end)
+        return false;
+    const target = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+    const s = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime();
+    const e = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime();
+    const min = Math.min(s, e);
+    const max = Math.max(s, e);
+    return target >= min && target <= max;
+}
+function startOfDay(date) {
+    const result = new Date(date);
+    result.setHours(0, 0, 0, 0);
+    return result;
+}
+function endOfDay(date) {
+    const result = new Date(date);
+    result.setHours(23, 59, 59, 999);
+    return result;
+}
+function startOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function endOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}
+function addDays(date, amount) {
+    const result = new Date(date);
+    result.setDate(result.getDate() + amount);
+    return result;
+}
+function addMonths(date, amount) {
+    const result = new Date(date);
+    const targetMonth = result.getMonth() + amount;
+    result.setMonth(targetMonth);
+    return result;
+}
+function addYears(date, amount) {
+    const result = new Date(date);
+    result.setFullYear(result.getFullYear() + amount);
+    return result;
+}
+function getDayOfWeek(date) {
+    return (date.getDay() + 6) % 7;
+}
+function isWeekend(date) {
+    const day = getDayOfWeek(date);
+    return day === 5 || day === 6;
+}
+function disableWeekends(date) {
+    return isWeekend(date);
+}
+function disablePastDates(date) {
+    const today = startOfDay(new Date());
+    return isBeforeDay(date, today);
+}
+function disableFutureDates(date) {
+    const today = endOfDay(new Date());
+    return isAfterDay(date, today);
+}
+function disableDaysOfWeek(days) {
+    return (date) => days.includes(getDayOfWeek(date));
+}
+function disableDateRange(startDate, endDate) {
+    return (date) => isWithinDayRange(date, startDate, endDate);
+}
+function getDaysInMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+}
+function getLocaleDefaultDateFormat(locale) {
+    try {
+        const formatter = new Intl.DateTimeFormat(locale || undefined, {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit'
+        });
+        const parts = formatter.formatToParts(new Date(2024, 11, 31));
+        const order = parts
+            .filter((p) => p.type === 'year' || p.type === 'month' || p.type === 'day')
+            .map((p) => p.type);
+        const sep = (parts.find((p) => p.type === 'literal' && p.value.trim() !== '') || { value: '/' }).value;
+        const tokens = { year: 'YYYY', month: 'MM', day: 'DD' };
+        return order.map((t) => tokens[t]).join(sep);
+    }
+    catch {
+        return 'YYYY-MM-DD';
+    }
+}
+function formatMonthTitle(date, locale) {
+    const formatter = new Intl.DateTimeFormat(locale || undefined, { month: 'long' });
+    const str = formatter.format(date);
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function getMonthNames(locale, format = 'short') {
+    const formatter = new Intl.DateTimeFormat(locale || undefined, { month: format });
+    return Array.from({ length: 12 }, (_, i) => {
+        const date = new Date(2024, i, 1);
+        const name = formatter.format(date);
+        return name.charAt(0).toUpperCase() + name.slice(1);
+    });
+}
+function getWeekdayNames(locale, firstDayOfWeek = 0, format = 'short') {
+    const formatter = new Intl.DateTimeFormat(locale || undefined, { weekday: format });
+    const daysFromMonday = Array.from({ length: 7 }, (_, i) => {
+        const date = new Date(2024, 0, 1 + i);
+        const name = formatter.format(date);
+        return name.charAt(0).toUpperCase() + name.slice(1);
+    });
+    const offset = ((firstDayOfWeek % 7) + 7) % 7;
+    return [...daysFromMonday.slice(offset), ...daysFromMonday.slice(0, offset)];
+}
+function createCalendarGrid(viewDate, firstDayOfWeek = 0) {
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    const firstDayOfMonth = new Date(year, month, 1);
+    const startingDay = (getDayOfWeek(firstDayOfMonth) - (firstDayOfWeek % 7) + 7) % 7;
+    const startDate = new Date(year, month, 1 - startingDay);
+    const days = [];
+    for (let i = 0; i < 42; i++) {
+        const current = new Date(startDate);
+        current.setDate(startDate.getDate() + i);
+        days.push(current);
+    }
+    return days;
+}
+function formatDate(date, formatStr = 'YYYY-MM-DD') {
+    if (!date || isNaN(date.getTime()))
+        return '';
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    const hours24 = date.getHours();
+    const hours12 = hours24 % 12 || 12;
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    const isPM = hours24 >= 12;
+    const pad = (n) => n.toString().padStart(2, '0');
+    return formatStr
+        .replace(/YYYY/g, year.toString())
+        .replace(/YY/g, (year % 100).toString().padStart(2, '0'))
+        .replace(/MM/g, pad(month))
+        .replace(/\bM\b/g, month.toString())
+        .replace(/DD/g, pad(day))
+        .replace(/\bD\b/g, day.toString())
+        .replace(/HH/g, pad(hours24))
+        .replace(/\bH\b/g, hours24.toString())
+        .replace(/hh/g, pad(hours12))
+        .replace(/\bh\b/g, hours12.toString())
+        .replace(/mm/g, pad(minutes))
+        .replace(/\bm\b/g, minutes.toString())
+        .replace(/ss/g, pad(seconds))
+        .replace(/\bs\b/g, seconds.toString())
+        .replace(/A/g, isPM ? 'PM' : 'AM')
+        .replace(/a/g, isPM ? 'pm' : 'am');
+}
+function parseDate(str, formatStr = 'YYYY-MM-DD') {
+    if (!str || !str.trim())
+        return null;
+    const trimmed = str.trim();
+    const tokenMap = {
+        YYYY: '(?<year>\\d{4})',
+        YY: '(?<shortYear>\\d{2})',
+        MM: '(?<month>\\d{1,2})',
+        M: '(?<month>\\d{1,2})',
+        DD: '(?<day>\\d{1,2})',
+        D: '(?<day>\\d{1,2})',
+        HH: '(?<hours24>\\d{1,2})',
+        H: '(?<hours24>\\d{1,2})',
+        hh: '(?<hours12>\\d{1,2})',
+        h: '(?<hours12>\\d{1,2})',
+        mm: '(?<minutes>\\d{1,2})',
+        m: '(?<minutes>\\d{1,2})',
+        ss: '(?<seconds>\\d{1,2})',
+        s: '(?<seconds>\\d{1,2})',
+        A: '(?<meridiem>AM|PM|am|pm)',
+        a: '(?<meridiem>AM|PM|am|pm)'
+    };
+    const tokenPattern = /YYYY|YY|MM|\bM\b|DD|\bD\b|HH|\bH\b|hh|\bh\b|mm|\bm\b|ss|\bs\b|A|a/g;
+    let lastIndex = 0;
+    let regexSource = '^';
+    let match;
+    while ((match = tokenPattern.exec(formatStr)) !== null) {
+        const literal = formatStr.slice(lastIndex, match.index);
+        regexSource += literal.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const token = match[0];
+        regexSource += tokenMap[token] || token;
+        lastIndex = tokenPattern.lastIndex;
+    }
+    const trailingLiteral = formatStr.slice(lastIndex);
+    regexSource += trailingLiteral.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '$';
+    const reg = new RegExp(regexSource, 'i');
+    const resultMatch = reg.exec(trimmed);
+    if (!resultMatch || !resultMatch.groups) {
+        const fallback = new Date(trimmed);
+        return isNaN(fallback.getTime()) ? null : fallback;
+    }
+    const groups = resultMatch.groups;
+    const year = groups['year']
+        ? parseInt(groups['year'], 10)
+        : groups['shortYear']
+            ? 2000 + parseInt(groups['shortYear'], 10)
+            : new Date().getFullYear();
+    const month = groups['month'] ? parseInt(groups['month'], 10) - 1 : 0;
+    const day = groups['day'] ? parseInt(groups['day'], 10) : 1;
+    let hours = 0;
+    if (groups['hours24']) {
+        hours = parseInt(groups['hours24'], 10);
+    }
+    else if (groups['hours12']) {
+        hours = parseInt(groups['hours12'], 10);
+        const meridiem = (groups['meridiem'] || '').toUpperCase();
+        if (meridiem === 'PM' && hours < 12)
+            hours += 12;
+        if (meridiem === 'AM' && hours === 12)
+            hours = 0;
+    }
+    const minutes = groups['minutes'] ? parseInt(groups['minutes'], 10) : 0;
+    const seconds = groups['seconds'] ? parseInt(groups['seconds'], 10) : 0;
+    const result = new Date(year, month, day, hours, minutes, seconds);
+    if (result.getFullYear() !== year ||
+        result.getMonth() !== month ||
+        result.getDate() !== day) {
+        return null;
+    }
+    return result;
+}
+
+class StrataCalendarComponent {
+    mode = input('single', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    rangeValue = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rangeValue" }] : /* istanbul ignore next */ []));
+    viewDate = model(new Date(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewDate" }] : /* istanbul ignore next */ []));
+    minDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    disabledDates = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    showAdjacentMonths = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAdjacentMonths" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    dateSelected = output();
+    rangeSelected = output();
+    view = signal('days', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+    hoverDate = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverDate" }] : /* istanbul ignore next */ []));
+    focusedDate = signal(new Date(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    ngOnInit() {
+        if (this.mode() === 'single') {
+            const v = this.value();
+            if (v && !isNaN(v.getTime())) {
+                this.viewDate.set(new Date(v));
+            }
+        }
+    }
+    weekdays = computed(() => {
+        return getWeekdayNames(this.locale(), this.firstDayOfWeek(), 'short');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []));
+    currentMonthName = computed(() => {
+        return formatMonthTitle(this.viewDate(), this.locale());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentMonthName" }] : /* istanbul ignore next */ []));
+    currentYear = computed(() => {
+        return this.viewDate().getFullYear();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentYear" }] : /* istanbul ignore next */ []));
+    yearRangeStart = computed(() => {
+        const y = this.viewDate().getFullYear();
+        return Math.floor(y / 12) * 12;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearRangeStart" }] : /* istanbul ignore next */ []));
+    yearsList = computed(() => {
+        const start = this.yearRangeStart();
+        const list = [];
+        for (let i = 0; i < 12; i++) {
+            list.push(start + i);
+        }
+        return list;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yearsList" }] : /* istanbul ignore next */ []));
+    monthsList = computed(() => {
+        return getMonthNames(this.locale(), 'short');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "monthsList" }] : /* istanbul ignore next */ []));
+    calendarGrid = computed(() => {
+        const vDate = this.viewDate();
+        const rawGrid = createCalendarGrid(vDate, this.firstDayOfWeek());
+        const today = new Date();
+        const min = this.minDate();
+        const max = this.maxDate();
+        const disabledProp = this.disabledDates();
+        const selectedVal = this.value();
+        const range = this.rangeValue();
+        const hover = this.hoverDate();
+        const isRangeMode = this.mode() === 'range';
+        return rawGrid.map((d) => {
+            const isCurrentMonth = isSameMonth(d, vDate);
+            const isToday = isSameDay(d, today);
+            let isDisabled = false;
+            if (min && isBeforeDay(d, min)) {
+                isDisabled = true;
+            }
+            if (max && isAfterDay(d, max)) {
+                isDisabled = true;
+            }
+            if (disabledProp) {
+                if (typeof disabledProp === 'function') {
+                    isDisabled = isDisabled || disabledProp(d);
+                }
+                else if (Array.isArray(disabledProp)) {
+                    isDisabled = isDisabled || disabledProp.some((disabledD) => isSameDay(disabledD, d));
+                }
+            }
+            let isSelected = false;
+            let isRangeStart = false;
+            let isRangeEnd = false;
+            let isInRange = false;
+            let isRangeHover = false;
+            if (!isRangeMode) {
+                isSelected = isSameDay(d, selectedVal);
+            }
+            else {
+                const rStart = range?.start;
+                const rEnd = range?.end;
+                if (rStart && rEnd) {
+                    isRangeStart = isSameDay(d, rStart);
+                    isRangeEnd = isSameDay(d, rEnd);
+                    isInRange = isWithinDayRange(d, rStart, rEnd) && !isRangeStart && !isRangeEnd;
+                    isSelected = isRangeStart || isRangeEnd;
+                }
+                else if (rStart && !rEnd) {
+                    if (!hover || isSameDay(rStart, hover)) {
+                        isRangeStart = isSameDay(d, rStart);
+                        isRangeEnd = isSameDay(d, rStart);
+                        isSelected = isRangeStart;
+                    }
+                    else {
+                        const isHoverBefore = isBeforeDay(hover, rStart);
+                        const actualStart = isHoverBefore ? hover : rStart;
+                        const actualEnd = isHoverBefore ? rStart : hover;
+                        isRangeStart = isSameDay(d, actualStart);
+                        isRangeEnd = isSameDay(d, actualEnd);
+                        isInRange = isWithinDayRange(d, actualStart, actualEnd) && !isRangeStart && !isRangeEnd;
+                        isRangeHover = isInRange;
+                        isSelected = isRangeStart || isRangeEnd;
+                    }
+                }
+            }
+            return {
+                date: d,
+                dayNumber: d.getDate(),
+                isCurrentMonth,
+                isToday,
+                isSelected,
+                isDisabled,
+                isRangeStart,
+                isRangeEnd,
+                isInRange,
+                isRangeHover
+            };
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarGrid" }] : /* istanbul ignore next */ []));
+    onPrevClick() {
+        if (this.effectiveDisabled())
+            return;
+        const current = this.viewDate();
+        const v = this.view();
+        if (v === 'days') {
+            this.viewDate.set(addMonths(current, -1));
+        }
+        else if (v === 'months') {
+            this.viewDate.set(addYears(current, -1));
+        }
+        else if (v === 'years') {
+            this.viewDate.set(addYears(current, -12));
+        }
+    }
+    onNextClick() {
+        if (this.effectiveDisabled())
+            return;
+        const current = this.viewDate();
+        const v = this.view();
+        if (v === 'days') {
+            this.viewDate.set(addMonths(current, 1));
+        }
+        else if (v === 'months') {
+            this.viewDate.set(addYears(current, 1));
+        }
+        else if (v === 'years') {
+            this.viewDate.set(addYears(current, 12));
+        }
+    }
+    toggleView() {
+        if (this.effectiveDisabled())
+            return;
+        const v = this.view();
+        if (v === 'days') {
+            this.view.set('months');
+        }
+        else if (v === 'months') {
+            this.view.set('years');
+        }
+        else {
+            this.view.set('days');
+        }
+    }
+    selectMonth(monthIndex) {
+        if (this.effectiveDisabled())
+            return;
+        const current = this.viewDate();
+        const next = new Date(current.getFullYear(), monthIndex, 1);
+        this.viewDate.set(next);
+        this.view.set('days');
+    }
+    selectYear(year) {
+        if (this.effectiveDisabled())
+            return;
+        const current = this.viewDate();
+        const next = new Date(year, current.getMonth(), 1);
+        this.viewDate.set(next);
+        this.view.set('months');
+    }
+    onDayClick(cell) {
+        if (this.effectiveDisabled() || cell.isDisabled)
+            return;
+        if (!cell.isCurrentMonth) {
+            this.viewDate.set(cell.date);
+        }
+        if (this.mode() === 'single') {
+            const selected = new Date(cell.date);
+            this.value.set(selected);
+            this.dateSelected.emit(selected);
+            this.onChange(selected);
+            this.onTouched();
+        }
+        else {
+            const currentRange = this.rangeValue();
+            if (!currentRange || !currentRange.start || (currentRange.start && currentRange.end)) {
+                const nextRange = { start: new Date(cell.date), end: null };
+                this.rangeValue.set(nextRange);
+                this.rangeSelected.emit(nextRange);
+                this.onChange(nextRange);
+            }
+            else {
+                let start = currentRange.start;
+                let end = new Date(cell.date);
+                if (isBeforeDay(end, start)) {
+                    const temp = start;
+                    start = end;
+                    end = temp;
+                }
+                const nextRange = { start, end };
+                this.rangeValue.set(nextRange);
+                this.rangeSelected.emit(nextRange);
+                this.onChange(nextRange);
+                this.onTouched();
+            }
+        }
+    }
+    onDayHover(cell) {
+        if (this.mode() === 'range' && this.rangeValue()?.start && !this.rangeValue()?.end) {
+            this.hoverDate.set(cell.date);
+        }
+    }
+    onDayKeyDown(event, cell) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.onDayClick(cell);
+        }
+    }
+    writeValue(val) {
+        if (this.mode() === 'single') {
+            const d = val instanceof Date ? val : null;
+            this.value.set(d);
+            if (d) {
+                this.viewDate.set(new Date(d));
+            }
+        }
+        else {
+            const range = val && typeof val === 'object' && 'start' in val ? val : null;
+            this.rangeValue.set(range);
+            if (range?.start) {
+                this.viewDate.set(new Date(range.start));
+            }
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataCalendarComponent, isStandalone: true, selector: "st-calendar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rangeValue: { classPropertyName: "rangeValue", publicName: "rangeValue", isSignal: true, isRequired: false, transformFunction: null }, viewDate: { classPropertyName: "viewDate", publicName: "viewDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, showAdjacentMonths: { classPropertyName: "showAdjacentMonths", publicName: "showAdjacentMonths", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeValue: "rangeValueChange", viewDate: "viewDateChange", dateSelected: "dateSelected", rangeSelected: "rangeSelected" }, host: { properties: { "class.st-calendar": "true", "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => StrataCalendarComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"st-calendar-container\">\n  <div class=\"st-calendar-header\">\n    <button\n      type=\"button\"\n      class=\"st-cal-nav-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"onPrevClick()\"\n      aria-label=\"Previous\"\n    >\n      <st-icon name=\"arrow-left\" size=\"sm\"></st-icon>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"st-cal-title-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"toggleView()\"\n    >\n      @if (view() === 'days') {\n        {{ currentMonthName() }} {{ currentYear() }}\n      } @else if (view() === 'months') {\n        {{ currentYear() }}\n      } @else {\n        {{ yearRangeStart() }} - {{ yearRangeStart() + 11 }}\n      }\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"st-cal-nav-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"onNextClick()\"\n      aria-label=\"Next\"\n    >\n      <st-icon name=\"arrow-right\" size=\"sm\"></st-icon>\n    </button>\n  </div>\n\n  <div class=\"st-calendar-body\">\n    @if (view() === 'days') {\n      <div class=\"st-calendar-weekdays\" role=\"row\">\n        @for (day of weekdays(); track day) {\n          <span class=\"st-calendar-weekday\" role=\"columnheader\">{{ day }}</span>\n        }\n      </div>\n\n      <div class=\"st-calendar-days-grid\" role=\"grid\">\n        @for (cell of calendarGrid(); track cell.date.toISOString()) {\n          <button\n            type=\"button\"\n            class=\"st-calendar-day\"\n            [class.st-adjacent]=\"!cell.isCurrentMonth\"\n            [class.st-today]=\"cell.isToday\"\n            [class.st-selected]=\"cell.isSelected\"\n            [class.st-range-start]=\"cell.isRangeStart\"\n            [class.st-range-end]=\"cell.isRangeEnd\"\n            [class.st-in-range]=\"cell.isInRange\"\n            [class.st-range-hover]=\"cell.isRangeHover\"\n            [disabled]=\"cell.isDisabled || effectiveDisabled()\"\n            [attr.aria-selected]=\"cell.isSelected\"\n            [attr.aria-disabled]=\"cell.isDisabled\"\n            (click)=\"onDayClick(cell)\"\n            (mouseenter)=\"onDayHover(cell)\"\n            (keydown)=\"onDayKeyDown($event, cell)\"\n          >\n            <span class=\"st-day-content\">{{ cell.dayNumber }}</span>\n          </button>\n        }\n      </div>\n    } @else if (view() === 'months') {\n      <div class=\"st-calendar-grid-months\">\n        @for (m of monthsList(); track m; let i = $index) {\n          <button\n            type=\"button\"\n            class=\"st-calendar-choice-btn\"\n            [class.st-selected]=\"viewDate().getMonth() === i\"\n            (click)=\"selectMonth(i)\"\n          >\n            {{ m }}\n          </button>\n        }\n      </div>\n    } @else {\n      <div class=\"st-calendar-grid-years\">\n        @for (y of yearsList(); track y) {\n          <button\n            type=\"button\"\n            class=\"st-calendar-choice-btn\"\n            [class.st-selected]=\"viewDate().getFullYear() === y\"\n            (click)=\"selectYear(y)\"\n          >\n            {{ y }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--st-cal-size: 36px;display:inline-block;box-sizing:border-box}:host.st-size-sm{--st-cal-size: 30px}:host.st-size-lg{--st-cal-size: 42px}:host.st-disabled{opacity:.55;pointer-events:none}.st-calendar-container{display:flex;flex-direction:column;background:transparent;width:calc(var(--st-cal-size) * 7);box-sizing:border-box;color:var(--st-color-text-primary);-webkit-user-select:none;user-select:none}.st-calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--st-space-2)}.st-cal-title-btn{background:transparent;border:none;font:inherit;font-weight:var(--st-font-weight-semibold);font-size:var(--st-font-md);color:var(--st-color-text-primary);padding:var(--st-space-1) var(--st-space-2);border-radius:var(--st-border-radius-sm);cursor:pointer;transition:background var(--st-transition-fast)}.st-cal-title-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default))}.st-cal-title-btn:disabled{opacity:.5;cursor:not-allowed}.st-cal-nav-btn{background:transparent;border:none;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--st-border-radius-sm);color:var(--st-color-text-secondary);cursor:pointer;transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-cal-nav-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-cal-nav-btn:disabled{opacity:.3;cursor:not-allowed}.st-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:var(--st-space-1)}.st-calendar-weekday{font-size:.75rem;font-weight:var(--st-font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--st-color-text-tertiary);height:24px;display:flex;align-items:center;justify-content:center}.st-calendar-days-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}.st-calendar-day{appearance:none;background:transparent;border:none;border-radius:var(--st-border-radius-md);height:var(--st-cal-size);width:100%;font:inherit;font-size:var(--st-font-sm);color:var(--st-color-text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none;padding:0;transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-calendar-day:hover:not(:disabled):not(.st-selected):not(.st-range-start):not(.st-range-end){background:var(--st-color-control-bg-hover, var(--st-color-bg-default))}.st-calendar-day:focus-visible{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);z-index:2}.st-calendar-day.st-adjacent{color:var(--st-color-text-tertiary);opacity:.45}.st-calendar-day.st-today:after{content:\"\";position:absolute;bottom:3px;width:4px;height:4px;border-radius:var(--st-border-radius-full);background:var(--st-color-accent-default)}.st-calendar-day.st-selected{background:var(--st-color-accent-default);color:var(--st-color-text-on-accent, #fff);font-weight:var(--st-font-weight-semibold);border-radius:var(--st-border-radius-md)}.st-calendar-day.st-range-start{background:var(--st-color-accent-default);color:var(--st-color-text-on-accent, #fff);font-weight:var(--st-font-weight-semibold);border-radius:var(--st-border-radius-md) 0 0 var(--st-border-radius-md)}.st-calendar-day.st-range-end{background:var(--st-color-accent-default);color:var(--st-color-text-on-accent, #fff);font-weight:var(--st-font-weight-semibold);border-radius:0 var(--st-border-radius-md) var(--st-border-radius-md) 0}.st-calendar-day.st-range-start.st-range-end{border-radius:var(--st-border-radius-md)}.st-calendar-day.st-in-range,.st-calendar-day.st-range-hover{background:var(--st-color-accent-subtle);color:var(--st-color-accent-text, var(--st-color-text-primary));border-radius:0}.st-calendar-day:disabled{opacity:.3;cursor:not-allowed}.st-calendar-grid-months,.st-calendar-grid-years{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--st-space-2);padding:var(--st-space-2) 0}.st-calendar-choice-btn{background:transparent;border:none;font:inherit;font-size:var(--st-font-sm);color:var(--st-color-text-primary);height:40px;border-radius:var(--st-border-radius-md);cursor:pointer;transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-calendar-choice-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default))}.st-calendar-choice-btn.st-selected{background:var(--st-color-accent-default);color:var(--st-color-text-on-accent, #fff);font-weight:var(--st-font-weight-semibold)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-calendar', imports: [
+                        CommonModule,
+                        StrataIconComponent
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StrataCalendarComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class.st-calendar]': 'true',
+                        '[class.st-size-sm]': 'size() === "sm"',
+                        '[class.st-size-md]': 'size() === "md"',
+                        '[class.st-disabled]': 'effectiveDisabled()',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null'
+                    }, template: "<div class=\"st-calendar-container\">\n  <div class=\"st-calendar-header\">\n    <button\n      type=\"button\"\n      class=\"st-cal-nav-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"onPrevClick()\"\n      aria-label=\"Previous\"\n    >\n      <st-icon name=\"arrow-left\" size=\"sm\"></st-icon>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"st-cal-title-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"toggleView()\"\n    >\n      @if (view() === 'days') {\n        {{ currentMonthName() }} {{ currentYear() }}\n      } @else if (view() === 'months') {\n        {{ currentYear() }}\n      } @else {\n        {{ yearRangeStart() }} - {{ yearRangeStart() + 11 }}\n      }\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"st-cal-nav-btn\"\n      [disabled]=\"effectiveDisabled()\"\n      (click)=\"onNextClick()\"\n      aria-label=\"Next\"\n    >\n      <st-icon name=\"arrow-right\" size=\"sm\"></st-icon>\n    </button>\n  </div>\n\n  <div class=\"st-calendar-body\">\n    @if (view() === 'days') {\n      <div class=\"st-calendar-weekdays\" role=\"row\">\n        @for (day of weekdays(); track day) {\n          <span class=\"st-calendar-weekday\" role=\"columnheader\">{{ day }}</span>\n        }\n      </div>\n\n      <div class=\"st-calendar-days-grid\" role=\"grid\">\n        @for (cell of calendarGrid(); track cell.date.toISOString()) {\n          <button\n            type=\"button\"\n            class=\"st-calendar-day\"\n            [class.st-adjacent]=\"!cell.isCurrentMonth\"\n            [class.st-today]=\"cell.isToday\"\n            [class.st-selected]=\"cell.isSelected\"\n            [class.st-range-start]=\"cell.isRangeStart\"\n            [class.st-range-end]=\"cell.isRangeEnd\"\n            [class.st-in-range]=\"cell.isInRange\"\n            [class.st-range-hover]=\"cell.isRangeHover\"\n            [disabled]=\"cell.isDisabled || effectiveDisabled()\"\n            [attr.aria-selected]=\"cell.isSelected\"\n            [attr.aria-disabled]=\"cell.isDisabled\"\n            (click)=\"onDayClick(cell)\"\n            (mouseenter)=\"onDayHover(cell)\"\n            (keydown)=\"onDayKeyDown($event, cell)\"\n          >\n            <span class=\"st-day-content\">{{ cell.dayNumber }}</span>\n          </button>\n        }\n      </div>\n    } @else if (view() === 'months') {\n      <div class=\"st-calendar-grid-months\">\n        @for (m of monthsList(); track m; let i = $index) {\n          <button\n            type=\"button\"\n            class=\"st-calendar-choice-btn\"\n            [class.st-selected]=\"viewDate().getMonth() === i\"\n            (click)=\"selectMonth(i)\"\n          >\n            {{ m }}\n          </button>\n        }\n      </div>\n    } @else {\n      <div class=\"st-calendar-grid-years\">\n        @for (y of yearsList(); track y) {\n          <button\n            type=\"button\"\n            class=\"st-calendar-choice-btn\"\n            [class.st-selected]=\"viewDate().getFullYear() === y\"\n            (click)=\"selectYear(y)\"\n          >\n            {{ y }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{--st-cal-size: 36px;display:inline-block;box-sizing:border-box}:host.st-size-sm{--st-cal-size: 30px}:host.st-size-lg{--st-cal-size: 42px}:host.st-disabled{opacity:.55;pointer-events:none}.st-calendar-container{display:flex;flex-direction:column;background:transparent;width:calc(var(--st-cal-size) * 7);box-sizing:border-box;color:var(--st-color-text-primary);-webkit-user-select:none;user-select:none}.st-calendar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--st-space-2)}.st-cal-title-btn{background:transparent;border:none;font:inherit;font-weight:var(--st-font-weight-semibold);font-size:var(--st-font-md);color:var(--st-color-text-primary);padding:var(--st-space-1) var(--st-space-2);border-radius:var(--st-border-radius-sm);cursor:pointer;transition:background var(--st-transition-fast)}.st-cal-title-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default))}.st-cal-title-btn:disabled{opacity:.5;cursor:not-allowed}.st-cal-nav-btn{background:transparent;border:none;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--st-border-radius-sm);color:var(--st-color-text-secondary);cursor:pointer;transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-cal-nav-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-cal-nav-btn:disabled{opacity:.3;cursor:not-allowed}.st-calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:var(--st-space-1)}.st-calendar-weekday{font-size:.75rem;font-weight:var(--st-font-weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--st-color-text-tertiary);height:24px;display:flex;align-items:center;justify-content:center}.st-calendar-days-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}.st-calendar-day{appearance:none;background:transparent;border:none;border-radius:var(--st-border-radius-md);height:var(--st-cal-size);width:100%;font:inherit;font-size:var(--st-font-sm);color:var(--st-color-text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;outline:none;padding:0;transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-calendar-day:hover:not(:disabled):not(.st-selected):not(.st-range-start):not(.st-range-end){background:var(--st-color-control-bg-hover, var(--st-color-bg-default))}.st-calendar-day:focus-visible{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);z-index:2}.st-calendar-day.st-adjacent{color:var(--st-color-text-tertiary);opacity:.45}.st-calendar-day.st-today:after{content:\"\";position:absolute;bottom:3px;width:4px;height:4px;border-radius:var(--st-border-radius-full);background:var(--st-color-accent-default)}.st-calendar-day.st-selected{background:var(--st-color-accent-default);color:var(--st-color-text-on-accent, #fff);font-weight:var(--st-font-weight-semibold);border-radius:var(--st-border-radius-md)}.st-calendar-day.st-range-start{background:var(--st-color-accent-default);color:var(--st-color-text-on-accent, #fff);font-weight:var(--st-font-weight-semibold);border-radius:var(--st-border-radius-md) 0 0 var(--st-border-radius-md)}.st-calendar-day.st-range-end{background:var(--st-color-accent-default);color:var(--st-color-text-on-accent, #fff);font-weight:var(--st-font-weight-semibold);border-radius:0 var(--st-border-radius-md) var(--st-border-radius-md) 0}.st-calendar-day.st-range-start.st-range-end{border-radius:var(--st-border-radius-md)}.st-calendar-day.st-in-range,.st-calendar-day.st-range-hover{background:var(--st-color-accent-subtle);color:var(--st-color-accent-text, var(--st-color-text-primary));border-radius:0}.st-calendar-day:disabled{opacity:.3;cursor:not-allowed}.st-calendar-grid-months,.st-calendar-grid-years{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--st-space-2);padding:var(--st-space-2) 0}.st-calendar-choice-btn{background:transparent;border:none;font:inherit;font-size:var(--st-font-sm);color:var(--st-color-text-primary);height:40px;border-radius:var(--st-border-radius-md);cursor:pointer;transition:background var(--st-transition-fast),color var(--st-transition-fast)}.st-calendar-choice-btn:hover:not(:disabled){background:var(--st-color-control-bg-hover, var(--st-color-bg-default))}.st-calendar-choice-btn.st-selected{background:var(--st-color-accent-default);color:var(--st-color-text-on-accent, #fff);font-weight:var(--st-font-weight-semibold)}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rangeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeValue", required: false }] }, { type: i0.Output, args: ["rangeValueChange"] }], viewDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewDate", required: false }] }, { type: i0.Output, args: ["viewDateChange"] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], showAdjacentMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAdjacentMonths", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], rangeSelected: [{ type: i0.Output, args: ["rangeSelected"] }] } });
+
+let nextUniqueDatePickerId = 0;
+class StrataDatePickerComponent {
+    defaultId = `st-datepicker-${nextUniqueDatePickerId++}`;
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    format = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    placement = input('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    calendarSize = computed(() => (this.size() === 'sm' ? 'sm' : 'md'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarSize" }] : /* istanbul ignore next */ []));
+    clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showTime = input(false, { ...(ngDevMode ? { debugName: "showTime" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    timeFormat = input('24h', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
+    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    minuteStep = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    state = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    message = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    minDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    disabledDates = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    dateSelected = output();
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    textInputValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textInputValue" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    effectiveId = computed(() => this.id() ?? this.name() ?? this.defaultId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
+    effectiveState = computed(() => {
+        if (this.error()) {
+            return 'error';
+        }
+        return this.state() ?? 'default';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
+    isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
+    isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
+    isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    overlayDirective = viewChild(StrataOverlayDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayDirective" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        const unlisten = this.renderer.listen('document', 'pointerdown', (event) => {
+            if (!this.open())
+                return;
+            const target = event.target;
+            if (!target)
+                return;
+            const hostEl = this.elementRef.nativeElement;
+            const overlayEl = this.overlayDirective()?.getOverlayElement();
+            if (hostEl.contains(target) || (overlayEl && overlayEl.contains(target))) {
+                return;
+            }
+            this.open.set(false);
+        });
+        this.destroyRef.onDestroy(() => unlisten());
+    }
+    toggle(event) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        this.open.set(!this.open());
+    }
+    onInputTextChange(value) {
+        this.textInputValue.set(value);
+        if (!value.trim()) {
+            this.updateDateValue(null);
+            return;
+        }
+        const parsed = parseDate(value, this.effectiveFormat());
+        if (parsed) {
+            this.updateDateValue(parsed);
+        }
+    }
+    onInputBlur() {
+        this.onTouched();
+        const val = this.value();
+        if (val) {
+            this.textInputValue.set(formatDate(val, this.effectiveFormat()));
+        }
+        else {
+            this.textInputValue.set('');
+        }
+    }
+    onCalendarDateSelected(date) {
+        const prev = this.value();
+        if (prev && this.showTime()) {
+            date.setHours(prev.getHours(), prev.getMinutes(), prev.getSeconds());
+        }
+        this.updateDateValue(date);
+        if (!this.showTime()) {
+            this.open.set(false);
+        }
+    }
+    onTimeSelected(val) {
+        if (!val)
+            return;
+        const current = this.value() || new Date();
+        const nextDate = new Date(current);
+        if (val instanceof Date) {
+            nextDate.setHours(val.getHours(), val.getMinutes(), val.getSeconds());
+        }
+        else {
+            const parts = val.split(':');
+            nextDate.setHours(parseInt(parts[0], 10) || 0);
+            nextDate.setMinutes(parseInt(parts[1], 10) || 0);
+            if (parts[2]) {
+                nextDate.setSeconds(parseInt(parts[2], 10) || 0);
+            }
+        }
+        this.updateDateValue(nextDate);
+    }
+    clear(event) {
+        event.stopPropagation();
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        this.updateDateValue(null);
+    }
+    effectiveFormat() {
+        const explicit = this.format();
+        const base = explicit || getLocaleDefaultDateFormat(this.locale());
+        if (this.showTime()) {
+            return this.timeFormat() === '12h'
+                ? this.showSeconds()
+                    ? `${base} hh:mm:ss A`
+                    : `${base} hh:mm A`
+                : this.showSeconds()
+                    ? `${base} HH:mm:ss`
+                    : `${base} HH:mm`;
+        }
+        return base;
+    }
+    updateDateValue(date) {
+        this.value.set(date);
+        this.textInputValue.set(formatDate(date, this.effectiveFormat()));
+        this.dateSelected.emit(date);
+        this.onChange(date);
+        this.onTouched();
+    }
+    writeValue(val) {
+        let d = null;
+        if (val instanceof Date) {
+            d = val;
+        }
+        else if (typeof val === 'string') {
+            d = parseDate(val, this.effectiveFormat());
+        }
+        this.value.set(d);
+        this.textInputValue.set(formatDate(d, this.effectiveFormat()));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataDatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataDatePickerComponent, isStandalone: true, selector: "st-datepicker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", dateSelected: "dateSelected" }, host: { properties: { "class.st-datepicker": "true", "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-state-warning": "effectiveState() === \"warning\"", "class.st-error": "effectiveState() === \"error\"", "attr.aria-invalid": "effectiveState() === \"error\" ? \"true\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => StrataDatePickerComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "overlayDirective", first: true, predicate: StrataOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"calendarOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear date\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"calendar\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-message\"\n      [class.st-message-error]=\"isMessageError()\"\n      [class.st-message-success]=\"isMessageSuccess()\"\n      [class.st-message-warning]=\"isMessageWarning()\"\n      [attr.role]=\"isMessageError() ? 'alert' : null\"\n    >\n      {{ message() }}\n    </span>\n  </div>\n}\n\n<ng-template #calendarOverlay>\n  <div class=\"st-datepicker-dropdown\" [class.st-datepicker-with-time]=\"showTime()\">\n    <st-calendar\n      mode=\"single\"\n      [size]=\"calendarSize()\"\n      [locale]=\"locale()\"\n      [value]=\"value()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      (dateSelected)=\"onCalendarDateSelected($event)\"\n    ></st-calendar>\n    @if (showTime()) {\n      <div class=\"st-datepicker-time-side\">\n        <st-time-picker\n          [value]=\"value()\"\n          [format]=\"timeFormat()\"\n          [showSeconds]=\"showSeconds()\"\n          [minuteStep]=\"minuteStep()\"\n          [disabled]=\"effectiveDisabled()\"\n          (valueChange)=\"onTimeSelected($event)\"\n        ></st-time-picker>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-datepicker-dropdown{border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);background-color:var(--st-color-bg-raised);box-shadow:var(--st-shadow-2);padding:var(--st-space-3);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out}.st-datepicker-dropdown.st-datepicker-with-time{display:flex;align-items:stretch;gap:0;padding:0}.st-datepicker-dropdown.st-datepicker-with-time>st-calendar{padding:var(--st-space-3)}.st-datepicker-time-side{display:flex;align-items:center;justify-content:center;padding:var(--st-space-3) var(--st-space-4);border-left:1px solid var(--st-border-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataCalendarComponent, selector: "st-calendar", inputs: ["mode", "size", "locale", "value", "rangeValue", "viewDate", "minDate", "maxDate", "disabledDates", "firstDayOfWeek", "showAdjacentMonths", "disabled"], outputs: ["valueChange", "rangeValueChange", "viewDateChange", "dateSelected", "rangeSelected"] }, { kind: "component", type: StrataTimePickerComponent, selector: "st-time-picker", inputs: ["format", "showSeconds", "minuteStep", "disabled", "value"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataDatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-datepicker', imports: [
+                        CommonModule,
+                        FormsModule,
+                        StrataIconComponent,
+                        StrataOverlayDirective,
+                        StrataCalendarComponent,
+                        StrataTimePickerComponent
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StrataDatePickerComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class.st-datepicker]': 'true',
+                        '[class.st-size-sm]': 'size() === "sm"',
+                        '[class.st-size-md]': 'size() === "md"',
+                        '[class.st-size-lg]': 'size() === "lg"',
+                        '[class.st-disabled]': 'effectiveDisabled()',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[class.st-state-error]': 'effectiveState() === "error"',
+                        '[class.st-state-success]': 'effectiveState() === "success"',
+                        '[class.st-state-warning]': 'effectiveState() === "warning"',
+                        '[class.st-error]': 'effectiveState() === "error"',
+                        '[attr.aria-invalid]': 'effectiveState() === "error" ? "true" : null'
+                    }, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"calendarOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear date\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"calendar\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-message\"\n      [class.st-message-error]=\"isMessageError()\"\n      [class.st-message-success]=\"isMessageSuccess()\"\n      [class.st-message-warning]=\"isMessageWarning()\"\n      [attr.role]=\"isMessageError() ? 'alert' : null\"\n    >\n      {{ message() }}\n    </span>\n  </div>\n}\n\n<ng-template #calendarOverlay>\n  <div class=\"st-datepicker-dropdown\" [class.st-datepicker-with-time]=\"showTime()\">\n    <st-calendar\n      mode=\"single\"\n      [size]=\"calendarSize()\"\n      [locale]=\"locale()\"\n      [value]=\"value()\"\n      [minDate]=\"minDate()\"\n      [maxDate]=\"maxDate()\"\n      [disabledDates]=\"disabledDates()\"\n      [firstDayOfWeek]=\"firstDayOfWeek()\"\n      (dateSelected)=\"onCalendarDateSelected($event)\"\n    ></st-calendar>\n    @if (showTime()) {\n      <div class=\"st-datepicker-time-side\">\n        <st-time-picker\n          [value]=\"value()\"\n          [format]=\"timeFormat()\"\n          [showSeconds]=\"showSeconds()\"\n          [minuteStep]=\"minuteStep()\"\n          [disabled]=\"effectiveDisabled()\"\n          (valueChange)=\"onTimeSelected($event)\"\n        ></st-time-picker>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-datepicker-dropdown{border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);background-color:var(--st-color-bg-raised);box-shadow:var(--st-shadow-2);padding:var(--st-space-3);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out}.st-datepicker-dropdown.st-datepicker-with-time{display:flex;align-items:stretch;gap:0;padding:0}.st-datepicker-dropdown.st-datepicker-with-time>st-calendar{padding:var(--st-space-3)}.st-datepicker-time-side{display:flex;align-items:center;justify-content:center;padding:var(--st-space-3) var(--st-space-4);border-left:1px solid var(--st-border-subtle)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], overlayDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataOverlayDirective), { isSignal: true }] }] } });
+
+let nextUniqueDateRangePickerId = 0;
+const DEFAULT_DATE_RANGE_PRESETS = [
+    {
+        label: 'Today',
+        getRange: () => {
+            const now = new Date();
+            return { start: now, end: now };
+        }
+    },
+    {
+        label: 'Yesterday',
+        getRange: () => {
+            const yesterday = addDays(new Date(), -1);
+            return { start: yesterday, end: yesterday };
+        }
+    },
+    {
+        label: 'Last 7 Days',
+        getRange: () => {
+            const now = new Date();
+            return { start: addDays(now, -6), end: now };
+        }
+    },
+    {
+        label: 'Last 30 Days',
+        getRange: () => {
+            const now = new Date();
+            return { start: addDays(now, -29), end: now };
+        }
+    },
+    {
+        label: 'This Month',
+        getRange: () => {
+            const now = new Date();
+            return { start: startOfMonth(now), end: endOfMonth(now) };
+        }
+    },
+    {
+        label: 'Last Month',
+        getRange: () => {
+            const prevMonth = addMonths(new Date(), -1);
+            return { start: startOfMonth(prevMonth), end: endOfMonth(prevMonth) };
+        }
+    }
+];
+class StrataDateRangePickerComponent {
+    defaultId = `st-daterange-${nextUniqueDateRangePickerId++}`;
+    label = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    id = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    name = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    placeholder = input('Start date – End date', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    separator = input(' – ', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    format = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    placement = input('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    calendarSize = computed(() => (this.size() === 'sm' ? 'sm' : 'md'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarSize" }] : /* istanbul ignore next */ []));
+    numberOfMonths = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numberOfMonths" }] : /* istanbul ignore next */ []));
+    showPresets = input(true, { ...(ngDevMode ? { debugName: "showPresets" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    presets = input(DEFAULT_DATE_RANGE_PRESETS, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "presets" }] : /* istanbul ignore next */ []));
+    clearable = input(true, { ...(ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    state = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    error = input(false, { ...(ngDevMode ? { debugName: "error" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    message = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    colorMessage = input(true, { ...(ngDevMode ? { debugName: "colorMessage" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    minDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    disabledDates = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []));
+    initialViewDate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialViewDate" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    rangeSelected = output();
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    textInputValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textInputValue" }] : /* istanbul ignore next */ []));
+    calendarViewDate = signal(new Date(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "calendarViewDate" }] : /* istanbul ignore next */ []));
+    secondCalendarViewDate = computed(() => {
+        return addMonths(this.calendarViewDate(), 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "secondCalendarViewDate" }] : /* istanbul ignore next */ []));
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    effectiveId = computed(() => this.id() ?? this.name() ?? this.defaultId, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveId" }] : /* istanbul ignore next */ []));
+    effectiveState = computed(() => {
+        if (this.error()) {
+            return 'error';
+        }
+        return this.state() ?? 'default';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveState" }] : /* istanbul ignore next */ []));
+    isMessageError = computed(() => this.effectiveState() === 'error' && this.colorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMessageError" }] : /* istanbul ignore next */ []));
+    isMessageSuccess = computed(() => this.effectiveState() === 'success' && this.colorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
+    isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    overlayDirective = viewChild(StrataOverlayDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayDirective" }] : /* istanbul ignore next */ []));
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroyRef = inject(DestroyRef);
+    get effectiveFormat() {
+        return this.format() || getLocaleDefaultDateFormat(this.locale());
+    }
+    constructor() {
+        const unlisten = this.renderer.listen('document', 'pointerdown', (event) => {
+            if (!this.open())
+                return;
+            const target = event.target;
+            if (!target)
+                return;
+            const hostEl = this.elementRef.nativeElement;
+            const overlayEl = this.overlayDirective()?.getOverlayElement();
+            if (hostEl.contains(target) || (overlayEl && overlayEl.contains(target))) {
+                return;
+            }
+            this.open.set(false);
+        });
+        this.destroyRef.onDestroy(() => unlisten());
+        effect(() => {
+            const val = this.value();
+            if (val && val.start && val.end) {
+                this.textInputValue.set(`${formatDate(val.start, this.effectiveFormat)}${this.separator()}${formatDate(val.end, this.effectiveFormat)}`);
+                this.calendarViewDate.set(new Date(val.start));
+            }
+            else {
+                this.textInputValue.set('');
+            }
+        });
+    }
+    toggle(event) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        const opening = !this.open();
+        if (opening) {
+            const range = this.value();
+            const viewDate = range?.start ?? this.initialViewDate() ?? new Date();
+            this.calendarViewDate.set(new Date(viewDate));
+        }
+        this.open.set(opening);
+    }
+    onInputTextChange(value) {
+        this.textInputValue.set(value);
+        if (!value.trim()) {
+            this.updateRangeValue(null);
+            return;
+        }
+        const parts = value.split(this.separator());
+        if (parts.length === 2) {
+            const s = parseDate(parts[0], this.effectiveFormat);
+            const e = parseDate(parts[1], this.effectiveFormat);
+            if (s && e) {
+                this.updateRangeValue({ start: s, end: e });
+            }
+        }
+    }
+    onInputBlur() {
+        this.onTouched();
+        const val = this.value();
+        if (val && val.start && val.end) {
+            this.textInputValue.set(`${formatDate(val.start, this.effectiveFormat)}${this.separator()}${formatDate(val.end, this.effectiveFormat)}`);
+        }
+        else {
+            this.textInputValue.set('');
+        }
+    }
+    onCalendarRangeSelected(range) {
+        this.value.set(range);
+        if (range.start && range.end) {
+            this.textInputValue.set(`${formatDate(range.start, this.effectiveFormat)}${this.separator()}${formatDate(range.end, this.effectiveFormat)}`);
+            this.rangeSelected.emit(range);
+            this.onChange(range);
+            this.onTouched();
+            this.open.set(false);
+        }
+    }
+    onSecondCalendarViewDateChange(date) {
+        this.calendarViewDate.set(addMonths(date, -1));
+    }
+    applyPreset(preset) {
+        const range = preset.getRange();
+        this.updateRangeValue(range);
+        this.open.set(false);
+    }
+    clear(event) {
+        event.stopPropagation();
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        this.updateRangeValue(null);
+    }
+    updateRangeValue(range) {
+        this.value.set(range);
+        if (range && range.start && range.end) {
+            this.textInputValue.set(`${formatDate(range.start, this.effectiveFormat)}${this.separator()}${formatDate(range.end, this.effectiveFormat)}`);
+        }
+        else {
+            this.textInputValue.set('');
+        }
+        this.rangeSelected.emit(range);
+        this.onChange(range);
+        this.onTouched();
+    }
+    writeValue(val) {
+        this.value.set(val);
+        if (val && val.start && val.end) {
+            this.textInputValue.set(`${formatDate(val.start, this.effectiveFormat)}${this.separator()}${formatDate(val.end, this.effectiveFormat)}`);
+            this.calendarViewDate.set(new Date(val.start));
+        }
+        else {
+            this.textInputValue.set('');
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.cvaDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataDateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataDateRangePickerComponent, isStandalone: true, selector: "st-date-range-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, showPresets: { classPropertyName: "showPresets", publicName: "showPresets", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, colorMessage: { classPropertyName: "colorMessage", publicName: "colorMessage", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, initialViewDate: { classPropertyName: "initialViewDate", publicName: "initialViewDate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", rangeSelected: "rangeSelected" }, host: { properties: { "class.st-date-range-picker": "true", "class.st-size-sm": "size() === \"sm\"", "class.st-size-md": "size() === \"md\"", "class.st-size-lg": "size() === \"lg\"", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "class.st-state-error": "effectiveState() === \"error\"", "class.st-state-success": "effectiveState() === \"success\"", "class.st-state-warning": "effectiveState() === \"warning\"", "class.st-error": "effectiveState() === \"error\"", "attr.aria-invalid": "effectiveState() === \"error\" ? \"true\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => StrataDateRangePickerComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "overlayDirective", first: true, predicate: StrataOverlayDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"rangeCalendarOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear date range\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"calendar\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-message\"\n      [class.st-message-error]=\"isMessageError()\"\n      [class.st-message-success]=\"isMessageSuccess()\"\n      [class.st-message-warning]=\"isMessageWarning()\"\n      [attr.role]=\"isMessageError() ? 'alert' : null\"\n    >\n      {{ message() }}\n    </span>\n  </div>\n}\n\n<ng-template #rangeCalendarOverlay>\n  <div class=\"st-date-range-dropdown\">\n    @if (showPresets() && presets().length > 0) {\n      <div class=\"st-date-range-presets\">\n        <div class=\"st-presets-title\">Presets</div>\n        @for (preset of presets(); track preset.label) {\n          <button\n            type=\"button\"\n            class=\"st-preset-btn\"\n            (click)=\"applyPreset(preset)\"\n          >\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"st-date-range-calendars\">\n      <st-calendar\n        mode=\"range\"\n        [size]=\"calendarSize()\"\n        [locale]=\"locale()\"\n        [rangeValue]=\"value()\"\n        [viewDate]=\"calendarViewDate()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabledDates]=\"disabledDates()\"\n        [firstDayOfWeek]=\"firstDayOfWeek()\"\n        (rangeSelected)=\"onCalendarRangeSelected($event)\"\n        (viewDateChange)=\"calendarViewDate.set($event)\"\n      ></st-calendar>\n\n      @if (numberOfMonths() >= 2) {\n        <st-calendar\n          mode=\"range\"\n          [size]=\"calendarSize()\"\n          [locale]=\"locale()\"\n          [rangeValue]=\"value()\"\n          [viewDate]=\"secondCalendarViewDate()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          (rangeSelected)=\"onCalendarRangeSelected($event)\"\n          (viewDateChange)=\"onSecondCalendarViewDateChange($event)\"\n        ></st-calendar>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-date-range-dropdown{display:flex;background-color:var(--st-color-bg-raised);border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);box-shadow:var(--st-shadow-2);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out}.st-date-range-presets{display:flex;flex-direction:column;padding:var(--st-space-2);border-right:1px solid var(--st-border-subtle);min-width:130px;gap:2px}.st-presets-title{font-size:.75rem;font-weight:var(--st-font-weight-semibold);color:var(--st-color-text-tertiary);padding:4px 8px;text-transform:uppercase;letter-spacing:.05em}.st-preset-btn{background:transparent;border:none;font-family:inherit;font-size:var(--st-font-sm);color:var(--st-color-text-secondary);padding:6px 8px;border-radius:var(--st-border-radius-sm);text-align:left;cursor:pointer;transition:background-color var(--st-transition-fast),color var(--st-transition-fast)}.st-preset-btn:hover{background-color:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-date-range-calendars{display:flex;gap:var(--st-space-4);padding:var(--st-space-3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size", "ariaLabel"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataCalendarComponent, selector: "st-calendar", inputs: ["mode", "size", "locale", "value", "rangeValue", "viewDate", "minDate", "maxDate", "disabledDates", "firstDayOfWeek", "showAdjacentMonths", "disabled"], outputs: ["valueChange", "rangeValueChange", "viewDateChange", "dateSelected", "rangeSelected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataDateRangePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-date-range-picker', imports: [
+                        CommonModule,
+                        StrataIconComponent,
+                        StrataOverlayDirective,
+                        StrataCalendarComponent
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StrataDateRangePickerComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class.st-date-range-picker]': 'true',
+                        '[class.st-size-sm]': 'size() === "sm"',
+                        '[class.st-size-md]': 'size() === "md"',
+                        '[class.st-size-lg]': 'size() === "lg"',
+                        '[class.st-disabled]': 'effectiveDisabled()',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[class.st-state-error]': 'effectiveState() === "error"',
+                        '[class.st-state-success]': 'effectiveState() === "success"',
+                        '[class.st-state-warning]': 'effectiveState() === "warning"',
+                        '[class.st-error]': 'effectiveState() === "error"',
+                        '[attr.aria-invalid]': 'effectiveState() === "error" ? "true" : null'
+                    }, template: "@if (label()) {\n  <label class=\"st-label\" [for]=\"effectiveId()\">{{ label() }}</label>\n}\n\n<div\n  class=\"st-input-wrapper\"\n  [class.full-width]=\"fullWidth()\"\n  [class.disabled]=\"effectiveDisabled()\"\n  [class.open]=\"open()\"\n  [stOverlay]=\"rangeCalendarOverlay\"\n  [overlayOpen]=\"open()\"\n  [overlayPlacement]=\"placement()\"\n>\n  <input\n    type=\"text\"\n    [id]=\"effectiveId()\"\n    [placeholder]=\"placeholder()\"\n    [value]=\"textInputValue()\"\n    [disabled]=\"effectiveDisabled()\"\n    [readonly]=\"readonly()\"\n    (input)=\"onInputTextChange($any($event.target).value)\"\n    (blur)=\"onInputBlur()\"\n    (click)=\"toggle($event)\"\n    (keydown.enter)=\"toggle($event)\"\n    (keydown.escape)=\"open.set(false)\"\n  />\n\n  <div class=\"affix\">\n    @if (clearable() && value() && !effectiveDisabled() && !readonly()) {\n      <button\n        type=\"button\"\n        class=\"st-icon-btn\"\n        (click)=\"clear($event)\"\n        aria-label=\"Clear date range\"\n      >\n        <st-icon name=\"close\" size=\"xs\"></st-icon>\n      </button>\n    }\n\n    <span class=\"st-trigger-icon\" (click)=\"toggle($event)\">\n      <st-icon name=\"calendar\" size=\"xs\"></st-icon>\n    </span>\n  </div>\n</div>\n\n@if (message()) {\n  <div class=\"st-input-field-footer\">\n    <span\n      class=\"st-input-field-message\"\n      [class.st-message-error]=\"isMessageError()\"\n      [class.st-message-success]=\"isMessageSuccess()\"\n      [class.st-message-warning]=\"isMessageWarning()\"\n      [attr.role]=\"isMessageError() ? 'alert' : null\"\n    >\n      {{ message() }}\n    </span>\n  </div>\n}\n\n<ng-template #rangeCalendarOverlay>\n  <div class=\"st-date-range-dropdown\">\n    @if (showPresets() && presets().length > 0) {\n      <div class=\"st-date-range-presets\">\n        <div class=\"st-presets-title\">Presets</div>\n        @for (preset of presets(); track preset.label) {\n          <button\n            type=\"button\"\n            class=\"st-preset-btn\"\n            (click)=\"applyPreset(preset)\"\n          >\n            {{ preset.label }}\n          </button>\n        }\n      </div>\n    }\n\n    <div class=\"st-date-range-calendars\">\n      <st-calendar\n        mode=\"range\"\n        [size]=\"calendarSize()\"\n        [locale]=\"locale()\"\n        [rangeValue]=\"value()\"\n        [viewDate]=\"calendarViewDate()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabledDates]=\"disabledDates()\"\n        [firstDayOfWeek]=\"firstDayOfWeek()\"\n        (rangeSelected)=\"onCalendarRangeSelected($event)\"\n        (viewDateChange)=\"calendarViewDate.set($event)\"\n      ></st-calendar>\n\n      @if (numberOfMonths() >= 2) {\n        <st-calendar\n          mode=\"range\"\n          [size]=\"calendarSize()\"\n          [locale]=\"locale()\"\n          [rangeValue]=\"value()\"\n          [viewDate]=\"secondCalendarViewDate()\"\n          [minDate]=\"minDate()\"\n          [maxDate]=\"maxDate()\"\n          [disabledDates]=\"disabledDates()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          (rangeSelected)=\"onCalendarRangeSelected($event)\"\n          (viewDateChange)=\"onSecondCalendarViewDateChange($event)\"\n        ></st-calendar>\n      }\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;box-sizing:border-box;width:100%}:host label{margin-bottom:var(--st-space-2)}.st-input-wrapper{display:flex;align-items:center;box-sizing:border-box;height:var(--st-interactive-element-height-md);background-color:var(--st-color-bg-raised);border:1px solid var(--st-border-muted);border-radius:var(--st-border-radius-md);overflow:hidden;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast)}.st-input-wrapper:hover{background-color:var(--st-color-input-hover);border-color:var(--st-color-border-strong)}.st-input-wrapper:focus-within,.st-input-wrapper.open{outline:var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);outline-offset:var(--st-focus-ring-offset);border-color:var(--st-color-border-strong)}:host(.st-size-sm) .st-input-wrapper{height:var(--st-interactive-element-height-sm);border-radius:var(--st-border-radius-sm)}:host(.st-size-sm) input{padding:0 var(--st-size-xxs);font-size:var(--st-font-sm)}:host(.st-size-sm) .affix{padding-right:var(--st-size-xxs)}:host(.st-size-lg) .st-input-wrapper{height:var(--st-interactive-element-height-lg)}:host(.st-state-error) .st-input-wrapper,:host(.st-error) .st-input-wrapper{border-color:var(--st-color-feedback-error-default);outline-color:var(--st-color-feedback-error-default)}:host(.st-state-success) .st-input-wrapper{border-color:var(--st-color-feedback-success-default);outline-color:var(--st-color-feedback-success-default)}:host(.st-state-warning) .st-input-wrapper{border-color:var(--st-color-feedback-warning-default);outline-color:var(--st-color-feedback-warning-default)}:host(.st-disabled){opacity:.55;pointer-events:none;cursor:not-allowed}input{border:none;background:none;width:100%;padding:0 var(--st-size-xs);color:var(--st-color-text-primary);font-size:var(--st-font-md);font-family:inherit;height:100%;cursor:pointer;outline:none}input::placeholder{color:var(--st-color-text-tertiary)}.affix{display:flex;align-items:center;padding-right:var(--st-size-xs);gap:var(--st-space-1);color:var(--st-color-text-tertiary)}.st-icon-btn,.st-trigger-icon{background:transparent;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--st-color-text-tertiary);transition:color var(--st-transition-fast)}.st-icon-btn:hover,.st-trigger-icon:hover{color:var(--st-color-text-primary)}.st-input-field-footer{display:flex;margin-top:var(--st-space-1);line-height:1.25}.st-input-field-message{font-size:var(--st-font-sm);color:var(--st-color-text-secondary)}.st-input-field-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-input-field-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-input-field-message.st-message-warning{color:var(--st-color-feedback-warning-text)}.st-date-range-dropdown{display:flex;background-color:var(--st-color-bg-raised);border:1px solid var(--st-border);border-radius:var(--st-border-radius-lg);box-shadow:var(--st-shadow-2);overflow:hidden;animation:st-popover-in var(--st-transition-fast) ease-out}.st-date-range-presets{display:flex;flex-direction:column;padding:var(--st-space-2);border-right:1px solid var(--st-border-subtle);min-width:130px;gap:2px}.st-presets-title{font-size:.75rem;font-weight:var(--st-font-weight-semibold);color:var(--st-color-text-tertiary);padding:4px 8px;text-transform:uppercase;letter-spacing:.05em}.st-preset-btn{background:transparent;border:none;font-family:inherit;font-size:var(--st-font-sm);color:var(--st-color-text-secondary);padding:6px 8px;border-radius:var(--st-border-radius-sm);text-align:left;cursor:pointer;transition:background-color var(--st-transition-fast),color var(--st-transition-fast)}.st-preset-btn:hover{background-color:var(--st-color-control-bg-hover, var(--st-color-bg-default));color:var(--st-color-text-primary)}.st-date-range-calendars{display:flex;gap:var(--st-space-4);padding:var(--st-space-3)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], showPresets: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPresets", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], colorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorMessage", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], initialViewDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialViewDate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], rangeSelected: [{ type: i0.Output, args: ["rangeSelected"] }], overlayDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataOverlayDirective), { isSignal: true }] }] } });
+
 class StrataDividerComponent {
     label = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
@@ -5345,5 +6645,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BreakpointService, CapitalizePipe, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DeviceService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCardComponent, StrataCheckboxComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalBodyComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataNumberStepperComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSkeletonComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataToggleComponent, StrataTooltipDirective, getDefaultShortcutLabels, isApplePlatform, provideBaseIcons, provideIcons, provideStrata, resolveIsApple };
+export { BreakpointService, CapitalizePipe, DEFAULT_DATE_RANGE_PRESETS, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DeviceService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCalendarComponent, StrataCardComponent, StrataCheckboxComponent, StrataDatePickerComponent, StrataDateRangePickerComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalBodyComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataNumberStepperComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSkeletonComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataTimePickerComponent, StrataToggleComponent, StrataTooltipDirective, addDays, addMonths, addYears, createCalendarGrid, disableDateRange, disableDaysOfWeek, disableFutureDates, disablePastDates, disableWeekends, endOfDay, endOfMonth, formatDate, formatMonthTitle, getDayOfWeek, getDaysInMonth, getDefaultShortcutLabels, getLocaleDefaultDateFormat, getMonthNames, getWeekdayNames, isAfterDay, isApplePlatform, isBeforeDay, isSameDay, isSameMonth, isSameYear, isWeekend, isWithinDayRange, parseDate, provideBaseIcons, provideIcons, provideStrata, resolveIsApple, startOfDay, startOfMonth };
 //# sourceMappingURL=ngx-strata.mjs.map