@acorex/components 22.0.0-next.24 → 22.0.0-next.27

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

@@ -1,663 +1,231 @@
-import { MXSelectionValueComponent, MXLookComponent, AXHotkeysService, convertArrayToDataSource, AX_SELECTION_DATA_TOKEN, AXDataSource, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent, AXClosableComponent, AXSearchableComponent, MXSelectionBridgeService, AXCommonModule } from '@acorex/cdk/common';
-import { AXDecoratorGenericComponent, AXDecoratorCloseButtonComponent, AXDecoratorModule } from '@acorex/components/decorators';
-import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent, AXDropdownModule } from '@acorex/components/dropdown';
-import { AXListComponent, AXListModule } from '@acorex/components/list';
-import { AXLoadingSpinnerComponent, AXLoadingModule } from '@acorex/components/loading';
-import { AXSearchBoxComponent } from '@acorex/components/search-box';
-import { AXTagComponent } from '@acorex/components/tag';
-import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
-import { AXUnsubscriber } from '@acorex/core/utils';
-import { NgTemplateOutlet, NgClass, AsyncPipe, CommonModule } from '@angular/common';
+import { NXComponent, AXComponent } from '@acorex/cdk/common';
+import { AXPopoverComponent } from '@acorex/components/popover';
+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 * as i0 from '@angular/core';
-import { input, inject, signal, linkedSignal, afterNextRender, forwardRef, HostListener, ViewChild, ContentChild, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { isEqual, get, last, findLastIndex, nth } from 'lodash-es';
-import { classes } from 'polytype';
-import { AXBadgeModule } from '@acorex/components/badge';
-import { AXCheckBoxModule } from '@acorex/components/check-box';
-import { AXPopoverModule } from '@acorex/components/popover';
-import { A11yModule } from '@angular/cdk/a11y';
-import { AXTextBoxModule } from '@acorex/components/text-box';
+import { input, model, output, signal, computed, linkedSignal, viewChild, effect, untracked, afterRenderEffect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 
 /**
- * The ComboBox is a component which supports static arrays and advanced AXDataSource with lazy loading.
- * @category
+ * A minimal combo box for selecting a single value from a list of items.
+ *
+ * Built on top of the `@angular/aria/combobox` directives, it supports two behaviors:
+ * - `editable="true"` (default): an editable input with typeahead filtering (matches `id`).
+ * - `editable="false"`: a non-editable, select-like trigger (same input, read-only).
+ *
+ * Items use `text` for display, `id` for search/identity, and `value` as the submitted model value.
+ *
+ * @category Components
  */
-class AXComboBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelectionValueComponent, MXLookComponent) {
+class AXComboBoxComponent extends NXComponent {
+    #isUserInteraction;
+    #lastValue;
+    #lastExpanded;
     constructor() {
-        super(...arguments);
+        super();
         /**
-         * Determines if an item is truncated.
-         *
-         * @defaultValue true
+         * The list of items the user can select from.
+         * Each item has `id` (search/identity), `text` (display), and `value` (submitted).
          */
-        this.isItemTruncated = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isItemTruncated" }] : /* istanbul ignore next */ []));
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         /**
-         * Determines if a tooltip is shown for an item.
-         *
-         * @defaultValue false
+         * Whether the combo box renders an editable input with typeahead filtering (`true`)
+         * or a non-editable, select-like trigger (`false`).
          */
-        this.showItemTooltip = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : /* istanbul ignore next */ []));
-        /** Height of each list item in pixels, or 'auto' to let list measure. */
-        this.itemHeight = input(40, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "itemHeight" }] : /* istanbul ignore next */ []));
-        /** Maximum number of visible items before scrolling. */
-        this.maxVisibleItems = input(5, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this.hotKeyService = inject(AXHotkeysService);
-        /** @ignore */
-        this.isLoading = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this.searchValue = signal('', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this.renderList = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "renderList" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this._dropdownWidth = linkedSignal(() => this.dropdownWidth(), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_dropdownWidth" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this._dropdownHeight = signal('auto', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "_dropdownHeight" }] : /* istanbul ignore next */ []));
-        /** @ignore */
-        this._listDataSource = convertArrayToDataSource([], {
-            key: this.valueField,
-            pageSize: 10,
-        });
-        this.#init = afterNextRender(() => {
-            const formField = this.getHostElement().closest('ax-form-field');
-            if (formField?.classList.contains('ax-state-floating-label')) {
-                this.getHostElement().classList.add('ax-float-label');
-            }
-        });
+        this.editable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
         /**
-         * The width of the dropdown in pixels.
-         * @defaultValue null
+         * The placeholder text shown when no value is selected.
          */
-        this.dropdownWidth = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
-        this.searchBoxAutoFocus = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "searchBoxAutoFocus" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         /**
-         * Service for managing selection data, injected via `AX_SELECTION_DATA_TOKEN`.
+         * Whether the combo box is disabled.
          */
-        this.selectionService = inject(AX_SELECTION_DATA_TOKEN);
-        /** @ignore */
-        this._unsubscriber = inject(AXUnsubscriber);
-    }
-    #init;
-    /**
-     * Gets the data source for the component, which can be either an `AXDataSource` or an array of items.
-     * @returns {AXDataSource<any> | any[]}
-     */
-    get dataSource() {
-        return this._originalDataSource;
-    }
-    /**
-     * Sets the data source, either as an `AXDataSource` or an array.
-     * @param {AXDataSource<any> | any[]} v
-     */
-    set dataSource(v) {
-        // check if the data source is the same
-        if (Array.isArray(v) && Array.isArray(this._originalDataSource) && isEqual(v, this._originalDataSource)) {
-            return;
-        }
-        if (v instanceof AXDataSource && v == this._originalDataSource) {
-            return;
-        }
-        //
-        this._originalDataSource = v;
-        if (Array.isArray(v)) {
-            this._listDataSource = convertArrayToDataSource(v, {
-                key: this.valueField,
-                pageSize: v.length || 10,
-            });
-        }
-        else {
-            this._listDataSource = this.dataSource;
-        }
-        //
-        this.onChangedSubscription?.unsubscribe();
-        this.onChangedSubscription = this._listDataSource.onChanged
-            .pipe(this._unsubscriber.takeUntilDestroy)
-            .subscribe(() => {
-            this.updateDropdownSize();
-            // Force refresh of selected items when data source changes
-            this.forceRefreshSelectedItems();
-            if (this.isOpen) {
-                this.scheduleRevealSelected();
+        this.disabled = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the combo box is readonly.
+         */
+        this.readonly = model(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.
+         */
+        this.look = model('solid', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        /**
+         * The selected item's `value`. Supports two-way binding.
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * Emitted when the selected value changes.
+         */
+        this.onValueChanged = output();
+        /**
+         * Emitted when the popup list opens.
+         */
+        this.onOpened = output();
+        /**
+         * Emitted when the popup list closes.
+         */
+        this.onClosed = output();
+        /** 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(() => {
+            const value = this.value();
+            if (value == null) {
+                return null;
             }
-        });
-        //
-        this.onLoadingChangedSubscription?.unsubscribe();
-        this.onLoadingChangedSubscription = this._listDataSource.onLoadingChanged
-            .pipe(this._unsubscriber.takeUntilDestroy)
-            .subscribe((loading) => {
-            this.isLoading.set(loading);
-            // After async load completes while open, scroll/focus the selected item.
-            if (!loading && this.isOpen) {
-                this.scheduleRevealSelected();
+            return this.items().find((item) => item.value === value) ?? null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
+        /** Display text shown in the trigger / used as the editable input baseline. */
+        this.displayText = computed(() => this.selectedItem()?.text ?? '', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+        /** The text typed in the editable input. Resets to the selected item's text. */
+        this.searchText = linkedSignal(() => 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] : [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
+        /** Items filtered by typed query against `id` when the combo box is editable. */
+        this.filteredItems = computed(() => {
+            const items = this.items();
+            if (!this.editable()) {
+                return items;
             }
-        });
-        // After setting data source, try to fetch item data if needed
-        setTimeout(() => this.fetchItemDataIfNeeded(), 0);
-    }
-    /** @ignore */
-    ngOnInit() {
-        super.ngOnInit();
-        //
-        this.registerValidation();
-        // Proactively fetch item data if we have a value but no corresponding item
-        this.fetchItemDataIfNeeded();
-    }
-    /**
-     * Proactively fetches item data if the component has a value but no corresponding item data.
-     * This prevents showing "loading..." when the component has a value.
-     */
-    async fetchItemDataIfNeeded() {
-        const isEmptyValue = this.value == null || (Array.isArray(this.value) && this.value.length === 0);
-        if (!isEmptyValue && this._listDataSource && !this.selectedItems?.length) {
-            try {
-                const item = await this.getItemByKey(this.value);
-                if (item) {
-                    // Force refresh to update the display
-                    this.forceRefreshSelectedItems();
-                }
+            const query = this.searchText().trim().toLowerCase();
+            const selectedId = (this.selectedItem()?.id ?? '').toLowerCase();
+            if (!query || query === selectedId || query === this.displayText().trim().toLowerCase()) {
+                return items;
             }
-            catch (error) {
-                console.warn('Failed to fetch item data:', error);
+            return items.filter((item) => item.id.toLowerCase().includes(query));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+        this.comboboxRef = viewChild(Combobox, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "comboboxRef" }] : /* istanbul ignore next */ []));
+        this.listboxRef = viewChild(Listbox, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listboxRef" }] : /* istanbul ignore next */ []));
+        this.popoverRef = viewChild(AXPopoverComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popoverRef" }] : /* istanbul ignore next */ []));
+        this.#isUserInteraction = false;
+        this.#lastValue = undefined;
+        this.#lastExpanded = undefined;
+        effect(() => this.#emitValueChanged(this.value()));
+        effect(() => this.#emitOpenedOrClosed(this.expanded()));
+        // Open during CD (before render) so the overlay exists before Aria DeferredContent
+        // creates the list in its after-render hook.
+        effect(() => {
+            const expanded = this.expanded();
+            const popover = this.popoverRef();
+            if (!popover) {
+                return;
             }
-        }
-    }
-    /** @ignore */
-    ngOnDestroy() {
-        this.searchBox?.onKeyDown.unsubscribe();
-        this.onChangedSubscription?.unsubscribe();
-        this.onLoadingChangedSubscription?.unsubscribe();
-    }
-    /**
-     * Retrieves an item by its key.
-     * @param {any} key
-     */
-    getItemByKey(key) {
-        // Static array data sources resolve synchronously to avoid a false loading state
-        // for primitive values (e.g. color format "hex" / "rgba").
-        if (Array.isArray(this._originalDataSource)) {
-            for (const candidate of this._originalDataSource) {
-                if (candidate != null && typeof candidate === 'object') {
-                    if (get(candidate, this.valueField) == key || get(candidate, this.textField) == key) {
-                        return candidate;
-                    }
+            untracked(() => {
+                if (expanded && !popover.isOpen) {
+                    void popover.open();
                 }
-                else if (candidate == key) {
-                    return { [this.valueField]: candidate, [this.textField]: String(candidate ?? '') };
+                else if (!expanded && popover.isOpen) {
+                    popover.close();
                 }
-            }
-            return null;
-        }
-        if (this._listDataSource && typeof this._listDataSource.find === 'function') {
-            return this._listDataSource.find(key);
-        }
-        // If neither method is available, return null
-        console.warn('No find method available on data source');
-        return null;
-    }
-    /** @ignore */
-    _handleOnOpenedEvent(e) {
-        if (!this.renderList()) {
-            this.renderList.set(true);
-        }
-        else if (!this._listDataSource.totalCount || this._listDataSource.totalCount == 0) {
-            this.list?.refresh(false);
-        }
-        this._handleFocus();
-        //
-        this.onOpened.emit({
-            component: this,
-            isUserInteraction: e.isUserInteraction,
-        });
-        this.updateDropdownSize();
-        // Force refresh of selected items when opening to show updated text
-        this.forceRefreshSelectedItems();
-        // Keep retrying until async pages arrive and the viewport has a real size.
-        this.scheduleRevealSelected();
-    }
-    /** @ignore */
-    _handleOnClosedEvent(e) {
-        this.list?.cancelRevealSelected();
-        this.onClosed.emit({
-            component: this,
-            isUserInteraction: e.isUserInteraction,
+            });
         });
-        this._unsubscriber.unsubscribe();
-    }
-    /** @ignore */
-    _handleFocus() {
-        // Wait a tick so the list is created (first open) and dropdown height is applied.
-        setTimeout(() => {
-            if (this.searchBox) {
-                this.searchBox.look = 'flat';
-                if (this.searchBoxAutoFocus()) {
-                    this.searchBox.focus();
-                }
-                //TODO: unsubscribe
-                this.hotKeyService
-                    .addShortcut({ keys: 'Control.f', element: this.panel.nativeElement })
-                    .pipe(this._unsubscriber.takeUntilDestroy)
-                    .subscribe(() => {
-                    this.searchBox.focus();
-                });
-                this.searchBox.onKeyDown.pipe(this._unsubscriber.takeUntilDestroy).subscribe((e) => {
-                    if (e.nativeEvent.code === 'ArrowDown' || e.nativeEvent.key === 'ArrowDown') {
-                        this.list?.focus();
-                        e.nativeEvent.preventDefault();
-                    }
-                });
-            }
-            else {
-                this.list?.focus();
+        afterRenderEffect(() => {
+            if (this.expanded()) {
+                this.listboxRef()?.scrollActiveItemIntoView();
             }
         });
     }
-    /**
-     * Scroll (and focus when there is no search autofocus) to the selected item once the list is ready.
-     * @ignore
-     */
-    scheduleRevealSelected() {
-        const focusList = !this.searchBox || !this.searchBoxAutoFocus();
-        setTimeout(() => {
-            this.list?.revealSelected({ focus: focusList });
-        });
-    }
-    /** @ignore */
-    _handleBadgeRemove(e, item) {
-        this.unselectItems(item);
-        e.stopPropagation();
-    }
-    /** @ignore */
-    _handleValueChanged(e) {
-        if (e.isUserInteraction) {
-            if (!this.multiple) {
-                this.close();
-            }
-            this.commitValue(e.component.selectedItems, true);
-        }
-    }
-    /** @ignore */
-    _handleItemClick(e) {
-        this.onItemClick.emit(e);
-        if (!this.multiple) {
-            this.close();
-        }
-    }
-    /** @ignore */
-    _handleItemSelected(e) {
-        this.onItemSelected.emit(e);
-        this.resetSearchAfterSelection();
-        if (!this.multiple) {
-            this.close();
+    /** 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) {
+            return;
         }
+        this.onValueChanged.emit({
+            component: this,
+            htmlElement: this.nativeElement,
+            name: 'value',
+            value,
+            oldValue: previous,
+            isUserInteraction: this.#isUserInteraction,
+        });
+        this.#isUserInteraction = false;
     }
-    resetSearchAfterSelection() {
-        if (!this.searchBox && !this.searchBox?.value)
+    /** Emits onOpened/onClosed when the expanded state actually changes (skips the initial state). */
+    #emitOpenedOrClosed(expanded) {
+        const previous = this.#lastExpanded;
+        this.#lastExpanded = expanded;
+        if (previous === undefined || previous === expanded) {
             return;
-        if (this.searchBox && this.searchBox?.value)
-            this.searchBox.commitValue('', false);
-    }
-    /** @ignore */
-    setDropdownSize(count = 0) {
-        const itemPx = typeof this.itemHeight() === 'number' ? this.itemHeight() : 40;
-        const isActionsheet = this.dropdown.isActionsheetStyle;
-        if (isActionsheet) {
-            this._dropdownWidth.set('100%');
-            // Prefer maxVisibleItems on actionsheet too; still clamp to the pane afterwards.
-            const maxItems = Math.max(Number(this.maxVisibleItems()) || 5, 1);
-            this._dropdownHeight.set(`${Math.min(maxItems, Math.max(count, 1)) * itemPx}px`);
-        }
-        else {
-            const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()) || 0);
-            const maxItems = Number(this.maxVisibleItems());
-            this._dropdownWidth.set(`${hostWidth}px`);
-            this._dropdownHeight.set(count == 0 ? 'auto' : `${Math.min(maxItems, count) * itemPx}px`);
         }
-        setTimeout(() => {
-            this._fitListHeightToAvailableSpace(itemPx);
-            this.dropdown.updatePosition();
-            this.list?.render();
-            // Second pass after the overlay pane applies max-height / overflow constraints.
-            // Height changes invalidate the previous scroll offset — scroll again after fit.
-            requestAnimationFrame(() => {
-                setTimeout(() => {
-                    this._fitListHeightToAvailableSpace(itemPx);
-                    this.list?.render();
-                    requestAnimationFrame(() => this.scheduleRevealSelected());
-                }, 0);
-            });
-        });
+        const event = {
+            component: this,
+            htmlElement: this.nativeElement,
+            isUserInteraction: true,
+        };
+        expanded ? this.onOpened.emit(event) : this.onClosed.emit(event);
     }
     /**
-     * Shrinks list height to the visible overlay area so virtual scroll ends on fully
-     * visible rows instead of inside an overflow:hidden clipped region.
-     * @ignore
+     * Opens (editable) or toggles (non-editable) the popup on trigger click.
      */
-    _fitListHeightToAvailableSpace(itemPx) {
-        if (itemPx <= 0 || this._dropdownHeight() === 'auto') {
-            return;
-        }
-        const panel = this.panel?.nativeElement;
-        const listEl = this.list?.getHostElement?.();
-        if (!panel || !listEl) {
-            return;
-        }
-        const pane = panel.closest('.ax-overlay-pane');
-        if (!pane) {
-            return;
-        }
-        const listRect = listEl.getBoundingClientRect();
-        const paneRect = pane.getBoundingClientRect();
-        const paneOverflow = listRect.bottom - paneRect.bottom;
-        const viewportOverflow = listRect.bottom - window.innerHeight;
-        const overflow = Math.max(paneOverflow, viewportOverflow);
-        let nextHeight = listEl.clientHeight || parseFloat(this._dropdownHeight());
-        if (!Number.isFinite(nextHeight) || nextHeight <= 0) {
+    onTriggerClick() {
+        if (this.disabled() || this.readonly()) {
             return;
         }
-        // When the list extends past the overlay pane or screen, shrink it to the visible area.
-        if (overflow > 1) {
-            nextHeight = Math.max(itemPx, nextHeight - overflow);
-        }
-        // Keep height as whole rows so the last item is never permanently cropped.
-        nextHeight = Math.max(itemPx, Math.floor(nextHeight / itemPx) * itemPx);
-        const current = parseFloat(this._dropdownHeight());
-        if (!Number.isFinite(current) || nextHeight !== current) {
-            this._dropdownHeight.set(`${nextHeight}px`);
-        }
-    }
-    updateDropdownPosition() {
-        setTimeout(() => {
-            this.dropdown.updatePosition();
-        });
-    }
-    updateDropdownSize() {
-        setTimeout(() => {
-            this.setDropdownSize(this._listDataSource.totalCount);
-            this.updateDropdownPosition();
-            this.list?.render();
-            if (!this.isItemTruncated()) {
-                setTimeout(() => {
-                    this._fitDropdownToContent();
-                    setTimeout(() => this._fitDropdownToContent(), 100);
-                });
-            }
-        });
-    }
-    _fitDropdownToContent() {
-        const panel = this.panel?.nativeElement;
-        if (!panel)
+        if (this.editable()) {
+            this.expanded.set(true);
             return;
-        const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()) || 0);
-        let contentWidth = hostWidth;
-        panel.querySelectorAll('li.list-item').forEach((item) => {
-            const label = item.querySelector('.ax-label-container span');
-            if (label) {
-                const labelContainer = label.parentElement;
-                const horizontalPadding = labelContainer ? item.offsetWidth - labelContainer.clientWidth : 0;
-                contentWidth = Math.max(contentWidth, label.scrollWidth + horizontalPadding);
-            }
-            else {
-                contentWidth = Math.max(contentWidth, item.scrollWidth);
-            }
-        });
-        const nextWidth = `${Math.max(hostWidth, contentWidth)}px`;
-        if (this._dropdownWidth() !== nextWidth) {
-            this._dropdownWidth.set(nextWidth);
-            this.dropdown.updatePosition();
-        }
-    }
-    internalValueChanged(value) {
-        super.internalValueChanged(value);
-        this.updateDropdownPosition();
-        // Try to fetch item data when value changes
-        setTimeout(() => this.fetchItemDataIfNeeded(), 0);
-    }
-    /** @ignore */
-    _handleKeydown(e) {
-        if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {
-            this.selectItemByNav(e.code === 'ArrowDown' ? 1 : -1);
-            e.preventDefault();
-        }
-        else if (e.code === 'Backspace') {
-            this.unselectItems(this.selectedItems.pop());
-            e.preventDefault();
-        }
-    }
-    /** @ignore */
-    selectItemByNav(sign) {
-        if (Array.isArray(this.dataSource) && !this.multiple) {
-            const items = this.normalizeItemsList(this.dataSource);
-            const _last = last(this.selectedItems);
-            let i = -1;
-            if (_last) {
-                i = findLastIndex(items, [this.valueField, get(_last, this.valueField)]);
-            }
-            i += sign;
-            if (i < 0 || i >= items.length)
-                return;
-            const next = nth(items, i);
-            if (next) {
-                this.selectItems(next);
-            }
-        }
-        else {
-            this.open();
         }
+        this.expanded.update((open) => !open);
     }
     /**
-     * Filters the data source based on the provided search term.
-     * @param {string} term
+     * Keeps the combobox expanded state in sync when the popover closes (e.g. click outside).
      */
-    search(term) {
-        this.searchValue.set(term);
-        if (term) {
-            this._listDataSource.filter({
-                field: this.textField,
-                value: term,
-                operator: { type: 'contains' },
-            });
-        }
-        else {
-            this._listDataSource.clearFilter();
-        }
-        this._listDataSource.refresh();
+    onPopoverClosed() {
+        this.expanded.set(false);
     }
     /**
-     * Refreshes the component by resetting state, clearing selection cache, refreshing the list, and closing the component.
+     * Commits the current listbox selection as the component value and closes the popup.
      */
-    refresh() {
-        this.reset(false);
-        this.clearSelectionCache();
-        this.list?.refresh();
-        this.close();
-    }
-    hostClickListener() {
-        this.toggle();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxComponent, deps: null, 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: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "minValue", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, textTemplate: { classPropertyName: "textTemplate", publicName: "textTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: false, isRequired: false, transformFunction: null }, isItemTruncated: { classPropertyName: "isItemTruncated", publicName: "isItemTruncated", isSignal: true, isRequired: false, transformFunction: null }, showItemTooltip: { classPropertyName: "showItemTooltip", publicName: "showItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, minRecordsForSearch: { classPropertyName: "minRecordsForSearch", publicName: "minRecordsForSearch", isSignal: false, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", isSignal: false, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: false, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: false, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, searchBoxAutoFocus: { classPropertyName: "searchBoxAutoFocus", publicName: "searchBoxAutoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onOpened: "onOpened", onClosed: "onClosed", onItemSelected: "onItemSelected", onItemClick: "onItemClick" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "keydown": "_handleKeydown($event)", "click": "hostClickListener()" } }, providers: [
-            { provide: AXComponent, useExisting: AXComboBoxComponent },
-            { provide: AXFocusableComponent, useExisting: AXComboBoxComponent },
-            { provide: AXValuableComponent, useExisting: AXComboBoxComponent },
-            { provide: AXClearableComponent, useExisting: AXComboBoxComponent },
-            { provide: AXClosableComponent, useExisting: AXComboBoxComponent },
-            { provide: AXSearchableComponent, useExisting: AXComboBoxComponent },
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => AXComboBoxComponent),
-                multi: true,
-            },
-            {
-                provide: AX_SELECTION_DATA_TOKEN,
-                useClass: MXSelectionBridgeService,
-            },
-            AXUnsubscriber,
-        ], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "list", first: true, predicate: AXListComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  [disabled]=\"disabled\"\n  [look]=\"look\"\n  [popoverWidth]=\"dropdownWidth()\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-editor ax-chips-container ax-content ax-input\"\n      [class.ax-state-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n    >\n      @if (selectedItems.length === 0) {\n        <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n          {{ placeholder | translate | async }}\n        </div>\n      }\n      @for (item of selectedItems; track $index) {\n        @if (selectedTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"selectedTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n          ></ng-template>\n        } @else {\n          @if (multiple) {\n            <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n              @if (!disabled && !readonly && multiple) {\n                <ax-suffix>\n                  <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n                </ax-suffix>\n              }\n            </ax-tag>\n          } @else {\n            {{ getDisplayText(item) | translate | async }}\n          }\n        }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button-icon\">\n      @if (isLoading()) {\n        <ax-loading-spinner [size]=\"16\" [stroke]=\"1\"></ax-loading-spinner>\n      } @else {\n        <span\n          class=\"ax-icon\"\n          [ngClass]=\"{\n            'ax-icon-chevron-down': !isOpen,\n            'ax-icon-chevron-up': isOpen,\n          }\"\n        ></span>\n      }\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div\n      #panel\n      class=\"ax-combo-box-panel\"\n      [class.ax-no-truncate]=\"!isItemTruncated()\"\n      [style.min-width]=\"_dropdownWidth()\"\n    >\n      @if (dropdown.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      @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n      @if (renderList()) {\n        <ax-list\n          [name]=\"name\"\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [itemHeight]=\"itemHeight()\"\n          [itemTemplate]=\"itemTemplate\"\n          [textTemplate]=\"textTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [style.height]=\"_dropdownHeight()\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [isItemTruncated]=\"isItemTruncated()\"\n          [showItemTooltip]=\"showItemTooltip()\"\n          (onItemClick)=\"_handleItemClick($event)\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n        </ax-list>\n        <ng-template #empty>\n          {{ '@acorex:common.general.no-result-found' | translate | async }}\n        </ng-template>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box .ax-editor-container{padding-block:calc(var(--spacing, .25rem) * 0)}ax-combo-box .ax-editor-container.ax-state-multiple{padding-inline:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-combo-box .ax-editor-container .ax-input,ax-combo-box .ax-editor-container .ax-editor{padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box ax-dropdown-box.ax-state-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);--ax-comp-editor-space-start-size: 0}ax-combo-box .ax-chips-container{display:flex;min-height:var(--ax-sys-size-base);min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:pointer!important;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--ax-comp-combo-box-chips-gap,.25rem);outline-style:var(--tw-outline-style);outline-width:0px;outline-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-chips-container .ax-selectbox-input{width:calc(var(--spacing, .25rem) * 0);opacity:0%}ax-combo-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-combo-box-chips-container-padding, .25rem)}ax-combo-box .ax-chips-container ax-tag ax-prefix,ax-combo-box .ax-chips-container ax-tag ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}.ax-combo-box-panel{display:flex;height:fit-content;max-height:100%;flex-direction:column;overflow:hidden}.ax-combo-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-combo-box-panel .ax-combo-box-loading-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}.ax-combo-box-panel ax-list{min-height:calc(var(--spacing, .25rem) * 0);flex:1 1 auto}.ax-combo-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-panel>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-panel>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)}@media(max-width:40rem){.ax-combo-box-panel .list-item{padding-inline:1rem}}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-outline-style: solid;--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: 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: "component", type: AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: AXListComponent, selector: "ax-list", inputs: ["id", "name", "disabled", "readonly", "valueField", "textField", "textTemplate", "disabledField", "multiple", "selectionMode", "isItemTruncated", "showItemTooltip", "dataSource", "itemHeight", "itemTemplate", "emptyTemplate", "loadingTemplate", "checkbox"], outputs: ["onValueChanged", "disabledChange", "readonlyChange", "onBlur", "onFocus", "onItemClick", "onItemSelected", "onScrolledIndexChanged"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTagComponent, selector: "ax-tag", inputs: ["color", "look", "text"], outputs: ["onClick", "onDblClick", "onContextMenu"] }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    commit() {
+        const selectedId = this.selection()[0];
+        const item = selectedId != null ? this.items().find((i) => i.id === selectedId) : undefined;
+        if (item != null && item.value !== this.value()) {
+            this.#isUserInteraction = true;
+            this.value.set(item.value);
+        }
+        this.expanded.set(false);
+        this.comboboxRef()?.element.focus();
+    }
+    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 }, editable: { classPropertyName: "editable", publicName: "editable", 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]=\"!editable()\"\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]=\"!editable()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || !editable()\"\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-prefix,ax-combo-box .ax-editor-container ax-suffix{display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 0);align-self:center;padding:calc(var(--spacing, .25rem) * 0);padding-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-combo-box .ax-editor-container ax-prefix,ax-combo-box .ax-editor-container ax-suffix)>ax-icon,:is(ax-combo-box .ax-editor-container ax-prefix,ax-combo-box .ax-editor-container ax-suffix)>ax-text{display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}:is(ax-combo-box .ax-editor-container ax-prefix,ax-combo-box .ax-editor-container ax-suffix)>ax-icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}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-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-combo-box', inputs: [
-                        'disabled',
-                        'readonly',
-                        'tabIndex',
-                        'placeholder',
-                        'minValue',
-                        'maxValue',
-                        'value',
-                        'state',
-                        'name',
-                        'id',
-                        'type',
-                        'look',
-                        'multiple',
-                        'valueField',
-                        'textField',
-                        'disabledField',
-                        'textTemplate',
-                        'selectedItems',
-                    ], outputs: [
-                        'valueChange',
-                        'stateChange',
-                        'onValueChanged',
-                        'onBlur',
-                        'onFocus',
-                        'readonlyChange',
-                        'disabledChange',
-                        'onOpened',
-                        'onClosed',
-                        'onItemSelected',
-                        'onItemClick',
-                    ], encapsulation: ViewEncapsulation.None, providers: [
-                        { provide: AXComponent, useExisting: AXComboBoxComponent },
-                        { provide: AXFocusableComponent, useExisting: AXComboBoxComponent },
-                        { provide: AXValuableComponent, useExisting: AXComboBoxComponent },
-                        { provide: AXClearableComponent, useExisting: AXComboBoxComponent },
-                        { provide: AXClosableComponent, useExisting: AXComboBoxComponent },
-                        { provide: AXSearchableComponent, useExisting: AXComboBoxComponent },
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AXComboBoxComponent),
-                            multi: true,
-                        },
-                        {
-                            provide: AX_SELECTION_DATA_TOKEN,
-                            useClass: MXSelectionBridgeService,
-                        },
-                        AXUnsubscriber,
-                    ], host: { ngSkipHydration: 'true' }, imports: [
-                        AXDropdownBoxComponent,
-                        NgTemplateOutlet,
-                        NgClass,
-                        AXDecoratorGenericComponent,
-                        AXDecoratorCloseButtonComponent,
-                        AXListComponent,
-                        FormsModule,
-                        AsyncPipe,
-                        AXTranslatorPipe,
-                        AXTagComponent,
-                        AXLoadingSpinnerComponent,
-                    ], template: "<ax-dropdown-box\n  [class.ax-state-multiple]=\"multiple\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n  (focus)=\"emitOnFocusEvent($event)\"\n  (blur)=\"emitOnBlurEvent($event)\"\n  [disabled]=\"disabled\"\n  [look]=\"look\"\n  [popoverWidth]=\"dropdownWidth()\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div\n      class=\"ax-editor ax-chips-container ax-content ax-input\"\n      [class.ax-state-multiple]=\"multiple\"\n      [tabindex]=\"tabIndex\"\n    >\n      @if (selectedItems.length === 0) {\n        <div class=\"ax-placeholder\" role=\"textbox\" area-readonly=\"true\">\n          {{ placeholder | translate | async }}\n        </div>\n      }\n      @for (item of selectedItems; track $index) {\n        @if (selectedTemplate) {\n          <ng-template\n            [ngTemplateOutlet]=\"selectedTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n          ></ng-template>\n        } @else {\n          @if (multiple) {\n            <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n              @if (!disabled && !readonly && multiple) {\n                <ax-suffix>\n                  <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n                </ax-suffix>\n              }\n            </ax-tag>\n          } @else {\n            {{ getDisplayText(item) | translate | async }}\n          }\n        }\n      }\n    </div>\n    @if (selectedItems?.length && !disabled && !readonly) {\n      <ng-content select=\"ax-clear-button\"></ng-content>\n    }\n    <button type=\"button\" [disabled]=\"disabled\" [tabIndex]=\"-1\" class=\"ax-general-button-icon\">\n      @if (isLoading()) {\n        <ax-loading-spinner [size]=\"16\" [stroke]=\"1\"></ax-loading-spinner>\n      } @else {\n        <span\n          class=\"ax-icon\"\n          [ngClass]=\"{\n            'ax-icon-chevron-down': !isOpen,\n            'ax-icon-chevron-up': isOpen,\n          }\"\n        ></span>\n      }\n    </button>\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-template #search>\n      <ng-content select=\"ax-search-box\"> </ng-content>\n    </ng-template>\n  </ng-container>\n  <ng-container panel>\n    <div\n      #panel\n      class=\"ax-combo-box-panel\"\n      [class.ax-no-truncate]=\"!isItemTruncated()\"\n      [style.min-width]=\"_dropdownWidth()\"\n    >\n      @if (dropdown.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      @if (searchBox && (!minRecordsForSearch || _listDataSource.totalCount >= minRecordsForSearch || searchValue())) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n      @if (renderList()) {\n        <ax-list\n          [name]=\"name\"\n          [ngModel]=\"value\"\n          [readonly]=\"readonly\"\n          [multiple]=\"multiple\"\n          [textField]=\"textField\"\n          [selectionMode]=\"'item'\"\n          [valueField]=\"valueField\"\n          [itemHeight]=\"itemHeight()\"\n          [itemTemplate]=\"itemTemplate\"\n          [textTemplate]=\"textTemplate\"\n          [dataSource]=\"_listDataSource\"\n          [style.height]=\"_dropdownHeight()\"\n          [loadingTemplate]=\"loadingTemplate\"\n          [isItemTruncated]=\"isItemTruncated()\"\n          [showItemTooltip]=\"showItemTooltip()\"\n          (onItemClick)=\"_handleItemClick($event)\"\n          [emptyTemplate]=\"emptyTemplate ?? empty\"\n          (onValueChanged)=\"_handleValueChanged($event)\"\n          (onItemSelected)=\"_handleItemSelected($event)\"\n        >\n        </ax-list>\n        <ng-template #empty>\n          {{ '@acorex:common.general.no-result-found' | translate | async }}\n        </ng-template>\n      }\n\n      @if (isLoading()) {\n        @if (loadingTemplate) {\n          <ng-template [ngTemplateOutlet]=\"loadingTemplate\"></ng-template>\n        }\n      }\n\n      <ng-content select=\"ax-footer\"> </ng-content>\n    </div>\n  </ng-container>\n</ax-dropdown-box>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: ["@layer properties;@layer components{ax-combo-box .ax-editor-container{padding-block:calc(var(--spacing, .25rem) * 0)}ax-combo-box .ax-editor-container.ax-state-multiple{padding-inline:calc(var(--spacing, .25rem) * 1)}ax-combo-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-combo-box .ax-editor-container .ax-input,ax-combo-box .ax-editor-container .ax-editor{padding-block:calc(var(--spacing, .25rem) * 1)}ax-combo-box ax-dropdown-box.ax-state-multiple{height:auto!important;min-height:var(--ax-comp-editor-height);--ax-comp-editor-space-start-size: 0}ax-combo-box .ax-chips-container{display:flex;min-height:var(--ax-sys-size-base);min-width:calc(var(--spacing, .25rem) * 0);flex:1;cursor:pointer!important;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--ax-comp-combo-box-chips-gap,.25rem);outline-style:var(--tw-outline-style);outline-width:0px;outline-color:transparent;-webkit-user-select:none;user-select:none}ax-combo-box .ax-chips-container .ax-selectbox-input{width:calc(var(--spacing, .25rem) * 0);opacity:0%}ax-combo-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-combo-box-chips-container-padding, .25rem)}ax-combo-box .ax-chips-container ax-tag ax-prefix,ax-combo-box .ax-chips-container ax-tag ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}.ax-combo-box-panel{display:flex;height:fit-content;max-height:100%;flex-direction:column;overflow:hidden}.ax-combo-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-combo-box-panel .ax-combo-box-loading-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}.ax-combo-box-panel ax-list{min-height:calc(var(--spacing, .25rem) * 0);flex:1 1 auto}.ax-combo-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-combo-box-panel>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-panel>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)}@media(max-width:40rem){.ax-combo-box-panel .list-item{padding-inline:1rem}}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-outline-style: solid;--tw-border-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { isItemTruncated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isItemTruncated", required: false }] }], showItemTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemTooltip", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], dataSource: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], minRecordsForSearch: [{
-                type: Input
-            }], caption: [{
-                type: Input
-            }], itemTemplate: [{
-                type: Input
-            }], selectedTemplate: [{
-                type: Input
-            }], emptyTemplate: [{
-                type: Input
-            }], loadingTemplate: [{
-                type: Input
-            }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], panel: [{
-                type: ViewChild,
-                args: ['panel']
-            }], list: [{
-                type: ViewChild,
-                args: [AXListComponent]
-            }], searchBox: [{
-                type: ContentChild,
-                args: [AXSearchBoxComponent]
-            }], searchBoxAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBoxAutoFocus", required: false }] }], dropdown: [{
-                type: ViewChild,
-                args: [AXDropdownBoxComponent, { static: true }]
-            }], _handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], hostClickListener: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+            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]=\"!editable()\"\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]=\"!editable()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || !editable()\"\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-prefix,ax-combo-box .ax-editor-container ax-suffix{display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 0);align-self:center;padding:calc(var(--spacing, .25rem) * 0);padding-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-combo-box .ax-editor-container ax-prefix,ax-combo-box .ax-editor-container ax-suffix)>ax-icon,:is(ax-combo-box .ax-editor-container ax-prefix,ax-combo-box .ax-editor-container ax-suffix)>ax-text{display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}:is(ax-combo-box .ax-editor-container ax-prefix,ax-combo-box .ax-editor-container ax-suffix)>ax-icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}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-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--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 }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", 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 }] }] } });
 
 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: [CommonModule,
-            AXCommonModule,
-            FormsModule,
-            AXCheckBoxModule,
-            AXBadgeModule,
-            AXDecoratorModule,
-            AXTranslationModule,
-            AXPopoverModule,
-            AXLoadingModule,
-            A11yModule,
-            AXTextBoxModule,
-            AXDropdownModule,
-            AXListModule,
-            AXComboBoxComponent], exports: [AXComboBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, imports: [CommonModule,
-            AXCommonModule,
-            FormsModule,
-            AXCheckBoxModule,
-            AXBadgeModule,
-            AXDecoratorModule,
-            AXTranslationModule,
-            AXPopoverModule,
-            AXLoadingModule,
-            A11yModule,
-            AXTextBoxModule,
-            AXDropdownModule,
-            AXListModule,
-            AXComboBoxComponent] }); }
+    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] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXComboBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        AXCommonModule,
-                        FormsModule,
-                        AXCheckBoxModule,
-                        AXBadgeModule,
-                        AXDecoratorModule,
-                        AXTranslationModule,
-                        AXPopoverModule,
-                        AXLoadingModule,
-                        A11yModule,
-                        AXTextBoxModule,
-                        AXDropdownModule,
-                        AXListModule,
-                        AXComboBoxComponent,
-                    ],
+                    imports: [AXComboBoxComponent],
                     exports: [AXComboBoxComponent],
-                    providers: [],
                 }]
         }] });