ngx-strata 0.5.2 → 0.6.1

package/fesm2022/ngx-strata.mjs

@@ -96,6 +96,26 @@ const baseIconConfigs = [
         name: 'check',
         url: 'assets/icons/check.svg'
     },
+    {
+        name: 'calendar',
+        url: 'assets/icons/calendar.svg'
+    },
+    {
+        name: 'clock',
+        url: 'assets/icons/clock.svg'
+    },
+    {
+        name: 'upload',
+        url: 'assets/icons/upload.svg'
+    },
+    {
+        name: 'camera',
+        url: 'assets/icons/camera.svg'
+    },
+    {
+        name: 'image',
+        url: 'assets/icons/image.svg'
+    }
 ];
 
 const provideBaseIcons = () => {
@@ -1216,6 +1236,8 @@ class StrataOverlayDirective {
     ...(ngDevMode ? [{ debugName: "overlayOffset" }] : /* istanbul ignore next */ []));
     overlayFitViewport = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "overlayFitViewport" }] : /* istanbul ignore next */ []));
+    overlayTarget = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayTarget" }] : /* istanbul ignore next */ []));
     element = inject(ElementRef);
     viewContainerRef = inject(ViewContainerRef);
     config = inject(STRATA_CONFIG, { optional: true });
@@ -1224,12 +1246,25 @@ class StrataOverlayDirective {
     viewRef;
     ngOnChanges() {
         if (this.overlayOpen()) {
-            this.create();
+            if (!this.overlayEl) {
+                this.create();
+            }
+            else {
+                if (this.cleanup) {
+                    this.cleanup();
+                }
+                const target = this.getTarget();
+                this.cleanup = autoUpdate(target, this.overlayEl, () => this.updatePosition());
+                this.updatePosition();
+            }
         }
         else {
             this.destroy();
         }
     }
+    getTarget() {
+        return this.overlayTarget() ?? this.element.nativeElement;
+    }
     async create() {
         if (this.overlayEl)
             return;
@@ -1237,7 +1272,8 @@ class StrataOverlayDirective {
         this.viewRef.detectChanges();
         this.overlayEl = this.viewRef.rootNodes[0];
         document.body.appendChild(this.overlayEl);
-        this.cleanup = autoUpdate(this.element.nativeElement, this.overlayEl, () => this.updatePosition());
+        const target = this.getTarget();
+        this.cleanup = autoUpdate(target, this.overlayEl, () => this.updatePosition());
     }
     async updatePosition() {
         if (!this.overlayEl)
@@ -1260,14 +1296,15 @@ class StrataOverlayDirective {
         else {
             this.overlayEl.style.maxHeight = '';
         }
-        const { x, y } = await computePosition(this.element.nativeElement, this.overlayEl, {
+        const target = this.getTarget();
+        const { x, y } = await computePosition(target, this.overlayEl, {
             placement: this.overlayPlacement(),
             strategy: 'fixed',
             middleware
         });
         if (!this.overlayEl)
             return;
-        const { width } = this.element.nativeElement.getBoundingClientRect();
+        const width = 'getBoundingClientRect' in target ? target.getBoundingClientRect().width : 0;
         Object.assign(this.overlayEl.style, {
             position: 'fixed',
             left: `${x}px`,
@@ -1294,14 +1331,14 @@ class StrataOverlayDirective {
         this.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataOverlayDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataOverlayDirective, isStandalone: true, selector: "[stOverlay]", inputs: { stOverlay: { classPropertyName: "stOverlay", publicName: "stOverlay", isSignal: true, isRequired: true, transformFunction: null }, overlayOpen: { classPropertyName: "overlayOpen", publicName: "overlayOpen", isSignal: true, isRequired: false, transformFunction: null }, overlayPlacement: { classPropertyName: "overlayPlacement", publicName: "overlayPlacement", isSignal: true, isRequired: false, transformFunction: null }, overlayOffset: { classPropertyName: "overlayOffset", publicName: "overlayOffset", isSignal: true, isRequired: false, transformFunction: null }, overlayFitViewport: { classPropertyName: "overlayFitViewport", publicName: "overlayFitViewport", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overlayOpen: "overlayOpenChange" }, usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataOverlayDirective, isStandalone: true, selector: "[stOverlay]", inputs: { stOverlay: { classPropertyName: "stOverlay", publicName: "stOverlay", isSignal: true, isRequired: true, transformFunction: null }, overlayOpen: { classPropertyName: "overlayOpen", publicName: "overlayOpen", isSignal: true, isRequired: false, transformFunction: null }, overlayPlacement: { classPropertyName: "overlayPlacement", publicName: "overlayPlacement", isSignal: true, isRequired: false, transformFunction: null }, overlayOffset: { classPropertyName: "overlayOffset", publicName: "overlayOffset", isSignal: true, isRequired: false, transformFunction: null }, overlayFitViewport: { classPropertyName: "overlayFitViewport", publicName: "overlayFitViewport", isSignal: true, isRequired: false, transformFunction: null }, overlayTarget: { classPropertyName: "overlayTarget", publicName: "overlayTarget", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { overlayOpen: "overlayOpenChange" }, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataOverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[stOverlay]'
                 }]
-        }], propDecorators: { stOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "stOverlay", required: true }] }], overlayOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOpen", required: false }] }, { type: i0.Output, args: ["overlayOpenChange"] }], overlayPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPlacement", required: false }] }], overlayOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOffset", required: false }] }], overlayFitViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayFitViewport", required: false }] }] } });
+        }], propDecorators: { stOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "stOverlay", required: true }] }], overlayOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOpen", required: false }] }, { type: i0.Output, args: ["overlayOpenChange"] }], overlayPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayPlacement", required: false }] }], overlayOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayOffset", required: false }] }], overlayFitViewport: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayFitViewport", required: false }] }], overlayTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayTarget", required: false }] }] } });
 
 class StrataActionMenuComponent {
     projectedButton = contentChild(StrataButtonDirective, { ...(ngDevMode ? { debugName: "projectedButton" } : /* istanbul ignore next */ {}), descendants: true,
@@ -1313,20 +1350,32 @@ 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 */ []));
+    trigger = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
     elementRef = inject(ElementRef);
     renderer = inject(Renderer2);
     menuOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
+    customTarget = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customTarget" }] : /* istanbul ignore next */ []));
+    contextMenuPlacement = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contextMenuPlacement" }] : /* istanbul ignore next */ []));
+    effectivePlacement = computed(() => {
+        return this.contextMenuPlacement() ?? this.placement();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectivePlacement" }] : /* istanbul ignore next */ []));
     constructor() {
         effect((onCleanup) => {
             const button = this.projectedButton() ?? this.defaultButton();
-            if (!button) {
+            if (!button || !this.trigger()) {
                 return;
             }
             const unlisten = this.renderer.listen(button.nativeElement, 'click', () => {
-                this.menuOpen.set(!this.menuOpen());
+                this.toggle();
             });
             onCleanup(() => {
                 unlisten();
@@ -1346,7 +1395,20 @@ class StrataActionMenuComponent {
                 if (hostEl.contains(target) || (overlayEl && overlayEl.contains(target))) {
                     return;
                 }
-                this.menuOpen.set(false);
+                this.close();
+            });
+            onCleanup(() => {
+                unlisten();
+            });
+        });
+        effect((onCleanup) => {
+            if (!this.menuOpen()) {
+                return;
+            }
+            const unlisten = this.renderer.listen('document', 'keydown', (event) => {
+                if (event.key === 'Escape') {
+                    this.close();
+                }
             });
             onCleanup(() => {
                 unlisten();
@@ -1355,7 +1417,7 @@ class StrataActionMenuComponent {
         effect((onCleanup) => {
             const subs = this.actionMenuItems().map((item) => item.menuItemClicked.subscribe((shouldClose) => {
                 if (shouldClose) {
-                    this.menuOpen.set(false);
+                    this.close();
                 }
             }));
             onCleanup(() => {
@@ -1363,18 +1425,95 @@ class StrataActionMenuComponent {
             });
         });
     }
+    open() {
+        this.customTarget.set(null);
+        this.contextMenuPlacement.set(null);
+        this.menuOpen.set(true);
+    }
+    close() {
+        this.menuOpen.set(false);
+        this.customTarget.set(null);
+        this.contextMenuPlacement.set(null);
+    }
+    toggle() {
+        if (this.menuOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    openAt(position, placement = 'bottom-start') {
+        const clientX = 'clientX' in position ? position.clientX : position.x;
+        const clientY = 'clientY' in position ? position.clientY : position.y;
+        const virtualElement = {
+            getBoundingClientRect() {
+                return {
+                    x: clientX,
+                    y: clientY,
+                    top: clientY,
+                    left: clientX,
+                    bottom: clientY,
+                    right: clientX,
+                    width: 0,
+                    height: 0
+                };
+            }
+        };
+        this.customTarget.set(virtualElement);
+        this.contextMenuPlacement.set(placement);
+        this.menuOpen.set(true);
+    }
     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 }, trigger: { classPropertyName: "trigger", publicName: "trigger", 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\n  [stOverlay]=\"menu\"\n  [overlayOpen]=\"menuOpen()\"\n  [overlayPlacement]=\"effectivePlacement()\"\n  [overlayTarget]=\"customTarget()\">\n  @if (trigger()) {\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  }\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", "overlayTarget"], 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\n  [stOverlay]=\"menu\"\n  [overlayOpen]=\"menuOpen()\"\n  [overlayPlacement]=\"effectivePlacement()\"\n  [overlayTarget]=\"customTarget()\">\n  @if (trigger()) {\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  }\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 }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }] } });
+
+class StrataContextMenuDirective {
+    stContextMenu = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stContextMenu" }] : /* istanbul ignore next */ []));
+    stContextMenuDisabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stContextMenuDisabled" }] : /* istanbul ignore next */ []));
+    stContextMenuPlacement = input('bottom-start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stContextMenuPlacement" }] : /* istanbul ignore next */ []));
+    contextMenuOpened = output();
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    unlisten;
+    ngOnInit() {
+        this.unlisten = this.renderer.listen(this.elementRef.nativeElement, 'contextmenu', (event) => {
+            const menu = this.stContextMenu();
+            if (this.stContextMenuDisabled() || !menu) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.contextMenuOpened.emit(event);
+            menu.openAt(event, this.stContextMenuPlacement());
+        });
+    }
+    ngOnDestroy() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: StrataContextMenuDirective, isStandalone: true, selector: "[stContextMenu]", inputs: { stContextMenu: { classPropertyName: "stContextMenu", publicName: "stContextMenu", isSignal: true, isRequired: true, transformFunction: null }, stContextMenuDisabled: { classPropertyName: "stContextMenuDisabled", publicName: "stContextMenuDisabled", isSignal: true, isRequired: false, transformFunction: null }, stContextMenuPlacement: { classPropertyName: "stContextMenuPlacement", publicName: "stContextMenuPlacement", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextMenuOpened: "contextMenuOpened" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataContextMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[stContextMenu]'
+                }]
+        }], propDecorators: { stContextMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "stContextMenu", required: true }] }], stContextMenuDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "stContextMenuDisabled", required: false }] }], stContextMenuPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "stContextMenuPlacement", required: false }] }], contextMenuOpened: [{ type: i0.Output, args: ["contextMenuOpened"] }] } });
 
 class StrataTextStackComponent {
     overflow = input('truncate', /* @ts-ignore */
@@ -1646,44 +1785,241 @@ 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 StrataDividerComponent {
-    label = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    margin = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    vertical = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataDividerComponent, isStandalone: true, selector: "st-divider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" });
+class StrataTimeStepperComponent {
+    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: StrataTimeStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataTimeStepperComponent, isStandalone: true, selector: "st-time-stepper", 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-stepper": "true", "class.st-disabled": "effectiveDisabled()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => StrataTimeStepperComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"st-time-stepper-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-disabled{opacity:.55;pointer-events:none}.st-time-stepper-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: StrataDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTimeStepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-divider', imports: [], template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }] } });
+            args: [{ selector: 'st-time-stepper', imports: [CommonModule, StrataIconComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StrataTimeStepperComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class.st-time-stepper]': 'true',
+                        '[class.st-disabled]': 'effectiveDisabled()',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null'
+                    }, template: "<div class=\"st-time-stepper-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-disabled{opacity:.55;pointer-events:none}.st-time-stepper-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"] }] } });
 
-class StrataFileUploadComponent {
-    fileInput = viewChild('fileInput', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
-    accept = input('*', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
-    multiple = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
-    maxFileSize = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    label = input('Choose a file or drag & drop it here', /* @ts-ignore */
+let nextUniqueTimepickerId = 0;
+class StrataTimepickerComponent {
+    defaultId = `st-timepicker-${nextUniqueTimepickerId++}`;
+    label = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    hint = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hint" }] : /* 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 time', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* 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 */ []));
+    format = input('24h', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "format" }] : /* 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 */ []));
+    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 });
-    displayMessage = computed(() => this.message() ?? this.hint(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "displayMessage" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    timeSelected = 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';
@@ -1697,86 +2033,1478 @@ class StrataFileUploadComponent {
     ...(ngDevMode ? [{ debugName: "isMessageSuccess" }] : /* istanbul ignore next */ []));
     isMessageWarning = computed(() => this.effectiveState() === 'warning' && this.colorMessage(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isMessageWarning" }] : /* istanbul ignore next */ []));
-    fileSelect = output();
-    filesSelect = output();
-    fileRejected = output();
-    isDragOver = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
-    get hostDisabled() {
-        return this.disabled();
-    }
-    get hostError() {
-        return this.effectiveState() === 'error';
-    }
-    get hostSuccess() {
-        return this.effectiveState() === 'success';
-    }
-    get hostWarning() {
-        return this.effectiveState() === 'warning';
-    }
-    get hostAriaInvalid() {
-        return this.effectiveState() === 'error' ? 'true' : null;
-    }
-    get hostDragOver() {
-        return this.isDragOver();
-    }
-    hostRole = 'button';
-    get hostTabIndex() {
-        return this.disabled() ? -1 : 0;
+    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());
     }
-    onClick(event) {
-        const target = event.target;
-        if (target === this.fileInput()?.nativeElement) {
+    toggle(event) {
+        if (this.effectiveDisabled() || this.readonly())
             return;
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
         }
-        this.browse();
-    }
-    onKeydown(event) {
-        event.preventDefault();
-        this.browse();
+        this.open.set(!this.open());
     }
-    onDragOver(event) {
-        if (this.disabled())
+    onInputTextChange(value) {
+        this.textInputValue.set(value);
+        if (!value.trim()) {
+            this.updateTimeValue(null);
             return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(true);
+        }
+        const parsed = this.parseTimeString(value);
+        if (parsed) {
+            this.updateTimeValue(parsed);
+        }
     }
-    onDragLeave(event) {
-        if (this.disabled())
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        this.isDragOver.set(false);
+    onInputBlur() {
+        this.onTouched();
+        const val = this.value();
+        if (val) {
+            this.textInputValue.set(this.formatTimeValue(val));
+        }
+        else {
+            this.textInputValue.set('');
+        }
     }
-    onDrop(event) {
-        if (this.disabled())
-            return;
-        event.preventDefault();
+    onStepperTimeSelected(val) {
+        this.updateTimeValue(val);
+    }
+    clear(event) {
         event.stopPropagation();
-        this.isDragOver.set(false);
-        const droppedFiles = event.dataTransfer?.files;
-        if (!droppedFiles || droppedFiles.length === 0)
+        if (this.effectiveDisabled() || this.readonly())
             return;
-        this.processFiles(Array.from(droppedFiles));
+        this.updateTimeValue(null);
     }
-    onFileChange(event) {
+    formatTimeValue(val) {
+        if (!val)
+            return '';
+        let hours = 0;
+        let minutes = 0;
+        let seconds = 0;
+        if (val instanceof Date) {
+            hours = val.getHours();
+            minutes = val.getMinutes();
+            seconds = val.getSeconds();
+        }
+        else if (typeof val === 'string') {
+            const parts = val.trim().split(':');
+            hours = parseInt(parts[0], 10) || 0;
+            minutes = parseInt(parts[1], 10) || 0;
+            seconds = parts[2] ? parseInt(parts[2], 10) || 0 : 0;
+        }
+        const pad = (n) => n.toString().padStart(2, '0');
+        if (this.format() === '12h') {
+            const isPM = hours >= 12;
+            const h12 = hours % 12 || 12;
+            const meridiem = isPM ? 'PM' : 'AM';
+            return this.showSeconds()
+                ? `${pad(h12)}:${pad(minutes)}:${pad(seconds)} ${meridiem}`
+                : `${pad(h12)}:${pad(minutes)} ${meridiem}`;
+        }
+        return this.showSeconds()
+            ? `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
+            : `${pad(hours)}:${pad(minutes)}`;
+    }
+    parseTimeString(input) {
+        const trimmed = input.trim();
+        if (!trimmed)
+            return null;
+        const is12hInput = /am|pm/i.test(trimmed);
+        const cleanTime = trimmed.replace(/\s*(am|pm)/i, '').trim();
+        const parts = cleanTime.split(':').map((p) => parseInt(p, 10));
+        if (parts.some((n) => isNaN(n)))
+            return null;
+        let [h, m, s] = parts;
+        m = m ?? 0;
+        s = s ?? 0;
+        if (is12hInput || this.format() === '12h') {
+            const isPM = /pm/i.test(trimmed);
+            if (h < 1 || h > 12 || m < 0 || m > 59 || s < 0 || s > 59)
+                return null;
+            if (isPM && h < 12)
+                h += 12;
+            if (!isPM && h === 12)
+                h = 0;
+        }
+        else {
+            if (h < 0 || h > 23 || m < 0 || m > 59 || s < 0 || s > 59)
+                return null;
+        }
+        const pad = (n) => n.toString().padStart(2, '0');
+        return this.showSeconds() ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(h)}:${pad(m)}`;
+    }
+    updateTimeValue(val) {
+        this.value.set(val);
+        this.textInputValue.set(this.formatTimeValue(val));
+        this.timeSelected.emit(val);
+        this.onChange(val);
+        this.onTouched();
+    }
+    writeValue(val) {
+        this.value.set(val);
+        this.textInputValue.set(this.formatTimeValue(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-timepicker", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, 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 }, 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", timeSelected: "timeSelected" }, host: { properties: { "class.st-timepicker": "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(() => StrataTimepickerComponent),
+                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]=\"timeOverlay\"\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 time\"\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=\"clock\" 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 #timeOverlay>\n  <div class=\"st-timepicker-dropdown\">\n    <st-time-stepper\n      [value]=\"value()\"\n      [format]=\"format()\"\n      [showSeconds]=\"showSeconds()\"\n      [minuteStep]=\"minuteStep()\"\n      [disabled]=\"effectiveDisabled()\"\n      (valueChange)=\"onStepperTimeSelected($event)\"\n    ></st-time-stepper>\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-timepicker-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;display:flex;align-items:center;justify-content:center}\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", "overlayTarget"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataTimeStepperComponent, selector: "st-time-stepper", inputs: ["format", "showSeconds", "minuteStep", "disabled", "value"], outputs: ["valueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataTimepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-timepicker', imports: [
+                        CommonModule,
+                        FormsModule,
+                        StrataIconComponent,
+                        StrataOverlayDirective,
+                        StrataTimeStepperComponent
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => StrataTimepickerComponent),
+                            multi: true
+                        }
+                    ], host: {
+                        '[class.st-timepicker]': '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]=\"timeOverlay\"\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 time\"\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=\"clock\" 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 #timeOverlay>\n  <div class=\"st-timepicker-dropdown\">\n    <st-time-stepper\n      [value]=\"value()\"\n      [format]=\"format()\"\n      [showSeconds]=\"showSeconds()\"\n      [minuteStep]=\"minuteStep()\"\n      [disabled]=\"effectiveDisabled()\"\n      (valueChange)=\"onStepperTimeSelected($event)\"\n    ></st-time-stepper>\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-timepicker-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;display:flex;align-items:center;justify-content:center}\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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], 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 }] }], 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], timeSelected: [{ type: i0.Output, args: ["timeSelected"] }], overlayDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataOverlayDirective), { isSignal: true }] }] } });
+
+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-stepper\n          [value]=\"value()\"\n          [format]=\"timeFormat()\"\n          [showSeconds]=\"showSeconds()\"\n          [minuteStep]=\"minuteStep()\"\n          [disabled]=\"effectiveDisabled()\"\n          (valueChange)=\"onTimeSelected($event)\"\n        ></st-time-stepper>\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", "overlayTarget"], 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: StrataTimeStepperComponent, selector: "st-time-stepper", 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,
+                        StrataTimeStepperComponent
+                    ], 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-stepper\n          [value]=\"value()\"\n          [format]=\"timeFormat()\"\n          [showSeconds]=\"showSeconds()\"\n          [minuteStep]=\"minuteStep()\"\n          [disabled]=\"effectiveDisabled()\"\n          (valueChange)=\"onTimeSelected($event)\"\n        ></st-time-stepper>\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", "overlayTarget"], 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 */ []));
+    margin = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    vertical = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataDividerComponent, isStandalone: true, selector: "st-divider", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'st-divider', imports: [], template: "@if (!label() || vertical()) {\n  <div class=\"divider-line\" [class.divider-margin]=\"margin()\" [class.vertical]=\"vertical()\"></div>\n} @else {\n  <div class=\"divider-line-with-text\" [class.divider-margin]=\"margin()\">\n    <div class=\"divider-line\"></div>\n    <span>{{ label() }}</span>\n    <div class=\"divider-line\"></div>\n  </div>\n}\n" }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }] } });
+
+class StrataFileUploadComponent {
+    fileInput = viewChild('fileInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fileInput" }] : /* istanbul ignore next */ []));
+    cameraInput = viewChild('cameraInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cameraInput" }] : /* istanbul ignore next */ []));
+    accept = input('*', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    maxFileSize = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFileSize" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    label = input('Choose a file or drag & drop it here', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    camera = input(undefined, { ...(ngDevMode ? { debugName: "camera" } : /* istanbul ignore next */ {}), transform: (val) => {
+            if (val === undefined || val === null) {
+                return undefined;
+            }
+            if (typeof val === 'string') {
+                if (val === '' || val === 'true') {
+                    return true;
+                }
+                if (val === 'false') {
+                    return false;
+                }
+            }
+            return Boolean(val);
+        } });
+    choosePhotoLabel = input('Choose Photo', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "choosePhotoLabel" }] : /* istanbul ignore next */ []));
+    takePhotoLabel = input('Take Photo', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "takePhotoLabel" }] : /* 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 });
+    displayMessage = computed(() => this.message() ?? this.hint(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayMessage" }] : /* 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 */ []));
+    isImageAccept = computed(() => {
+        const acc = this.accept().toLowerCase();
+        if (!acc || acc === '*' || acc === '*/*') {
+            return false;
+        }
+        const rules = acc.split(',').map((r) => r.trim());
+        return rules.some((rule) => {
+            return (rule.startsWith('image/') ||
+                ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.heic', '.heif', '.svg'].some((ext) => rule.endsWith(ext)));
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isImageAccept" }] : /* istanbul ignore next */ []));
+    showCamera = computed(() => {
+        const cam = this.camera();
+        if (cam === false) {
+            return false;
+        }
+        if (cam === true) {
+            return true;
+        }
+        return this.isImageAccept();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCamera" }] : /* istanbul ignore next */ []));
+    fileSelect = output();
+    filesSelect = output();
+    fileRejected = output();
+    isDragOver = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+    get hostDisabled() {
+        return this.disabled();
+    }
+    get hostError() {
+        return this.effectiveState() === 'error';
+    }
+    get hostSuccess() {
+        return this.effectiveState() === 'success';
+    }
+    get hostWarning() {
+        return this.effectiveState() === 'warning';
+    }
+    get hostAriaInvalid() {
+        return this.effectiveState() === 'error' ? 'true' : null;
+    }
+    get hostDragOver() {
+        return this.isDragOver();
+    }
+    hostRole = 'button';
+    get hostTabIndex() {
+        return this.disabled() ? -1 : 0;
+    }
+    onClick(event) {
+        const target = event.target;
+        if (target === this.fileInput()?.nativeElement || target === this.cameraInput()?.nativeElement) {
+            return;
+        }
+        if (target.closest('.st-file-upload-actions')) {
+            return;
+        }
+        this.browse();
+    }
+    onKeydown(event) {
+        const target = event.target;
+        if (target.closest('.st-file-upload-actions')) {
+            return;
+        }
+        event.preventDefault();
+        this.browse();
+    }
+    onDragOver(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(true);
+    }
+    onDragLeave(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+    }
+    onDrop(event) {
+        if (this.disabled())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        const droppedFiles = event.dataTransfer?.files;
+        if (!droppedFiles || droppedFiles.length === 0)
+            return;
+        this.processFiles(Array.from(droppedFiles));
+    }
+    onFileChange(event) {
         const inputEl = event.target;
         if (!inputEl.files || inputEl.files.length === 0)
             return;
         this.processFiles(Array.from(inputEl.files));
         inputEl.value = '';
     }
-    browse() {
+    browse(event) {
+        event?.stopPropagation();
         if (this.disabled())
             return;
         this.fileInput()?.nativeElement.click();
     }
+    browseCamera(event) {
+        event?.stopPropagation();
+        if (this.disabled())
+            return;
+        this.cameraInput()?.nativeElement.click();
+    }
     clear() {
         const inputEl = this.fileInput()?.nativeElement;
         if (inputEl) {
             inputEl.value = '';
         }
+        const cameraEl = this.cameraInput()?.nativeElement;
+        if (cameraEl) {
+            cameraEl.value = '';
+        }
     }
     processFiles(files) {
         const acceptedFiles = [];
@@ -1819,12 +3547,17 @@ class StrataFileUploadComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataFileUploadComponent, isStandalone: true, selector: "st-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", 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 } }, outputs: { fileSelect: "fileSelect", filesSelect: "filesSelect", fileRejected: "fileRejected" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onKeydown($event)", "keydown.space": "onKeydown($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.st-disabled": "this.hostDisabled", "class.st-state-error": "this.hostError", "class.st-error": "this.hostError", "class.st-state-success": "this.hostSuccess", "class.st-state-warning": "this.hostWarning", "attr.aria-invalid": "this.hostAriaInvalid", "class.st-drag-over": "this.hostDragOver", "attr.role": "this.hostRole", "attr.tabindex": "this.hostTabIndex" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #fileInput\n  type=\"file\"\n  class=\"st-file-upload-input\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onFileChange($event)\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n/>\n\n<div class=\"st-file-upload-content\">\n  <div class=\"st-file-upload-icon-wrapper\">\n    <ng-content select=\"[uploadIcon]\">\n      <svg\n        class=\"st-file-upload-icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n        <polyline points=\"17 8 12 3 7 8\" />\n        <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n      </svg>\n    </ng-content>\n  </div>\n\n  <div class=\"st-file-upload-text\">\n    <span class=\"st-file-upload-label\">{{ label() }}</span>\n    @if (displayMessage()) {\n      <span\n        class=\"st-file-upload-hint\"\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      >{{ displayMessage() }}</span>\n    }\n  </div>\n\n  <ng-content></ng-content>\n</div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataFileUploadComponent, isStandalone: true, selector: "st-file-upload", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, camera: { classPropertyName: "camera", publicName: "camera", isSignal: true, isRequired: false, transformFunction: null }, choosePhotoLabel: { classPropertyName: "choosePhotoLabel", publicName: "choosePhotoLabel", isSignal: true, isRequired: false, transformFunction: null }, takePhotoLabel: { classPropertyName: "takePhotoLabel", publicName: "takePhotoLabel", 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 } }, outputs: { fileSelect: "fileSelect", filesSelect: "filesSelect", fileRejected: "fileRejected" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onKeydown($event)", "keydown.space": "onKeydown($event)", "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.st-disabled": "this.hostDisabled", "class.st-state-error": "this.hostError", "class.st-error": "this.hostError", "class.st-state-success": "this.hostSuccess", "class.st-state-warning": "this.hostWarning", "attr.aria-invalid": "this.hostAriaInvalid", "class.st-drag-over": "this.hostDragOver", "attr.role": "this.hostRole", "attr.tabindex": "this.hostTabIndex" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }, { propertyName: "cameraInput", first: true, predicate: ["cameraInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<input\n  #fileInput\n  type=\"file\"\n  class=\"st-file-upload-input\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onFileChange($event)\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n/>\n\n@if (showCamera()) {\n  <input\n    #cameraInput\n    type=\"file\"\n    class=\"st-file-upload-input\"\n    accept=\"image/*\"\n    capture=\"environment\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileChange($event)\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n  />\n}\n\n<div class=\"st-file-upload-content\">\n  <ng-content select=\"[uploadIcon]\">\n    <st-avatar size=\"md\" variant=\"rounded\" class=\"st-file-upload-avatar\">\n      <st-icon name=\"upload\"></st-icon>\n    </st-avatar>\n  </ng-content>\n\n  <div class=\"st-file-upload-text\">\n    <span class=\"st-file-upload-label\">{{ label() }}</span>\n    @if (displayMessage()) {\n      <span\n        class=\"st-file-upload-hint\"\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      >{{ displayMessage() }}</span>\n    }\n  </div>\n\n  @if (showCamera()) {\n    <st-button-group justification=\"center\" class=\"st-file-upload-actions\">\n      <button\n        stButton\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [disabled]=\"disabled()\"\n        (click)=\"browse($event)\"\n      >\n        <st-icon name=\"image\" size=\"sm\"></st-icon>\n        <span>{{ choosePhotoLabel() }}</span>\n      </button>\n\n      <button\n        stButton\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"sm\"\n        class=\"st-file-upload-action-camera\"\n        [disabled]=\"disabled()\"\n        (click)=\"browseCamera($event)\"\n      >\n        <st-icon name=\"camera\" size=\"sm\"></st-icon>\n        <span>{{ takePhotoLabel() }}</span>\n      </button>\n    </st-button-group>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--st-file-upload-bg: var(--st-color-bg-default);--st-file-upload-border: var(--st-color-border-default);--st-file-upload-text: var(--st-color-text-primary);--st-file-upload-hint: var(--st-color-text-secondary);--st-file-upload-hover-bg: var(--st-color-bg-raised);--st-file-upload-hover-border: var(--st-color-accent-default);--st-file-upload-active-border: var(--st-color-accent-default);--st-file-upload-active-bg: var(--st-color-accent-subtle, var(--st-color-bg-raised));--st-file-upload-radius: var(--st-border-radius-xl);display:block;position:relative;box-sizing:border-box;background-color:var(--st-file-upload-bg);border:2px dashed var(--st-file-upload-border);border-radius:var(--st-file-upload-radius);padding:var(--st-space-6) var(--st-space-4);text-align:center;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast),transform var(--st-transition-fast);-webkit-user-select:none;user-select:none;outline:none}:host st-avatar{transition:transform .2s ease}:host:hover:not(.st-disabled){background-color:var(--st-file-upload-hover-bg);border-color:var(--st-file-upload-hover-border)}:host:hover:not(.st-disabled) st-avatar{transform:translateY(-2px)}:host:focus-visible:not(.st-disabled){outline:2px solid var(--st-color-accent-default);outline-offset:2px}:host.st-drag-over{background-color:var(--st-file-upload-active-bg);border-color:var(--st-file-upload-active-border);border-style:solid;transform:scale(1.01)}:host.st-drag-over st-avatar{transform:translateY(-4px) scale(1.05)}:host.st-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}:host .st-file-upload-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host .st-file-upload-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--st-space-3)}:host .st-file-upload-text{display:flex;flex-direction:column;gap:var(--st-space-1)}:host .st-file-upload-label{font-size:.95rem;font-weight:500;color:var(--st-file-upload-text)}:host.st-state-error,:host.st-error{--st-file-upload-border: var(--st-color-feedback-error-default);--st-file-upload-hover-border: var(--st-color-feedback-error-hover, var(--st-color-feedback-error-default))}:host.st-state-error:focus-visible:not(.st-disabled),:host.st-error:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-error-default)}:host.st-state-success{--st-file-upload-border: var(--st-color-feedback-success-default);--st-file-upload-hover-border: var(--st-color-feedback-success-hover, var(--st-color-feedback-success-default))}:host.st-state-success:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-success-default)}:host.st-state-warning{--st-file-upload-border: var(--st-color-feedback-warning-default);--st-file-upload-hover-border: var(--st-color-feedback-warning-hover, var(--st-color-feedback-warning-default))}:host.st-state-warning:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-warning-default)}:host .st-file-upload-hint{font-size:.8rem;color:var(--st-file-upload-hint)}:host .st-file-upload-hint.st-message-error{color:var(--st-color-feedback-error-text)}:host .st-file-upload-hint.st-message-success{color:var(--st-color-feedback-success-text)}:host .st-file-upload-hint.st-message-warning{color:var(--st-color-feedback-warning-text)}:host .st-file-upload-actions{margin-top:var(--st-space-2)}\n"], dependencies: [{ kind: "component", type: StrataAvatarComponent, selector: "st-avatar", inputs: ["src", "alt", "text", "size", "variant"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }, { kind: "component", type: StrataButtonGroupComponent, selector: "st-button-group", inputs: ["justification"] }, { 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: StrataFileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'st-file-upload', imports: [], template: "<input\n  #fileInput\n  type=\"file\"\n  class=\"st-file-upload-input\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onFileChange($event)\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n/>\n\n<div class=\"st-file-upload-content\">\n  <div class=\"st-file-upload-icon-wrapper\">\n    <ng-content select=\"[uploadIcon]\">\n      <svg\n        class=\"st-file-upload-icon\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n        <polyline points=\"17 8 12 3 7 8\" />\n        <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n      </svg>\n    </ng-content>\n  </div>\n\n  <div class=\"st-file-upload-text\">\n    <span class=\"st-file-upload-label\">{{ label() }}</span>\n    @if (displayMessage()) {\n      <span\n        class=\"st-file-upload-hint\"\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      >{{ displayMessage() }}</span>\n    }\n  </div>\n\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", 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 }] }], fileSelect: [{ type: i0.Output, args: ["fileSelect"] }], filesSelect: [{ type: i0.Output, args: ["filesSelect"] }], fileRejected: [{ type: i0.Output, args: ["fileRejected"] }], hostDisabled: [{
+            args: [{ selector: 'st-file-upload', imports: [
+                        StrataAvatarComponent,
+                        StrataButtonDirective,
+                        StrataButtonGroupComponent,
+                        StrataIconComponent
+                    ], template: "<input\n  #fileInput\n  type=\"file\"\n  class=\"st-file-upload-input\"\n  [accept]=\"accept()\"\n  [multiple]=\"multiple()\"\n  [disabled]=\"disabled()\"\n  (change)=\"onFileChange($event)\"\n  aria-hidden=\"true\"\n  tabindex=\"-1\"\n/>\n\n@if (showCamera()) {\n  <input\n    #cameraInput\n    type=\"file\"\n    class=\"st-file-upload-input\"\n    accept=\"image/*\"\n    capture=\"environment\"\n    [disabled]=\"disabled()\"\n    (change)=\"onFileChange($event)\"\n    aria-hidden=\"true\"\n    tabindex=\"-1\"\n  />\n}\n\n<div class=\"st-file-upload-content\">\n  <ng-content select=\"[uploadIcon]\">\n    <st-avatar size=\"md\" variant=\"rounded\" class=\"st-file-upload-avatar\">\n      <st-icon name=\"upload\"></st-icon>\n    </st-avatar>\n  </ng-content>\n\n  <div class=\"st-file-upload-text\">\n    <span class=\"st-file-upload-label\">{{ label() }}</span>\n    @if (displayMessage()) {\n      <span\n        class=\"st-file-upload-hint\"\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      >{{ displayMessage() }}</span>\n    }\n  </div>\n\n  @if (showCamera()) {\n    <st-button-group justification=\"center\" class=\"st-file-upload-actions\">\n      <button\n        stButton\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"sm\"\n        [disabled]=\"disabled()\"\n        (click)=\"browse($event)\"\n      >\n        <st-icon name=\"image\" size=\"sm\"></st-icon>\n        <span>{{ choosePhotoLabel() }}</span>\n      </button>\n\n      <button\n        stButton\n        type=\"button\"\n        variant=\"secondary\"\n        size=\"sm\"\n        class=\"st-file-upload-action-camera\"\n        [disabled]=\"disabled()\"\n        (click)=\"browseCamera($event)\"\n      >\n        <st-icon name=\"camera\" size=\"sm\"></st-icon>\n        <span>{{ takePhotoLabel() }}</span>\n      </button>\n    </st-button-group>\n  }\n\n  <ng-content></ng-content>\n</div>\n", styles: [":host{--st-file-upload-bg: var(--st-color-bg-default);--st-file-upload-border: var(--st-color-border-default);--st-file-upload-text: var(--st-color-text-primary);--st-file-upload-hint: var(--st-color-text-secondary);--st-file-upload-hover-bg: var(--st-color-bg-raised);--st-file-upload-hover-border: var(--st-color-accent-default);--st-file-upload-active-border: var(--st-color-accent-default);--st-file-upload-active-bg: var(--st-color-accent-subtle, var(--st-color-bg-raised));--st-file-upload-radius: var(--st-border-radius-xl);display:block;position:relative;box-sizing:border-box;background-color:var(--st-file-upload-bg);border:2px dashed var(--st-file-upload-border);border-radius:var(--st-file-upload-radius);padding:var(--st-space-6) var(--st-space-4);text-align:center;cursor:pointer;transition:border-color var(--st-transition-fast),background-color var(--st-transition-fast),transform var(--st-transition-fast);-webkit-user-select:none;user-select:none;outline:none}:host st-avatar{transition:transform .2s ease}:host:hover:not(.st-disabled){background-color:var(--st-file-upload-hover-bg);border-color:var(--st-file-upload-hover-border)}:host:hover:not(.st-disabled) st-avatar{transform:translateY(-2px)}:host:focus-visible:not(.st-disabled){outline:2px solid var(--st-color-accent-default);outline-offset:2px}:host.st-drag-over{background-color:var(--st-file-upload-active-bg);border-color:var(--st-file-upload-active-border);border-style:solid;transform:scale(1.01)}:host.st-drag-over st-avatar{transform:translateY(-4px) scale(1.05)}:host.st-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}:host .st-file-upload-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host .st-file-upload-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--st-space-3)}:host .st-file-upload-text{display:flex;flex-direction:column;gap:var(--st-space-1)}:host .st-file-upload-label{font-size:.95rem;font-weight:500;color:var(--st-file-upload-text)}:host.st-state-error,:host.st-error{--st-file-upload-border: var(--st-color-feedback-error-default);--st-file-upload-hover-border: var(--st-color-feedback-error-hover, var(--st-color-feedback-error-default))}:host.st-state-error:focus-visible:not(.st-disabled),:host.st-error:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-error-default)}:host.st-state-success{--st-file-upload-border: var(--st-color-feedback-success-default);--st-file-upload-hover-border: var(--st-color-feedback-success-hover, var(--st-color-feedback-success-default))}:host.st-state-success:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-success-default)}:host.st-state-warning{--st-file-upload-border: var(--st-color-feedback-warning-default);--st-file-upload-hover-border: var(--st-color-feedback-warning-hover, var(--st-color-feedback-warning-default))}:host.st-state-warning:focus-visible:not(.st-disabled){outline-color:var(--st-color-feedback-warning-default)}:host .st-file-upload-hint{font-size:.8rem;color:var(--st-file-upload-hint)}:host .st-file-upload-hint.st-message-error{color:var(--st-color-feedback-error-text)}:host .st-file-upload-hint.st-message-success{color:var(--st-color-feedback-success-text)}:host .st-file-upload-hint.st-message-warning{color:var(--st-color-feedback-warning-text)}:host .st-file-upload-actions{margin-top:var(--st-space-2)}\n"] }]
+        }], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }], cameraInput: [{ type: i0.ViewChild, args: ['cameraInput', { isSignal: true }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], camera: [{ type: i0.Input, args: [{ isSignal: true, alias: "camera", required: false }] }], choosePhotoLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "choosePhotoLabel", required: false }] }], takePhotoLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "takePhotoLabel", 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 }] }], fileSelect: [{ type: i0.Output, args: ["fileSelect"] }], filesSelect: [{ type: i0.Output, args: ["filesSelect"] }], fileRejected: [{ type: i0.Output, args: ["fileRejected"] }], hostDisabled: [{
                 type: HostBinding,
                 args: ['class.st-disabled']
             }], hostError: [{
@@ -4302,7 +6035,7 @@ class StrataSegmentedControlItemComponent {
         this.onClick();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSegmentedControlItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataSegmentedControlItemComponent, isStandalone: true, selector: "st-segmented-control-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChanged: "selectionChanged" }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()", "keydown.space": "onKeydown($event)", "keydown.enter": "onKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "attr.aria-disabled": "effectiveDisabled()", "class.st-disabled": "effectiveDisabled()", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0, template: "<span>{{ text() }}</span>\n@if (badge() !== undefined) {\n  <st-badge [value]=\"badge()\" [variant]=\"badgeVariant()\" [size]=\"badgeSize()\"></st-badge>\n}\n<ng-content select=\"st-badge\"></ng-content>\n", styles: [""], dependencies: [{ kind: "component", type: StrataBadgeComponent, selector: "st-badge", inputs: ["value", "icon", "max", "variant", "size", "placement", "visible", "showZero", "ariaLabel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataSegmentedControlItemComponent, isStandalone: true, selector: "st-segmented-control-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: true, isRequired: false, transformFunction: null }, badgeSize: { classPropertyName: "badgeSize", publicName: "badgeSize", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", selectionChanged: "selectionChanged" }, host: { attributes: { "role": "tab" }, listeners: { "click": "onClick()", "keydown.space": "onKeydown($event)", "keydown.enter": "onKeydown($event)" }, properties: { "attr.aria-selected": "selected()", "attr.aria-disabled": "effectiveDisabled()", "class.st-disabled": "effectiveDisabled()", "attr.tabindex": "this.tabIndex", "attr.disabled": "this.disabledAttribute" } }, ngImport: i0, template: "<span>{{ text() }}</span>\n@if (badge() !== undefined) {\n  <st-badge [value]=\"badge()\" [variant]=\"badgeVariant()\" [size]=\"badgeSize()\"></st-badge>\n}\n<ng-content select=\"st-badge\"></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:center;gap:var(--st-space-2, 8px);height:var(--st-segmented-control-item-height);padding:0 var(--st-segmented-control-padding-x);border-radius:calc(var(--st-segmented-control-border-radius) - 2px);font-size:var(--st-segmented-control-font-size);font-weight:500;-webkit-user-select:none;user-select:none;transition:background-color var(--st-transition-fast),color var(--st-transition-fast);border:none;color:var(--st-color-text-primary);flex-shrink:0;text-wrap:nowrap;background-color:transparent;position:relative;z-index:1;box-sizing:border-box}:host:hover:not([disabled]):not(.st-disabled):not([aria-selected=true]){cursor:pointer;background-color:var(--st-color-control-bg-hover);color:var(--st-color-text-primary)}:host[aria-selected=true]{color:var(--st-color-control-primary-text);cursor:default}:host[disabled],:host.st-disabled{pointer-events:none;color:var(--st-color-text-tertiary);cursor:unset}:host st-badge{flex-shrink:0}:host-context(.st-segmented-control-full-width){flex:1}\n"], dependencies: [{ kind: "component", type: StrataBadgeComponent, selector: "st-badge", inputs: ["value", "icon", "max", "variant", "size", "placement", "visible", "showZero", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSegmentedControlItemComponent, decorators: [{
             type: Component,
@@ -4314,7 +6047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '(click)': 'onClick()',
                         '(keydown.space)': 'onKeydown($event)',
                         '(keydown.enter)': 'onKeydown($event)'
-                    }, template: "<span>{{ text() }}</span>\n@if (badge() !== undefined) {\n  <st-badge [value]=\"badge()\" [variant]=\"badgeVariant()\" [size]=\"badgeSize()\"></st-badge>\n}\n<ng-content select=\"st-badge\"></ng-content>\n" }]
+                    }, template: "<span>{{ text() }}</span>\n@if (badge() !== undefined) {\n  <st-badge [value]=\"badge()\" [variant]=\"badgeVariant()\" [size]=\"badgeSize()\"></st-badge>\n}\n<ng-content select=\"st-badge\"></ng-content>\n", styles: [":host{display:flex;align-items:center;justify-content:center;gap:var(--st-space-2, 8px);height:var(--st-segmented-control-item-height);padding:0 var(--st-segmented-control-padding-x);border-radius:calc(var(--st-segmented-control-border-radius) - 2px);font-size:var(--st-segmented-control-font-size);font-weight:500;-webkit-user-select:none;user-select:none;transition:background-color var(--st-transition-fast),color var(--st-transition-fast);border:none;color:var(--st-color-text-primary);flex-shrink:0;text-wrap:nowrap;background-color:transparent;position:relative;z-index:1;box-sizing:border-box}:host:hover:not([disabled]):not(.st-disabled):not([aria-selected=true]){cursor:pointer;background-color:var(--st-color-control-bg-hover);color:var(--st-color-text-primary)}:host[aria-selected=true]{color:var(--st-color-control-primary-text);cursor:default}:host[disabled],:host.st-disabled{pointer-events:none;color:var(--st-color-text-tertiary);cursor:unset}:host st-badge{flex-shrink:0}:host-context(.st-segmented-control-full-width){flex:1}\n"] }]
         }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeVariant", required: false }] }], badgeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeSize", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
@@ -4484,7 +6217,7 @@ class StrataSegmentedControlComponent {
                 useExisting: forwardRef(() => StrataSegmentedControlComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "segmentItems", predicate: StrataSegmentedControlItemComponent, isSignal: true }, { propertyName: "segmentItemsRefs", predicate: StrataSegmentedControlItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"st-segmented-control-track\">\n  <ng-content select=\"st-segmented-control-item\"></ng-content>\n  <div class=\"selection-item\" id=\"selection-indicator\" \n       [style.left]=\"this.offset() + 'px'\"\n       [style.top]=\"this.indicatorTop() + 'px'\"\n       [style.width]=\"this.indicatorWidth() + 'px'\"\n       [style.height]=\"this.indicatorHeight() + 'px'\"></div>\n</div>\n@if (message()) {\n  <div\n    class=\"st-segmented-control-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  </div>\n}\n\n" });
+        ], queries: [{ propertyName: "segmentItems", predicate: StrataSegmentedControlItemComponent, isSignal: true }, { propertyName: "segmentItemsRefs", predicate: StrataSegmentedControlItemComponent, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div class=\"st-segmented-control-track\">\n  <ng-content select=\"st-segmented-control-item\"></ng-content>\n  <div class=\"selection-item\" id=\"selection-indicator\" \n       [style.left]=\"this.offset() + 'px'\"\n       [style.top]=\"this.indicatorTop() + 'px'\"\n       [style.width]=\"this.indicatorWidth() + 'px'\"\n       [style.height]=\"this.indicatorHeight() + 'px'\"></div>\n</div>\n@if (message()) {\n  <div\n    class=\"st-segmented-control-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  </div>\n}\n\n", styles: [":host{--st-segmented-control-height: var(--st-interactive-element-height-md);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 14px;--st-segmented-control-padding-x: var(--st-size-xxs);--st-segmented-control-border-radius: var(--st-border-radius-md);--st-segmented-control-border-color: transparent;--st-segmented-control-error-border: var(--st-color-feedback-error-default);--st-segmented-control-success-border: var(--st-color-feedback-success-default);--st-segmented-control-warning-border: var(--st-color-feedback-warning-default);display:inline-flex;flex-direction:column;width:fit-content;max-width:100%;box-sizing:border-box}:host.st-size-sm{--st-segmented-control-height: var(--st-interactive-element-height-sm);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 4px);--st-segmented-control-font-size: 12px;--st-segmented-control-padding-x: var(--st-size-xxxs)}:host.st-size-sm .st-segmented-control-track{padding:2px;gap:2px}:host.st-size-md{--st-segmented-control-height: var(--st-interactive-element-height-md);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 14px;--st-segmented-control-padding-x: var(--st-size-xxs)}:host.st-size-md .st-segmented-control-track{padding:4px;gap:4px}:host.st-size-lg{--st-segmented-control-height: var(--st-interactive-element-height-lg);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 16px;--st-segmented-control-padding-x: var(--st-size-xs)}:host.st-size-lg .st-segmented-control-track{padding:4px;gap:4px}:host.st-state-error{--st-segmented-control-border-color: var(--st-segmented-control-error-border)}:host.st-state-success{--st-segmented-control-border-color: var(--st-segmented-control-success-border)}:host.st-state-warning{--st-segmented-control-border-color: var(--st-segmented-control-warning-border)}:host.st-segmented-control-full-width{width:100%}:host.st-segmented-control-full-width .st-segmented-control-track{display:flex;width:100%}.st-segmented-control-track{display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;width:fit-content;max-width:100%;min-width:0;position:relative;border-radius:var(--st-segmented-control-border-radius);border:1px solid var(--st-segmented-control-border-color);box-sizing:border-box;background-color:var(--st-color-bg-raised);height:var(--st-segmented-control-height);padding:4px;gap:4px;transition:border-color var(--st-transition-fast);-ms-overflow-style:none;scrollbar-width:none}.st-segmented-control-track::-webkit-scrollbar{display:none}.selection-item{display:flex;align-items:center;justify-content:center;gap:var(--st-space-2, 8px);height:var(--st-segmented-control-item-height);padding:0 var(--st-segmented-control-padding-x);border-radius:calc(var(--st-segmented-control-border-radius) - 2px);font-size:var(--st-segmented-control-font-size);font-weight:500;-webkit-user-select:none;user-select:none;transition:background-color var(--st-transition-fast),color var(--st-transition-fast)}#selection-indicator{cursor:default;position:absolute;top:0;left:0;z-index:0;pointer-events:none;border-radius:calc(var(--st-segmented-control-border-radius) - 2px);background-color:var(--st-color-control-primary-bg);color:var(--st-color-control-primary-text);text-wrap:nowrap;box-shadow:var(--st-shadow-1);transition:left var(--st-transition-fast),width var(--st-transition-fast)}.st-segmented-control-message{margin-top:var(--st-space-1);font-size:var(--st-font-size-sm, 12px);color:var(--st-color-text-secondary)}.st-segmented-control-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-segmented-control-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-segmented-control-message.st-message-warning{color:var(--st-color-feedback-warning-text)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSegmentedControlComponent, decorators: [{
             type: Component,
@@ -4507,7 +6240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         '[attr.aria-invalid]': 'effectiveState() === "error" ? "true" : null',
                         '[class.st-disabled]': 'effectiveDisabled()',
                         '[attr.aria-disabled]': 'effectiveDisabled()'
-                    }, template: "<div class=\"st-segmented-control-track\">\n  <ng-content select=\"st-segmented-control-item\"></ng-content>\n  <div class=\"selection-item\" id=\"selection-indicator\" \n       [style.left]=\"this.offset() + 'px'\"\n       [style.top]=\"this.indicatorTop() + 'px'\"\n       [style.width]=\"this.indicatorWidth() + 'px'\"\n       [style.height]=\"this.indicatorHeight() + 'px'\"></div>\n</div>\n@if (message()) {\n  <div\n    class=\"st-segmented-control-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  </div>\n}\n\n" }]
+                    }, template: "<div class=\"st-segmented-control-track\">\n  <ng-content select=\"st-segmented-control-item\"></ng-content>\n  <div class=\"selection-item\" id=\"selection-indicator\" \n       [style.left]=\"this.offset() + 'px'\"\n       [style.top]=\"this.indicatorTop() + 'px'\"\n       [style.width]=\"this.indicatorWidth() + 'px'\"\n       [style.height]=\"this.indicatorHeight() + 'px'\"></div>\n</div>\n@if (message()) {\n  <div\n    class=\"st-segmented-control-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  </div>\n}\n\n", styles: [":host{--st-segmented-control-height: var(--st-interactive-element-height-md);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 14px;--st-segmented-control-padding-x: var(--st-size-xxs);--st-segmented-control-border-radius: var(--st-border-radius-md);--st-segmented-control-border-color: transparent;--st-segmented-control-error-border: var(--st-color-feedback-error-default);--st-segmented-control-success-border: var(--st-color-feedback-success-default);--st-segmented-control-warning-border: var(--st-color-feedback-warning-default);display:inline-flex;flex-direction:column;width:fit-content;max-width:100%;box-sizing:border-box}:host.st-size-sm{--st-segmented-control-height: var(--st-interactive-element-height-sm);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 4px);--st-segmented-control-font-size: 12px;--st-segmented-control-padding-x: var(--st-size-xxxs)}:host.st-size-sm .st-segmented-control-track{padding:2px;gap:2px}:host.st-size-md{--st-segmented-control-height: var(--st-interactive-element-height-md);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 14px;--st-segmented-control-padding-x: var(--st-size-xxs)}:host.st-size-md .st-segmented-control-track{padding:4px;gap:4px}:host.st-size-lg{--st-segmented-control-height: var(--st-interactive-element-height-lg);--st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);--st-segmented-control-font-size: 16px;--st-segmented-control-padding-x: var(--st-size-xs)}:host.st-size-lg .st-segmented-control-track{padding:4px;gap:4px}:host.st-state-error{--st-segmented-control-border-color: var(--st-segmented-control-error-border)}:host.st-state-success{--st-segmented-control-border-color: var(--st-segmented-control-success-border)}:host.st-state-warning{--st-segmented-control-border-color: var(--st-segmented-control-warning-border)}:host.st-segmented-control-full-width{width:100%}:host.st-segmented-control-full-width .st-segmented-control-track{display:flex;width:100%}.st-segmented-control-track{display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;width:fit-content;max-width:100%;min-width:0;position:relative;border-radius:var(--st-segmented-control-border-radius);border:1px solid var(--st-segmented-control-border-color);box-sizing:border-box;background-color:var(--st-color-bg-raised);height:var(--st-segmented-control-height);padding:4px;gap:4px;transition:border-color var(--st-transition-fast);-ms-overflow-style:none;scrollbar-width:none}.st-segmented-control-track::-webkit-scrollbar{display:none}.selection-item{display:flex;align-items:center;justify-content:center;gap:var(--st-space-2, 8px);height:var(--st-segmented-control-item-height);padding:0 var(--st-segmented-control-padding-x);border-radius:calc(var(--st-segmented-control-border-radius) - 2px);font-size:var(--st-segmented-control-font-size);font-weight:500;-webkit-user-select:none;user-select:none;transition:background-color var(--st-transition-fast),color var(--st-transition-fast)}#selection-indicator{cursor:default;position:absolute;top:0;left:0;z-index:0;pointer-events:none;border-radius:calc(var(--st-segmented-control-border-radius) - 2px);background-color:var(--st-color-control-primary-bg);color:var(--st-color-control-primary-text);text-wrap:nowrap;box-shadow:var(--st-shadow-1);transition:left var(--st-transition-fast),width var(--st-transition-fast)}.st-segmented-control-message{margin-top:var(--st-space-1);font-size:var(--st-font-size-sm, 12px);color:var(--st-color-text-secondary)}.st-segmented-control-message.st-message-error{color:var(--st-color-feedback-error-text)}.st-segmented-control-message.st-message-success{color:var(--st-color-feedback-success-text)}.st-segmented-control-message.st-message-warning{color:var(--st-color-feedback-warning-text)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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 }] }], segmentItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { isSignal: true }] }], segmentItemsRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSegmentedControlItemComponent), { ...{
                             read: ElementRef
                         }, isSignal: true }] }] } });
@@ -4884,7 +6617,7 @@ class StrataSingleSelectComponent {
                 useExisting: forwardRef(() => StrataSingleSelectComponent),
                 multi: true
             }
-        ], queries: [{ propertyName: "selectItems", predicate: StrataSelectItemComponent, isSignal: true }, { propertyName: "triggerTemplate", first: true, predicate: StrataSelectTriggerDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: StrataInputFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [class.disabled]=\"effectiveDisabled()\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" (keydown.space)=\"toggle($event)\" (keydown.enter)=\"toggle($event)\" (keydown.escape)=\"open.set(false)\" [attr.data-open]=\"open()\"\n  [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" [stOverlay]=\"selector\" [overlayOpen]=\"open()\" [overlayPlacement]=\"placement()\">\n  @if (selectedItem()) {\n    @if (triggerTemplate()) {\n      <ng-container *ngTemplateOutlet=\"triggerTemplate()!\"></ng-container>\n    } @else {\n      {{ selectedItem()!.text() }}\n    }\n  } @else {\n  <span class=\"placeholder-text\">{{ placeholder() }}</span>\n  }\n\n  <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n@if (message()) {\n  <div\n    class=\"st-select-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  </div>\n}\n\n<ng-template #selector>\n  <div class=\"single-select-selector\" #singleSelectSelector [class.full-width]=\"fullWidth()\">\n    @if (searchable()) {\n    <st-input-field>\n      <input stInput #searchField type=\"text\" [value]=\"searchQuery() || ''\" (input)=\"searchQuery.set($any($event.target).value); onSearchChange(searchQuery())\" [placeholder]=\"searchPlaceholder()\" />\n      <button stButton variant=\"ghost\" [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\" suffix\n        size=\"sm\" (click)=\"searchQuery.set(undefined); onSearchChange(undefined)\">\n        x\n      </button>\n    </st-input-field>\n    }\n    <div class=\"single-select-items-container\">\n      <ng-content select=\"st-select-item\"></ng-content>\n    </div>\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: StrataInputFieldComponent, selector: "st-input-field", inputs: ["size", "label", "id", "name", "state", "error", "message", "colorMessage", "disabled", "maxLength", "showCharacterCounter", "characterCounterFormatter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataNativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+        ], queries: [{ propertyName: "selectItems", predicate: StrataSelectItemComponent, isSignal: true }, { propertyName: "triggerTemplate", first: true, predicate: StrataSelectTriggerDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "inputField", first: true, predicate: StrataInputFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [class.disabled]=\"effectiveDisabled()\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" (keydown.space)=\"toggle($event)\" (keydown.enter)=\"toggle($event)\" (keydown.escape)=\"open.set(false)\" [attr.data-open]=\"open()\"\n  [attr.tabindex]=\"effectiveDisabled() ? -1 : 0\" [stOverlay]=\"selector\" [overlayOpen]=\"open()\" [overlayPlacement]=\"placement()\">\n  @if (selectedItem()) {\n    @if (triggerTemplate()) {\n      <ng-container *ngTemplateOutlet=\"triggerTemplate()!\"></ng-container>\n    } @else {\n      {{ selectedItem()!.text() }}\n    }\n  } @else {\n  <span class=\"placeholder-text\">{{ placeholder() }}</span>\n  }\n\n  <st-icon name=\"expand-up-down\"></st-icon>\n</div>\n@if (message()) {\n  <div\n    class=\"st-select-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  </div>\n}\n\n<ng-template #selector>\n  <div class=\"single-select-selector\" #singleSelectSelector [class.full-width]=\"fullWidth()\">\n    @if (searchable()) {\n    <st-input-field>\n      <input stInput #searchField type=\"text\" [value]=\"searchQuery() || ''\" (input)=\"searchQuery.set($any($event.target).value); onSearchChange(searchQuery())\" [placeholder]=\"searchPlaceholder()\" />\n      <button stButton variant=\"ghost\" [class.visible]=\"searchQuery() !== undefined && searchQuery()!.length > 0\" suffix\n        size=\"sm\" (click)=\"searchQuery.set(undefined); onSearchChange(undefined)\">\n        x\n      </button>\n    </st-input-field>\n    }\n    <div class=\"single-select-items-container\">\n      <ng-content select=\"st-select-item\"></ng-content>\n    </div>\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "overlayTarget"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataInputFieldComponent, selector: "st-input-field", inputs: ["size", "label", "id", "name", "state", "error", "message", "colorMessage", "disabled", "maxLength", "showCharacterCounter", "characterCounterFormatter"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataNativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSingleSelectComponent, decorators: [{
             type: Component,
@@ -5345,5 +7078,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, StrataContextMenuDirective, 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, StrataTimeStepperComponent, 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