@acorex/components 22.1.7 → 22.2.0-next.0

package/fesm2022/acorex-components-combo-box.mjs

@@ -1,6 +1,6 @@
-import { NXValueComponent, AXComponent, AXClearableComponent, AXClosableComponent, AXValuableComponent } from '@acorex/cdk/common';
-import { AXHighlightTextComponent } from '@acorex/cdk/highlight';
-import { AXButtonComponent } from '@acorex/components/button';
+import { NXValueComponent, retryFrames, scrollOptionWithinContainer, AXComponent, AXClearableComponent, AXClosableComponent, AXValuableComponent } from '@acorex/cdk/common';
+import { AXHighlightTextComponent } from '@acorex/components/highlight';
+import { AXButtonComponent, AXDecoratorCloseButtonComponent } from '@acorex/components/button';
 import { AXCheckBoxComponent } from '@acorex/components/check-box';
 import { AXChipsComponent } from '@acorex/components/chips';
 import * as i1 from '@acorex/components/decorators';
@@ -8,7 +8,7 @@ import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXPopoverComponent } from '@acorex/components/popover';
 import { AXSearchBoxComponent } from '@acorex/components/search-box';
 import { AXPlatform } from '@acorex/core/platform';
-import { AXTranslatorPipe } from '@acorex/core/translation';
+import { AXTranslationService, toTranslatedSignal, AXTranslatorPipe } from '@acorex/core/translation';
 import { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox';
 import { Listbox, Option } from '@angular/aria/listbox';
 import { DOCUMENT, NgTemplateOutlet, AsyncPipe } from '@angular/common';
@@ -41,15 +41,21 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 class AXComboBoxComponent extends NXValueComponent {
     #platform;
     #destroyRef;
+    #translation;
+    /** Applied (debounced) search query used for filtering and highlighting. */
+    #appliedFilterQuery;
     #document;
     #isUserInteraction;
     #lastValue;
     #lastExpanded;
     #sheetSearchFocused;
+    #searchDebounce;
+    #SEARCH_DEBOUNCE_MS;
     constructor() {
         super();
         this.#platform = inject(AXPlatform);
         this.#destroyRef = inject(DestroyRef);
+        this.#translation = inject(AXTranslationService);
         /**
          * The name of the form field, used by validation rules and `ax-form.validate(names)`.
          */
@@ -83,6 +89,7 @@ class AXComboBoxComponent extends NXValueComponent {
         ...(ngDevMode ? [{ debugName: "adaptivityEnabled" }] : /* istanbul ignore next */ []));
         /**
          * Title shown in the actionsheet header on small screens. Falls back to `placeholder`.
+         * Supports i18n expressions (e.g. `@acorex:selectbox.popover.title`).
          */
         this.caption = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
@@ -93,6 +100,7 @@ class AXComboBoxComponent extends NXValueComponent {
         ...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
         /**
          * The placeholder text shown when no value is selected.
+         * Supports i18n expressions (e.g. `@acorex:chat.placeholders.select-conversation`).
          */
         this.placeholder = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
@@ -100,9 +108,14 @@ class AXComboBoxComponent extends NXValueComponent {
          * Placeholder for the trigger search input when items are already selected (multi-select),
          * and for the in-sheet search field on small screens. Falls back to `placeholder` when the
          * selection is empty on desktop.
+         * Supports i18n expressions (e.g. `@acorex:common.actions.search`).
          */
-        this.searchPlaceholder = input('Search...', /* @ts-ignore */
+        this.searchPlaceholder = input('@acorex:common.actions.search', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        /** Resolved `placeholder` (i18n-aware). */
+        this.translatedPlaceholder = toTranslatedSignal(this.placeholder);
+        /** Resolved `searchPlaceholder` (i18n-aware). */
+        this.translatedSearchPlaceholder = toTranslatedSignal(this.searchPlaceholder);
         /**
          * When `true` (default), matching characters in popup result items are highlighted
          * while the user searches.
@@ -193,6 +206,9 @@ class AXComboBoxComponent extends NXValueComponent {
         /** Query typed in the actionsheet search field (independent of the trigger display text). */
         this.sheetSearchText = signal('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sheetSearchText" }] : /* istanbul ignore next */ []));
+        /** Applied (debounced) search query used for filtering and highlighting. */
+        this.#appliedFilterQuery = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#appliedFilterQuery" }] : /* istanbul ignore next */ []));
         /** The current selection normalized to an array of submitted values. */
         this.selectedValues = computed(() => {
             const value = this.value();
@@ -217,11 +233,18 @@ class AXComboBoxComponent extends NXValueComponent {
         /** Display text shown in the trigger / used as the searchable input baseline (single-select). */
         this.displayText = computed(() => this.selectedItem()?.text ?? '', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+        /** Resolved display text for the trigger input (i18n-aware). */
+        this.translatedDisplayText = toTranslatedSignal(this.displayText);
+        /** Actionsheet header title with i18n fallback chain. */
+        this.actionsheetTitleSource = computed(() => this.caption() || this.placeholder() || '@acorex:selectbox.popover.title', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsheetTitleSource" }] : /* istanbul ignore next */ []));
+        /** Resolved actionsheet title (i18n-aware). */
+        this.actionsheetTitle = toTranslatedSignal(this.actionsheetTitleSource);
         /**
          * The text typed in the searchable input.
          * Multi-select starts empty; single mode syncs from the selected display text.
          */
-        this.searchText = linkedSignal(() => (this.multiple() ? '' : this.displayText()), /* @ts-ignore */
+        this.searchText = linkedSignal(() => (this.multiple() ? '' : this.translatedDisplayText()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
         /** Whether the trigger should render `selectedTemplate` instead of the plain input text. */
         this.showSelectedTemplate = computed(() => {
@@ -231,24 +254,24 @@ class AXComboBoxComponent extends NXValueComponent {
             if (!this.isEditableTrigger()) {
                 return true;
             }
-            return !this.expanded() && this.searchText() === this.displayText();
+            return !this.expanded() && this.searchText() === this.translatedDisplayText();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showSelectedTemplate" }] : /* istanbul ignore next */ []));
         /** Placeholder for the editable trigger search input in multi-select. */
         this.triggerSearchPlaceholder = computed(() => {
             if (this.isActionsheetStyle()) {
-                return this.multiple() && this.selectedItems().length > 0 ? '' : this.placeholder();
+                return this.multiple() && this.selectedItems().length > 0 ? '' : this.translatedPlaceholder();
             }
             if (this.multiple() && this.selectedItems().length > 0) {
-                return this.searchPlaceholder();
+                return this.translatedSearchPlaceholder();
             }
-            return this.placeholder();
+            return this.translatedPlaceholder();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "triggerSearchPlaceholder" }] : /* istanbul ignore next */ []));
         /** The listbox selection (item ids), kept in sync with the selected value(s). */
         this.selection = linkedSignal(() => this.selectedItems().map((item) => item.id), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-        /** Active search query used for filtering and highlighting. */
+        /** Resolved search query from the trigger or sheet input (debounced before filtering). */
         this.searchQuery = computed(() => {
             if (!this.searchable()) {
                 return '';
@@ -261,7 +284,11 @@ class AXComboBoxComponent extends NXValueComponent {
             // Desktop single-select: the trigger shows the selected label, which is not a filter.
             if (!inSheet && !this.multiple()) {
                 const selectedId = (this.selectedItem()?.id ?? '').toLowerCase();
-                if (query.toLowerCase() === selectedId || query.toLowerCase() === this.displayText().trim().toLowerCase()) {
+                const translated = this.translatedDisplayText().trim().toLowerCase();
+                const raw = this.displayText().trim().toLowerCase();
+                if (query.toLowerCase() === selectedId ||
+                    query.toLowerCase() === translated ||
+                    query.toLowerCase() === raw) {
                     return '';
                 }
             }
@@ -269,23 +296,19 @@ class AXComboBoxComponent extends NXValueComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
         /** Query passed to result-item highlighting (empty when disabled). */
-        this.highlightQuery = computed(() => (this.highlightSearch() ? this.searchQuery() : ''), /* @ts-ignore */
+        this.highlightQuery = computed(() => (this.highlightSearch() ? this.#appliedFilterQuery() : ''), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "highlightQuery" }] : /* istanbul ignore next */ []));
-        /** Items filtered by typed query against `id` when the combo box is searchable. */
+        /** Items filtered by typed query against `id` and `text` when the combo box is searchable. */
         this.filteredItems = computed(() => {
             const items = this.items();
             if (!this.searchable()) {
                 return items;
             }
-            const query = this.searchQuery().toLowerCase();
+            const query = this.#appliedFilterQuery().toLowerCase();
             if (!query) {
                 return items;
             }
-            const inSheet = this.isActionsheetStyle();
-            return items.filter((item) => {
-                const idMatch = item.id.toLowerCase().includes(query);
-                return idMatch || (inSheet && (item.text ?? '').toLowerCase().includes(query));
-            });
+            return items.filter((item) => this.#matchesItem(item, query));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
         /** Whether the filtered list is empty (empty-state vs hidden listbox). */
@@ -308,6 +331,7 @@ class AXComboBoxComponent extends NXValueComponent {
         this.#lastValue = undefined;
         this.#lastExpanded = undefined;
         this.#sheetSearchFocused = false;
+        this.#SEARCH_DEBOUNCE_MS = 300;
         effect(() => this.#emitValueChanged(this.value()));
         effect(() => this.#emitOpenedOrClosed(this.expanded()));
         effect(() => {
@@ -339,14 +363,82 @@ class AXComboBoxComponent extends NXValueComponent {
                 }
             });
         });
+        // Re-seed listbox selection on open. Angular Aria prunes `value` when options are
+        // unmounted (popup close / filter), and linkedSignal does not recompute until selectedItems changes.
+        effect(() => {
+            if (!this.expanded()) {
+                return;
+            }
+            untracked(() => this.selection.set(this.selectedItems().map((item) => item.id)));
+        });
         afterRenderEffect(() => {
             if (!this.expanded()) {
                 this.#sheetSearchFocused = false;
                 return;
             }
-            this.listboxRef()?.scrollActiveItemIntoView();
             this.#tryFocusSheetSearch();
         });
+        effect(() => {
+            const query = this.searchQuery();
+            untracked(() => this.#applyFilterDebounced(query));
+        });
+        this.#destroyRef.onDestroy(() => this.#clearSearchDebounce());
+    }
+    /** Scrolls the selected option into view after the popover overlay is open and laid out. */
+    onPopoverOpened() {
+        if (!this.expanded()) {
+            return;
+        }
+        this.#scrollToSelectedWhenReady();
+    }
+    #selectedOptionIndex() {
+        const selected = this.selectedItems()[0];
+        if (!selected) {
+            return -1;
+        }
+        return this.filteredItems().findIndex((item) => item.id === selected.id);
+    }
+    #resolveListboxContainer() {
+        const listbox = this.listboxRef();
+        if (listbox?.element?.isConnected) {
+            return listbox.element;
+        }
+        const popup = this.popupRef()?.nativeElement;
+        if (popup?.isConnected) {
+            const inPopup = popup.querySelector('.ax-combo-box-listbox');
+            if (inPopup?.isConnected) {
+                return inPopup;
+            }
+        }
+        // Popover portals projected content into a body overlay.
+        const listboxes = this.#document.querySelectorAll('.ax-overlay-container .ax-combo-box-listbox');
+        return listboxes.length > 0 ? listboxes[listboxes.length - 1] : null;
+    }
+    #scrollToSelectedWhenReady() {
+        const index = this.#selectedOptionIndex();
+        if (index < 0) {
+            return;
+        }
+        retryFrames(() => {
+            if (!this.expanded()) {
+                return true;
+            }
+            const container = this.#resolveListboxContainer();
+            if (!container?.clientHeight) {
+                return false;
+            }
+            const options = container.querySelectorAll('.ax-combo-box-option-host');
+            if (options.length <= index) {
+                return false;
+            }
+            const option = options[index];
+            if (container.scrollHeight <= container.clientHeight) {
+                return false;
+            }
+            scrollOptionWithinContainer(container, option);
+            this.listboxRef()?.gotoIndex(index);
+            return true;
+        }, 60);
     }
     #syncActionsheetStyle() {
         this.isActionsheetStyle.set(this.adaptivityEnabled() && this.#platform.is('SM'));
@@ -413,6 +505,16 @@ class AXComboBoxComponent extends NXValueComponent {
         }
         this.expanded.update((open) => !open);
     }
+    /**
+     * Toggles the popup when the chevron button is clicked.
+     */
+    onChevronClick(event) {
+        event.stopPropagation();
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.expanded.update((open) => !open);
+    }
     /**
      * Keyboard handling on the trigger:
      * - Searchable: Enter never submits the form; with no matches the value is cleared (`null`).
@@ -466,6 +568,7 @@ class AXComboBoxComponent extends NXValueComponent {
         event.preventDefault();
         event.stopPropagation();
         event.stopImmediatePropagation();
+        this.#flushPendingFilter();
         if (this.#shouldClearOnEmptyEnter()) {
             if (!this.multiple()) {
                 this.reset(true);
@@ -536,8 +639,9 @@ class AXComboBoxComponent extends NXValueComponent {
     onPopoverClosed() {
         this.#sheetSearchFocused = false;
         this.expanded.set(false);
-        this.searchText.set(this.multiple() ? '' : this.displayText());
+        this.searchText.set(this.multiple() ? '' : this.translatedDisplayText());
         this.#clearSheetSearch();
+        this.#applyFilterNow('');
     }
     /**
      * Removes a single chip from the multi selection.
@@ -631,6 +735,9 @@ class AXComboBoxComponent extends NXValueComponent {
         this.commit();
     }
     commit(event) {
+        if (event?.type !== 'click') {
+            this.#flushPendingFilter();
+        }
         if (event?.type !== 'click' && this.#shouldClearOnEmptyEnter()) {
             if (!this.multiple()) {
                 this.reset(true);
@@ -762,20 +869,70 @@ class AXComboBoxComponent extends NXValueComponent {
         const origin = this.originRef()?.nativeElement;
         return Boolean(origin?.contains(node));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXComboBoxComponent, isStandalone: true, selector: "ax-combo-box", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, adaptivityEnabled: { classPropertyName: "adaptivityEnabled", publicName: "adaptivityEnabled", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, highlightSearch: { classPropertyName: "highlightSearch", publicName: "highlightSearch", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", 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 }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { look: "lookChange", value: "valueChange", onValueChanged: "onValueChanged", onFocus: "onFocus", onBlur: "onBlur", onItemClick: "onItemClick", onItemSelected: "onItemSelected", onOpened: "onOpened", onClosed: "onClosed" }, providers: [
+    #applyFilterNow(query) {
+        this.#clearSearchDebounce();
+        this.#appliedFilterQuery.set(query);
+    }
+    #applyFilterDebounced(query) {
+        this.#clearSearchDebounce();
+        if (!query) {
+            this.#applyFilterNow('');
+            return;
+        }
+        this.#searchDebounce = setTimeout(() => {
+            this.#searchDebounce = undefined;
+            this.#appliedFilterQuery.set(query);
+        }, this.#SEARCH_DEBOUNCE_MS);
+    }
+    #flushPendingFilter() {
+        if (!this.#searchDebounce) {
+            return;
+        }
+        this.#applyFilterNow(this.searchQuery());
+    }
+    #clearSearchDebounce() {
+        if (!this.#searchDebounce) {
+            return;
+        }
+        clearTimeout(this.#searchDebounce);
+        this.#searchDebounce = undefined;
+    }
+    #matchesItem(item, query) {
+        if (item.id.toLowerCase().includes(query)) {
+            return true;
+        }
+        const text = String(item.text ?? '');
+        if (text.toLowerCase().includes(query)) {
+            return true;
+        }
+        if (text.startsWith('@')) {
+            return this.#translateItemTextForFilter(text).toLowerCase().includes(query);
+        }
+        return false;
+    }
+    /** Fast path for search filtering — skips sync translation for plain labels. */
+    #translateItemTextForFilter(text) {
+        const value = String(text ?? '');
+        if (!value.startsWith('@')) {
+            return value;
+        }
+        return this.#translation.translateSync(value, { waitForLoad: false });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXComboBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXComboBoxComponent, isStandalone: true, selector: "ax-combo-box", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, adaptivityEnabled: { classPropertyName: "adaptivityEnabled", publicName: "adaptivityEnabled", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, highlightSearch: { classPropertyName: "highlightSearch", publicName: "highlightSearch", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", 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 }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { look: "lookChange", value: "valueChange", onValueChanged: "onValueChanged", onFocus: "onFocus", onBlur: "onBlur", onItemClick: "onItemClick", onItemSelected: "onItemSelected", onOpened: "onOpened", onClosed: "onClosed" }, providers: [
             { provide: AXComponent, useExisting: AXComboBoxComponent },
             { provide: AXClearableComponent, useExisting: AXComboBoxComponent },
             { provide: AXClosableComponent, useExisting: AXComboBoxComponent },
             { provide: AXValuableComponent, useExisting: AXComboBoxComponent },
-        ], viewQueries: [{ propertyName: "comboboxRef", first: true, predicate: Combobox, descendants: true, isSignal: true }, { propertyName: "listboxRef", first: true, predicate: Listbox, descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }, { propertyName: "originRef", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "popupRef", first: true, predicate: ["popup"], descendants: true, isSignal: true }, { propertyName: "sheetSearchRef", first: true, predicate: ["sheetSearch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-combo-box-trigger]=\"!isEditableTrigger()\"\n  [class.ax-combo-box-trigger-multiple]=\"multiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-combo-box-value\" [class.ax-combo-box-chips]=\"multiple()\">\n    @if (multiple()) {\n      @for (item of selectedItems(); track item.id) {\n        <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : item.text\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n    } @else if (showSelectedTemplate()) {\n      <div class=\"ax-combo-box-selected-content\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"selectedTemplate()!\"\n          [ngTemplateOutletContext]=\"{ $implicit: selectedItem() }\"\n        />\n      </div>\n    }\n\n    <input\n      ngCombobox\n      #combobox=\"ngCombobox\"\n      type=\"text\"\n      class=\"ax-input\"\n      [class.ax-combo-box-trigger-search]=\"multiple()\"\n      [class.ax-combo-box-select-input]=\"!isEditableTrigger()\"\n      [class.ax-combo-box-input-overlay]=\"!multiple() && showSelectedTemplate()\"\n      [placeholder]=\"multiple() ? triggerSearchPlaceholder() : placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly() || !isEditableTrigger()\"\n      [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n      [(value)]=\"searchText\"\n      [expanded]=\"expanded()\"\n      (expandedChange)=\"onExpandedChange($event)\"\n      (click)=\"onTriggerClick()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      (beforeinput)=\"onBeforeInput($event)\"\n      (focus)=\"emitOnFocus($event)\"\n      (blur)=\"emitOnBlur($event)\"\n    />\n  </div>\n\n  @if (hasSelection() && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"onTriggerClick()\"\n  >\n    <span class=\"ax-icon\" [class.ax-icon-chevron-down]=\"!expanded()\" [class.ax-icon-chevron-up]=\"expanded()\"></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n  [closeOnScroll]=\"!isActionsheetStyle()\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div\n    #popup\n    class=\"ax-combo-box-popup\"\n    [class.ax-is-empty]=\"hasNoMatches()\"\n    [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ caption() || placeholder() || ('@acorex:selectbox.popover.title' | translate | async) }}</ax-title>\n        @if (multiple()) {\n          <ax-button\n            class=\"ax-sm\"\n            color=\"primary\"\n            look=\"solid\"\n            text=\"@acorex:common.actions.apply\"\n            (onClick)=\"close()\"\n          ></ax-button>\n        } @else {\n          <ax-close-button></ax-close-button>\n        }\n      </ax-header>\n    }\n    @if (isSheetSearchEnabled()) {\n      <div class=\"ax-combo-box-sheet-search\">\n        <ax-search-box\n          #sheetSearch\n          class=\"ax-sm\"\n          look=\"fill\"\n          [autoSearch]=\"false\"\n          [delayTime]=\"0\"\n          [placeholder]=\"searchPlaceholder()\"\n          (onValueChanged)=\"onSheetSearchInput()\"\n          (onKeyUp)=\"onSheetSearchInput()\"\n          (onKeyDown)=\"onSheetSearchKeydown($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @if (hasNoMatches()) {\n        @if (emptyTemplate()) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\" />\n        } @else {\n          <div class=\"ax-combo-box-empty\">{{ '@acorex:common.general.no-result-found' | translate | async }}</div>\n        }\n      }\n      @if (isActionsheetStyle()) {\n        <div\n          ngListbox\n          class=\"ax-combo-box-listbox\"\n          [class.ax-hidden]=\"hasNoMatches()\"\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"multiple()\"\n          [tabindex]=\"-1\"\n          [(value)]=\"selection\"\n          (click)=\"commit($event)\"\n        >\n          @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n            <div\n              ngOption\n              class=\"ax-combo-box-option-host\"\n              [class.ax-combo-box-option]=\"!itemTemplate()\"\n              [class.ax-combo-box-option-multiple]=\"multiple()\"\n              [class.ax-state-alternate]=\"alternate() && odd\"\n              [value]=\"item.id\"\n              [label]=\"item.text\"\n            >\n              <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <ng-template ngComboboxPopup [combobox]=\"combobox\">\n          <div\n            ngListbox\n            ngComboboxWidget\n            #listbox=\"ngListbox\"\n            class=\"ax-combo-box-listbox\"\n            [class.ax-hidden]=\"hasNoMatches()\"\n            focusMode=\"activedescendant\"\n            selectionMode=\"explicit\"\n            [multi]=\"multiple()\"\n            [tabindex]=\"-1\"\n            [activeDescendant]=\"listbox.activeDescendant()\"\n            [(value)]=\"selection\"\n            (click)=\"commit($event)\"\n            (keydown.enter)=\"onListEnter($event)\"\n            (keydown.space)=\"commit()\"\n          >\n            @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n              <div\n                ngOption\n                class=\"ax-combo-box-option-host\"\n                [class.ax-combo-box-option]=\"!itemTemplate()\"\n                [class.ax-combo-box-option-multiple]=\"multiple()\"\n                [class.ax-state-alternate]=\"alternate() && odd\"\n                [value]=\"item.id\"\n                [label]=\"item.text\"\n              >\n                <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-template #optionContent let-item>\n  @if (multiple()) {\n    <ax-check-box\n      class=\"ax-combo-box-checkbox\"\n      [tabIndex]=\"-1\"\n      [value]=\"isItemSelected(item)\"\n    ></ax-check-box>\n  }\n  @if (itemTemplate()) {\n    <ng-container\n      [ngTemplateOutlet]=\"itemTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, highlightText: highlightQuery() }\"\n    />\n  } @else {\n    <span class=\"ax-combo-box-option-label\">\n      <ax-highlight-text [text]=\"item.text\" [query]=\"highlightQuery()\" />\n    </span>\n    @if (!multiple() && isItemSelected(item)) {\n      <ax-icon class=\"ax-combo-box-option-check ax-icon ax-icon-check\" aria-hidden=\"true\"></ax-icon>\n    }\n  }\n</ng-template>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box{display:block;width:100%}ax-combo-box .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-trigger-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-chips{display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible}ax-combo-box .ax-combo-box-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-combo-box .ax-combo-box-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-combo-box ax-chips ax-prefix,ax-combo-box ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-combo-box ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-combo-box-popup{--ax-comp-combo-box-popup-max-height: 15rem;--ax-comp-combo-box-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-combo-box-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-combo-box-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-combo-box-highlight-bg-color));color:rgb(var(--ax-comp-combo-box-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-combo-box-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-combo-box-popup.ax-is-empty{min-height:calc(var(--spacing, .25rem) * 12)}.ax-combo-box-popup.ax-is-actionsheet{--ax-comp-combo-box-popup-max-height: none;height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup.ax-is-actionsheet.ax-is-empty{min-height:100dvh}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-listbox{min-height:calc(var(--spacing, .25rem) * 0);flex:1;max-height:none}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-empty{display:flex;flex:1;align-items:center;justify-content:center}.ax-combo-box-popup .ax-combo-box-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-popup>ax-header:not(.ax-solid),.ax-combo-box-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-combo-box-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-combo-box-listbox{display:flex;max-height:var(--ax-comp-combo-box-popup-max-height);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow-x:hidden;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ax-combo-box-listbox.ax-hidden{display:none}.ax-combo-box-empty{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-combo-box-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-combo-box-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-combo-box-option-host.ax-combo-box-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host.ax-combo-box-option-multiple:not(.ax-combo-box-option){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host .ax-combo-box-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-combo-box-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-combo-box-option[aria-selected=true]{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option.ax-combo-box-option-multiple{justify-content:flex-start}.ax-combo-box-option .ax-combo-box-option-label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-combo-box-option .ax-combo-box-option-check{flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "readonly", "softDisabled", "alwaysExpanded", "tabindex", "expanded", "value", "inlineSuggestion"], outputs: ["expandedChange", "valueChange"], exportAs: ["ngCombobox"] }, { kind: "directive", type: ComboboxPopup, selector: "ng-template[ngComboboxPopup]", inputs: ["combobox", "popupType"], exportAs: ["ngComboboxPopup"] }, { kind: "directive", type: ComboboxWidget, selector: "[ngComboboxWidget]", inputs: ["activeDescendant"], exportAs: ["ngComboboxWidget"] }, { kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "comboboxRef", first: true, predicate: Combobox, descendants: true, isSignal: true }, { propertyName: "listboxRef", first: true, predicate: Listbox, descendants: true, isSignal: true }, { propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }, { propertyName: "originRef", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "popupRef", first: true, predicate: ["popup"], descendants: true, isSignal: true }, { propertyName: "sheetSearchRef", first: true, predicate: ["sheetSearch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-combo-box-trigger]=\"!isEditableTrigger()\"\n  [class.ax-combo-box-trigger-multiple]=\"multiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-combo-box-value\" [class.ax-combo-box-chips]=\"multiple()\">\n    @if (multiple()) {\n      @for (item of selectedItems(); track item.id) {\n        <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : (item.text | translate | async)\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n    } @else if (showSelectedTemplate()) {\n      <div class=\"ax-combo-box-selected-content\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"selectedTemplate()!\"\n          [ngTemplateOutletContext]=\"{ $implicit: selectedItem() }\"\n        />\n      </div>\n    }\n\n    <input\n      ngCombobox\n      #combobox=\"ngCombobox\"\n      type=\"text\"\n      class=\"ax-input\"\n      [class.ax-combo-box-trigger-search]=\"multiple()\"\n      [class.ax-combo-box-select-input]=\"!isEditableTrigger()\"\n      [class.ax-combo-box-input-overlay]=\"!multiple() && showSelectedTemplate()\"\n      [placeholder]=\"multiple() ? triggerSearchPlaceholder() : translatedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly() || !isEditableTrigger()\"\n      [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n      [(value)]=\"searchText\"\n      [expanded]=\"expanded()\"\n      (expandedChange)=\"onExpandedChange($event)\"\n      (click)=\"onTriggerClick()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      (beforeinput)=\"onBeforeInput($event)\"\n      (focus)=\"emitOnFocus($event)\"\n      (blur)=\"emitOnBlur($event)\"\n    />\n  </div>\n\n  @if (hasSelection() && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onChevronClick($event)\"\n  >\n    <span class=\"ax-icon\" [class.ax-icon-chevron-down]=\"!expanded()\" [class.ax-icon-chevron-up]=\"expanded()\"></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n  [closeOnScroll]=\"!isActionsheetStyle()\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onOpened)=\"onPopoverOpened()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div\n    #popup\n    class=\"ax-combo-box-popup\"\n    [class.ax-is-empty]=\"hasNoMatches()\"\n    [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ actionsheetTitle() }}</ax-title>\n        @if (multiple()) {\n          <ax-button\n            class=\"ax-sm\"\n            color=\"primary\"\n            look=\"solid\"\n            text=\"@acorex:common.actions.apply\"\n            (onClick)=\"close()\"\n          ></ax-button>\n        } @else {\n          <ax-close-button></ax-close-button>\n        }\n      </ax-header>\n    }\n    @if (isSheetSearchEnabled()) {\n      <div class=\"ax-combo-box-sheet-search\">\n        <ax-search-box\n          #sheetSearch\n          class=\"ax-sm\"\n          look=\"fill\"\n          [autoSearch]=\"false\"\n          [delayTime]=\"0\"\n          [placeholder]=\"searchPlaceholder()\"\n          (onValueChanged)=\"onSheetSearchInput()\"\n          (onKeyUp)=\"onSheetSearchInput()\"\n          (onKeyDown)=\"onSheetSearchKeydown($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @if (hasNoMatches()) {\n        @if (emptyTemplate()) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\" />\n        } @else {\n          <div class=\"ax-combo-box-empty\">{{ '@acorex:common.general.no-result-found' | translate | async }}</div>\n        }\n      }\n      @if (isActionsheetStyle()) {\n        <div\n          ngListbox\n          class=\"ax-combo-box-listbox\"\n          [class.ax-hidden]=\"hasNoMatches()\"\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"multiple()\"\n          [tabindex]=\"-1\"\n          [(value)]=\"selection\"\n          (click)=\"commit($event)\"\n        >\n          @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n            <div\n              ngOption\n              class=\"ax-combo-box-option-host\"\n              [class.ax-combo-box-option]=\"!itemTemplate()\"\n              [class.ax-combo-box-option-multiple]=\"multiple()\"\n              [class.ax-state-alternate]=\"alternate() && odd\"\n              [value]=\"item.id\"\n              [label]=\"item.text | translate | async\"\n            >\n              <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <ng-template ngComboboxPopup [combobox]=\"combobox\">\n          <div\n            ngListbox\n            ngComboboxWidget\n            #listbox=\"ngListbox\"\n            class=\"ax-combo-box-listbox\"\n            [class.ax-hidden]=\"hasNoMatches()\"\n            focusMode=\"activedescendant\"\n            selectionMode=\"explicit\"\n            [multi]=\"multiple()\"\n            [tabindex]=\"-1\"\n            [activeDescendant]=\"listbox.activeDescendant()\"\n            [(value)]=\"selection\"\n            (click)=\"commit($event)\"\n            (keydown.enter)=\"onListEnter($event)\"\n            (keydown.space)=\"commit()\"\n          >\n            @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n              <div\n                ngOption\n                class=\"ax-combo-box-option-host\"\n                [class.ax-combo-box-option]=\"!itemTemplate()\"\n                [class.ax-combo-box-option-multiple]=\"multiple()\"\n                [class.ax-state-alternate]=\"alternate() && odd\"\n                [value]=\"item.id\"\n                [label]=\"item.text | translate | async\"\n              >\n                <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-template #optionContent let-item>\n  @if (multiple()) {\n    <ax-check-box\n      class=\"ax-combo-box-checkbox\"\n      [tabIndex]=\"-1\"\n      [value]=\"isItemSelected(item)\"\n    ></ax-check-box>\n  }\n  @if (itemTemplate()) {\n    <ng-container\n      [ngTemplateOutlet]=\"itemTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, highlightText: highlightQuery() }\"\n    />\n  } @else {\n    <span class=\"ax-combo-box-option-label\">\n      <ax-highlight-text [text]=\"item.text | translate | async\" [query]=\"highlightQuery()\" />\n    </span>\n    @if (!multiple() && isItemSelected(item)) {\n      <ax-icon class=\"ax-combo-box-option-check ax-icon ax-icon-check\" aria-hidden=\"true\"></ax-icon>\n    }\n  }\n</ng-template>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box{display:block;width:100%}ax-combo-box .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-trigger-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-chips{display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible}ax-combo-box .ax-combo-box-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-combo-box .ax-combo-box-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-combo-box ax-chips ax-prefix,ax-combo-box ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-combo-box ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-combo-box-popup{--ax-comp-combo-box-popup-max-height: 15rem;--ax-comp-combo-box-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-combo-box-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-combo-box-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-combo-box-highlight-bg-color));color:rgb(var(--ax-comp-combo-box-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-combo-box-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-combo-box-popup.ax-is-empty{min-height:calc(var(--spacing, .25rem) * 12)}.ax-combo-box-popup.ax-is-actionsheet{--ax-comp-combo-box-popup-max-height: none;height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup.ax-is-actionsheet.ax-is-empty{min-height:100dvh}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-listbox{min-height:calc(var(--spacing, .25rem) * 0);flex:1;max-height:none}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-empty{display:flex;flex:1;align-items:center;justify-content:center}.ax-combo-box-popup .ax-combo-box-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-popup>ax-header:not(.ax-solid),.ax-combo-box-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-combo-box-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-combo-box-listbox{display:flex;max-height:var(--ax-comp-combo-box-popup-max-height);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow-x:hidden;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ax-combo-box-listbox.ax-hidden{display:none}.ax-combo-box-empty{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-combo-box-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-combo-box-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-combo-box-option-host.ax-combo-box-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host.ax-combo-box-option-multiple:not(.ax-combo-box-option){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host .ax-combo-box-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-combo-box-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-combo-box-option[aria-selected=true]{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option.ax-combo-box-option-multiple{justify-content:flex-start}.ax-combo-box-option .ax-combo-box-option-label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-combo-box-option .ax-combo-box-option-check{flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: Combobox, selector: "[ngCombobox]", inputs: ["disabled", "readonly", "softDisabled", "alwaysExpanded", "tabindex", "expanded", "value", "inlineSuggestion"], outputs: ["expandedChange", "valueChange"], exportAs: ["ngCombobox"] }, { kind: "directive", type: ComboboxPopup, selector: "ng-template[ngComboboxPopup]", inputs: ["combobox", "popupType"], exportAs: ["ngComboboxPopup"] }, { kind: "directive", type: ComboboxWidget, selector: "[ngComboboxWidget]", inputs: ["activeDescendant"], exportAs: ["ngComboboxWidget"] }, { kind: "directive", type: Listbox, selector: "[ngListbox]", inputs: ["id", "orientation", "multi", "wrap", "softDisabled", "focusMode", "selectionMode", "typeaheadDelay", "disabled", "readonly", "tabindex", "value"], outputs: ["valueChange"], exportAs: ["ngListbox"] }, { kind: "directive", type: Option, selector: "[ngOption]", inputs: ["id", "value", "disabled", "label"], exportAs: ["ngOption"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXComboBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-combo-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         AXButtonComponent,
                         AXCheckBoxComponent,
                         AXChipsComponent,
+                        AXDecoratorCloseButtonComponent,
                         AXDecoratorModule,
                         Combobox,
                         ComboboxPopup,
@@ -793,15 +950,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         { provide: AXClearableComponent, useExisting: AXComboBoxComponent },
                         { provide: AXClosableComponent, useExisting: AXComboBoxComponent },
                         { provide: AXValuableComponent, useExisting: AXComboBoxComponent },
-                    ], template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-combo-box-trigger]=\"!isEditableTrigger()\"\n  [class.ax-combo-box-trigger-multiple]=\"multiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-combo-box-value\" [class.ax-combo-box-chips]=\"multiple()\">\n    @if (multiple()) {\n      @for (item of selectedItems(); track item.id) {\n        <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : item.text\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n    } @else if (showSelectedTemplate()) {\n      <div class=\"ax-combo-box-selected-content\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"selectedTemplate()!\"\n          [ngTemplateOutletContext]=\"{ $implicit: selectedItem() }\"\n        />\n      </div>\n    }\n\n    <input\n      ngCombobox\n      #combobox=\"ngCombobox\"\n      type=\"text\"\n      class=\"ax-input\"\n      [class.ax-combo-box-trigger-search]=\"multiple()\"\n      [class.ax-combo-box-select-input]=\"!isEditableTrigger()\"\n      [class.ax-combo-box-input-overlay]=\"!multiple() && showSelectedTemplate()\"\n      [placeholder]=\"multiple() ? triggerSearchPlaceholder() : placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly() || !isEditableTrigger()\"\n      [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n      [(value)]=\"searchText\"\n      [expanded]=\"expanded()\"\n      (expandedChange)=\"onExpandedChange($event)\"\n      (click)=\"onTriggerClick()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      (beforeinput)=\"onBeforeInput($event)\"\n      (focus)=\"emitOnFocus($event)\"\n      (blur)=\"emitOnBlur($event)\"\n    />\n  </div>\n\n  @if (hasSelection() && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n    (click)=\"onTriggerClick()\"\n  >\n    <span class=\"ax-icon\" [class.ax-icon-chevron-down]=\"!expanded()\" [class.ax-icon-chevron-up]=\"expanded()\"></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n  [closeOnScroll]=\"!isActionsheetStyle()\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div\n    #popup\n    class=\"ax-combo-box-popup\"\n    [class.ax-is-empty]=\"hasNoMatches()\"\n    [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ caption() || placeholder() || ('@acorex:selectbox.popover.title' | translate | async) }}</ax-title>\n        @if (multiple()) {\n          <ax-button\n            class=\"ax-sm\"\n            color=\"primary\"\n            look=\"solid\"\n            text=\"@acorex:common.actions.apply\"\n            (onClick)=\"close()\"\n          ></ax-button>\n        } @else {\n          <ax-close-button></ax-close-button>\n        }\n      </ax-header>\n    }\n    @if (isSheetSearchEnabled()) {\n      <div class=\"ax-combo-box-sheet-search\">\n        <ax-search-box\n          #sheetSearch\n          class=\"ax-sm\"\n          look=\"fill\"\n          [autoSearch]=\"false\"\n          [delayTime]=\"0\"\n          [placeholder]=\"searchPlaceholder()\"\n          (onValueChanged)=\"onSheetSearchInput()\"\n          (onKeyUp)=\"onSheetSearchInput()\"\n          (onKeyDown)=\"onSheetSearchKeydown($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @if (hasNoMatches()) {\n        @if (emptyTemplate()) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\" />\n        } @else {\n          <div class=\"ax-combo-box-empty\">{{ '@acorex:common.general.no-result-found' | translate | async }}</div>\n        }\n      }\n      @if (isActionsheetStyle()) {\n        <div\n          ngListbox\n          class=\"ax-combo-box-listbox\"\n          [class.ax-hidden]=\"hasNoMatches()\"\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"multiple()\"\n          [tabindex]=\"-1\"\n          [(value)]=\"selection\"\n          (click)=\"commit($event)\"\n        >\n          @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n            <div\n              ngOption\n              class=\"ax-combo-box-option-host\"\n              [class.ax-combo-box-option]=\"!itemTemplate()\"\n              [class.ax-combo-box-option-multiple]=\"multiple()\"\n              [class.ax-state-alternate]=\"alternate() && odd\"\n              [value]=\"item.id\"\n              [label]=\"item.text\"\n            >\n              <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <ng-template ngComboboxPopup [combobox]=\"combobox\">\n          <div\n            ngListbox\n            ngComboboxWidget\n            #listbox=\"ngListbox\"\n            class=\"ax-combo-box-listbox\"\n            [class.ax-hidden]=\"hasNoMatches()\"\n            focusMode=\"activedescendant\"\n            selectionMode=\"explicit\"\n            [multi]=\"multiple()\"\n            [tabindex]=\"-1\"\n            [activeDescendant]=\"listbox.activeDescendant()\"\n            [(value)]=\"selection\"\n            (click)=\"commit($event)\"\n            (keydown.enter)=\"onListEnter($event)\"\n            (keydown.space)=\"commit()\"\n          >\n            @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n              <div\n                ngOption\n                class=\"ax-combo-box-option-host\"\n                [class.ax-combo-box-option]=\"!itemTemplate()\"\n                [class.ax-combo-box-option-multiple]=\"multiple()\"\n                [class.ax-state-alternate]=\"alternate() && odd\"\n                [value]=\"item.id\"\n                [label]=\"item.text\"\n              >\n                <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-template #optionContent let-item>\n  @if (multiple()) {\n    <ax-check-box\n      class=\"ax-combo-box-checkbox\"\n      [tabIndex]=\"-1\"\n      [value]=\"isItemSelected(item)\"\n    ></ax-check-box>\n  }\n  @if (itemTemplate()) {\n    <ng-container\n      [ngTemplateOutlet]=\"itemTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, highlightText: highlightQuery() }\"\n    />\n  } @else {\n    <span class=\"ax-combo-box-option-label\">\n      <ax-highlight-text [text]=\"item.text\" [query]=\"highlightQuery()\" />\n    </span>\n    @if (!multiple() && isItemSelected(item)) {\n      <ax-icon class=\"ax-combo-box-option-check ax-icon ax-icon-check\" aria-hidden=\"true\"></ax-icon>\n    }\n  }\n</ng-template>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box{display:block;width:100%}ax-combo-box .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-trigger-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-chips{display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible}ax-combo-box .ax-combo-box-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-combo-box .ax-combo-box-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-combo-box ax-chips ax-prefix,ax-combo-box ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-combo-box ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-combo-box-popup{--ax-comp-combo-box-popup-max-height: 15rem;--ax-comp-combo-box-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-combo-box-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-combo-box-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-combo-box-highlight-bg-color));color:rgb(var(--ax-comp-combo-box-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-combo-box-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-combo-box-popup.ax-is-empty{min-height:calc(var(--spacing, .25rem) * 12)}.ax-combo-box-popup.ax-is-actionsheet{--ax-comp-combo-box-popup-max-height: none;height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup.ax-is-actionsheet.ax-is-empty{min-height:100dvh}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-listbox{min-height:calc(var(--spacing, .25rem) * 0);flex:1;max-height:none}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-empty{display:flex;flex:1;align-items:center;justify-content:center}.ax-combo-box-popup .ax-combo-box-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-popup>ax-header:not(.ax-solid),.ax-combo-box-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-combo-box-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-combo-box-listbox{display:flex;max-height:var(--ax-comp-combo-box-popup-max-height);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow-x:hidden;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ax-combo-box-listbox.ax-hidden{display:none}.ax-combo-box-empty{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-combo-box-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-combo-box-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-combo-box-option-host.ax-combo-box-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host.ax-combo-box-option-multiple:not(.ax-combo-box-option){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host .ax-combo-box-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-combo-box-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-combo-box-option[aria-selected=true]{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option.ax-combo-box-option-multiple{justify-content:flex-start}.ax-combo-box-option .ax-combo-box-option-label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-combo-box-option .ax-combo-box-option-check{flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-combo-box-trigger]=\"!isEditableTrigger()\"\n  [class.ax-combo-box-trigger-multiple]=\"multiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <div class=\"ax-combo-box-value\" [class.ax-combo-box-chips]=\"multiple()\">\n    @if (multiple()) {\n      @for (item of selectedItems(); track item.id) {\n        <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : (item.text | translate | async)\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n    } @else if (showSelectedTemplate()) {\n      <div class=\"ax-combo-box-selected-content\" aria-hidden=\"true\">\n        <ng-container\n          [ngTemplateOutlet]=\"selectedTemplate()!\"\n          [ngTemplateOutletContext]=\"{ $implicit: selectedItem() }\"\n        />\n      </div>\n    }\n\n    <input\n      ngCombobox\n      #combobox=\"ngCombobox\"\n      type=\"text\"\n      class=\"ax-input\"\n      [class.ax-combo-box-trigger-search]=\"multiple()\"\n      [class.ax-combo-box-select-input]=\"!isEditableTrigger()\"\n      [class.ax-combo-box-input-overlay]=\"!multiple() && showSelectedTemplate()\"\n      [placeholder]=\"multiple() ? triggerSearchPlaceholder() : translatedPlaceholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly() || !isEditableTrigger()\"\n      [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n      [(value)]=\"searchText\"\n      [expanded]=\"expanded()\"\n      (expandedChange)=\"onExpandedChange($event)\"\n      (click)=\"onTriggerClick()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      (beforeinput)=\"onBeforeInput($event)\"\n      (focus)=\"emitOnFocus($event)\"\n      (blur)=\"emitOnBlur($event)\"\n    />\n  </div>\n\n  @if (hasSelection() && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onChevronClick($event)\"\n  >\n    <span class=\"ax-icon\" [class.ax-icon-chevron-down]=\"!expanded()\" [class.ax-icon-chevron-up]=\"expanded()\"></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n  [closeOnScroll]=\"!isActionsheetStyle()\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onOpened)=\"onPopoverOpened()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div\n    #popup\n    class=\"ax-combo-box-popup\"\n    [class.ax-is-empty]=\"hasNoMatches()\"\n    [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ actionsheetTitle() }}</ax-title>\n        @if (multiple()) {\n          <ax-button\n            class=\"ax-sm\"\n            color=\"primary\"\n            look=\"solid\"\n            text=\"@acorex:common.actions.apply\"\n            (onClick)=\"close()\"\n          ></ax-button>\n        } @else {\n          <ax-close-button></ax-close-button>\n        }\n      </ax-header>\n    }\n    @if (isSheetSearchEnabled()) {\n      <div class=\"ax-combo-box-sheet-search\">\n        <ax-search-box\n          #sheetSearch\n          class=\"ax-sm\"\n          look=\"fill\"\n          [autoSearch]=\"false\"\n          [delayTime]=\"0\"\n          [placeholder]=\"searchPlaceholder()\"\n          (onValueChanged)=\"onSheetSearchInput()\"\n          (onKeyUp)=\"onSheetSearchInput()\"\n          (onKeyDown)=\"onSheetSearchKeydown($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @if (hasNoMatches()) {\n        @if (emptyTemplate()) {\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate()!\" />\n        } @else {\n          <div class=\"ax-combo-box-empty\">{{ '@acorex:common.general.no-result-found' | translate | async }}</div>\n        }\n      }\n      @if (isActionsheetStyle()) {\n        <div\n          ngListbox\n          class=\"ax-combo-box-listbox\"\n          [class.ax-hidden]=\"hasNoMatches()\"\n          focusMode=\"activedescendant\"\n          selectionMode=\"explicit\"\n          [multi]=\"multiple()\"\n          [tabindex]=\"-1\"\n          [(value)]=\"selection\"\n          (click)=\"commit($event)\"\n        >\n          @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n            <div\n              ngOption\n              class=\"ax-combo-box-option-host\"\n              [class.ax-combo-box-option]=\"!itemTemplate()\"\n              [class.ax-combo-box-option-multiple]=\"multiple()\"\n              [class.ax-state-alternate]=\"alternate() && odd\"\n              [value]=\"item.id\"\n              [label]=\"item.text | translate | async\"\n            >\n              <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n            </div>\n          }\n        </div>\n      } @else {\n        <ng-template ngComboboxPopup [combobox]=\"combobox\">\n          <div\n            ngListbox\n            ngComboboxWidget\n            #listbox=\"ngListbox\"\n            class=\"ax-combo-box-listbox\"\n            [class.ax-hidden]=\"hasNoMatches()\"\n            focusMode=\"activedescendant\"\n            selectionMode=\"explicit\"\n            [multi]=\"multiple()\"\n            [tabindex]=\"-1\"\n            [activeDescendant]=\"listbox.activeDescendant()\"\n            [(value)]=\"selection\"\n            (click)=\"commit($event)\"\n            (keydown.enter)=\"onListEnter($event)\"\n            (keydown.space)=\"commit()\"\n          >\n            @for (item of filteredItems(); track trackItemKey($index, item); let odd = $odd) {\n              <div\n                ngOption\n                class=\"ax-combo-box-option-host\"\n                [class.ax-combo-box-option]=\"!itemTemplate()\"\n                [class.ax-combo-box-option-multiple]=\"multiple()\"\n                [class.ax-state-alternate]=\"alternate() && odd\"\n                [value]=\"item.id\"\n                [label]=\"item.text | translate | async\"\n              >\n                <ng-container [ngTemplateOutlet]=\"optionContent\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              </div>\n            }\n          </div>\n        </ng-template>\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-template #optionContent let-item>\n  @if (multiple()) {\n    <ax-check-box\n      class=\"ax-combo-box-checkbox\"\n      [tabIndex]=\"-1\"\n      [value]=\"isItemSelected(item)\"\n    ></ax-check-box>\n  }\n  @if (itemTemplate()) {\n    <ng-container\n      [ngTemplateOutlet]=\"itemTemplate()!\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, highlightText: highlightQuery() }\"\n    />\n  } @else {\n    <span class=\"ax-combo-box-option-label\">\n      <ax-highlight-text [text]=\"item.text | translate | async\" [query]=\"highlightQuery()\" />\n    </span>\n    @if (!multiple() && isItemSelected(item)) {\n      <ax-icon class=\"ax-combo-box-option-check ax-icon ax-icon-check\" aria-hidden=\"true\"></ax-icon>\n    }\n  }\n</ng-template>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box{display:block;width:100%}ax-combo-box .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-trigger-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-combo-box-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-chips{display:flex;flex-wrap:wrap;align-content:center;align-items:center;gap:calc(var(--spacing, .25rem) * 1);overflow:visible}ax-combo-box .ax-combo-box-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-combo-box .ax-combo-box-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-combo-box .ax-combo-box-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-combo-box ax-chips ax-prefix,ax-combo-box ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-combo-box ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-combo-box-popup{--ax-comp-combo-box-popup-max-height: 15rem;--ax-comp-combo-box-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-combo-box-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-combo-box-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-combo-box-highlight-bg-color));color:rgb(var(--ax-comp-combo-box-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-combo-box-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-combo-box-popup.ax-is-empty{min-height:calc(var(--spacing, .25rem) * 12)}.ax-combo-box-popup.ax-is-actionsheet{--ax-comp-combo-box-popup-max-height: none;height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-combo-box-popup.ax-is-actionsheet.ax-is-empty{min-height:100dvh}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-listbox{min-height:calc(var(--spacing, .25rem) * 0);flex:1;max-height:none}.ax-combo-box-popup.ax-is-actionsheet .ax-combo-box-empty{display:flex;flex:1;align-items:center;justify-content:center}.ax-combo-box-popup .ax-combo-box-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-popup>ax-header:not(.ax-solid),.ax-combo-box-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-combo-box-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-combo-box-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-combo-box-listbox{display:flex;max-height:var(--ax-comp-combo-box-popup-max-height);min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow-x:hidden;overflow-y:auto;--tw-outline-style: none;outline-style:none}.ax-combo-box-listbox.ax-hidden{display:none}.ax-combo-box-empty{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-combo-box-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-combo-box-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host:hover,.ax-combo-box-option-host[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host.ax-state-alternate:hover,.ax-combo-box-option-host.ax-state-alternate[data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true],.ax-combo-box-option-host[aria-selected=true]:hover,.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true]:hover,.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-combo-box-option-host[aria-selected=true][data-active=true],.ax-combo-box-option-host.ax-state-alternate[aria-selected=true][data-active=true]):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-combo-box-option-host.ax-combo-box-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host.ax-combo-box-option-multiple:not(.ax-combo-box-option){padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-combo-box-option-host .ax-combo-box-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-combo-box-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-combo-box-option[aria-selected=true]{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option.ax-combo-box-option-multiple{justify-content:flex-start}.ax-combo-box-option .ax-combo-box-option-label{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-combo-box-option .ax-combo-box-option-check{flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-combo-box .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], adaptivityEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "adaptivityEnabled", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], highlightSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightSearch", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], selectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTemplate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onItemSelected: [{ type: i0.Output, args: ["onItemSelected"] }], onOpened: [{ type: i0.Output, args: ["onOpened"] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }], comboboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Combobox), { isSignal: true }] }], listboxRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Listbox), { isSignal: true }] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }], originRef: [{ type: i0.ViewChild, args: ['origin', { isSignal: true }] }], popupRef: [{ type: i0.ViewChild, args: ['popup', { isSignal: true }] }], sheetSearchRef: [{ type: i0.ViewChild, args: ['sheetSearch', { isSignal: true }] }] } });
 
 class AXComboBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, imports: [AXComboBoxComponent], exports: [AXComboBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, imports: [AXComboBoxComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXComboBoxModule, imports: [AXComboBoxComponent], exports: [AXComboBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXComboBoxModule, imports: [AXComboBoxComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXComboBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXComboBoxComponent],