@acorex/components 22.1.0-next.0 → 22.1.0-next.10

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

@@ -1,29 +1,52 @@
-import { NXComponent, AXComponent } from '@acorex/cdk/common';
+import { NXValueComponent, AXComponent, AXClearableComponent, AXClosableComponent, AXValuableComponent } from '@acorex/cdk/common';
+import { AXChipsComponent } from '@acorex/components/chips';
+import * as i1 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXPopoverComponent } from '@acorex/components/popover';
+import { AXPlatform } from '@acorex/core/platform';
 import { AXTranslatorPipe } from '@acorex/core/translation';
 import { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox';
 import { Listbox, Option } from '@angular/aria/listbox';
-import { AsyncPipe } from '@angular/common';
+import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, output, signal, computed, linkedSignal, viewChild, effect, untracked, afterRenderEffect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { inject, DestroyRef, input, model, output, signal, computed, linkedSignal, viewChild, effect, untracked, afterRenderEffect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 /**
- * A minimal combo box for selecting a single value from a list of items.
+ * A minimal combo box for selecting one or more values from a list of items.
  *
  * Built on top of the `@angular/aria/combobox` directives, it supports two behaviors:
  * - `searchable="true"` (default): an input with typeahead filtering (matches `id`).
- * - `searchable="false"`: a select-like trigger (same input, read-only).
+ * - `searchable="false"`: a select-like, non-editable trigger (same input; typing blocked without
+ *   Combobox `readonly`, so Tab focus and keyboard open/select keep working).
+ *
+ * With `multiple="true"`, selected values are shown as chips in the trigger and the popup stays
+ * open while toggling items (same interaction model as `ax-lookup` multi-select).
+ *
+ * With `adaptivityEnabled` (default `true`), the list opens as a bottom actionsheet on small
+ * screens instead of an anchored dropdown — the same alternate presentation as `ax-select-box`.
  *
  * Items use `text` for display, `id` for search/identity, and `value` as the submitted model value.
+ * Implements {@link FormValueControl} so `[(ngModel)]` / signal forms work via the `value` model
+ * (no `ControlValueAccessor`).
  *
  * @category Components
  */
-class AXComboBoxComponent extends NXComponent {
+class AXComboBoxComponent extends NXValueComponent {
+    #platform;
+    #destroyRef;
     #isUserInteraction;
     #lastValue;
     #lastExpanded;
     constructor() {
         super();
+        this.#platform = inject(AXPlatform);
+        this.#destroyRef = inject(DestroyRef);
+        /**
+         * The name of the form field, used by validation rules and `ax-form.validate(names)`.
+         */
+        this.name = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
         /**
          * The list of items the user can select from.
          * Each item has `id` (search/identity), `text` (display), and `value` (submitted).
@@ -32,24 +55,73 @@ class AXComboBoxComponent extends NXComponent {
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         /**
          * Whether the combo box accepts typing and filters the list (`true`),
-         * or is a select-like, read-only trigger (`false`).
+         * or is a select-like, non-editable trigger (`false`).
          */
         this.searchable = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+        /**
+         * When `true`, multiple items can be selected. Selected values are shown as chips and the
+         * popup stays open while toggling. The model value is an array (`[]` when empty).
+         */
+        this.multiple = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+        /**
+         * When `true` (default), the popup list uses the alternate actionsheet presentation on small
+         * screens (`SM`). When `false`, the list always opens as an anchored dropdown.
+         */
+        this.adaptivityEnabled = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "adaptivityEnabled" }] : /* istanbul ignore next */ []));
+        /**
+         * Title shown in the actionsheet header on small screens. Falls back to `placeholder`.
+         */
+        this.caption = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
+        /**
+         * When `true`, list rows use alternating background colors for easier scanning.
+         */
+        this.alternate = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
         /**
          * The placeholder text shown when no value is selected.
          */
         this.placeholder = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /**
+         * Placeholder for the trigger search input when items are already selected (multi-select).
+         * Falls back to `placeholder` when the selection is empty.
+         */
+        this.searchPlaceholder = input('Search...', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template rendered when the filtered list has no items.
+         * When omitted, a default "no result found" message is shown.
+         */
+        this.emptyTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template rendered for each item in the popup list.
+         * Context: `{ $implicit: AXComboBoxItem }`.
+         */
+        this.itemTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template rendered for the selected value in the trigger.
+         * Context: `{ $implicit: AXComboBoxItem }`.
+         * When `searchable` is true, the template is shown while the popup is closed and the input
+         * still reflects the selected text; typing/opening falls back to the plain input.
+         * In multi-select mode, the template replaces the chip text for each selected item.
+         */
+        this.selectedTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : /* istanbul ignore next */ []));
         /**
          * Whether the combo box is disabled.
          */
