@amro93/ngb-select 0.1.1

package/fesm2022/amro93-ngb-select.mjs

@@ -0,0 +1,925 @@
+import * as i0 from '@angular/core';
+import { input, model, output, computed, signal, effect, forwardRef, HostListener, ViewChild, ContentChild, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const NGB_SELECT_VERSION = '0.1.1';
+
+class NgbSelectComponent {
+    elementRef;
+    cdr;
+    static VERSION = NGB_SELECT_VERSION;
+    // --- Basic & Data Inputs ---
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    optionValue = input('value', ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
+    optionDisabled = input('disabled', ...(ngDevMode ? [{ debugName: "optionDisabled" }] : /* istanbul ignore next */ []));
+    optionGroupLabel = input('label', ...(ngDevMode ? [{ debugName: "optionGroupLabel" }] : /* istanbul ignore next */ []));
+    optionGroupChildren = input('items', ...(ngDevMode ? [{ debugName: "optionGroupChildren" }] : /* istanbul ignore next */ []));
+    group = input(false, ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+    dataKey = input(undefined, ...(ngDevMode ? [{ debugName: "dataKey" }] : /* istanbul ignore next */ []));
+    placeholder = input(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    // --- Multi-Select Inputs ---
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    display = input('comma', ...(ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []));
+    showSelectAll = input(false, ...(ngDevMode ? [{ debugName: "showSelectAll" }] : /* istanbul ignore next */ []));
+    maxSelectedLabels = input(3, ...(ngDevMode ? [{ debugName: "maxSelectedLabels" }] : /* istanbul ignore next */ []));
+    selectedItemsLabel = input('{0} items selected', ...(ngDevMode ? [{ debugName: "selectedItemsLabel" }] : /* istanbul ignore next */ []));
+    selectionLimit = input(undefined, ...(ngDevMode ? [{ debugName: "selectionLimit" }] : /* istanbul ignore next */ []));
+    closeOnSelect = input(false, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+    // --- Filtering Inputs ---
+    filter = input(false, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    filterBy = input(undefined, ...(ngDevMode ? [{ debugName: "filterBy" }] : /* istanbul ignore next */ []));
+    filterMatchMode = input('contains', ...(ngDevMode ? [{ debugName: "filterMatchMode" }] : /* istanbul ignore next */ []));
+    filterLocale = input(undefined, ...(ngDevMode ? [{ debugName: "filterLocale" }] : /* istanbul ignore next */ []));
+    filterNormalizeArabic = input(true, ...(ngDevMode ? [{ debugName: "filterNormalizeArabic" }] : /* istanbul ignore next */ []));
+    filterPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input(undefined, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    filterInTrigger = input(false, ...(ngDevMode ? [{ debugName: "filterInTrigger" }] : /* istanbul ignore next */ []));
+    resetFilterOnHide = input(false, ...(ngDevMode ? [{ debugName: "resetFilterOnHide" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('No results found', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    emptyFilterMessage = input('No results found', ...(ngDevMode ? [{ debugName: "emptyFilterMessage" }] : /* istanbul ignore next */ []));
+    // --- State & Form Inputs ---
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    showClear = input(false, ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    floatLabel = input(false, ...(ngDevMode ? [{ debugName: "floatLabel" }] : /* istanbul ignore next */ []));
+    floatLabelVariant = input('on', ...(ngDevMode ? [{ debugName: "floatLabelVariant" }] : /* istanbul ignore next */ []));
+    autofocus = input(false, ...(ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []));
+    tabindex = input(0, ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelledBy = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []));
+    dir = input(undefined, ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
+    // --- Display & Styling Inputs ---
+    dropdownPosition = input('auto', ...(ngDevMode ? [{ debugName: "dropdownPosition" }] : /* istanbul ignore next */ []));
+    dropdownDirection = input(undefined, ...(ngDevMode ? [{ debugName: "dropdownDirection" }] : /* istanbul ignore next */ []));
+    direction = input(undefined, ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input('outlined', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    fluid = input(false, ...(ngDevMode ? [{ debugName: "fluid" }] : /* istanbul ignore next */ []));
+    scrollHeight = input('200px', ...(ngDevMode ? [{ debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
+    style = input(undefined, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+    styleClass = input(undefined, ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
+    panelStyle = input(undefined, ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
+    panelStyleClass = input(undefined, ...(ngDevMode ? [{ debugName: "panelStyleClass" }] : /* istanbul ignore next */ []));
+    appendTo = input(undefined, ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
+    // --- Modal / Popup Window Inputs ---
+    modal = input(false, ...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
+    popup = input(false, ...(ngDevMode ? [{ debugName: "popup" }] : /* istanbul ignore next */ []));
+    touchUI = input(false, ...(ngDevMode ? [{ debugName: "touchUI" }] : /* istanbul ignore next */ []));
+    popupTitle = input(undefined, ...(ngDevMode ? [{ debugName: "popupTitle" }] : /* istanbul ignore next */ []));
+    modalTitle = input(undefined, ...(ngDevMode ? [{ debugName: "modalTitle" }] : /* istanbul ignore next */ []));
+    // --- Advanced Features ---
+    editable = input(false, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+    maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    selectOnFocus = input(false, ...(ngDevMode ? [{ debugName: "selectOnFocus" }] : /* istanbul ignore next */ []));
+    autoOptionFocus = input(true, ...(ngDevMode ? [{ debugName: "autoOptionFocus" }] : /* istanbul ignore next */ []));
+    focusOnOpen = input(undefined, ...(ngDevMode ? [{ debugName: "focusOnOpen" }] : /* istanbul ignore next */ []));
+    focusOnOpenStrategy = input('always', ...(ngDevMode ? [{ debugName: "focusOnOpenStrategy" }] : /* istanbul ignore next */ []));
+    lazy = input(false, ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
+    // --- Two-way Overlay Visibility Binding ---
+    overlayVisible = model(false, ...(ngDevMode ? [{ debugName: "overlayVisible" }] : /* istanbul ignore next */ []));
+    // --- Event Outputs ---
+    onChange = output();
+    onFilter = output();
+    onFocus = output();
+    onBlur = output();
+    onShow = output();
+    onHide = output();
+    onClear = output();
+    onSelectAllChange = output();
+    onRemoveChip = output();
+    onLazyLoad = output();
+    // --- Custom Content Templates ---
+    itemTemplate;
+    selectedItemTemplate;
+    labelTemplate;
+    chipTemplate;
+    headerCheckboxTemplate;
+    headerTemplate;
+    footerTemplate;
+    groupTemplate;
+    emptyTemplate;
+    clearIconTemplate;
+    dropdownIconTemplate;
+    filterIconTemplate;
+    // --- View References ---
+    filterInputElement;
+    triggerFilterInputElement;
+    editableInputElement;
+    dropdownMenuElement;
+    effectiveSearchPlaceholder = computed(() => {
+        return this.searchPlaceholder() || this.filterPlaceholder() || this.placeholder() || 'Search...';
+    }, ...(ngDevMode ? [{ debugName: "effectiveSearchPlaceholder" }] : /* istanbul ignore next */ []));
+    effectiveDropdownPosition = computed(() => {
+        return this.dropdownDirection() || this.direction() || this.dropdownPosition() || 'auto';
+    }, ...(ngDevMode ? [{ debugName: "effectiveDropdownPosition" }] : /* istanbul ignore next */ []));
+    currentPlacement = signal('bottom', ...(ngDevMode ? [{ debugName: "currentPlacement" }] : /* istanbul ignore next */ []));
+    isDropup = computed(() => this.currentPlacement() === 'top', ...(ngDevMode ? [{ debugName: "isDropup" }] : /* istanbul ignore next */ []));
+    isModalMode = computed(() => this.modal() || this.popup() || this.touchUI(), ...(ngDevMode ? [{ debugName: "isModalMode" }] : /* istanbul ignore next */ []));
+    effectivePopupTitle = computed(() => {
+        return this.popupTitle() || this.modalTitle() || this.placeholder() || 'Select an Option';
+    }, ...(ngDevMode ? [{ debugName: "effectivePopupTitle" }] : /* istanbul ignore next */ []));
+    effectiveFilterValue = computed(() => {
+        return this.overlayVisible()
+            ? this.filterValue()
+            : this.hasSelectedValue()
+                ? ''
+                : this.filterValue();
+    }, ...(ngDevMode ? [{ debugName: "effectiveFilterValue" }] : /* istanbul ignore next */ []));
+    // --- Internal State ---
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    filteredOptions = signal([], ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    filterValue = signal('', ...(ngDevMode ? [{ debugName: "filterValue" }] : /* istanbul ignore next */ []));
+    focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
+    selectAll = signal(null, ...(ngDevMode ? [{ debugName: "selectAll" }] : /* istanbul ignore next */ []));
+    // --- ControlValueAccessor Callbacks ---
+    onModelChange = () => { };
+    onModelTouched = () => { };
+    constructor(elementRef, cdr) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        effect(() => {
+            // React to options or group changes
+            this.options();
+            this.group();
+            this.updateFilteredOptions();
+            this.updateSelectAllState();
+        });
+        effect(() => {
+            // React to overlayVisible changes
+            const visible = this.overlayVisible();
+            if (visible) {
+                this.openOverlay();
+            }
+            else {
+                this.closeOverlay();
+            }
+        });
+    }
+    ngOnInit() {
+        if (this.autofocus()) {
+            setTimeout(() => this.focus());
+        }
+    }
+    ngOnDestroy() {
+        this.cleanAppendTo();
+    }
+    safeOptions = computed(() => {
+        const opts = this.options();
+        return Array.isArray(opts) ? opts : [];
+    }, ...(ngDevMode ? [{ debugName: "safeOptions" }] : /* istanbul ignore next */ []));
+    writeValue(obj) {
+        if (this.multiple()) {
+            this.value.set(Array.isArray(obj) ? [...obj] : []);
+        }
+        else {
+            this.value.set(obj !== undefined ? obj : null);
+        }
+        this.updateSelectAllState();
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onModelTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    hasSelectedValue = computed(() => {
+        const val = this.value();
+        if (this.multiple()) {
+            return Array.isArray(val) && val.length > 0;
+        }
+        return val !== null && val !== undefined && val !== '';
+    }, ...(ngDevMode ? [{ debugName: "hasSelectedValue" }] : /* istanbul ignore next */ []));
+    getDisplayLabel() {
+        if (!this.hasSelectedValue()) {
+            return '';
+        }
+        if (this.multiple()) {
+            const selectedList = Array.isArray(this.value()) ? this.value() : [];
+            if (selectedList.length > this.maxSelectedLabels()) {
+                return this.selectedItemsLabel().replace('{0}', String(selectedList.length));
+            }
+            return selectedList.map((val) => this.resolveOptionLabelByValue(val)).join(', ');
+        }
+        if (this.editable() && typeof this.value() === 'string') {
+            return this.value();
+        }
+        return this.resolveOptionLabelByValue(this.value());
+    }
+    resolveOptionLabelByValue(val) {
+        const selectedOpt = this.findOptionByValue(val);
+        if (selectedOpt !== undefined && selectedOpt !== null) {
+            return this.resolveOptionLabel(selectedOpt);
+        }
+        return this.resolveOptionLabel(val);
+    }
+    resolveOptionLabel(option) {
+        if (option === null || option === undefined)
+            return '';
+        if (typeof option === 'object') {
+            if (this.optionLabel() && option[this.optionLabel()] !== undefined) {
+                return String(option[this.optionLabel()]);
+            }
+            if (option.label !== undefined) {
+                return String(option.label);
+            }
+            return JSON.stringify(option);
+        }
+        return String(option);
+    }
+    resolveOptionValue(option) {
+        if (option === null || option === undefined)
+            return null;
+        if (typeof option === 'object') {
+            if (this.optionValue() && option[this.optionValue()] !== undefined) {
+                return option[this.optionValue()];
+            }
+            if (option.value !== undefined) {
+                return option.value;
+            }
+        }
+        return option;
+    }
+    isOptionDisabled(option) {
+        if (this.disabled())
+            return true;
+        if (option && typeof option === 'object') {
+            if (this.optionDisabled() && option[this.optionDisabled()] !== undefined) {
+                return Boolean(option[this.optionDisabled()]);
+            }
+            return Boolean(option.disabled);
+        }
+        return false;
+    }
+    resolveOptionGroupLabel(groupOption) {
+        if (!groupOption)
+            return '';
+        if (this.optionGroupLabel() && groupOption[this.optionGroupLabel()] !== undefined) {
+            return String(groupOption[this.optionGroupLabel()]);
+        }
+        return String(groupOption.label || '');
+    }
+    resolveOptionGroupChildren(groupOption) {
+        if (!groupOption)
+            return [];
+        if (this.optionGroupChildren() && Array.isArray(groupOption[this.optionGroupChildren()])) {
+            return groupOption[this.optionGroupChildren()];
+        }
+        return Array.isArray(groupOption.items) ? groupOption.items : [];
+    }
+    findOptionByValue(val) {
+        if (val === null || val === undefined)
+            return undefined;
+        if (this.group()) {
+            for (const grp of this.safeOptions()) {
+                const children = this.resolveOptionGroupChildren(grp);
+                const match = children.find((opt) => this.areValuesEqual(this.resolveOptionValue(opt), val));
+                if (match !== undefined)
+                    return match;
+            }
+            return undefined;
+        }
+        return this.safeOptions().find((opt) => this.areValuesEqual(this.resolveOptionValue(opt), val));
+    }
+    areValuesEqual(val1, val2) {
+        if (val1 === val2)
+            return true;
+        if (val1 === null || val1 === undefined || val2 === null || val2 === undefined)
+            return false;
+        if (typeof val1 === 'object' && typeof val2 === 'object') {
+            const dataKey = this.dataKey();
+            if (dataKey && val1[dataKey] !== undefined && val2[dataKey] !== undefined) {
+                return val1[dataKey] === val2[dataKey];
+            }
+            if (this.optionValue() &&
+                val1[this.optionValue()] !== undefined &&
+                val2[this.optionValue()] !== undefined) {
+                return val1[this.optionValue()] === val2[this.optionValue()];
+            }
+            try {
+                return JSON.stringify(val1) === JSON.stringify(val2);
+            }
+            catch {
+                return false;
+            }
+        }
+        return false;
+    }
+    isSelected(option) {
+        const optVal = this.resolveOptionValue(option);
+        if (this.multiple() && Array.isArray(this.value())) {
+            return this.value().some((item) => this.areValuesEqual(item, optVal));
+        }
+        return this.areValuesEqual(this.value(), optVal);
+    }
+    isOptionsEmpty() {
+        if (this.filteredOptions().length === 0)
+            return true;
+        if (this.group()) {
+            return this.filteredOptions().every((grp) => this.resolveOptionGroupChildren(grp).length === 0);
+        }
+        return false;
+    }
+    onTriggerClick(event) {
+        if (this.disabled() || this.readonly())
+            return;
+        this.toggleOverlay(event);
+    }
+    calculateDropdownPosition() {
+        const pref = this.effectiveDropdownPosition();
+        if (pref === 'top' || pref === 'up') {
+            this.currentPlacement.set('top');
+            return;
+        }
+        if (pref === 'bottom' || pref === 'down') {
+            this.currentPlacement.set('bottom');
+            return;
+        }
+        // Auto positioning based on viewport space
+        if (typeof window === 'undefined' || !this.elementRef?.nativeElement) {
+            this.currentPlacement.set('bottom');
+            return;
+        }
+        const triggerRect = this.elementRef.nativeElement.getBoundingClientRect();
+        const spaceBelow = window.innerHeight - triggerRect.bottom;
+        const spaceAbove = triggerRect.top;
+        let panelHeight = 200;
+        if (this.dropdownMenuElement?.nativeElement?.offsetHeight) {
+            panelHeight = this.dropdownMenuElement.nativeElement.offsetHeight;
+        }
+        else if (this.scrollHeight()) {
+            const parsed = parseInt(this.scrollHeight(), 10);
+            if (!isNaN(parsed) && parsed > 0) {
+                panelHeight = parsed;
+            }
+        }
+        if (spaceBelow < panelHeight && spaceAbove > spaceBelow) {
+            this.currentPlacement.set('top');
+        }
+        else {
+            this.currentPlacement.set('bottom');
+        }
+    }
+    toggleOverlay(event) {
+        if (this.overlayVisible()) {
+            this.closeOverlay(event);
+        }
+        else {
+            this.openOverlay(event);
+        }
+    }
+    openOverlay(event) {
+        if (this.disabled() || this.readonly() || this.overlayVisible())
+            return;
+        this.calculateDropdownPosition();
+        this.overlayVisible.set(true);
+        this.onShow.emit(event || null);
+        this.onModelTouched();
+        setTimeout(() => {
+            this.calculateDropdownPosition();
+            if (this.filterInTrigger() && this.triggerFilterInputElement) {
+                this.triggerFilterInputElement.nativeElement.focus();
+            }
+            else if (this.filter() && this.filterInputElement) {
+                this.filterInputElement.nativeElement.focus();
+            }
+            this.handleFocusOnOpen();
+            this.handleAppendTo();
+            this.cdr.markForCheck();
+        });
+    }
+    closeOverlay(event) {
+        if (!this.overlayVisible())
+            return;
+        this.overlayVisible.set(false);
+        this.onHide.emit(event || null);
+        if (this.resetFilterOnHide() && this.filterValue()) {
+            this.filterValue.set('');
+            this.updateFilteredOptions();
+        }
+        this.focusedIndex.set(-1);
+        this.cdr.markForCheck();
+    }
+    handleFocusOnOpen() {
+        const flatItems = this.getFlatFilteredOptions();
+        let targetIndex = -1;
+        const hasSelection = this.hasSelectedValue();
+        const selectedIdx = flatItems.findIndex((opt) => this.isSelected(opt));
+        const focusOnOpen = this.focusOnOpen();
+        if (focusOnOpen !== undefined &&
+            focusOnOpen >= 0 &&
+            focusOnOpen < flatItems.length) {
+            if (this.focusOnOpenStrategy() === 'notSelected' && hasSelection && selectedIdx !== -1) {
+                targetIndex = selectedIdx;
+            }
+            else {
+                targetIndex = focusOnOpen;
+            }
+        }
+        else if (this.autoOptionFocus()) {
+            targetIndex = selectedIdx !== -1 ? selectedIdx : 0;
+        }
+        if (targetIndex !== -1 && this.dropdownMenuElement) {
+            this.focusedIndex.set(targetIndex);
+            const elements = this.dropdownMenuElement.nativeElement.querySelectorAll('.dropdown-item[role="option"]');
+            const targetElement = elements[targetIndex];
+            if (targetElement && typeof targetElement.scrollIntoView === 'function') {
+                targetElement.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }
+        }
+    }
+    onOptionClick(option, event) {
+        if (this.isOptionDisabled(option))
+            return;
+        const val = this.resolveOptionValue(option);
+        if (this.multiple()) {
+            let currentSelection = Array.isArray(this.value()) ? [...this.value()] : [];
+            const selectedIndex = currentSelection.findIndex((item) => this.areValuesEqual(item, val));
+            if (selectedIndex !== -1) {
+                currentSelection.splice(selectedIndex, 1);
+            }
+            else {
+                if (this.selectionLimit() !== undefined && currentSelection.length >= this.selectionLimit()) {
+                    return;
+                }
+                currentSelection.push(val);
+            }
+            this.updateModel(currentSelection, event);
+            this.updateSelectAllState();
+            if (this.closeOnSelect()) {
+                this.closeOverlay(event);
+            }
+        }
+        else {
+            this.updateModel(val, event);
+            if (this.filterInTrigger()) {
+                this.filterValue.set('');
+                this.updateFilteredOptions();
+                if (this.triggerFilterInputElement) {
+                    this.triggerFilterInputElement.nativeElement.value = '';
+                }
+            }
+            this.closeOverlay(event);
+        }
+    }
+    removeChip(val, event) {
+        event.stopPropagation();
+        if (this.disabled() || this.readonly())
+            return;
+        if (Array.isArray(this.value())) {
+            const nextVal = this.value().filter((item) => !this.areValuesEqual(item, val));
+            this.updateModel(nextVal, event);
+            this.onRemoveChip.emit({ originalEvent: event, value: val });
+            this.updateSelectAllState();
+        }
+    }
+    toggleSelectAll(event) {
+        const checked = event.target.checked;
+        const targetOptions = this.getFlatFilteredOptions().filter((opt) => !this.isOptionDisabled(opt));
+        if (checked) {
+            let allValues = targetOptions.map((opt) => this.resolveOptionValue(opt));
+            if (this.selectionLimit() !== undefined) {
+                allValues = allValues.slice(0, this.selectionLimit());
+            }
+            this.value.set(allValues);
+        }
+        else {
+            this.value.set([]);
+        }
+        this.selectAll.set(checked);
+        this.updateModel(this.value(), event);
+        this.onSelectAllChange.emit({ originalEvent: event, checked });
+    }
+    updateSelectAllState() {
+        if (!this.multiple() || !this.showSelectAll())
+            return;
+        const targetOptions = this.getFlatFilteredOptions().filter((opt) => !this.isOptionDisabled(opt));
+        if (targetOptions.length === 0) {
+            this.selectAll.set(false);
+            return;
+        }
+        this.selectAll.set(targetOptions.every((opt) => this.isSelected(opt)));
+    }
+    updateModel(val, event) {
+        this.value.set(val);
+        this.onModelChange(this.value());
+        this.onChange.emit({
+            originalEvent: event,
+            value: this.value(),
+        });
+        this.cdr.markForCheck();
+    }
+    onClearClick(event) {
+        event.stopPropagation();
+        if (this.disabled() || this.readonly())
+            return;
+        const clearedValue = this.multiple() ? [] : null;
+        this.updateModel(clearedValue, event);
+        this.updateSelectAllState();
+        this.onClear.emit(event);
+    }
+    onEditableInput(event) {
+        const inputVal = event.target.value;
+        this.updateModel(inputVal, event);
+    }
+    onEditableFocus(event) {
+        if (this.selectOnFocus() && this.editableInputElement) {
+            this.editableInputElement.nativeElement.select();
+        }
+        this.onFocus.emit(event);
+    }
+    onFilterChange(event) {
+        const raw = event.target.value || '';
+        this.filterValue.set(raw);
+        this.updateFilteredOptions();
+        this.updateSelectAllState();
+        this.onFilter.emit({
+            originalEvent: event,
+            filter: this.filterValue(),
+        });
+    }
+    updateFilteredOptions() {
+        if (!this.filterValue()) {
+            this.filteredOptions.set([...this.safeOptions()]);
+            return;
+        }
+        const query = this.filterValue();
+        if (this.group()) {
+            this.filteredOptions.set(this.safeOptions()
+                .map((group) => {
+                const children = this.resolveOptionGroupChildren(group);
+                const filteredChildren = children.filter((opt) => this.matchesFilter(opt, query));
+                return {
+                    ...group,
+                    [this.optionGroupChildren()]: filteredChildren,
+                };
+            })
+                .filter((group) => this.resolveOptionGroupChildren(group).length > 0));
+        }
+        else {
+            this.filteredOptions.set(this.safeOptions().filter((opt) => this.matchesFilter(opt, query)));
+        }
+    }
+    matchesFilter(option, query) {
+        if (!option)
+            return false;
+        const fieldsToSearch = this.getFilterFields();
+        return fieldsToSearch.some((field) => {
+            const val = this.resolveFieldData(option, field);
+            if (val === null || val === undefined)
+                return false;
+            const stringVal = String(val);
+            return this.compareStrings(stringVal, query, this.filterMatchMode(), this.filterLocale());
+        });
+    }
+    getFilterFields() {
+        if (this.filterBy()) {
+            return this.filterBy().split(',').map((f) => f.trim());
+        }
+        return [this.optionLabel() || 'label'];
+    }
+    resolveFieldData(data, field) {
+        if (data && field) {
+            if (field.indexOf('.') === -1) {
+                return data[field] !== undefined
+                    ? data[field]
+                    : typeof data === 'string' || typeof data === 'number'
+                        ? data
+                        : null;
+            }
+            const fields = field.split('.');
+            let value = data;
+            for (const f of fields) {
+                if (value === null || value === undefined)
+                    return null;
+                value = value[f];
+            }
+            return value;
+        }
+        return null;
+    }
+    normalizeArabicText(text) {
+        return text
+            .replace(/[\u064B-\u065F\u0670\u0640]/g, '') // Remove Arabic Tashkeel diacritics & Tatweel
+            .replace(/[إأآا]/g, 'ا') // Normalize Alef forms
+            .replace(/[يى]/g, 'ي') // Normalize Yaa & Alef Maksura
+            .replace(/[ة]/g, 'ه'); // Normalize Taa Marbuta
+    }
+    compareStrings(val, query, mode, locale) {
+        let v = locale ? val.toLocaleLowerCase(locale) : val.toLowerCase();
+        let q = locale ? query.toLocaleLowerCase(locale) : query.toLowerCase();
+        if (this.filterNormalizeArabic()) {
+            v = this.normalizeArabicText(v);
+            q = this.normalizeArabicText(q);
+        }
+        switch (mode) {
+            case 'startsWith':
+                return v.startsWith(q);
+            case 'endsWith':
+                return v.endsWith(q);
+            case 'equals':
+                return v === q;
+            case 'notEquals':
+                return v !== q;
+            case 'contains':
+            default:
+                return v.includes(q);
+        }
+    }
+    getFlatFilteredOptions() {
+        if (this.group()) {
+            const flat = [];
+            for (const grp of this.filteredOptions()) {
+                flat.push(...this.resolveOptionGroupChildren(grp));
+            }
+            return flat;
+        }
+        return this.filteredOptions();
+    }
+    onKeydown(event) {
+        if (this.disabled() || this.readonly())
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.overlayVisible()) {
+                    this.openOverlay(event);
+                }
+                else {
+                    this.navigateOption(1);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (!this.overlayVisible()) {
+                    this.openOverlay(event);
+                }
+                else {
+                    this.navigateOption(-1);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                if (event.key === ' ' &&
+                    ((this.filter() && this.filterInputElement?.nativeElement === document.activeElement) ||
+                        (this.filterInTrigger() &&
+                            this.triggerFilterInputElement?.nativeElement === document.activeElement))) {
+                    return;
+                }
+                event.preventDefault();
+                if (!this.overlayVisible()) {
+                    this.openOverlay(event);
+                }
+                else {
+                    const flatItems = this.getFlatFilteredOptions();
+                    if (this.focusedIndex() >= 0 && this.focusedIndex() < flatItems.length) {
+                        this.onOptionClick(flatItems[this.focusedIndex()], event);
+                    }
+                }
+                break;
+            case 'Escape':
+                if (this.overlayVisible()) {
+                    event.preventDefault();
+                    this.closeOverlay(event);
+                }
+                break;
+            case 'Tab':
+                if (this.overlayVisible()) {
+                    this.closeOverlay(event);
+                }
+                break;
+        }
+    }
+    onFilterKeydown(event) {
+        if (event.key === 'ArrowDown' ||
+            event.key === 'ArrowUp' ||
+            event.key === 'Enter' ||
+            event.key === 'Escape') {
+            this.onKeydown(event);
+        }
+    }
+    navigateOption(step) {
+        const flatItems = this.getFlatFilteredOptions();
+        if (flatItems.length === 0)
+            return;
+        let nextIdx = this.focusedIndex() + step;
+        if (nextIdx < 0)
+            nextIdx = 0;
+        if (nextIdx >= flatItems.length)
+            nextIdx = flatItems.length - 1;
+        while (nextIdx >= 0 &&
+            nextIdx < flatItems.length &&
+            this.isOptionDisabled(flatItems[nextIdx])) {
+            nextIdx += step;
+        }
+        if (nextIdx >= 0 && nextIdx < flatItems.length) {
+            this.focusedIndex.set(nextIdx);
+            if (this.dropdownMenuElement) {
+                const elements = this.dropdownMenuElement.nativeElement.querySelectorAll('.dropdown-item[role="option"]');
+                const targetElement = elements[nextIdx];
+                if (targetElement && typeof targetElement.scrollIntoView === 'function') {
+                    targetElement.scrollIntoView({ block: 'nearest', inline: 'start' });
+                }
+            }
+        }
+    }
+    isOptionFocused(option) {
+        if (this.focusedIndex() < 0)
+            return false;
+        const flat = this.getFlatFilteredOptions();
+        if (this.focusedIndex() >= flat.length)
+            return false;
+        return this.areValuesEqual(this.resolveOptionValue(flat[this.focusedIndex()]), this.resolveOptionValue(option));
+    }
+    onOverlayScroll(event) {
+        if (!this.lazy())
+            return;
+        const target = event.target;
+        if (target.scrollTop + target.clientHeight >= target.scrollHeight - 10) {
+            const flat = this.getFlatFilteredOptions();
+            this.onLazyLoad.emit({
+                first: flat.length,
+                last: flat.length + 10,
+            });
+        }
+    }
+    handleAppendTo() {
+        const appendTo = this.appendTo();
+        if (!appendTo || !this.dropdownMenuElement)
+            return;
+        if (appendTo === 'body') {
+            document.body.appendChild(this.dropdownMenuElement.nativeElement);
+            this.repositionOverlay();
+        }
+        else if (appendTo instanceof HTMLElement) {
+            appendTo.appendChild(this.dropdownMenuElement.nativeElement);
+            this.repositionOverlay();
+        }
+    }
+    repositionOverlay() {
+        if (!this.dropdownMenuElement || this.isModalMode())
+            return;
+        this.calculateDropdownPosition();
+        const triggerRect = this.elementRef.nativeElement.getBoundingClientRect();
+        const dropdown = this.dropdownMenuElement.nativeElement;
+        dropdown.style.position = 'fixed';
+        dropdown.style.left = `${triggerRect.left}px`;
+        dropdown.style.width = `${triggerRect.width}px`;
+        dropdown.style.minWidth = `${triggerRect.width}px`;
+        dropdown.style.maxWidth = `${triggerRect.width}px`;
+        dropdown.style.boxSizing = 'border-box';
+        dropdown.style.zIndex = '1060';
+        if (this.isDropup()) {
+            dropdown.style.top = 'auto';
+            dropdown.style.bottom = `${window.innerHeight - triggerRect.top + 2}px`;
+        }
+        else {
+            dropdown.style.top = `${triggerRect.bottom + 2}px`;
+            dropdown.style.bottom = 'auto';
+        }
+    }
+    cleanAppendTo() {
+        if (this.appendTo() && this.dropdownMenuElement) {
+            const el = this.dropdownMenuElement.nativeElement;
+            if (el.parentElement) {
+                el.parentElement.removeChild(el);
+            }
+        }
+    }
+    onTriggerFocus(event) {
+        this.onFocus.emit(event);
+    }
+    onTriggerBlur(event) {
+        this.onBlur.emit(event);
+    }
+    focus() {
+        if (this.filterInTrigger() && this.triggerFilterInputElement) {
+            this.triggerFilterInputElement.nativeElement.focus();
+        }
+        else if (this.editable() && !this.multiple() && this.editableInputElement) {
+            this.editableInputElement.nativeElement.focus();
+        }
+        else {
+            const trigger = this.elementRef.nativeElement.querySelector('.form-select');
+            if (trigger)
+                trigger.focus();
+        }
+    }
+    onWindowResize() {
+        if (this.overlayVisible()) {
+            this.calculateDropdownPosition();
+            if (this.appendTo()) {
+                this.repositionOverlay();
+            }
+        }
+    }
+    onWindowScroll() {
+        if (this.overlayVisible()) {
+            this.calculateDropdownPosition();
+            if (this.appendTo()) {
+                this.repositionOverlay();
+            }
+        }
+    }
+    onDocumentClick(event) {
+        if (this.overlayVisible() && !this.elementRef.nativeElement.contains(event.target)) {
+            if (this.dropdownMenuElement &&
+                this.dropdownMenuElement.nativeElement.contains(event.target)) {
+                return;
+            }
+            this.closeOverlay(event);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NgbSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.21", type: NgbSelectComponent, isStandalone: true, selector: "ngb-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, optionDisabled: { classPropertyName: "optionDisabled", publicName: "optionDisabled", isSignal: true, isRequired: false, transformFunction: null }, optionGroupLabel: { classPropertyName: "optionGroupLabel", publicName: "optionGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, optionGroupChildren: { classPropertyName: "optionGroupChildren", publicName: "optionGroupChildren", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, maxSelectedLabels: { classPropertyName: "maxSelectedLabels", publicName: "maxSelectedLabels", isSignal: true, isRequired: false, transformFunction: null }, selectedItemsLabel: { classPropertyName: "selectedItemsLabel", publicName: "selectedItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, selectionLimit: { classPropertyName: "selectionLimit", publicName: "selectionLimit", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: true, isRequired: false, transformFunction: null }, filterMatchMode: { classPropertyName: "filterMatchMode", publicName: "filterMatchMode", isSignal: true, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: true, isRequired: false, transformFunction: null }, filterNormalizeArabic: { classPropertyName: "filterNormalizeArabic", publicName: "filterNormalizeArabic", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filterInTrigger: { classPropertyName: "filterInTrigger", publicName: "filterInTrigger", isSignal: true, isRequired: false, transformFunction: null }, resetFilterOnHide: { classPropertyName: "resetFilterOnHide", publicName: "resetFilterOnHide", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyFilterMessage: { classPropertyName: "emptyFilterMessage", publicName: "emptyFilterMessage", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, floatLabelVariant: { classPropertyName: "floatLabelVariant", publicName: "floatLabelVariant", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, dropdownPosition: { classPropertyName: "dropdownPosition", publicName: "dropdownPosition", isSignal: true, isRequired: false, transformFunction: null }, dropdownDirection: { classPropertyName: "dropdownDirection", publicName: "dropdownDirection", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, panelStyle: { classPropertyName: "panelStyle", publicName: "panelStyle", isSignal: true, isRequired: false, transformFunction: null }, panelStyleClass: { classPropertyName: "panelStyleClass", publicName: "panelStyleClass", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, popup: { classPropertyName: "popup", publicName: "popup", isSignal: true, isRequired: false, transformFunction: null }, touchUI: { classPropertyName: "touchUI", publicName: "touchUI", isSignal: true, isRequired: false, transformFunction: null }, popupTitle: { classPropertyName: "popupTitle", publicName: "popupTitle", isSignal: true, isRequired: false, transformFunction: null }, modalTitle: { classPropertyName: "modalTitle", publicName: "modalTitle", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, selectOnFocus: { classPropertyName: "selectOnFocus", publicName: "selectOnFocus", isSignal: true, isRequired: false, transformFunction: null }, autoOptionFocus: { classPropertyName: "autoOptionFocus", publicName: "autoOptionFocus", isSignal: true, isRequired: false, transformFunction: null }, focusOnOpen: { classPropertyName: "focusOnOpen", publicName: "focusOnOpen", isSignal: true, isRequired: false, transformFunction: null }, focusOnOpenStrategy: { classPropertyName: "focusOnOpenStrategy", publicName: "focusOnOpenStrategy", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, overlayVisible: { classPropertyName: "overlayVisible", publicName: "overlayVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", overlayVisible: "overlayVisibleChange", onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onShow: "onShow", onHide: "onHide", onClear: "onClear", onSelectAllChange: "onSelectAllChange", onRemoveChip: "onRemoveChip", onLazyLoad: "onLazyLoad" }, host: { listeners: { "window:resize": "onWindowResize()", "window:scroll": "onWindowScroll()", "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NgbSelectComponent),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["item"], descendants: true }, { propertyName: "selectedItemTemplate", first: true, predicate: ["selectedItem"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true }, { propertyName: "chipTemplate", first: true, predicate: ["chip"], descendants: true }, { propertyName: "headerCheckboxTemplate", first: true, predicate: ["headerCheckbox"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }, { propertyName: "groupTemplate", first: true, predicate: ["group"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"], descendants: true }, { propertyName: "clearIconTemplate", first: true, predicate: ["clearIcon"], descendants: true }, { propertyName: "dropdownIconTemplate", first: true, predicate: ["dropdownIcon"], descendants: true }, { propertyName: "filterIconTemplate", first: true, predicate: ["filterIcon"], descendants: true }], viewQueries: [{ propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true }, { propertyName: "triggerFilterInputElement", first: true, predicate: ["triggerFilterInput"], descendants: true }, { propertyName: "editableInputElement", first: true, predicate: ["editableInput"], descendants: true }, { propertyName: "dropdownMenuElement", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "<div\n  class=\"ngb-select-container position-relative\"\n  [class.form-floating]=\"floatLabel()\"\n  [class.float-variant-on]=\"floatLabel() && floatLabelVariant() === 'on'\"\n  [class.float-variant-in]=\"floatLabel() && floatLabelVariant() === 'in'\"\n  [class.float-variant-over]=\"floatLabel() && floatLabelVariant() === 'over'\"\n  [class.floating-active]=\"hasSelectedValue() || overlayVisible()\"\n  [class.dropup]=\"isDropup()\"\n  [class.dropdown-up]=\"isDropup()\"\n  [class.w-100]=\"fluid()\"\n  [attr.dir]=\"dir() || null\"\n  [ngStyle]=\"style()\"\n  [ngClass]=\"styleClass()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <!-- Select Trigger Box -->\n  <div\n    class=\"form-select d-flex align-items-center justify-content-between\"\n    [class.is-invalid]=\"invalid()\"\n    [class.disabled]=\"disabled()\"\n    [class.form-select-sm]=\"size() === 'small'\"\n    [class.form-select-lg]=\"size() === 'large'\"\n    [class.bg-light]=\"variant() === 'filled'\"\n    [attr.id]=\"id()\"\n    [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-expanded]=\"overlayVisible()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    role=\"combobox\"\n    (click)=\"onTriggerClick($event)\"\n    (focus)=\"onTriggerFocus($event)\"\n    (blur)=\"onTriggerBlur($event)\"\n  >\n    <!-- Selected Value / Input / Chips Area -->\n    <span class=\"text-truncate flex-grow-1 me-2 d-flex flex-wrap align-items-center gap-1\">\n      <!-- Filter directly in Trigger Box -->\n      @if (filterInTrigger()) {\n        <!-- Chips in multiple mode when filterInTrigger is active -->\n        @if (multiple() && display() === 'chip' && hasSelectedValue()) {\n          @for (val of value(); track val) {\n            <span\n              class=\"badge bg-light text-dark border d-inline-flex align-items-center gap-1 py-1 px-2\"\n            >\n              @if (chipTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    chipTemplate;\n                    context: { $implicit: findOptionByValue(val) ?? val, value: val }\n                  \"\n                ></ng-container>\n              } @else {\n                <span>{{ resolveOptionLabelByValue(val) }}</span>\n              }\n              @if (!disabled() && !readonly()) {\n                <i\n                  class=\"bi bi-x ms-1 cursor-pointer fw-bold\"\n                  (click)=\"removeChip(val, $event)\"\n                ></i>\n              }\n            </span>\n          }\n        }\n        <!-- Search Filter Input embedded inside the trigger -->\n        <input\n          #triggerFilterInput\n          type=\"text\"\n          class=\"form-control border-0 bg-transparent p-0 shadow-none flex-grow-1\"\n          style=\"min-width: 80px\"\n          [class.form-control-sm]=\"size() === 'small'\"\n          [class.form-control-lg]=\"size() === 'large'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          [value]=\"effectiveFilterValue()\"\n          [placeholder]=\"\n            multiple() && hasSelectedValue()\n              ? ''\n              : hasSelectedValue() && !overlayVisible()\n                ? getDisplayLabel()\n                : effectiveSearchPlaceholder()\n          \"\n          (input)=\"onFilterChange($event)\"\n          (keydown)=\"onFilterKeydown($event)\"\n          (focus)=\"openOverlay($event)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      } @else {\n        <!-- Editable Input (Single mode only) -->\n        @if (editable() && !multiple()) {\n          <input\n            #editableInput\n            type=\"text\"\n            class=\"form-control border-0 bg-transparent p-0 shadow-none\"\n            [class.form-control-sm]=\"size() === 'small'\"\n            [class.form-control-lg]=\"size() === 'large'\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [attr.maxlength]=\"maxLength()\"\n            [value]=\"getDisplayLabel()\"\n            [placeholder]=\"placeholder() || ''\"\n            (input)=\"onEditableInput($event)\"\n            (focus)=\"onEditableFocus($event)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        } @else {\n          <!-- Multi-Select Chips Display Mode -->\n          @if (multiple() && display() === 'chip' && hasSelectedValue()) {\n            @for (val of value(); track val) {\n              <span\n                class=\"badge bg-light text-dark border d-inline-flex align-items-center gap-1 py-1 px-2\"\n              >\n                @if (chipTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      chipTemplate;\n                      context: { $implicit: findOptionByValue(val) ?? val, value: val }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <span>{{ resolveOptionLabelByValue(val) }}</span>\n                }\n                @if (!disabled() && !readonly()) {\n                  <i\n                    class=\"bi bi-x ms-1 cursor-pointer fw-bold\"\n                    (click)=\"removeChip(val, $event)\"\n                  ></i>\n                }\n              </span>\n            }\n          } @else {\n            @if (hasSelectedValue()) {\n              @if (selectedItemTemplate || labelTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    selectedItemTemplate || labelTemplate;\n                    context: { $implicit: findOptionByValue(value()) ?? value(), value: value() }\n                  \"\n                ></ng-container>\n              } @else {\n                <span>{{ getDisplayLabel() }}</span>\n              }\n            } @else {\n              <span class=\"text-muted\">{{ floatLabel() ? '' : placeholder() || '' }}</span>\n            }\n          }\n          <!-- Standard Single or Comma Multi-Select Text -->\n        }\n      }\n    </span>\n\n    <!-- Icons & Spinners Area -->\n    <div class=\"d-flex align-items-center flex-shrink-0 gap-1 ms-auto\">\n      <!-- Clear Icon -->\n      @if (showClear() && hasSelectedValue() && !disabled() && !readonly()) {\n        <span\n          class=\"ngb-select-clear-icon text-muted me-1\"\n          (click)=\"onClearClick($event)\"\n          title=\"Clear\"\n          tabindex=\"0\"\n          role=\"button\"\n          aria-label=\"Clear value\"\n        >\n          @if (clearIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n          } @else {\n            <i class=\"bi bi-x-circle-fill\"></i>\n          }\n        </span>\n      }\n\n      <!-- Loading Spinner -->\n      @if (loading()) {\n        <div class=\"spinner-border spinner-border-sm text-secondary\" role=\"status\">\n          <span class=\"visually-hidden\">Loading...</span>\n        </div>\n      }\n\n      <!-- Dropdown Caret Icon -->\n      @if (!loading()) {\n        <span class=\"ngb-select-dropdown-icon text-secondary\">\n          @if (dropdownIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-container>\n          } @else {\n            <i class=\"bi bi-chevron-down\" [class.rotate-180]=\"overlayVisible()\"></i>\n          }\n        </span>\n      }\n    </div>\n  </div>\n\n  <!-- Float Label Support -->\n  @if (floatLabel() && placeholder()) {\n    <label [attr.for]=\"id()\">{{ placeholder() }}</label>\n  }\n\n  <ng-template #dropdownContent>\n    <!-- Header Template -->\n    @if (headerTemplate) {\n      <div class=\"p-2 border-bottom\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </div>\n    }\n\n    <!-- Header: Select All Checkbox & Search / Filter Box -->\n    @if ((filter() && !filterInTrigger()) || (multiple() && showSelectAll())) {\n      <div class=\"p-2 border-bottom bg-light bg-opacity-50\">\n        <!-- Select All Checkbox -->\n        @if (multiple() && showSelectAll()) {\n          <div class=\"d-flex align-items-center mb-2 px-1\">\n            <input\n              type=\"checkbox\"\n              class=\"form-check-input me-2 mt-0 cursor-pointer\"\n              [checked]=\"selectAll()\"\n              (change)=\"toggleSelectAll($event)\"\n              id=\"selectAllCheckbox\"\n            />\n            <label\n              class=\"form-check-label small fw-semibold cursor-pointer user-select-none\"\n              for=\"selectAllCheckbox\"\n            >\n              @if (headerCheckboxTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"headerCheckboxTemplate; context: { $implicit: selectAll() }\"\n                ></ng-container>\n              } @else {\n                Select All\n              }\n            </label>\n          </div>\n        }\n        <!-- Search Box -->\n        @if (filter() && !filterInTrigger()) {\n          <div class=\"input-group input-group-sm\">\n            <span class=\"input-group-text bg-transparent border-end-0\">\n              @if (filterIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\n              } @else {\n                <i class=\"bi bi-search text-muted\"></i>\n              }\n            </span>\n            <input\n              #filterInput\n              type=\"text\"\n              class=\"form-control border-start-0\"\n              [placeholder]=\"effectiveSearchPlaceholder()\"\n              [value]=\"filterValue()\"\n              (input)=\"onFilterChange($event)\"\n              (keydown)=\"onFilterKeydown($event)\"\n            />\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Grouped Options Mode -->\n    @if (group()) {\n      @for (groupOption of filteredOptions(); track groupOption) {\n        <div>\n          <!-- Group Header -->\n          <h6\n            class=\"dropdown-header text-muted py-2 px-3 m-0 bg-light bg-opacity-75 d-flex align-items-center\"\n          >\n            @if (groupTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"groupTemplate; context: { $implicit: groupOption }\"\n              ></ng-container>\n            } @else {\n              {{ resolveOptionGroupLabel(groupOption) }}\n            }\n          </h6>\n          <!-- Group Items -->\n          @for (option of resolveOptionGroupChildren(groupOption); track option) {\n            <button\n              type=\"button\"\n              class=\"dropdown-item d-flex align-items-center py-2 px-3\"\n              [class.active]=\"!multiple() && isSelected(option)\"\n              [class.bg-light]=\"multiple() && isSelected(option)\"\n              [class.fw-semibold]=\"multiple() && isSelected(option)\"\n              [class.focus]=\"isOptionFocused(option)\"\n              [class.bg-body-secondary]=\"isOptionFocused(option) && !isSelected(option)\"\n              [class.disabled]=\"isOptionDisabled(option)\"\n              [disabled]=\"isOptionDisabled(option)\"\n              role=\"option\"\n              [attr.aria-selected]=\"isSelected(option)\"\n              [attr.aria-checked]=\"multiple() ? isSelected(option) : null\"\n              (click)=\"onOptionClick(option, $event)\"\n            >\n              <!-- Checkbox in Multiple Mode synced to selection -->\n              @if (multiple()) {\n                <input\n                  type=\"checkbox\"\n                  class=\"form-check-input me-2 mt-0\"\n                  style=\"pointer-events: none\"\n                  [checked]=\"isSelected(option)\"\n                  tabindex=\"-1\"\n                />\n              }\n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option }\"\n                ></ng-container>\n              } @else {\n                <span>{{ resolveOptionLabel(option) }}</span>\n              }\n            </button>\n          }\n        </div>\n      }\n    } @else {\n      @for (option of filteredOptions(); track option; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"dropdown-item d-flex align-items-center py-2 px-3\"\n          [class.active]=\"!multiple() && isSelected(option)\"\n          [class.bg-light]=\"multiple() && isSelected(option)\"\n          [class.fw-semibold]=\"multiple() && isSelected(option)\"\n          [class.focus]=\"isOptionFocused(option)\"\n          [class.bg-body-secondary]=\"isOptionFocused(option) && !isSelected(option)\"\n          [class.disabled]=\"isOptionDisabled(option)\"\n          [disabled]=\"isOptionDisabled(option)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-checked]=\"multiple() ? isSelected(option) : null\"\n          (click)=\"onOptionClick(option, $event)\"\n        >\n          <!-- Checkbox in Multiple Mode synced to selection -->\n          @if (multiple()) {\n            <input\n              type=\"checkbox\"\n              class=\"form-check-input me-2 mt-0\"\n              style=\"pointer-events: none\"\n              [checked]=\"isSelected(option)\"\n              tabindex=\"-1\"\n            />\n          }\n          @if (itemTemplate) {\n            <ng-container\n              *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option }\"\n            ></ng-container>\n          } @else {\n            <span>{{ resolveOptionLabel(option) }}</span>\n          }\n        </button>\n      }\n    }\n\n    <!-- Empty State Message -->\n    @if (isOptionsEmpty()) {\n      <div class=\"dropdown-item text-muted text-center py-3\">\n        @if (emptyTemplate) {\n          <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        } @else {\n          <small>{{\n            filterValue()\n              ? emptyFilterMessage() || 'No results found'\n              : emptyMessage() || 'No results found'\n          }}</small>\n        }\n      </div>\n    }\n  </ng-template>\n\n  @if (isModalMode()) {\n    <!-- Bootstrap Modal Overlay -->\n    @if (overlayVisible()) {\n      <div\n        class=\"modal fade show d-block\"\n        tabindex=\"-1\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        style=\"background-color: rgba(0, 0, 0, 0.45); z-index: 1075\"\n        (click)=\"closeOverlay($event)\"\n      >\n        <div\n          class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n          role=\"document\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <div class=\"modal-content shadow\" [ngClass]=\"panelStyleClass()\" [ngStyle]=\"panelStyle()\">\n            <!-- Modal Header -->\n            <div class=\"modal-header bg-light bg-opacity-50 py-2 px-3\">\n              <h6 class=\"modal-title m-0 fw-semibold text-truncate\">{{ effectivePopupTitle() }}</h6>\n              <button\n                type=\"button\"\n                class=\"btn-close\"\n                aria-label=\"Close\"\n                (click)=\"closeOverlay($event)\"\n              ></button>\n            </div>\n\n            <!-- Modal Body (Options Content) -->\n            <div\n              class=\"modal-body p-0\"\n              #dropdownMenu\n              role=\"listbox\"\n              (scroll)=\"onOverlayScroll($event)\"\n            >\n              <ng-container *ngTemplateOutlet=\"dropdownContent\"></ng-container>\n            </div>\n\n            <!-- Modal Footer (Custom Template or Done Button) -->\n            @if (footerTemplate || multiple()) {\n              <div\n                class=\"modal-footer p-2 bg-light bg-opacity-50 d-flex align-items-center justify-content-end\"\n              >\n                @if (footerTemplate) {\n                  <div class=\"w-100\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                  </div>\n                } @else {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-primary px-3\"\n                    (click)=\"closeOverlay($event)\"\n                  >\n                    Done\n                  </button>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    <!-- Standard Dropdown Menu -->\n    <div\n      #dropdownMenu\n      class=\"dropdown-menu shadow-sm p-0\"\n      [class.show]=\"overlayVisible()\"\n      [ngStyle]=\"panelStyle()\"\n      [ngClass]=\"panelStyleClass()\"\n      [style.max-height]=\"scrollHeight()\"\n      style=\"overflow-y: auto\"\n      role=\"listbox\"\n      (scroll)=\"onOverlayScroll($event)\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <ng-container *ngTemplateOutlet=\"dropdownContent\"></ng-container>\n\n      <!-- Footer Template -->\n      @if (footerTemplate) {\n        <div class=\"p-2 border-top\">\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}:host.inline{display:inline-block;width:auto}.ngb-select-container{position:relative;-webkit-user-select:none;user-select:none;width:100%}.ngb-select-container .form-select{cursor:pointer;min-height:38px;background-image:none;padding-right:.75rem;padding-left:.75rem}.ngb-select-container .form-select.form-select-sm{min-height:31px;padding-right:.5rem;padding-left:.5rem}.ngb-select-container .form-select.form-select-lg{min-height:48px;padding-right:1rem;padding-left:1rem}.ngb-select-container .form-select.disabled,.ngb-select-container .form-select:disabled{cursor:not-allowed;background-color:var(--bs-secondary-bg);opacity:.65}.ngb-select-container.form-floating{display:block;width:100%;position:relative}.ngb-select-container.form-floating.float-variant-on,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over){margin-top:.35rem}.ngb-select-container.form-floating.float-variant-on .form-select,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over) .form-select{min-height:38px;height:auto;padding:.375rem .75rem;align-items:center}.ngb-select-container.form-floating.float-variant-on .form-select.form-select-sm,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over) .form-select.form-select-sm{min-height:31px;padding-top:.25rem;padding-bottom:.25rem}.ngb-select-container.form-floating.float-variant-on .form-select.form-select-lg,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over) .form-select.form-select-lg{min-height:48px;padding-top:.5rem;padding-bottom:.5rem}.ngb-select-container.form-floating.float-variant-on>label,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over)>label{position:absolute;top:50%;left:.75rem;transform:translateY(-50%);height:auto;padding:0 .35rem;margin:0;line-height:1;font-size:.95rem;color:var(--bs-secondary-color);pointer-events:none;border-radius:var(--bs-border-radius);background-color:transparent;transform-origin:left center;transition:transform .2s cubic-bezier(.25,.8,.25,1),top .2s cubic-bezier(.25,.8,.25,1),color .2s ease-in-out,background-color .2s ease-in-out;z-index:5}.ngb-select-container.form-floating.float-variant-on.floating-active>label,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over).floating-active>label{top:0;transform:translateY(-50%) scale(.85);background-color:var(--bs-body-bg);color:var(--bs-primary);font-weight:600}.ngb-select-container.form-floating.float-variant-in .form-select{height:calc(3.5rem + 2px);min-height:calc(3.5rem + 2px);padding:1.625rem .75rem .5rem;align-items:flex-end}.ngb-select-container.form-floating.float-variant-in>label{position:absolute;top:0;left:0;z-index:2;height:100%;padding:1rem .75rem;overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:var(--bs-border-width) solid transparent;transform-origin:0 0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,color .15s ease-in-out;color:rgba(var(--bs-body-color-rgb),.65);transform:scale(1) translateY(0)}.ngb-select-container.form-floating.float-variant-in.floating-active>label{transform:scale(.85) translateY(-.65rem) translate(.15rem);color:var(--bs-primary);font-weight:500}.ngb-select-container.form-floating.float-variant-over{margin-top:1.25rem}.ngb-select-container.form-floating.float-variant-over .form-select{min-height:38px;height:auto;padding:.375rem .75rem;align-items:center}.ngb-select-container.form-floating.float-variant-over .form-select.form-select-sm{min-height:31px}.ngb-select-container.form-floating.float-variant-over .form-select.form-select-lg{min-height:48px}.ngb-select-container.form-floating.float-variant-over>label{position:absolute;top:50%;left:.75rem;transform:translateY(-50%);height:auto;padding:0;margin:0;line-height:1;font-size:.95rem;color:var(--bs-secondary-color);pointer-events:none;transform-origin:left center;transition:transform .2s cubic-bezier(.25,.8,.25,1),top .2s cubic-bezier(.25,.8,.25,1),color .2s ease-in-out;z-index:5}.ngb-select-container.form-floating.float-variant-over.floating-active>label{top:-.75rem;transform:scale(.85);color:var(--bs-primary);font-weight:600}.ngb-select-container .ngb-select-clear-icon,.ngb-select-container .ngb-select-dropdown-icon{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:.875rem}.ngb-select-container .ngb-select-clear-icon i,.ngb-select-container .ngb-select-dropdown-icon i{transition:transform .2s ease-in-out}.ngb-select-container .ngb-select-clear-icon i.rotate-180,.ngb-select-container .ngb-select-dropdown-icon i.rotate-180{transform:rotate(180deg)}.ngb-select-container .ngb-select-clear-icon{opacity:.6;transition:opacity .15s ease}.ngb-select-container .ngb-select-clear-icon:hover{opacity:1}.ngb-select-container.dropup .dropdown-menu,.ngb-select-container.dropdown-up .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropdown-menu{top:100%;left:0;width:100%;min-width:100%;margin-top:.125rem;z-index:1060;box-sizing:border-box;text-align:inherit}.dropdown-menu .dropdown-item{cursor:pointer;white-space:normal;word-break:break-word;text-align:inherit}.dropdown-menu .dropdown-item.disabled,.dropdown-menu .dropdown-item:disabled{cursor:not-allowed;opacity:.5}.dropdown-menu .dropdown-item.focus,.dropdown-menu .dropdown-item.focused,.dropdown-menu .dropdown-item:focus{color:var(--bs-dropdown-link-hover-color, inherit);background-color:var(--bs-dropdown-link-hover-bg, var(--bs-tertiary-bg))!important}.dropdown-menu .dropdown-item.active{color:var(--bs-dropdown-link-active-color)!important;background-color:var(--bs-dropdown-link-active-bg)!important}.dropdown-menu .dropdown-header{font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em;text-align:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.21", ngImport: i0, type: NgbSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngb-select', standalone: true, imports: [CommonModule, FormsModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NgbSelectComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  class=\"ngb-select-container position-relative\"\n  [class.form-floating]=\"floatLabel()\"\n  [class.float-variant-on]=\"floatLabel() && floatLabelVariant() === 'on'\"\n  [class.float-variant-in]=\"floatLabel() && floatLabelVariant() === 'in'\"\n  [class.float-variant-over]=\"floatLabel() && floatLabelVariant() === 'over'\"\n  [class.floating-active]=\"hasSelectedValue() || overlayVisible()\"\n  [class.dropup]=\"isDropup()\"\n  [class.dropdown-up]=\"isDropup()\"\n  [class.w-100]=\"fluid()\"\n  [attr.dir]=\"dir() || null\"\n  [ngStyle]=\"style()\"\n  [ngClass]=\"styleClass()\"\n  (keydown)=\"onKeydown($event)\"\n>\n  <!-- Select Trigger Box -->\n  <div\n    class=\"form-select d-flex align-items-center justify-content-between\"\n    [class.is-invalid]=\"invalid()\"\n    [class.disabled]=\"disabled()\"\n    [class.form-select-sm]=\"size() === 'small'\"\n    [class.form-select-lg]=\"size() === 'large'\"\n    [class.bg-light]=\"variant() === 'filled'\"\n    [attr.id]=\"id()\"\n    [attr.tabindex]=\"disabled() ? -1 : tabindex()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.aria-labelledby]=\"ariaLabelledBy()\"\n    [attr.aria-expanded]=\"overlayVisible()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    role=\"combobox\"\n    (click)=\"onTriggerClick($event)\"\n    (focus)=\"onTriggerFocus($event)\"\n    (blur)=\"onTriggerBlur($event)\"\n  >\n    <!-- Selected Value / Input / Chips Area -->\n    <span class=\"text-truncate flex-grow-1 me-2 d-flex flex-wrap align-items-center gap-1\">\n      <!-- Filter directly in Trigger Box -->\n      @if (filterInTrigger()) {\n        <!-- Chips in multiple mode when filterInTrigger is active -->\n        @if (multiple() && display() === 'chip' && hasSelectedValue()) {\n          @for (val of value(); track val) {\n            <span\n              class=\"badge bg-light text-dark border d-inline-flex align-items-center gap-1 py-1 px-2\"\n            >\n              @if (chipTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    chipTemplate;\n                    context: { $implicit: findOptionByValue(val) ?? val, value: val }\n                  \"\n                ></ng-container>\n              } @else {\n                <span>{{ resolveOptionLabelByValue(val) }}</span>\n              }\n              @if (!disabled() && !readonly()) {\n                <i\n                  class=\"bi bi-x ms-1 cursor-pointer fw-bold\"\n                  (click)=\"removeChip(val, $event)\"\n                ></i>\n              }\n            </span>\n          }\n        }\n        <!-- Search Filter Input embedded inside the trigger -->\n        <input\n          #triggerFilterInput\n          type=\"text\"\n          class=\"form-control border-0 bg-transparent p-0 shadow-none flex-grow-1\"\n          style=\"min-width: 80px\"\n          [class.form-control-sm]=\"size() === 'small'\"\n          [class.form-control-lg]=\"size() === 'large'\"\n          [disabled]=\"disabled()\"\n          [readonly]=\"readonly()\"\n          [value]=\"effectiveFilterValue()\"\n          [placeholder]=\"\n            multiple() && hasSelectedValue()\n              ? ''\n              : hasSelectedValue() && !overlayVisible()\n                ? getDisplayLabel()\n                : effectiveSearchPlaceholder()\n          \"\n          (input)=\"onFilterChange($event)\"\n          (keydown)=\"onFilterKeydown($event)\"\n          (focus)=\"openOverlay($event)\"\n          (click)=\"$event.stopPropagation()\"\n        />\n      } @else {\n        <!-- Editable Input (Single mode only) -->\n        @if (editable() && !multiple()) {\n          <input\n            #editableInput\n            type=\"text\"\n            class=\"form-control border-0 bg-transparent p-0 shadow-none\"\n            [class.form-control-sm]=\"size() === 'small'\"\n            [class.form-control-lg]=\"size() === 'large'\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [attr.maxlength]=\"maxLength()\"\n            [value]=\"getDisplayLabel()\"\n            [placeholder]=\"placeholder() || ''\"\n            (input)=\"onEditableInput($event)\"\n            (focus)=\"onEditableFocus($event)\"\n            (click)=\"$event.stopPropagation()\"\n          />\n        } @else {\n          <!-- Multi-Select Chips Display Mode -->\n          @if (multiple() && display() === 'chip' && hasSelectedValue()) {\n            @for (val of value(); track val) {\n              <span\n                class=\"badge bg-light text-dark border d-inline-flex align-items-center gap-1 py-1 px-2\"\n              >\n                @if (chipTemplate) {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      chipTemplate;\n                      context: { $implicit: findOptionByValue(val) ?? val, value: val }\n                    \"\n                  ></ng-container>\n                } @else {\n                  <span>{{ resolveOptionLabelByValue(val) }}</span>\n                }\n                @if (!disabled() && !readonly()) {\n                  <i\n                    class=\"bi bi-x ms-1 cursor-pointer fw-bold\"\n                    (click)=\"removeChip(val, $event)\"\n                  ></i>\n                }\n              </span>\n            }\n          } @else {\n            @if (hasSelectedValue()) {\n              @if (selectedItemTemplate || labelTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    selectedItemTemplate || labelTemplate;\n                    context: { $implicit: findOptionByValue(value()) ?? value(), value: value() }\n                  \"\n                ></ng-container>\n              } @else {\n                <span>{{ getDisplayLabel() }}</span>\n              }\n            } @else {\n              <span class=\"text-muted\">{{ floatLabel() ? '' : placeholder() || '' }}</span>\n            }\n          }\n          <!-- Standard Single or Comma Multi-Select Text -->\n        }\n      }\n    </span>\n\n    <!-- Icons & Spinners Area -->\n    <div class=\"d-flex align-items-center flex-shrink-0 gap-1 ms-auto\">\n      <!-- Clear Icon -->\n      @if (showClear() && hasSelectedValue() && !disabled() && !readonly()) {\n        <span\n          class=\"ngb-select-clear-icon text-muted me-1\"\n          (click)=\"onClearClick($event)\"\n          title=\"Clear\"\n          tabindex=\"0\"\n          role=\"button\"\n          aria-label=\"Clear value\"\n        >\n          @if (clearIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"clearIconTemplate\"></ng-container>\n          } @else {\n            <i class=\"bi bi-x-circle-fill\"></i>\n          }\n        </span>\n      }\n\n      <!-- Loading Spinner -->\n      @if (loading()) {\n        <div class=\"spinner-border spinner-border-sm text-secondary\" role=\"status\">\n          <span class=\"visually-hidden\">Loading...</span>\n        </div>\n      }\n\n      <!-- Dropdown Caret Icon -->\n      @if (!loading()) {\n        <span class=\"ngb-select-dropdown-icon text-secondary\">\n          @if (dropdownIconTemplate) {\n            <ng-container *ngTemplateOutlet=\"dropdownIconTemplate\"></ng-container>\n          } @else {\n            <i class=\"bi bi-chevron-down\" [class.rotate-180]=\"overlayVisible()\"></i>\n          }\n        </span>\n      }\n    </div>\n  </div>\n\n  <!-- Float Label Support -->\n  @if (floatLabel() && placeholder()) {\n    <label [attr.for]=\"id()\">{{ placeholder() }}</label>\n  }\n\n  <ng-template #dropdownContent>\n    <!-- Header Template -->\n    @if (headerTemplate) {\n      <div class=\"p-2 border-bottom\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </div>\n    }\n\n    <!-- Header: Select All Checkbox & Search / Filter Box -->\n    @if ((filter() && !filterInTrigger()) || (multiple() && showSelectAll())) {\n      <div class=\"p-2 border-bottom bg-light bg-opacity-50\">\n        <!-- Select All Checkbox -->\n        @if (multiple() && showSelectAll()) {\n          <div class=\"d-flex align-items-center mb-2 px-1\">\n            <input\n              type=\"checkbox\"\n              class=\"form-check-input me-2 mt-0 cursor-pointer\"\n              [checked]=\"selectAll()\"\n              (change)=\"toggleSelectAll($event)\"\n              id=\"selectAllCheckbox\"\n            />\n            <label\n              class=\"form-check-label small fw-semibold cursor-pointer user-select-none\"\n              for=\"selectAllCheckbox\"\n            >\n              @if (headerCheckboxTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"headerCheckboxTemplate; context: { $implicit: selectAll() }\"\n                ></ng-container>\n              } @else {\n                Select All\n              }\n            </label>\n          </div>\n        }\n        <!-- Search Box -->\n        @if (filter() && !filterInTrigger()) {\n          <div class=\"input-group input-group-sm\">\n            <span class=\"input-group-text bg-transparent border-end-0\">\n              @if (filterIconTemplate) {\n                <ng-container *ngTemplateOutlet=\"filterIconTemplate\"></ng-container>\n              } @else {\n                <i class=\"bi bi-search text-muted\"></i>\n              }\n            </span>\n            <input\n              #filterInput\n              type=\"text\"\n              class=\"form-control border-start-0\"\n              [placeholder]=\"effectiveSearchPlaceholder()\"\n              [value]=\"filterValue()\"\n              (input)=\"onFilterChange($event)\"\n              (keydown)=\"onFilterKeydown($event)\"\n            />\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Grouped Options Mode -->\n    @if (group()) {\n      @for (groupOption of filteredOptions(); track groupOption) {\n        <div>\n          <!-- Group Header -->\n          <h6\n            class=\"dropdown-header text-muted py-2 px-3 m-0 bg-light bg-opacity-75 d-flex align-items-center\"\n          >\n            @if (groupTemplate) {\n              <ng-container\n                *ngTemplateOutlet=\"groupTemplate; context: { $implicit: groupOption }\"\n              ></ng-container>\n            } @else {\n              {{ resolveOptionGroupLabel(groupOption) }}\n            }\n          </h6>\n          <!-- Group Items -->\n          @for (option of resolveOptionGroupChildren(groupOption); track option) {\n            <button\n              type=\"button\"\n              class=\"dropdown-item d-flex align-items-center py-2 px-3\"\n              [class.active]=\"!multiple() && isSelected(option)\"\n              [class.bg-light]=\"multiple() && isSelected(option)\"\n              [class.fw-semibold]=\"multiple() && isSelected(option)\"\n              [class.focus]=\"isOptionFocused(option)\"\n              [class.bg-body-secondary]=\"isOptionFocused(option) && !isSelected(option)\"\n              [class.disabled]=\"isOptionDisabled(option)\"\n              [disabled]=\"isOptionDisabled(option)\"\n              role=\"option\"\n              [attr.aria-selected]=\"isSelected(option)\"\n              [attr.aria-checked]=\"multiple() ? isSelected(option) : null\"\n              (click)=\"onOptionClick(option, $event)\"\n            >\n              <!-- Checkbox in Multiple Mode synced to selection -->\n              @if (multiple()) {\n                <input\n                  type=\"checkbox\"\n                  class=\"form-check-input me-2 mt-0\"\n                  style=\"pointer-events: none\"\n                  [checked]=\"isSelected(option)\"\n                  tabindex=\"-1\"\n                />\n              }\n              @if (itemTemplate) {\n                <ng-container\n                  *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option }\"\n                ></ng-container>\n              } @else {\n                <span>{{ resolveOptionLabel(option) }}</span>\n              }\n            </button>\n          }\n        </div>\n      }\n    } @else {\n      @for (option of filteredOptions(); track option; let i = $index) {\n        <button\n          type=\"button\"\n          class=\"dropdown-item d-flex align-items-center py-2 px-3\"\n          [class.active]=\"!multiple() && isSelected(option)\"\n          [class.bg-light]=\"multiple() && isSelected(option)\"\n          [class.fw-semibold]=\"multiple() && isSelected(option)\"\n          [class.focus]=\"isOptionFocused(option)\"\n          [class.bg-body-secondary]=\"isOptionFocused(option) && !isSelected(option)\"\n          [class.disabled]=\"isOptionDisabled(option)\"\n          [disabled]=\"isOptionDisabled(option)\"\n          role=\"option\"\n          [attr.aria-selected]=\"isSelected(option)\"\n          [attr.aria-checked]=\"multiple() ? isSelected(option) : null\"\n          (click)=\"onOptionClick(option, $event)\"\n        >\n          <!-- Checkbox in Multiple Mode synced to selection -->\n          @if (multiple()) {\n            <input\n              type=\"checkbox\"\n              class=\"form-check-input me-2 mt-0\"\n              style=\"pointer-events: none\"\n              [checked]=\"isSelected(option)\"\n              tabindex=\"-1\"\n            />\n          }\n          @if (itemTemplate) {\n            <ng-container\n              *ngTemplateOutlet=\"itemTemplate; context: { $implicit: option }\"\n            ></ng-container>\n          } @else {\n            <span>{{ resolveOptionLabel(option) }}</span>\n          }\n        </button>\n      }\n    }\n\n    <!-- Empty State Message -->\n    @if (isOptionsEmpty()) {\n      <div class=\"dropdown-item text-muted text-center py-3\">\n        @if (emptyTemplate) {\n          <ng-container *ngTemplateOutlet=\"emptyTemplate\"></ng-container>\n        } @else {\n          <small>{{\n            filterValue()\n              ? emptyFilterMessage() || 'No results found'\n              : emptyMessage() || 'No results found'\n          }}</small>\n        }\n      </div>\n    }\n  </ng-template>\n\n  @if (isModalMode()) {\n    <!-- Bootstrap Modal Overlay -->\n    @if (overlayVisible()) {\n      <div\n        class=\"modal fade show d-block\"\n        tabindex=\"-1\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        style=\"background-color: rgba(0, 0, 0, 0.45); z-index: 1075\"\n        (click)=\"closeOverlay($event)\"\n      >\n        <div\n          class=\"modal-dialog modal-dialog-centered modal-dialog-scrollable\"\n          role=\"document\"\n          (click)=\"$event.stopPropagation()\"\n        >\n          <div class=\"modal-content shadow\" [ngClass]=\"panelStyleClass()\" [ngStyle]=\"panelStyle()\">\n            <!-- Modal Header -->\n            <div class=\"modal-header bg-light bg-opacity-50 py-2 px-3\">\n              <h6 class=\"modal-title m-0 fw-semibold text-truncate\">{{ effectivePopupTitle() }}</h6>\n              <button\n                type=\"button\"\n                class=\"btn-close\"\n                aria-label=\"Close\"\n                (click)=\"closeOverlay($event)\"\n              ></button>\n            </div>\n\n            <!-- Modal Body (Options Content) -->\n            <div\n              class=\"modal-body p-0\"\n              #dropdownMenu\n              role=\"listbox\"\n              (scroll)=\"onOverlayScroll($event)\"\n            >\n              <ng-container *ngTemplateOutlet=\"dropdownContent\"></ng-container>\n            </div>\n\n            <!-- Modal Footer (Custom Template or Done Button) -->\n            @if (footerTemplate || multiple()) {\n              <div\n                class=\"modal-footer p-2 bg-light bg-opacity-50 d-flex align-items-center justify-content-end\"\n              >\n                @if (footerTemplate) {\n                  <div class=\"w-100\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                  </div>\n                } @else {\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-primary px-3\"\n                    (click)=\"closeOverlay($event)\"\n                  >\n                    Done\n                  </button>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    }\n  } @else {\n    <!-- Standard Dropdown Menu -->\n    <div\n      #dropdownMenu\n      class=\"dropdown-menu shadow-sm p-0\"\n      [class.show]=\"overlayVisible()\"\n      [ngStyle]=\"panelStyle()\"\n      [ngClass]=\"panelStyleClass()\"\n      [style.max-height]=\"scrollHeight()\"\n      style=\"overflow-y: auto\"\n      role=\"listbox\"\n      (scroll)=\"onOverlayScroll($event)\"\n      (click)=\"$event.stopPropagation()\"\n    >\n      <ng-container *ngTemplateOutlet=\"dropdownContent\"></ng-container>\n\n      <!-- Footer Template -->\n      @if (footerTemplate) {\n        <div class=\"p-2 border-top\">\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block;width:100%}:host.inline{display:inline-block;width:auto}.ngb-select-container{position:relative;-webkit-user-select:none;user-select:none;width:100%}.ngb-select-container .form-select{cursor:pointer;min-height:38px;background-image:none;padding-right:.75rem;padding-left:.75rem}.ngb-select-container .form-select.form-select-sm{min-height:31px;padding-right:.5rem;padding-left:.5rem}.ngb-select-container .form-select.form-select-lg{min-height:48px;padding-right:1rem;padding-left:1rem}.ngb-select-container .form-select.disabled,.ngb-select-container .form-select:disabled{cursor:not-allowed;background-color:var(--bs-secondary-bg);opacity:.65}.ngb-select-container.form-floating{display:block;width:100%;position:relative}.ngb-select-container.form-floating.float-variant-on,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over){margin-top:.35rem}.ngb-select-container.form-floating.float-variant-on .form-select,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over) .form-select{min-height:38px;height:auto;padding:.375rem .75rem;align-items:center}.ngb-select-container.form-floating.float-variant-on .form-select.form-select-sm,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over) .form-select.form-select-sm{min-height:31px;padding-top:.25rem;padding-bottom:.25rem}.ngb-select-container.form-floating.float-variant-on .form-select.form-select-lg,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over) .form-select.form-select-lg{min-height:48px;padding-top:.5rem;padding-bottom:.5rem}.ngb-select-container.form-floating.float-variant-on>label,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over)>label{position:absolute;top:50%;left:.75rem;transform:translateY(-50%);height:auto;padding:0 .35rem;margin:0;line-height:1;font-size:.95rem;color:var(--bs-secondary-color);pointer-events:none;border-radius:var(--bs-border-radius);background-color:transparent;transform-origin:left center;transition:transform .2s cubic-bezier(.25,.8,.25,1),top .2s cubic-bezier(.25,.8,.25,1),color .2s ease-in-out,background-color .2s ease-in-out;z-index:5}.ngb-select-container.form-floating.float-variant-on.floating-active>label,.ngb-select-container.form-floating:not(.float-variant-in):not(.float-variant-over).floating-active>label{top:0;transform:translateY(-50%) scale(.85);background-color:var(--bs-body-bg);color:var(--bs-primary);font-weight:600}.ngb-select-container.form-floating.float-variant-in .form-select{height:calc(3.5rem + 2px);min-height:calc(3.5rem + 2px);padding:1.625rem .75rem .5rem;align-items:flex-end}.ngb-select-container.form-floating.float-variant-in>label{position:absolute;top:0;left:0;z-index:2;height:100%;padding:1rem .75rem;overflow:hidden;text-align:start;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;border:var(--bs-border-width) solid transparent;transform-origin:0 0;transition:opacity .15s ease-in-out,transform .15s ease-in-out,color .15s ease-in-out;color:rgba(var(--bs-body-color-rgb),.65);transform:scale(1) translateY(0)}.ngb-select-container.form-floating.float-variant-in.floating-active>label{transform:scale(.85) translateY(-.65rem) translate(.15rem);color:var(--bs-primary);font-weight:500}.ngb-select-container.form-floating.float-variant-over{margin-top:1.25rem}.ngb-select-container.form-floating.float-variant-over .form-select{min-height:38px;height:auto;padding:.375rem .75rem;align-items:center}.ngb-select-container.form-floating.float-variant-over .form-select.form-select-sm{min-height:31px}.ngb-select-container.form-floating.float-variant-over .form-select.form-select-lg{min-height:48px}.ngb-select-container.form-floating.float-variant-over>label{position:absolute;top:50%;left:.75rem;transform:translateY(-50%);height:auto;padding:0;margin:0;line-height:1;font-size:.95rem;color:var(--bs-secondary-color);pointer-events:none;transform-origin:left center;transition:transform .2s cubic-bezier(.25,.8,.25,1),top .2s cubic-bezier(.25,.8,.25,1),color .2s ease-in-out;z-index:5}.ngb-select-container.form-floating.float-variant-over.floating-active>label{top:-.75rem;transform:scale(.85);color:var(--bs-primary);font-weight:600}.ngb-select-container .ngb-select-clear-icon,.ngb-select-container .ngb-select-dropdown-icon{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:.875rem}.ngb-select-container .ngb-select-clear-icon i,.ngb-select-container .ngb-select-dropdown-icon i{transition:transform .2s ease-in-out}.ngb-select-container .ngb-select-clear-icon i.rotate-180,.ngb-select-container .ngb-select-dropdown-icon i.rotate-180{transform:rotate(180deg)}.ngb-select-container .ngb-select-clear-icon{opacity:.6;transition:opacity .15s ease}.ngb-select-container .ngb-select-clear-icon:hover{opacity:1}.ngb-select-container.dropup .dropdown-menu,.ngb-select-container.dropdown-up .dropdown-menu{top:auto;bottom:100%;margin-top:0;margin-bottom:.125rem}.dropdown-menu{top:100%;left:0;width:100%;min-width:100%;margin-top:.125rem;z-index:1060;box-sizing:border-box;text-align:inherit}.dropdown-menu .dropdown-item{cursor:pointer;white-space:normal;word-break:break-word;text-align:inherit}.dropdown-menu .dropdown-item.disabled,.dropdown-menu .dropdown-item:disabled{cursor:not-allowed;opacity:.5}.dropdown-menu .dropdown-item.focus,.dropdown-menu .dropdown-item.focused,.dropdown-menu .dropdown-item:focus{color:var(--bs-dropdown-link-hover-color, inherit);background-color:var(--bs-dropdown-link-hover-bg, var(--bs-tertiary-bg))!important}.dropdown-menu .dropdown-item.active{color:var(--bs-dropdown-link-active-color)!important;background-color:var(--bs-dropdown-link-active-bg)!important}.dropdown-menu .dropdown-header{font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em;text-align:inherit}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], optionDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionDisabled", required: false }] }], optionGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupLabel", required: false }] }], optionGroupChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionGroupChildren", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], showSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectAll", required: false }] }], maxSelectedLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelectedLabels", required: false }] }], selectedItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemsLabel", required: false }] }], selectionLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLimit", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterBy", required: false }] }], filterMatchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMatchMode", required: false }] }], filterLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLocale", required: false }] }], filterNormalizeArabic: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterNormalizeArabic", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], filterInTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterInTrigger", required: false }] }], resetFilterOnHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetFilterOnHide", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], emptyFilterMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyFilterMessage", 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 }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], floatLabelVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabelVariant", required: false }] }], autofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autofocus", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], dropdownPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPosition", required: false }] }], dropdownDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownDirection", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], fluid: [{ type: i0.Input, args: [{ isSignal: true, alias: "fluid", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], panelStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyle", required: false }] }], panelStyleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelStyleClass", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], popup: [{ type: i0.Input, args: [{ isSignal: true, alias: "popup", required: false }] }], touchUI: [{ type: i0.Input, args: [{ isSignal: true, alias: "touchUI", required: false }] }], popupTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupTitle", required: false }] }], modalTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalTitle", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], selectOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectOnFocus", required: false }] }], autoOptionFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoOptionFocus", required: false }] }], focusOnOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnOpen", required: false }] }], focusOnOpenStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnOpenStrategy", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], overlayVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlayVisible", required: false }] }, { type: i0.Output, args: ["overlayVisibleChange"] }], onChange: [{ type: i0.Output, args: ["onChange"] }], onFilter: [{ type: i0.Output, args: ["onFilter"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], onSelectAllChange: [{ type: i0.Output, args: ["onSelectAllChange"] }], onRemoveChip: [{ type: i0.Output, args: ["onRemoveChip"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], itemTemplate: [{
+                type: ContentChild,
+                args: ['item']
+            }], selectedItemTemplate: [{
+                type: ContentChild,
+                args: ['selectedItem']
+            }], labelTemplate: [{
+                type: ContentChild,
+                args: ['label']
+            }], chipTemplate: [{
+                type: ContentChild,
+                args: ['chip']
+            }], headerCheckboxTemplate: [{
+                type: ContentChild,
+                args: ['headerCheckbox']
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['header']
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: ['footer']
+            }], groupTemplate: [{
+                type: ContentChild,
+                args: ['group']
+            }], emptyTemplate: [{
+                type: ContentChild,
+                args: ['empty']
+            }], clearIconTemplate: [{
+                type: ContentChild,
+                args: ['clearIcon']
+            }], dropdownIconTemplate: [{
+                type: ContentChild,
+                args: ['dropdownIcon']
+            }], filterIconTemplate: [{
+                type: ContentChild,
+                args: ['filterIcon']
+            }], filterInputElement: [{
+                type: ViewChild,
+                args: ['filterInput']
+            }], triggerFilterInputElement: [{
+                type: ViewChild,
+                args: ['triggerFilterInput']
+            }], editableInputElement: [{
+                type: ViewChild,
+                args: ['editableInput']
+            }], dropdownMenuElement: [{
+                type: ViewChild,
+                args: ['dropdownMenu']
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NGB_SELECT_VERSION, NgbSelectComponent };
+//# sourceMappingURL=amro93-ngb-select.mjs.map