@acorex/components 22.0.0-next.21 → 22.0.0-next.22

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

@@ -1,53 +1,58 @@
-import { MXSelectionValueComponent, MXLookComponent, AXHotkeysService, AX_SELECTION_DATA_TOKEN, AXComponent, AXFocusableComponent, AXValuableComponent, AXClearableComponent, AXClosableComponent, AXSearchableComponent, MXSelectionBridgeService, AXCommonModule } from '@acorex/cdk/common';
+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 { AXSelectionListComponent, AXSelectionListModule } from '@acorex/components/selection-list';
 import { AXTagComponent } from '@acorex/components/tag';
 import { AXTranslatorPipe, AXTranslationModule } from '@acorex/core/translation';
 import { AXUnsubscriber } from '@acorex/core/utils';
-import { NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
+import { NgTemplateOutlet, NgClass, AsyncPipe, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, inject, viewChild, contentChild, effect, untracked, afterNextRender, forwardRef, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { input, inject, ElementRef, 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 { AXLoadingModule } from '@acorex/components/loading';
 import { AXPopoverModule } from '@acorex/components/popover';
 import { A11yModule } from '@angular/cdk/a11y';
 import { AXTextBoxModule } from '@acorex/components/text-box';
 
 /**
- * Simple dropdown select for a static items array.
- * For AXDataSource / lazy-load support, use ComboBox.
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ * @category
  */
 class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelectionValueComponent, MXLookComponent) {
     constructor() {
         super(...arguments);
-        /** Static items shown in the dropdown. */
-        this.items = input([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-        this.placeholder = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this.minRecordsForSearch = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "minRecordsForSearch" }] : /* istanbul ignore next */ []));
-        this.caption = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "caption" }] : /* istanbul ignore next */ []));
-        this.itemTemplate = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
-        this.selectedTemplate = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "selectedTemplate" }] : /* istanbul ignore next */ []));
-        this.emptyTemplate = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Determines if an item is truncated.
+         *
+         * @defaultValue true
+         */
+        this.isItemTruncated = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isItemTruncated" }] : /* istanbul ignore next */ []));
+        /**
+         * Determines if a tooltip is shown for an item.
+         *
+         * @defaultValue false
+         */
+        this.showItemTooltip = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : /* istanbul ignore next */ []));
+        this.host = inject(ElementRef);
+        /** 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 */ []));
-        this.dropdownWidth = input(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
-        this.searchBoxAutoFocus = input(true, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "searchBoxAutoFocus" }] : /* 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 */ []));
@@ -55,211 +60,441 @@ class AXSelectBoxComponent extends classes(MXDropdownBoxBaseComponent, MXSelecti
         this.renderList = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "renderList" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this._dropdownWidth = signal('auto', /* @ts-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.visibleItems = signal([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []));
-        this.hotKeyService = inject(AXHotkeysService);
-        this._unsubscriber = inject(AXUnsubscriber);
-        this.selectionService = inject(AX_SELECTION_DATA_TOKEN);
-        this.panel = viewChild('panel', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
-        this.selectionList = viewChild(AXSelectionListComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "selectionList" }] : /* istanbul ignore next */ []));
-        this.searchBox = contentChild(AXSearchBoxComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "searchBox" }] : /* istanbul ignore next */ []));
-        this.dropdownRef = viewChild.required(AXDropdownBoxComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "dropdownRef" }] : /* istanbul ignore next */ []));
-        this.#prevItems = [];
-        this.#itemsEffect = effect(() => {
-            const next = this.items() ?? [];
-            if (isEqual(next, this.#prevItems)) {
-                return;
-            }
-            this.#prevItems = next;
-            this.#applyFilter(untracked(() => this.searchValue()));
-            untracked(() => this.forceRefreshSelectedItems());
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#itemsEffect" }] : /* istanbul ignore next */ []));
-        this.#floatLabel = afterNextRender(() => {
+        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');
             }
         });
+        /**
+         * The width of the dropdown in pixels.
+         * @defaultValue null
+         */
+        this.dropdownWidth = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropdownWidth" }] : /* istanbul ignore next */ []));
+        this.searchBoxAutoFocus = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchBoxAutoFocus" }] : /* istanbul ignore next */ []));
+        /**
+         * Service for managing selection data, injected via `AX_SELECTION_DATA_TOKEN`.
+         */
+        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;
     }
-    /** Required by MXDropdownBoxBaseComponent. */
-    get dropdown() {
-        return this.dropdownRef();
+    /**
+     * 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();
+        });
+        //
+        this.onLoadingChangedSubscription?.unsubscribe();
+        this.onLoadingChangedSubscription = this._listDataSource.onLoadingChanged
+            .pipe(this._unsubscriber.takeUntilDestroy)
+            .subscribe((loading) => {
+            this.isLoading.set(loading);
+        });
+        // After setting data source, try to fetch item data if needed
+        setTimeout(() => this.fetchItemDataIfNeeded(), 0);
     }
-    #prevItems;
-    #itemsEffect;
-    #floatLabel;
+    /** @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();
+                }
+            }
+            catch (error) {
+                console.warn('Failed to fetch item data:', error);
+            }
+        }
     }
+    /** @ignore */
     ngOnDestroy() {
-        this.searchBox()?.onKeyDown.unsubscribe();
+        this.searchBox?.onKeyDown.unsubscribe();
+        this.onChangedSubscription?.unsubscribe();
+        this.onLoadingChangedSubscription?.unsubscribe();
     }
-    /** Finds an item by value key in the full items array. */
+    /**
+     * Retrieves an item by its key.
+     * @param {any} key
+     */
     getItemByKey(key) {
-        for (const candidate of this.items()) {
-            if (candidate != null && typeof candidate === 'object') {
-                if (get(candidate, this.valueField) == key || get(candidate, this.textField) == key) {
-                    return candidate;
+        // 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;
+                    }
+                }
+                else if (candidate == key) {
+                    return { [this.valueField]: candidate, [this.textField]: String(candidate ?? '') };
                 }
             }
-            else if (candidate == key) {
-                return { [this.valueField]: candidate, [this.textField]: String(candidate ?? '') };
-            }
+            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;
     }
-    /** Filters visible items by textField contains. */
-    search(term) {
-        this.#applyFilter(term ?? '');
-        this.#syncDropdownSize();
-    }
-    /** Resets selection and closes the dropdown. */
-    refresh() {
-        this.reset(false);
-        this.clearSelectionCache();
-        this.#applyFilter('');
-        this.close();
-    }
-    internalValueChanged(value) {
-        super.internalValueChanged(value);
-        this.dropdown?.updatePosition();
-    }
     /** @ignore */
     _handleOnOpenedEvent(e) {
-        this.renderList.set(true);
-        this.#focusPanel();
-        this.onOpened.emit({ component: this, isUserInteraction: e.isUserInteraction });
-        this.#syncDropdownSize();
+        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();
     }
     /** @ignore */
     _handleOnClosedEvent(e) {
-        this.onClosed.emit({ component: this, isUserInteraction: e.isUserInteraction });
+        this.onClosed.emit({
+            component: this,
+            isUserInteraction: e.isUserInteraction,
+        });
         this._unsubscriber.unsubscribe();
     }
     /** @ignore */
+    _handleFocus() {
+        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();
+            }
+        });
+    }
+    /** @ignore */
     _handleBadgeRemove(e, item) {
         this.unselectItems(item);
         e.stopPropagation();
     }
     /** @ignore */
     _handleValueChanged(e) {
-        if (!e.isUserInteraction)
-            return;
-        if (!this.multiple)
-            this.close();
-        this.commitValue(e.component.selectedItems, true);
-        const searchBox = this.searchBox();
-        if (searchBox?.value)
-            searchBox.commitValue('', false);
+        if (e.isUserInteraction) {
+            if (!this.multiple) {
+                this.close();
+            }
+            this.commitValue(e.component.selectedItems, true);
+        }
     }
     /** @ignore */