-        this.disabled = model(false, /* @ts-ignore */
+        this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /**
          * Whether the combo box is readonly.
          */
-        this.readonly = model(false, /* @ts-ignore */
+        this.readonly = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         /**
          * Predefined look scheme of the editor container. Same looks as other editor components like ax-text-box.
@@ -57,7 +129,8 @@ class AXComboBoxComponent extends NXComponent {
         this.look = model('solid', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
         /**
-         * The selected item's `value`. Supports two-way binding.
+         * The selected item `value`(s). Scalar (or `null`) in single mode; an array in multi mode.
+         * Supports `[(value)]`, `[(ngModel)]`, and signal forms via {@link FormValueControl}.
          */
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -65,6 +138,22 @@ class AXComboBoxComponent extends NXComponent {
          * Emitted when the selected value changes.
          */
         this.onValueChanged = output();
+        /**
+         * Emitted when the trigger receives focus.
+         */
+        this.onFocus = output();
+        /**
+         * Emitted when the trigger loses focus.
+         */
+        this.onBlur = output();
+        /**
+         * Emitted when a list item is clicked.
+         */
+        this.onItemClick = output();
+        /**
+         * Emitted when a list item is selected (click or keyboard).
+         */
+        this.onItemSelected = output();
         /**
          * Emitted when the popup list opens.
          */
@@ -76,26 +165,60 @@ class AXComboBoxComponent extends NXComponent {
         /** Whether the popup is expanded. */
         this.expanded = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-        /** The item whose `value` matches the current model value. */
-        this.selectedItem = computed(() => {
+        /** Whether the list is currently shown as a bottom actionsheet (small screens + adaptivity). */
+        this.isActionsheetStyle = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActionsheetStyle" }] : /* istanbul ignore next */ []));
+        /** The current selection normalized to an array of submitted values. */
+        this.selectedValues = computed(() => {
             const value = this.value();
             if (value == null) {
-                return null;
+                return [];
             }
-            return this.items().find((item) => item.value === value) ?? null;
+            return Array.isArray(value) ? value : [value];
         }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+        /** Whether there is at least one selected value. */
+        this.hasSelection = computed(() => this.selectedValues().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSelection" }] : /* istanbul ignore next */ []));
+        /** Resolved selected items for the current model value(s). */
+        this.selectedItems = computed(() => {
+            const values = new Set(this.selectedValues());
+            return this.items().filter((item) => values.has(item.value));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+        /** The item whose `value` matches the current model value (single-select). */
+        this.selectedItem = computed(() => (this.multiple() ? null : (this.selectedItems()[0] ?? null)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
-        /** Display text shown in the trigger / used as the searchable input baseline. */
+        /** 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 */ []));
-        /** The text typed in the searchable input. Resets to the selected item's text. */
-        this.searchText = linkedSignal(() => this.displayText(), /* @ts-ignore */
+        /**
+         * 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 */
         ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
-        /** The listbox selection (item ids), kept in sync with the selected value. */
-        this.selection = linkedSignal(() => {
-            const id = this.selectedItem()?.id;
-            return id != null ? [id] : [];
+        /** Whether the trigger should render `selectedTemplate` instead of the plain input text. */
+        this.showSelectedTemplate = computed(() => {
+            if (this.multiple() || !this.selectedTemplate() || !this.selectedItem()) {
+                return false;
+            }
+            if (!this.searchable()) {
+                return true;
+            }
+            return !this.expanded() && this.searchText() === this.displayText();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSelectedTemplate" }] : /* istanbul ignore next */ []));
+        /** Placeholder for the editable trigger search input in multi-select. */
+        this.triggerSearchPlaceholder = computed(() => {
+            if (this.multiple() && this.selectedItems().length > 0) {
+                return this.searchPlaceholder();
+            }
+            return this.placeholder();
         }, /* @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 */ []));
         /** Items filtered by typed query against `id` when the combo box is searchable. */
         this.filteredItems = computed(() => {
@@ -104,10 +227,15 @@ class AXComboBoxComponent extends NXComponent {
                 return items;
             }
             const query = this.searchText().trim().toLowerCase();
-            const selectedId = (this.selectedItem()?.id ?? '').toLowerCase();
-            if (!query || query === selectedId || query === this.displayText().trim().toLowerCase()) {
+            if (!query) {
                 return items;
             }
+            if (!this.multiple()) {
+                const selectedId = (this.selectedItem()?.id ?? '').toLowerCase();
+                if (query === selectedId || query === this.displayText().trim().toLowerCase()) {
+                    return items;
+                }
+            }
             return items.filter((item) => item.id.toLowerCase().includes(query));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
@@ -122,6 +250,19 @@ class AXComboBoxComponent extends NXComponent {
         this.#lastExpanded = undefined;
         effect(() => this.#emitValueChanged(this.value()));
         effect(() => this.#emitOpenedOrClosed(this.expanded()));
+        effect(() => {
+            this.adaptivityEnabled();
+            untracked(() => this.#syncActionsheetStyle());
+        });
+        this.#platform.resize.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            this.#syncActionsheetStyle();
+            // Match dropdown-box: close anchored dropdowns on resize; keep actionsheet open.
+            if (this.expanded() && !this.isActionsheetStyle()) {
+                this.close();
+            }
+        });
+        // Seed the actionsheet flag once.
+        this.#syncActionsheetStyle();
         // Open during CD (before render) so the overlay exists before Aria DeferredContent
         // creates the list in its after-render hook.
         effect(() => {
@@ -145,11 +286,23 @@ class AXComboBoxComponent extends NXComponent {
             }
         });
     }
+    #syncActionsheetStyle() {
+        this.isActionsheetStyle.set(this.adaptivityEnabled() && this.#platform.is('SM'));
+    }
+    /** Stable unique key for `@for` — avoids NG0955 when `id` is missing or duplicated. */
+    trackItemKey(index, item) {
+        const id = item?.id?.trim();
+        return id ? id : `item-${index}`;
+    }
+    /** Whether the given item is currently selected. */
+    isItemSelected(item) {
+        return this.selectedValues().some((value) => value === item.value);
+    }
     /** Emits onValueChanged when the value actually changes (skips the initial value). */
     #emitValueChanged(value) {
         const previous = this.#lastValue;
         this.#lastValue = value;
-        if (previous === undefined || previous === value) {
+        if (previous === undefined || this.#valuesEqual(previous, value)) {
             return;
         }
         this.onValueChanged.emit({
@@ -162,6 +315,15 @@ class AXComboBoxComponent extends NXComponent {
         });
         this.#isUserInteraction = false;
     }
+    #valuesEqual(a, b) {
+        if (a === b) {
+            return true;
+        }
+        if (Array.isArray(a) && Array.isArray(b)) {
+            return a.length === b.length && a.every((value, index) => value === b[index]);
+        }
+        return false;
+    }
     /** Emits onOpened/onClosed when the expanded state actually changes (skips the initial state). */
     #emitOpenedOrClosed(expanded) {
         const previous = this.#lastExpanded;
@@ -189,32 +351,228 @@ class AXComboBoxComponent extends NXComponent {
         }
         this.expanded.update((open) => !open);
     }
+    /**
+     * Keyboard handling on the trigger:
+     * - Non-searchable: open with Enter/Space when collapsed; commit with Space when expanded.
+     * - Multi-select: Backspace removes the last chip when the search input is empty.
+     */
+    onTriggerKeydown(event) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        if (this.multiple() && event.key === 'Backspace' && !this.searchText()) {
+            const items = this.selectedItems();
+            if (items.length > 0) {
+                event.preventDefault();
+                this.removeChip(event, items[items.length - 1]);
+            }
+            return;
+        }
+        if (this.searchable()) {
+            return;
+        }
+        if (event.key !== 'Enter' && event.key !== ' ') {
+            return;
+        }
+        if (!this.expanded()) {
+            event.preventDefault();
+            this.expanded.set(true);
+            return;
+        }
+        if (event.key === ' ') {
+            event.preventDefault();
+            this.commit();
+        }
+    }
+    /** Blocks typing in non-searchable mode without Combobox `readonly` (keeps Tab/keyboard working). */
+    onBeforeInput(event) {
+        if (!this.searchable() || this.readonly()) {
+            event.preventDefault();
+        }
+    }
     /**
      * Keeps the combobox expanded state in sync when the popover closes (e.g. click outside).
      */
     onPopoverClosed() {
         this.expanded.set(false);
+        this.searchText.set(this.multiple() ? '' : this.displayText());
+    }
+    /**
+     * Removes a single chip from the multi selection.
+     */
+    removeChip(event, item) {
+        event.stopPropagation();
+        if (this.disabled() || this.readonly() || !this.multiple()) {
+            return;
+        }
+        this.#isUserInteraction = true;
+        this.value.set(this.selectedValues().filter((value) => value !== item.value));
     }
     /**
-     * Commits the current listbox selection as the component value and closes the popup.
+     * Clears the selected value(s) and closes the popup.
+     * Sets `null` in single mode and `[]` in multi mode. Used by projected `ax-clear-button`.
+     *
+     * @param isUserInteraction - Whether the clear was triggered by the user.
      */
-    commit() {
-        const selectedId = this.selection()[0];
+    reset(isUserInteraction = false) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        const next = this.multiple() ? [] : null;
+        const current = this.value();
+        if (this.multiple()) {
+            if (Array.isArray(current) && current.length === 0) {
+                return;
+            }
+            if (current == null) {
+                return;
+            }
+        }
+        else if (current == null) {
+            return;
+        }
+        this.#isUserInteraction = isUserInteraction;
+        this.value.set(next);
+        this.selection.set([]);
+        this.expanded.set(false);
+    }
+    /**
+     * Closes the popup list.
+     */
+    close() {
+        this.expanded.set(false);
+    }
+    /**
+     * Closes the popup list (alias for {@link close}, required by `AXClosableComponent`).
+     */
+    closeAll() {
+        this.close();
+    }
+    /**
+     * Commits the highlighted (active) or clicked list item as the component value.
+     *
+     * With `selectionMode="explicit"`, arrow keys only move the active item; Enter/Space must resolve
+     * that option. Clicks resolve from the event target so we do not depend on listener order vs ngListbox.
+     *
+     * In multi-select mode the item is toggled and the popup stays open.
+     */
+    commit(event) {
+        const listbox = this.listboxRef();
+        let selectedId;
+        if (event?.type === 'click' && event.target instanceof Element) {
+            const optionEl = event.target.closest('[role="option"]');
+            const match = listbox?._pattern.inputs.items().find((item) => item.element() === optionEl);
+            const value = match?.value();
+            selectedId = typeof value === 'string' ? value : undefined;
+        }
+        else {
+            const activeValue = listbox?._pattern.inputs.activeItem()?.value();
+            selectedId = typeof activeValue === 'string' ? activeValue : this.selection()[0];
+        }
         const item = selectedId != null ? this.items().find((i) => i.id === selectedId) : undefined;
-        if (item != null && item.value !== this.value()) {
+        if (item == null) {
+            if (!this.multiple()) {
+                this.expanded.set(false);
+            }
+            return;
+        }
+        if (event?.type === 'click') {
+            this.onItemClick.emit({
+                component: this,
+                item,
+                htmlElement: this.nativeElement,
+                isUserInteraction: true,
+                nativeEvent: event,
+            });
+        }
+        if (this.multiple()) {
+            const current = this.selectedValues();
+            const exists = current.some((value) => value === item.value);
+            if (!exists) {
+                this.onItemSelected.emit({
+                    component: this,
+                    item,
+                    htmlElement: this.nativeElement,
+                    isUserInteraction: true,
+                });
+            }
+            const next = exists ? current.filter((value) => value !== item.value) : [...current, item.value];
+            this.#isUserInteraction = true;
+            this.value.set(next);
+            this.selection.set(next.map((value) => this.items().find((i) => i.value === value)?.id).filter((id) => id != null));
+            if (this.searchable() && this.searchText()) {
+                this.searchText.set('');
+            }
+            return;
+        }
+        this.onItemSelected.emit({
+            component: this,
+            item,
+            htmlElement: this.nativeElement,
+            isUserInteraction: true,
+        });
+        if (item.value !== this.value()) {
             this.#isUserInteraction = true;
             this.value.set(item.value);
+            this.selection.set([item.id]);
         }
         this.expanded.set(false);
         this.comboboxRef()?.element.focus();
     }
+    /**
+     * Focuses the combo box trigger input.
+     */
+    focus(options) {
+        if (this.disabled()) {
+            return;
+        }
+        this.comboboxRef()?.element.focus(options);
+    }
+    /** Forwards native focus from the trigger input. */
+    emitOnFocus(e) {
+        this.onFocus.emit({
+            component: this,
+            htmlElement: this.nativeElement,
+            nativeEvent: e,
+        });
+    }
+    /** Forwards native blur from the trigger input. */
+    emitOnBlur(e) {
+        this.onBlur.emit({
+            component: this,
+            htmlElement: this.nativeElement,
+            nativeEvent: e,
+        });
+    }
     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: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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: { disabled: "disabledChange", readonly: "readonlyChange", look: "lookChange", value: "valueChange", onValueChanged: "onValueChanged", onOpened: "onOpened", onClosed: "onClosed" }, providers: [{ provide: AXComponent, 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 }], usesInheritance: true, ngImport: i0, template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-combo-box-trigger]=\"!searchable()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <input\n    ngCombobox\n    #combobox=\"ngCombobox\"\n    type=\"text\"\n    class=\"ax-input\"\n    [class.ax-combo-box-select-input]=\"!searchable()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || !searchable()\"\n    [(value)]=\"searchText\"\n    [(expanded)]=\"expanded\"\n    (click)=\"onTriggerClick()\"\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\n      class=\"ax-icon\"\n      [class.ax-icon-chevron-down]=\"!expanded()\"\n      [class.ax-icon-chevron-up]=\"expanded()\"\n    ></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]=\"'clickOut'\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"origin.offsetWidth + 'px'\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <div class=\"ax-combo-box-popup\" [class.ax-is-empty]=\"filteredItems().length === 0\">\n      @if (filteredItems().length === 0) {\n        <div class=\"ax-combo-box-empty\">{{ '@acorex:common.general.no-result-found' | translate | async }}</div>\n      }\n      <div\n        ngListbox\n        ngComboboxWidget\n        #listbox=\"ngListbox\"\n        class=\"ax-combo-box-listbox\"\n        [class.ax-hidden]=\"filteredItems().length === 0\"\n        focusMode=\"activedescendant\"\n        selectionMode=\"explicit\"\n        [tabindex]=\"-1\"\n        [activeDescendant]=\"listbox.activeDescendant()\"\n        [(value)]=\"selection\"\n        (click)=\"commit()\"\n        (keydown.enter)=\"commit()\"\n      >\n        @for (item of filteredItems(); track item.id) {\n          <div ngOption class=\"ax-combo-box-option\" [value]=\"item.id\" [label]=\"item.text\">\n            <span class=\"ax-combo-box-option-label\">{{ item.text }}</span>\n            <span class=\"ax-combo-box-option-check\" aria-hidden=\"true\"></span>\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n</ax-popover>\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-editor-container.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-combo-box .ax-editor-container.ax-state-disabled .ax-input,ax-combo-box .ax-editor-container.ax-state-disabled .ax-editor{cursor:not-allowed}ax-combo-box .ax-editor-container.ax-state-readonly{opacity:75%}ax-combo-box .ax-combo-box-trigger{cursor:pointer;--tw-outline-style: none;outline-style:none;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}.ax-combo-box-popup{--ax-comp-combo-box-popup-max-height: 15rem;box-sizing:border-box;width:100%;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: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{display:flex;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;justify-content:center}.ax-combo-box-listbox{display:flex;max-height:var(--ax-comp-combo-box-popup-max-height);flex-direction:column;gap:calc(var(--spacing, .25rem) * .5);overflow:auto;padding:calc(var(--spacing, .25rem) * 1);--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{display:flex;cursor:pointer;align-items:center;justify-content:space-between;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;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));--tw-outline-style: none;outline-style:none}.ax-combo-box-option:hover{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-combo-box-option[data-active=true]{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option[aria-selected=true]{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option[aria-selected=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)){.ax-combo-box-option[aria-selected=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[aria-selected=true] .ax-combo-box-option-check{display:block;width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);rotate:45deg;border-right-style:var(--tw-border-style);border-right-width:2px;border-bottom-style:var(--tw-border-style);border-bottom-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option .ax-combo-box-option-check{display:none}}@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;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ 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", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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 }, 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 }], usesInheritance: true, ngImport: i0, template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-combo-box-trigger]=\"!searchable()\"\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\" color=\"primary\" look=\"twotone\" [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]=\"!searchable()\"\n      [class.ax-combo-box-input-overlay]=\"!multiple() && showSelectedTemplate()\"\n      [placeholder]=\"multiple() ? triggerSearchPlaceholder() : placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.inputmode]=\"searchable() ? null : 'none'\"\n      [(value)]=\"searchText\"\n      [(expanded)]=\"expanded\"\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]=\"'clickOut'\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <div\n      class=\"ax-combo-box-popup\"\n      [class.ax-is-empty]=\"filteredItems().length === 0\"\n      [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    >\n      @if (isActionsheetStyle()) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption() || placeholder() || ('@acorex:selectbox.popover.title' | translate | async) }}</ax-title>\n          <ax-close-button [icon]=\"multiple() ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      <ng-content select=\"ax-header\"></ng-content>\n      @if (expanded()) {\n        @if (filteredItems().length === 0) {\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        <div\n          ngListbox\n          ngComboboxWidget\n          #listbox=\"ngListbox\"\n          class=\"ax-combo-box-listbox\"\n          [class.ax-hidden]=\"filteredItems().length === 0\"\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)=\"commit()\"\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-state-alternate]=\"alternate() && odd\"\n              [value]=\"item.id\"\n              [label]=\"item.text\"\n            >\n              @if (itemTemplate()) {\n                <ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              } @else {\n                <span class=\"ax-combo-box-option-label\">{{ item.text }}</span>\n                @if (isItemSelected(item)) {\n                  <ax-icon class=\"ax-combo-box-option-check ax-icon ax-icon-check\" aria-hidden=\"true\"></ax-icon>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n      <ng-content select=\"ax-footer\"></ng-content>\n    </div>\n  </ng-template>\n</ax-popover>\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;box-sizing:border-box;display:flex;width:100%;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: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: min(50vh, 24rem);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-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-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{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-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);flex-direction:column;overflow: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{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-check{flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}}@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: 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.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: "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: [{
             type: Component,
-            args: [{ selector: 'ax-combo-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, AXPopoverComponent, AXTranslatorPipe, AsyncPipe], providers: [{ provide: AXComponent, useExisting: AXComboBoxComponent }], template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-combo-box-trigger]=\"!searchable()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  <input\n    ngCombobox\n    #combobox=\"ngCombobox\"\n    type=\"text\"\n    class=\"ax-input\"\n    [class.ax-combo-box-select-input]=\"!searchable()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || !searchable()\"\n    [(value)]=\"searchText\"\n    [(expanded)]=\"expanded\"\n    (click)=\"onTriggerClick()\"\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\n      class=\"ax-icon\"\n      [class.ax-icon-chevron-down]=\"!expanded()\"\n      [class.ax-icon-chevron-up]=\"expanded()\"\n    ></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]=\"'clickOut'\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"origin.offsetWidth + 'px'\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <div class=\"ax-combo-box-popup\" [class.ax-is-empty]=\"filteredItems().length === 0\">\n      @if (filteredItems().length === 0) {\n        <div class=\"ax-combo-box-empty\">{{ '@acorex:common.general.no-result-found' | translate | async }}</div>\n      }\n      <div\n        ngListbox\n        ngComboboxWidget\n        #listbox=\"ngListbox\"\n        class=\"ax-combo-box-listbox\"\n        [class.ax-hidden]=\"filteredItems().length === 0\"\n        focusMode=\"activedescendant\"\n        selectionMode=\"explicit\"\n        [tabindex]=\"-1\"\n        [activeDescendant]=\"listbox.activeDescendant()\"\n        [(value)]=\"selection\"\n        (click)=\"commit()\"\n        (keydown.enter)=\"commit()\"\n      >\n        @for (item of filteredItems(); track item.id) {\n          <div ngOption class=\"ax-combo-box-option\" [value]=\"item.id\" [label]=\"item.text\">\n            <span class=\"ax-combo-box-option-label\">{{ item.text }}</span>\n            <span class=\"ax-combo-box-option-check\" aria-hidden=\"true\"></span>\n          </div>\n        }\n      </div>\n    </div>\n  </ng-template>\n</ax-popover>\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-editor-container.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-combo-box .ax-editor-container.ax-state-disabled .ax-input,ax-combo-box .ax-editor-container.ax-state-disabled .ax-editor{cursor:not-allowed}ax-combo-box .ax-editor-container.ax-state-readonly{opacity:75%}ax-combo-box .ax-combo-box-trigger{cursor:pointer;--tw-outline-style: none;outline-style:none;-webkit-user-select:none;user-select:none}ax-combo-box .ax-combo-box-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}.ax-combo-box-popup{--ax-comp-combo-box-popup-max-height: 15rem;box-sizing:border-box;width:100%;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: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{display:flex;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;justify-content:center}.ax-combo-box-listbox{display:flex;max-height:var(--ax-comp-combo-box-popup-max-height);flex-direction:column;gap:calc(var(--spacing, .25rem) * .5);overflow:auto;padding:calc(var(--spacing, .25rem) * 1);--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{display:flex;cursor:pointer;align-items:center;justify-content:space-between;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;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));--tw-outline-style: none;outline-style:none}.ax-combo-box-option:hover{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-combo-box-option:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-combo-box-option[data-active=true]{border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option[aria-selected=true]{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option[aria-selected=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)){.ax-combo-box-option[aria-selected=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[aria-selected=true] .ax-combo-box-option-check{display:block;width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);rotate:45deg;border-right-style:var(--tw-border-style);border-right-width:2px;border-bottom-style:var(--tw-border-style);border-bottom-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-option .ax-combo-box-option-check{display:none}}@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;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], 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"] }], 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 }] }] } });
+            args: [{ selector: 'ax-combo-box', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AXChipsComponent,
+                        AXDecoratorModule,
+                        Combobox,
+                        ComboboxPopup,
+                        ComboboxWidget,
+                        Listbox,
+                        Option,
+                        AXPopoverComponent,
+                        AXTranslatorPipe,
+                        AsyncPipe,
+                        NgTemplateOutlet,
+                    ], providers: [
+                        { provide: AXComponent, useExisting: AXComboBoxComponent },
+                        { 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]=\"!searchable()\"\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\" color=\"primary\" look=\"twotone\" [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]=\"!searchable()\"\n      [class.ax-combo-box-input-overlay]=\"!multiple() && showSelectedTemplate()\"\n      [placeholder]=\"multiple() ? triggerSearchPlaceholder() : placeholder()\"\n      [disabled]=\"disabled()\"\n      [readonly]=\"readonly()\"\n      [attr.inputmode]=\"searchable() ? null : 'none'\"\n      [(value)]=\"searchText\"\n      [(expanded)]=\"expanded\"\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]=\"'clickOut'\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\n    <div\n      class=\"ax-combo-box-popup\"\n      [class.ax-is-empty]=\"filteredItems().length === 0\"\n      [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    >\n      @if (isActionsheetStyle()) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>{{ caption() || placeholder() || ('@acorex:selectbox.popover.title' | translate | async) }}</ax-title>\n          <ax-close-button [icon]=\"multiple() ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n        </ax-header>\n      }\n      <ng-content select=\"ax-header\"></ng-content>\n      @if (expanded()) {\n        @if (filteredItems().length === 0) {\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        <div\n          ngListbox\n          ngComboboxWidget\n          #listbox=\"ngListbox\"\n          class=\"ax-combo-box-listbox\"\n          [class.ax-hidden]=\"filteredItems().length === 0\"\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)=\"commit()\"\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-state-alternate]=\"alternate() && odd\"\n              [value]=\"item.id\"\n              [label]=\"item.text\"\n            >\n              @if (itemTemplate()) {\n                <ng-container [ngTemplateOutlet]=\"itemTemplate()!\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n              } @else {\n                <span class=\"ax-combo-box-option-label\">{{ item.text }}</span>\n                @if (isItemSelected(item)) {\n                  <ax-icon class=\"ax-combo-box-option-check ax-icon ax-icon-check\" aria-hidden=\"true\"></ax-icon>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n      <ng-content select=\"ax-footer\"></ng-content>\n    </div>\n  </ng-template>\n</ax-popover>\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;box-sizing:border-box;display:flex;width:100%;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: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: min(50vh, 24rem);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-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-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{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-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);flex-direction:column;overflow: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{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-check{flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}}@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 }] }], 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 }] }] } });
 
 class AXComboBoxModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }