ngx-strata 0.2.2 → 0.2.4

package/fesm2022/ngx-strata.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, input, model, output, computed, Directive, Injectable, provideAppInitializer, makeEnvironmentProviders, InjectionToken, DOCUMENT, Renderer2, Input, signal, effect, DestroyRef, HostListener, Component, contentChild, HostBinding, ViewContainerRef, viewChild, contentChildren, TemplateRef, Pipe, booleanAttribute, ContentChildren, Injector, LOCALE_ID } from '@angular/core';
-import { computePosition, offset, arrow, autoUpdate, flip, shift } from '@floating-ui/dom';
+import { inject, ElementRef, input, model, output, computed, Directive, Injectable, provideAppInitializer, makeEnvironmentProviders, DOCUMENT, signal, effect, InjectionToken, provideEnvironmentInitializer, Renderer2, Input, DestroyRef, HostListener, Component, contentChild, HostBinding, ViewContainerRef, viewChild, contentChildren, TemplateRef, Pipe, booleanAttribute, ContentChildren, Injector, LOCALE_ID } from '@angular/core';
+import { computePosition, offset, arrow, autoUpdate, flip, shift, size } from '@floating-ui/dom';
 import { Observable, tap, map, fromEvent, switchMap, filter } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -175,6 +175,73 @@ function provideIconRegistry() {
     };
 }
 
+class DarkmodeService {
+    STORAGE_KEY = 'strata-darkmode';
+    document = inject(DOCUMENT);
+    osPrefersDark;
+    setting = signal('SYSTEM', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "setting" }] : /* istanbul ignore next */ []));
+    darkmode = signal('LIGHT', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "darkmode" }] : /* istanbul ignore next */ []));
+    currentMode = computed(() => this.darkmode(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentMode" }] : /* istanbul ignore next */ []));
+    currentSetting = computed(() => this.setting(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentSetting" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => this.updateDarkmodeTagOnDOM(this.darkmode()));
+        this.setting.set(this.getSettingFromStorage());
+        this.osPrefersDark = this.getSystemDarkmodePreference();
+        this.calculateDarkmode();
+        this.saveSettingToStorage(this.setting());
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+            this.osPrefersDark = event.matches;
+            if (this.setting() === 'SYSTEM') {
+                this.calculateDarkmode();
+            }
+        });
+    }
+    setDarkmodeSetting(newSetting) {
+        this.saveSettingToStorage(newSetting);
+        return this.calculateDarkmode();
+    }
+    getSystemDarkmodePreference() {
+        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    calculateDarkmode() {
+        if (this.setting() === 'SYSTEM') {
+            this.darkmode.set(this.osPrefersDark ? 'DARK' : 'LIGHT');
+        }
+        else {
+            this.darkmode.set(this.setting() === 'DARK' ? 'DARK' : 'LIGHT');
+        }
+        return this.darkmode();
+    }
+    updateDarkmodeTagOnDOM(mode) {
+        const documentNode = this.document.getElementsByTagName('html')[0];
+        if (mode === 'DARK') {
+            documentNode.setAttribute('data-theme', 'dark');
+        }
+        else {
+            documentNode.setAttribute('data-theme', 'light');
+        }
+    }
+    saveSettingToStorage(newSetting) {
+        localStorage.setItem(this.STORAGE_KEY, newSetting);
+        this.setting.set(newSetting);
+    }
+    getSettingFromStorage() {
+        return localStorage.getItem(this.STORAGE_KEY) ?? 'SYSTEM';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DarkmodeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DarkmodeService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DarkmodeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 const DEFAULT_CONFIG = {
     includeBaseIcons: true,
     tooltipDelayMs: 500,
@@ -184,7 +251,8 @@ const DEFAULT_CONFIG = {
         ctrl: 'Ctrl',
         shift: 'Shift',
         alt: 'Alt'
-    }
+    },
+    overlayViewportBuffer: 16
 };
 function provideStrata(config = {}) {
     const mergedConfig = {
@@ -199,6 +267,7 @@ function provideStrata(config = {}) {
             provide: STRATA_CONFIG,
             useValue: mergedConfig
         },
+        provideEnvironmentInitializer(() => inject(DarkmodeService))
     ];
     if (mergedConfig.includeBaseIcons) {
         providers.push(provideBaseIcons());
@@ -318,73 +387,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                 type: Input
             }] } });
 
-class DarkmodeService {
-    STORAGE_KEY = 'strata-darkmode';
-    document = inject(DOCUMENT);
-    osPrefersDark;
-    setting = signal('SYSTEM', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "setting" }] : /* istanbul ignore next */ []));
-    darkmode = signal('LIGHT', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "darkmode" }] : /* istanbul ignore next */ []));
-    currentMode = computed(() => this.darkmode(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentMode" }] : /* istanbul ignore next */ []));
-    currentSetting = computed(() => this.setting(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "currentSetting" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => this.updateDarkmodeTagOnDOM(this.darkmode()));
-        this.setting.set(this.getSettingFromStorage());
-        this.osPrefersDark = this.getSystemDarkmodePreference();
-        this.calculateDarkmode();
-        this.saveSettingToStorage(this.setting());
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
-            this.osPrefersDark = event.matches;
-            if (this.setting() === 'SYSTEM') {
-                this.calculateDarkmode();
-            }
-        });
-    }
-    setDarkmodeSetting(newSetting) {
-        this.saveSettingToStorage(newSetting);
-        return this.calculateDarkmode();
-    }
-    getSystemDarkmodePreference() {
-        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-    calculateDarkmode() {
-        if (this.setting() === 'SYSTEM') {
-            this.darkmode.set(this.osPrefersDark ? 'DARK' : 'LIGHT');
-        }
-        else {
-            this.darkmode.set(this.setting() === 'DARK' ? 'DARK' : 'LIGHT');
-        }
-        return this.darkmode();
-    }
-    updateDarkmodeTagOnDOM(mode) {
-        const documentNode = this.document.getElementsByTagName('html')[0];
-        if (mode === 'DARK') {
-            documentNode.setAttribute('data-theme', 'dark');
-        }
-        else {
-            documentNode.setAttribute('data-theme', 'light');
-        }
-    }
-    saveSettingToStorage(newSetting) {
-        localStorage.setItem(this.STORAGE_KEY, newSetting);
-        this.setting.set(newSetting);
-    }
-    getSettingFromStorage() {
-        return localStorage.getItem(this.STORAGE_KEY) ?? 'SYSTEM';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DarkmodeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DarkmodeService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: DarkmodeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
 class HotkeyService {
     config = inject(STRATA_CONFIG);
     destroyRef = inject(DestroyRef);
@@ -724,8 +726,11 @@ class StrataOverlayDirective {
     ...(ngDevMode ? [{ debugName: "overlayPlacement" }] : /* istanbul ignore next */ []));
     overlayOffset = input(8, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "overlayOffset" }] : /* istanbul ignore next */ []));
+    overlayFitViewport = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayFitViewport" }] : /* istanbul ignore next */ []));
     element = inject(ElementRef);
     viewContainerRef = inject(ViewContainerRef);
+    config = inject(STRATA_CONFIG, { optional: true });
     overlayEl;
     cleanup;
     viewRef;
@@ -749,10 +754,28 @@ class StrataOverlayDirective {
     async updatePosition() {
         if (!this.overlayEl)
             return;
+        const middleware = [
+            offset(this.overlayOffset()),
+            flip(),
+            shift()
+        ];
+        if (this.overlayFitViewport()) {
+            const buffer = this.config?.overlayViewportBuffer ?? 16;
+            middleware.push(size({
+                apply({ availableHeight, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${availableHeight - buffer}px`
+                    });
+                }
+            }));
+        }
+        else {
+            this.overlayEl.style.maxHeight = '';
+        }
         const { x, y } = await computePosition(this.element.nativeElement, this.overlayEl, {
             placement: this.overlayPlacement(),
             strategy: 'fixed',
-            middleware: [offset(this.overlayOffset()), flip(), shift()]
+            middleware
         });
         if (!this.overlayEl)
             return;
@@ -780,14 +803,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 } }, 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 } }, 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 }] }] } });
+        }], 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 }] }] } });
 
 class StrataActionMenuComponent {
     projectedButton = contentChild(StrataButtonDirective, { ...(ngDevMode ? { debugName: "projectedButton" } : /* istanbul ignore next */ {}), descendants: true,
@@ -825,7 +848,7 @@ class StrataActionMenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataActionMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataActionMenuComponent, isStandalone: true, selector: "st-action-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, 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 }], 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"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], 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 } }, 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 }], 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"], 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,
@@ -1287,7 +1310,7 @@ class StrataSingleSelectComponent {
         this.open.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: StrataSingleSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataSingleSelectComponent, isStandalone: true, selector: "st-single-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", searchQuery: "searchQueryChange", itemSelected: "itemSelected" }, 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\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" [attr.data-open]=\"open()\"\n  tabindex=\"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\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    <ng-content select=\"st-select-item\"></ng-content>\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataInputFieldComponent, selector: "st-input-field" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: StrataNativeInputRefDirective, selector: "input[stInput], textarea[stInput]" }, { kind: "directive", type: StrataButtonDirective, selector: "[stButton]", inputs: ["variant", "size", "fullWidth"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: StrataSingleSelectComponent, isStandalone: true, selector: "st-single-select", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchQuery: { classPropertyName: "searchQuery", publicName: "searchQuery", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selectedChange", searchQuery: "searchQueryChange", itemSelected: "itemSelected" }, 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\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" [attr.data-open]=\"open()\"\n  tabindex=\"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\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StrataIconComponent, selector: "st-icon", inputs: ["name", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: StrataOverlayDirective, selector: "[stOverlay]", inputs: ["stOverlay", "overlayOpen", "overlayPlacement", "overlayOffset", "overlayFitViewport"], outputs: ["overlayOpenChange"] }, { kind: "component", type: StrataInputFieldComponent, selector: "st-input-field" }, { 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,
@@ -1299,7 +1322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
                         FormsModule,
                         StrataNativeInputRefDirective,
                         StrataButtonDirective,
-                    ], template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" [attr.data-open]=\"open()\"\n  tabindex=\"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\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    <ng-content select=\"st-select-item\"></ng-content>\n  </div>\n</ng-template>" }]
+                    ], template: "@if (label()) {\n<label class=\"st-label\" [for]=\"name()\"> {{ label() }}</label>\n}\n<div class=\"single-select-input\" [id]=\"name()\" #singleSelectInput (click)=\"toggle($event)\" [attr.data-open]=\"open()\"\n  tabindex=\"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\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>" }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchQuery: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchQuery", required: false }] }, { type: i0.Output, args: ["searchQueryChange"] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], selectItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrataSelectItemComponent), { isSignal: true }] }], triggerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrataSelectTriggerDirective), { ...{ read: TemplateRef }, isSignal: true }] }], inputField: [{ type: i0.ViewChild, args: [i0.forwardRef(() => StrataInputFieldComponent), { isSignal: true }] }] } });
 
 class StrataDividerComponent {