-    _handleKeydown(e) {
-        if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {
-            this.#selectByNav(e.code === 'ArrowDown' ? 1 : -1);
-            e.preventDefault();
+    _handleItemClick(e) {
+        this.onItemClick.emit(e);
+        if (!this.multiple) {
+            this.close();
         }
-        else if (e.code === 'Backspace') {
-            this.unselectItems(this.selectedItems.pop());
-            e.preventDefault();
+    }
+    /** @ignore */
+    _handleItemSelected(e) {
+        this.onItemSelected.emit(e);
+        this.resetSearchAfterSelection();
+        if (!this.multiple) {
+            this.close();
         }
     }
-    #applyFilter(term) {
-        this.searchValue.set(term);
-        const source = this.items() ?? [];
-        if (!term) {
-            this.visibleItems.set(source);
+    resetSearchAfterSelection() {
+        if (!this.searchBox && !this.searchBox?.value)
             return;
-        }
-        const upper = term.toUpperCase();
-        this.visibleItems.set(source.filter((item) => {
-            const text = item != null && typeof item === 'object' ? String(get(item, this.textField) ?? '') : String(item ?? '');
-            return text.toUpperCase().includes(upper);
-        }));
+        if (this.searchBox && this.searchBox?.value)
+            this.searchBox.commitValue('', false);
     }
-    #focusPanel() {
+    /** @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(() => {
-            const searchBox = this.searchBox();
-            const selectionList = this.selectionList();
-            const panel = this.panel();
-            if (!searchBox) {
-                selectionList?.focus();
-                return;
-            }
-            searchBox.look = 'flat';
-            if (this.searchBoxAutoFocus())
-                searchBox.focus();
-            if (panel) {
-                this.hotKeyService
-                    .addShortcut({ keys: 'Control.f', element: panel.nativeElement })
-                    .pipe(this._unsubscriber.takeUntilDestroy)
-                    .subscribe(() => searchBox.focus());
-            }
-            searchBox.onKeyDown.pipe(this._unsubscriber.takeUntilDestroy).subscribe((e) => {
-                if (e.nativeEvent.code === 'ArrowDown' || e.nativeEvent.key === 'ArrowDown') {
-                    selectionList?.focus();
-                    e.nativeEvent.preventDefault();
-                }
+            this._fitListHeightToAvailableSpace(itemPx);
+            this.dropdown.updatePosition();
+            this.list?.render();
+            // Second pass after the overlay pane applies max-height / overflow constraints.
+            requestAnimationFrame(() => {
+                setTimeout(() => {
+                    this._fitListHeightToAvailableSpace(itemPx);
+                    this.list?.render();
+                }, 0);
             });
         });
     }
-    #selectByNav(sign) {
-        const source = this.items() ?? [];
-        if (this.multiple || !source.length) {
-            this.open();
+    /**
+     * 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
+     */
+    _fitListHeightToAvailableSpace(itemPx) {
+        if (itemPx <= 0 || this._dropdownHeight() === 'auto') {
             return;
         }
-        const items = this.normalizeItemsList(source);
-        const selected = last(this.selectedItems);
-        let index = selected ? findLastIndex(items, [this.valueField, get(selected, this.valueField)]) : -1;
-        index += sign;
-        if (index < 0 || index >= items.length)
+        const panel = this.panel?.nativeElement;
+        const listEl = this.list?.getHostElement?.();
+        if (!panel || !listEl) {
             return;
-        const next = nth(items, index);
-        if (next)
-            this.selectItems(next);
+        }
+        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) {
+            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`);
+        }
     }
-    #syncDropdownSize() {
+    updateDropdownPosition() {
         setTimeout(() => {
-            const count = this.visibleItems().length;
-            const maxItems = Math.max(Number(this.maxVisibleItems()) || 5, 1);
-            // Approximate row height of ax-selection-list items (padding + text).
-            const rowHeightPx = 40;
-            if (this.dropdown.isActionsheetStyle) {
-                this._dropdownWidth.set('100%');
+            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)
+            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 {
-                const hostWidth = Math.max(this.getHostElement().offsetWidth, Number(this.dropdownWidth()) || 0);
-                this._dropdownWidth.set(`${hostWidth}px`);
+                contentWidth = Math.max(contentWidth, item.scrollWidth);
             }
-            this._dropdownHeight.set(count === 0 ? 'auto' : `${Math.min(maxItems, count) * rowHeightPx}px`);
-            this.dropdown.updatePosition();
         });
+        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();
+        }
+        // if ((e.code === 'Space' || e.code === 'Enter') && this.hasItems) {
+        //     if (this.readonly || this.disabled) {
+        //         e.preventDefault();
+        //         e.stopPropagation();
+        //         return;
+        //     }
+        //     const id = document.activeElement?.closest('li')?.dataset?.id;
+        //     this.toggleSelect(id);
+        //     e.preventDefault();
+        //     e.stopPropagation()
+        // }
+    }
+    /** @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();
+        }
+    }
+    /**
+     * Filters the data source based on the provided search term.
+     * @param {string} term
+     */
+    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();
+    }
+    /**
+     * Refreshes the component by resetting state, clearing selection cache, refreshing the list, and closing the component.
+     */
+    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: AXSelectBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXSelectBoxComponent, isStandalone: true, selector: "ax-select-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 }, 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 }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, minRecordsForSearch: { classPropertyName: "minRecordsForSearch", publicName: "minRecordsForSearch", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", 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 }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, 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: { "click": "toggle()", "keydown": "_handleKeydown($event)" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXSelectBoxComponent, isStandalone: true, selector: "ax-select-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: AXSelectBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXSelectBoxComponent },
             { provide: AXValuableComponent, useExisting: AXSelectBoxComponent },
             { provide: AXClearableComponent, useExisting: AXSelectBoxComponent },
             { provide: AXClosableComponent, useExisting: AXSelectBoxComponent },
             { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AXSelectBoxComponent), multi: true },
-            { provide: AX_SELECTION_DATA_TOKEN, useClass: MXSelectionBridgeService },
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AXSelectBoxComponent),
+                multi: true,
+            },
+            {
+                provide: AX_SELECTION_DATA_TOKEN,
+                useClass: MXSelectionBridgeService,
+            },
             AXUnsubscriber,
-        ], queries: [{ propertyName: "searchBox", first: true, predicate: AXSearchBoxComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "selectionList", first: true, predicate: AXSelectionListComponent, descendants: true, isSignal: true }, { propertyName: "dropdownRef", first: true, predicate: AXDropdownBoxComponent, descendants: true, isSignal: 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(); as selectedTpl) {\n          <ng-template\n            [ngTemplateOutlet]=\"selectedTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n          ></ng-template>\n        } @else if (multiple) {\n          <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n            @if (!disabled && !readonly) {\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    </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      <span class=\"ax-icon\" [class.ax-icon-chevron-down]=\"!isOpen\" [class.ax-icon-chevron-up]=\"isOpen\"></span>\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\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"_dropdownWidth()\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>\n            {{ caption() || placeholder() || '@acorex:selectbox.popover.title' | translate | async }}\n          </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\n      @if (\n        searchBox() && (!minRecordsForSearch() || visibleItems().length >= minRecordsForSearch()! || searchValue())\n      ) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n\n      @if (renderList()) {\n        @if (visibleItems().length) {\n          <div class=\"ax-select-box-list\" [style.max-height]=\"_dropdownHeight()\">\n            <ax-selection-list\n              [name]=\"name\"\n              [ngModel]=\"value\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n              [multiple]=\"multiple\"\n              [textField]=\"textField\"\n              [valueField]=\"valueField\"\n              [disabledField]=\"disabledField\"\n              [items]=\"visibleItems()\"\n              [showControl]=\"true\"\n              [customTemplate]=\"itemTemplate()\"\n              direction=\"vertical\"\n              look=\"solid\"\n              (onValueChanged)=\"_handleValueChanged($event)\"\n            ></ax-selection-list>\n          </div>\n        } @else {\n          <div class=\"ax-select-box-empty\">\n            @if (emptyTemplate(); as emptyTpl) {\n              <ng-template [ngTemplateOutlet]=\"emptyTpl\"></ng-template>\n            } @else {\n              {{ '@acorex:common.general.no-result-found' | translate | async }}\n            }\n          </div>\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-select-box .ax-editor-container{padding-block:calc(var(--spacing, .25rem) * 0)}ax-select-box .ax-editor-container.ax-state-multiple{padding-inline:calc(var(--spacing, .25rem) * 1)}ax-select-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-select-box .ax-editor-container .ax-input,ax-select-box .ax-editor-container .ax-editor{padding-block:calc(var(--spacing, .25rem) * 1)}ax-select-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-select-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-select-box-chips-gap,.25rem);outline-style:var(--tw-outline-style);outline-width:0px;outline-color:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-select-box-chips-container-padding, .25rem)}ax-select-box .ax-chips-container ax-tag ax-prefix,ax-select-box .ax-chips-container ax-tag ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}.ax-select-box-panel{display:flex;height:fit-content;max-height:100%;flex-direction:column;overflow:hidden}.ax-select-box-panel .ax-select-box-list{min-height:calc(var(--spacing, .25rem) * 0);overflow:auto}.ax-select-box-panel .ax-select-box-empty{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 4);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-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-select-box-panel .ax-select-box-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lightest-surface)) 75%,transparent)}}.ax-select-box-panel ax-selection-list{display:block;width:100%}.ax-select-box-panel ax-selection-list ul.ax-vertical{flex-wrap:nowrap}.ax-select-box-panel ax-selection-list li.ax-state-selected>label{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}.ax-select-box-panel ax-selection-list li.ax-state-selected>label: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-select-box-panel ax-selection-list li.ax-state-selected>label: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-select-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-select-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-select-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)}}@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: "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: AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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            <!-- <div class=\"bg-surface border-surface flex items-center justify-center gap-2 rounded-full border px-2 py-1\">\n              <ax-text>{{ getDisplayText(item) | translate | async }}</ax-text>\n              @if (!disabled && !readonly && multiple) {\n                <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n              }\n            </div> -->\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-select-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-select-box .ax-editor-container{padding-block:calc(var(--spacing, .25rem) * 0)}ax-select-box .ax-editor-container.ax-state-multiple{padding-inline:calc(var(--spacing, .25rem) * 1)}ax-select-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-select-box .ax-editor-container .ax-input,ax-select-box .ax-editor-container .ax-editor{padding-block:calc(var(--spacing, .25rem) * 1)}ax-select-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-select-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-select-box-chips-gap,.25rem);outline-style:var(--tw-outline-style);outline-width:0px;outline-color:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-chips-container .ax-selectbox-input{width:calc(var(--spacing, .25rem) * 0);opacity:0%}ax-select-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-select-box-chips-container-padding, .25rem)}ax-select-box .ax-chips-container ax-tag ax-prefix,ax-select-box .ax-chips-container ax-tag ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}.ax-select-box-panel{display:flex;height:fit-content;max-height:100%;flex-direction:column;overflow:hidden}.ax-select-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-select-box-panel .ax-select-box-loading-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}.ax-select-box-panel ax-list{min-height:calc(var(--spacing, .25rem) * 0);flex:1 1 auto}.ax-select-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-select-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-select-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-select-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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSelectBoxComponent, decorators: [{
             type: Component,
@@ -267,6 +502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         'disabled',
                         'readonly',
                         'tabIndex',
+                        'placeholder',
                         'minValue',
                         'maxValue',
                         'value',
@@ -300,25 +536,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         { provide: AXClearableComponent, useExisting: AXSelectBoxComponent },
                         { provide: AXClosableComponent, useExisting: AXSelectBoxComponent },
                         { provide: AXSearchableComponent, useExisting: AXSelectBoxComponent },
-                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AXSelectBoxComponent), multi: true },
-                        { provide: AX_SELECTION_DATA_TOKEN, useClass: MXSelectionBridgeService },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AXSelectBoxComponent),
+                            multi: true,
+                        },
+                        {
+                            provide: AX_SELECTION_DATA_TOKEN,
+                            useClass: MXSelectionBridgeService,
+                        },
                         AXUnsubscriber,
-                    ], host: {
-                        ngSkipHydration: 'true',
-                        '(click)': 'toggle()',
-                        '(keydown)': '_handleKeydown($event)',
-                    }, imports: [
+                    ], host: { ngSkipHydration: 'true' }, imports: [
                         AXDropdownBoxComponent,
                         NgTemplateOutlet,
+                        NgClass,
                         AXDecoratorGenericComponent,
                         AXDecoratorCloseButtonComponent,
-                        AXSelectionListComponent,
+                        AXListComponent,
                         FormsModule,
                         AsyncPipe,
                         AXTranslatorPipe,
                         AXTagComponent,
-                    ], 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(); as selectedTpl) {\n          <ng-template\n            [ngTemplateOutlet]=\"selectedTpl\"\n            [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n          ></ng-template>\n        } @else if (multiple) {\n          <ax-tag [text]=\"getDisplayText(item) | translate | async\" look=\"twotone\">\n            @if (!disabled && !readonly) {\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    </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      <span class=\"ax-icon\" [class.ax-icon-chevron-down]=\"!isOpen\" [class.ax-icon-chevron-up]=\"isOpen\"></span>\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\n  <ng-container panel>\n    <div #panel class=\"ax-select-box-panel\" [style.min-width]=\"_dropdownWidth()\">\n      @if (dropdown.isActionsheetStyle) {\n        <ax-header class=\"ax-solid\">\n          <ax-title>\n            {{ caption() || placeholder() || '@acorex:selectbox.popover.title' | translate | async }}\n          </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\n      @if (\n        searchBox() && (!minRecordsForSearch() || visibleItems().length >= minRecordsForSearch()! || searchValue())\n      ) {\n        <div class=\"ax-search-container\">\n          <ng-template [ngTemplateOutlet]=\"search\"></ng-template>\n        </div>\n      }\n\n      @if (renderList()) {\n        @if (visibleItems().length) {\n          <div class=\"ax-select-box-list\" [style.max-height]=\"_dropdownHeight()\">\n            <ax-selection-list\n              [name]=\"name\"\n              [ngModel]=\"value\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n              [multiple]=\"multiple\"\n              [textField]=\"textField\"\n              [valueField]=\"valueField\"\n              [disabledField]=\"disabledField\"\n              [items]=\"visibleItems()\"\n              [showControl]=\"true\"\n              [customTemplate]=\"itemTemplate()\"\n              direction=\"vertical\"\n              look=\"solid\"\n              (onValueChanged)=\"_handleValueChanged($event)\"\n            ></ax-selection-list>\n          </div>\n        } @else {\n          <div class=\"ax-select-box-empty\">\n            @if (emptyTemplate(); as emptyTpl) {\n              <ng-template [ngTemplateOutlet]=\"emptyTpl\"></ng-template>\n            } @else {\n              {{ '@acorex:common.general.no-result-found' | translate | async }}\n            }\n          </div>\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-select-box .ax-editor-container{padding-block:calc(var(--spacing, .25rem) * 0)}ax-select-box .ax-editor-container.ax-state-multiple{padding-inline:calc(var(--spacing, .25rem) * 1)}ax-select-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-select-box .ax-editor-container .ax-input,ax-select-box .ax-editor-container .ax-editor{padding-block:calc(var(--spacing, .25rem) * 1)}ax-select-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-select-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-select-box-chips-gap,.25rem);outline-style:var(--tw-outline-style);outline-width:0px;outline-color:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-select-box-chips-container-padding, .25rem)}ax-select-box .ax-chips-container ax-tag ax-prefix,ax-select-box .ax-chips-container ax-tag ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}.ax-select-box-panel{display:flex;height:fit-content;max-height:100%;flex-direction:column;overflow:hidden}.ax-select-box-panel .ax-select-box-list{min-height:calc(var(--spacing, .25rem) * 0);overflow:auto}.ax-select-box-panel .ax-select-box-empty{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 4);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-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-select-box-panel .ax-select-box-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-lightest-surface)) 75%,transparent)}}.ax-select-box-panel ax-selection-list{display:block;width:100%}.ax-select-box-panel ax-selection-list ul.ax-vertical{flex-wrap:nowrap}.ax-select-box-panel ax-selection-list li.ax-state-selected>label{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}.ax-select-box-panel ax-selection-list li.ax-state-selected>label: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-select-box-panel ax-selection-list li.ax-state-selected>label: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-select-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-select-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-select-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)}}@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: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minRecordsForSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRecordsForSearch", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], selectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], dropdownWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownWidth", required: false }] }], searchBoxAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBoxAutoFocus", required: false }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], selectionList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXSelectionListComponent), { isSignal: true }] }], searchBox: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXSearchBoxComponent), { isSignal: true }] }], dropdownRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXDropdownBoxComponent), { isSignal: true }] }] } });
+                        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            <!-- <div class=\"bg-surface border-surface flex items-center justify-center gap-2 rounded-full border px-2 py-1\">\n              <ax-text>{{ getDisplayText(item) | translate | async }}</ax-text>\n              @if (!disabled && !readonly && multiple) {\n                <span class=\"ax-icon ax-icon-close\" (click)=\"_handleBadgeRemove($event, item)\"></span>\n              }\n            </div> -->\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-select-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-select-box .ax-editor-container{padding-block:calc(var(--spacing, .25rem) * 0)}ax-select-box .ax-editor-container.ax-state-multiple{padding-inline:calc(var(--spacing, .25rem) * 1)}ax-select-box .ax-editor-container.ax-state-multiple .ax-placeholder{padding-inline-start:calc(var(--spacing, .25rem) * 2)}ax-select-box .ax-editor-container .ax-input,ax-select-box .ax-editor-container .ax-editor{padding-block:calc(var(--spacing, .25rem) * 1)}ax-select-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-select-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-select-box-chips-gap,.25rem);outline-style:var(--tw-outline-style);outline-width:0px;outline-color:transparent;-webkit-user-select:none;user-select:none}ax-select-box .ax-chips-container .ax-selectbox-input{width:calc(var(--spacing, .25rem) * 0);opacity:0%}ax-select-box .ax-chips-container.ax-state-multiple:has(.ax-chips){padding:var(--ax-comp-select-box-chips-container-padding, .25rem)}ax-select-box .ax-chips-container ax-tag ax-prefix,ax-select-box .ax-chips-container ax-tag ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}.ax-select-box-panel{display:flex;height:fit-content;max-height:100%;flex-direction:column;overflow:hidden}.ax-select-box-panel.ax-no-truncate .ax-label-container span:not(.ax-truncated){white-space:nowrap}.ax-select-box-panel .ax-select-box-loading-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 4)}.ax-select-box-panel ax-list{min-height:calc(var(--spacing, .25rem) * 0);flex:1 1 auto}.ax-select-box-panel>ax-header .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-select-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-select-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-select-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']
+            }] } });
 
 class AXSelectBoxModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSelectBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -334,7 +609,7 @@ class AXSelectBoxModule {
             A11yModule,
             AXTextBoxModule,
             AXDropdownModule,
-            AXSelectionListModule,
+            AXListModule,
             AXSelectBoxComponent], exports: [AXSelectBoxComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSelectBoxModule, imports: [CommonModule,
             AXCommonModule,
@@ -348,7 +623,7 @@ class AXSelectBoxModule {
             A11yModule,
             AXTextBoxModule,
             AXDropdownModule,
-            AXSelectionListModule,
+            AXListModule,
             AXSelectBoxComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSelectBoxModule, decorators: [{
@@ -367,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         A11yModule,
                         AXTextBoxModule,
                         AXDropdownModule,
-                        AXSelectionListModule,
+                        AXListModule,
                         AXSelectBoxComponent,
                     ],
                     exports: [AXSelectBoxComponent],