@apexara/ng-components 1.0.6-test.6 → 1.0.6

package/fesm2022/apexara-ng-components-select.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, inject, PLATFORM_ID, HostListener, Output, Input, ViewChild, Component } from '@angular/core';
-import { isPlatformServer, NgClass } from '@angular/common';
+import { EventEmitter, signal, inject, PLATFORM_ID, computed, HostListener, Output, Input, ViewChild, Component } from '@angular/core';
+import { isPlatformServer, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { TouchedChangeEvent, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterLink } from '@angular/router';
@@ -14,7 +14,38 @@ import * as i1 from '@apexara/ng-components/services';
 import { MobileOS } from '@apexara/ng-components/services';
 import { TooltipPosition, ApexTooltipDirective } from '@apexara/ng-components/tooltip';
 
+// Trigger appearance. Default is the standard single-line trigger; Inset moves the
+// field label inside the trigger, stacks it above the value, and swaps the caret for
+// an inline clear (×). Add a new appearance by extending this enum, then giving it its
+// own predicate + overlay block + CSS namespace — existing variants stay closed.
+var ApexSelectVariant;
+(function (ApexSelectVariant) {
+    ApexSelectVariant["Default"] = "default";
+    ApexSelectVariant["Inset"] = "inset";
+})(ApexSelectVariant || (ApexSelectVariant = {}));
 class ApexSelectComponent {
+    static { this.nextA11yId = 0; }
+    // Accessible-name fallback chain: explicit ariaLabel → visible label → placeholder.
+    get ariaLabelValue() {
+        return this.options?.ariaLabel ?? (this.options?.label || this.options?.placeholder || null);
+    }
+    optionId(index) {
+        return `${this.listboxId}-opt-${index}`;
+    }
+    // Flat index of an option across groups, so grouped options share the same
+    // id scheme as the virtual-scrolled flat list.
+    flatIndexOf(data) {
+        return this.getNavigableOptions().indexOf(data);
+    }
+    // The keyboard-highlighted option's id, exposed on the trigger as
+    // aria-activedescendant so AT tracks arrow-key navigation.
+    activeOptionId() {
+        if (!this.isDropdown()) {
+            return null;
+        }
+        const index = this.getNavigableOptions().findIndex(option => option.isHover);
+        return index >= 0 ? this.optionId(index) : null;
+    }
     constructor(osService, elementRef, iterableDiffers) {
         this.osService = osService;
         this.elementRef = elementRef;
@@ -23,6 +54,14 @@ class ApexSelectComponent {
         this.label = null;
         this.dropdown = null;
         this.inputWrapper = null;
+        this.dropdownSearch = null;
+        this.dropdownContainer = null;
+        // Exposes the variant enum to the template (mirrors TableColumnType on apex-table).
+        this.Variant = ApexSelectVariant;
+        // Ids wiring the APG combobox pattern: trigger (combobox) ↔ dropdown
+        // (listbox) ↔ options, all referenced via aria-controls/activedescendant.
+        this.selectA11yId = `apex-select-${ApexSelectComponent.nextA11yId++}`;
+        this.listboxId = `${this.selectA11yId}-listbox`;
         this.selectChange = new EventEmitter();
         this.helperTextChange = new EventEmitter();
         this.firstDropdown = signal(0, ...(ngDevMode ? [{ debugName: "firstDropdown" }] : []));
@@ -36,6 +75,26 @@ class ApexSelectComponent {
         this.documentKeyUpSubscription = null;
         this.controlSubscription = null;
         this.filteredData = signal([], ...(ngDevMode ? [{ debugName: "filteredData" }] : []));
+        this.filteredGroups = signal([], ...(ngDevMode ? [{ debugName: "filteredGroups" }] : []));
+        // The groups split into `dropdownColumns` side-by-side lists (one list when the option is unset or
+        // 1). Each group stays whole in one column; groups are handed to the currently-shortest column so
+        // the columns end up roughly equal height. The template lays these out as flex columns that scroll
+        // together, so a capped, columned menu never clips.
+        this.groupColumns = computed(() => {
+            const columnCount = this.options?.dropdownColumns ?? 1;
+            const groups = this.filteredGroups();
+            if (columnCount <= 1) {
+                return [groups];
+            }
+            const columns = Array.from({ length: columnCount }, () => []);
+            const heights = new Array(columnCount).fill(0);
+            for (const group of groups) {
+                const shortest = heights.indexOf(Math.min(...heights));
+                columns[shortest].push(group);
+                heights[shortest] += group.data.length + 1; // + 1 for the group header row
+            }
+            return columns;
+        }, ...(ngDevMode ? [{ debugName: "groupColumns" }] : []));
         this.lastSearch = '';
         this.keyListener = (event) => this.blockArrowScroll(event);
         this.wheelListener = (event) => this.blockScroll(event);
@@ -48,6 +107,7 @@ class ApexSelectComponent {
         this.controlValue = signal(null, ...(ngDevMode ? [{ debugName: "controlValue" }] : []));
         this.controlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "controlDisabled" }] : []));
         this.dataDiffer = this.iterableDiffers.find([]).create();
+        this.groupsDiffer = this.iterableDiffers.find([]).create();
         this.handleEvents();
     }
     ngOnInit() {
@@ -80,11 +140,14 @@ class ApexSelectComponent {
     }
     ngDoCheck() {
         const data = this.options?.data || [];
-        const diff = this.dataDiffer.diff(data);
-        if (!diff) {
+        const groups = this.options?.groups || [];
+        const dataDiff = this.dataDiffer.diff(data);
+        const groupsDiff = this.groupsDiffer.diff(groups);
+        if (!dataDiff && !groupsDiff) {
             return;
         }
         this.filteredData.set([...data]);
+        this.filteredGroups.set(this.cloneGroups(groups));
         // Sync controlValue signal and visible input when data changes.
         // The parent may have reset the control with { emitEvent: false },
         // which bypasses valueChanges — the only thing that updates controlValue.
@@ -98,7 +161,8 @@ class ApexSelectComponent {
         }
     }
     ngAfterViewInit() {
-        this.filteredData.set([...this.options.data]);
+        this.filteredData.set([...(this.options.data || [])]);
+        this.filteredGroups.set(this.cloneGroups(this.options.groups || []));
         setTimeout(() => {
             if (this.options.formGroup && this.options.formControlName) {
                 this.setVisibleValue(this.options.formGroup.controls[this.options.formControlName].value);
@@ -110,6 +174,92 @@ class ApexSelectComponent {
             }));
         }
     }
+    cloneGroups(groups) {
+        return groups.map(group => ({
+            label: group.label,
+            data: [...group.data],
+        }));
+    }
+    hasGroups() {
+        return !!this.options?.groups && this.options.groups.length > 0;
+    }
+    isSearchInDropdown() {
+        return !!this.options?.searchInDropdown;
+    }
+    // The active trigger appearance; defaults to Default when unset. Single source
+    // for every variant check + the wrapper's variant class.
+    variant() {
+        return this.options?.variant ?? ApexSelectVariant.Default;
+    }
+    isInsetLabel() {
+        return this.variant() === ApexSelectVariant.Inset;
+    }
+    // The selected option's label for the inset-variant overlay. Reads the reactive
+    // controlValue (an { label, value } object, or a raw value) and resolves it to a
+    // label via the option list. Empty when nothing is selected.
+    insetValueLabel() {
+        const controlVal = this.controlValue();
+        if (controlVal == null || controlVal === '') {
+            return '';
+        }
+        // Multiple selects show a count, matching the counterAsValue trigger.
+        if (this.options.multiple) {
+            const count = Array.isArray(controlVal) ? controlVal.length : 0;
+            return count ? `${count} selected` : '';
+        }
+        if (typeof controlVal === 'object' && controlVal.label) {
+            return controlVal.label;
+        }
+        return this.getAllOptions().find(option => option.value === controlVal)?.label ?? '';
+    }
+    // The inset variant only shows its stacked caption + value + clear once a value
+    // is set; empty, it renders the normal placeholder + caret.
+    hasInsetValue() {
+        return this.isInsetLabel() && !!this.insetValueLabel();
+    }
+    // Inline clear (×) on the inset trigger. Stops the click from toggling the
+    // dropdown, then resets the bound control to null so the placeholder returns.
+    clearInsetValue(event) {
+        event.stopPropagation();
+        // A multiple control holds an array — clearing it to null would break the next toggle, which
+        // reads `.length`. Reset to an empty array there, and to null for a single select.
+        const cleared = this.options.multiple ? [] : null;
+        this.control.setValue(cleared);
+        this.controlValue.set(cleared);
+        if (this.input) {
+            this.input.nativeElement.value = '';
+        }
+        this.selectChange.emit(cleared);
+    }
+    getAllOptions() {
+        if (this.hasGroups()) {
+            return (this.options.groups || []).flatMap(group => group.data);
+        }
+        return this.options.data || [];
+    }
+    // Whether every option is currently selected — drives the Select All master's ticked state.
+    isAllSelected() {
+        const all = this.getAllOptions();
+        return all.length > 0 && all.every(option => this.isMultipleSelected(option));
+    }
+    // Select All toggles the whole set: clear it when everything is already picked, otherwise
+    // select every option. Mirrors setMultipleValue's stored shape ({ label, value } only).
+    toggleSelectAll(event) {
+        if (event) {
+            event.preventDefault();
+        }
+        const next = this.isAllSelected()
+            ? []
+            : this.getAllOptions().map(option => ({ label: option.label, value: option.value }));
+        this.control.setValue(next);
+        this.selectChange.emit(next);
+    }
+    getDropdownEl() {
+        if (this.dropdownContainer) {
+            return this.dropdownContainer.nativeElement;
+        }
+        return this.dropdown?.elementRef.nativeElement ?? null;
+    }
     ngOnChanges(changes) {
         if (!changes['options'] || changes['options'].firstChange) {
             return;
@@ -171,15 +321,30 @@ class ApexSelectComponent {
         }
         this.lastSearch = '';
         this.input.nativeElement.value = '';
-        this.filteredData.set([...this.options.data]);
+        this.filteredData.set([...(this.options.data || [])]);
+        if (this.hasGroups()) {
+            this.filteredGroups.set(this.cloneGroups(this.options.groups || []));
+        }
+        if (this.dropdownSearch) {
+            this.dropdownSearch.nativeElement.value = '';
+        }
         this.control.setValue(newValue);
         this.selectChange.emit(newValue);
+        if (this.isSearchInDropdown() && this.dropdownSearch) {
+            setTimeout(() => this.dropdownSearch?.nativeElement.focus());
+        }
     }
     setVisibleValue(newValue) {
         if (newValue === null) {
             this.input.nativeElement.value = '';
             return;
         }
+        if (this.isSearchInDropdown()) {
+            // Chips / counter span next to the input own the selection display.
+            // Keep the input empty so the placeholder can show when nothing is selected.
+            this.input.nativeElement.value = '';
+            return;
+        }
         if (this.options.counterAsValue) {
             if (this.options.searchable) {
                 return;
@@ -189,7 +354,10 @@ class ApexSelectComponent {
             return;
         }
         let visibleValue = '';
-        for (let data of this.filteredData()) {
+        const sourceList = this.hasGroups()
+            ? this.filteredGroups().flatMap(group => group.data)
+            : this.filteredData();
+        for (let data of sourceList) {
             // when newValue is object and not array
             if (data.value === newValue.value) {
                 visibleValue = data.label;
@@ -215,7 +383,7 @@ class ApexSelectComponent {
         this.input.nativeElement.value = visibleValue;
     }
     updateDropdownHeight() {
-        if (!this.isDropdown()) {
+        if (!this.isDropdown() || this.hasGroups()) {
             return;
         }
         setTimeout(() => {
@@ -282,23 +450,29 @@ class ApexSelectComponent {
             return;
         }
         this.isDropdown.set(true);
-        this.input.nativeElement.focus();
+        if (!this.isSearchInDropdown()) {
+            this.input.nativeElement.focus();
+        }
         if (this.firstDropdown() === 0) {
             this.firstDropdown.update(v => v + 1);
             setTimeout(() => this.generateDropdownPosition(true));
         }
         this.attachGlobalScrollBlockers();
         this.onSearch(this.lastSearch, false);
+        if (this.isSearchInDropdown()) {
+            setTimeout(() => this.dropdownSearch?.nativeElement.focus());
+        }
     }
     deactivateControl(event) {
         if (event instanceof KeyboardEvent) {
             this.removeDropdown();
             return;
         }
-        if (!this.dropdown || !this.inputWrapper) {
+        const dropdownEl = this.getDropdownEl();
+        if (!dropdownEl || !this.inputWrapper) {
             return;
         }
-        const dropdownRect = this.dropdown.elementRef.nativeElement.getBoundingClientRect();
+        const dropdownRect = dropdownEl.getBoundingClientRect();
         const inputWrapperRect = this.inputWrapper.nativeElement.getBoundingClientRect();
         const isClickInsideDropdown = this.isWithinBounds(event, dropdownRect);
         const isClickInsideInputWrapper = this.isWithinBounds(event, inputWrapperRect);
@@ -333,25 +507,53 @@ class ApexSelectComponent {
         }
     }
     generateDropdownPosition(checkRevserse = false) {
-        if (!this.dropdown) {
+        const dropdownEl = this.getDropdownEl();
+        if (!dropdownEl) {
             // method will keep executing until dropdown is rendered
             setTimeout(() => this.generateDropdownPosition(true));
             return;
         }
-        const dropdownEl = this.dropdown.elementRef.nativeElement;
         const elementRefRect = this.elementRef.nativeElement.getBoundingClientRect();
         if (this.osService.mobileOS === MobileOS.iOS) {
             elementRefRect.y += window.visualViewport.offsetTop;
             elementRefRect.x += window.visualViewport.offsetLeft;
         }
-        dropdownEl.style.left = elementRefRect.x + 'px';
-        dropdownEl.style.width = elementRefRect.width + 'px';
+        // ── Width ──
+        // 'trigger' (default) → match the trigger; otherwise use the explicit px
+        // value, clamped so the dropdown can never exceed viewport minus 2× the
+        // safe-area padding on very narrow screens.
+        const VIEWPORT_PADDING = 8;
+        const widthOption = this.options.dropdownWidth ?? 'trigger';
+        const maxWidth = Math.max(elementRefRect.width, window.innerWidth - VIEWPORT_PADDING * 2);
+        const desiredWidth = typeof widthOption === 'number'
+            ? Math.min(widthOption, maxWidth)
+            : elementRefRect.width;
+        dropdownEl.style.width = desiredWidth + 'px';
+        // ── Horizontal alignment ──
+        // Default is 'start' for trigger-width dropdowns (preserves the
+        // pre-existing behavior) and 'auto' for explicit-width dropdowns so a
+        // wider menu near the right edge of the viewport flips to end-align
+        // instead of clipping.
+        const defaultAlign = typeof widthOption === 'number' ? 'auto' : 'start';
+        const alignOption = this.options.dropdownAlign ?? defaultAlign;
+        let resolvedLeft = this.resolveDropdownLeft(alignOption, elementRefRect, desiredWidth, VIEWPORT_PADDING);
+        // Final clamp keeps the dropdown inside the viewport at any width.
+        const minLeft = VIEWPORT_PADDING;
+        const maxLeft = Math.max(VIEWPORT_PADDING, window.innerWidth - desiredWidth - VIEWPORT_PADDING);
+        resolvedLeft = Math.max(minLeft, Math.min(resolvedLeft, maxLeft));
+        dropdownEl.style.left = resolvedLeft + 'px';
         dropdownEl.style.top = elementRefRect.y + elementRefRect.height + 'px';
+        // Size the grouped-dropdown body to the space available below the trigger
+        // (with `maxDropdownHeightPx` as an optional cap). Non-grouped selects
+        // are handled by `updateDropdownHeight()` via virtual scroll height.
+        this.adjustGroupedDropdownMaxHeight(false, elementRefRect);
         if (checkRevserse) {
             if (window.innerHeight < dropdownEl.getBoundingClientRect().bottom) {
                 dropdownEl.style.top = 'unset';
                 dropdownEl.style.bottom = window.innerHeight - elementRefRect.y + 10 + 'px';
                 this.isDropdownReversed = true;
+                // Reflow grouped body for the above-trigger space after flipping up.
+                this.adjustGroupedDropdownMaxHeight(true, elementRefRect);
             }
         }
         if (this.isDropdownReversed) {
@@ -362,6 +564,65 @@ class ApexSelectComponent {
             this.updateDropdownHeight();
         }, 100);
     }
+    // Resolves the dropdown's left coordinate against the trigger and viewport.
+    //   'start' → trigger left edge
+    //   'end'   → trigger right edge minus dropdown width
+    //   'auto'  → start if it fits, else end if it fits, else pinned padding
+    // The 'auto' branch is the only place where viewport-overflow detection
+    // matters; keeping it isolated avoids the nested-else chain in the caller.
+    resolveDropdownLeft(align, triggerRect, desiredWidth, padding) {
+        const startLeft = triggerRect.x;
+        const endLeft = triggerRect.right - desiredWidth;
+        if (align === 'start') {
+            return startLeft;
+        }
+        if (align === 'end') {
+            return endLeft;
+        }
+        const fitsAtStart = startLeft + desiredWidth <= window.innerWidth - padding;
+        if (fitsAtStart) {
+            return startLeft;
+        }
+        const fitsAtEnd = endLeft >= padding;
+        if (fitsAtEnd) {
+            return endLeft;
+        }
+        // Both edges would still overflow — pin to viewport with padding.
+        return padding;
+    }
+    // Sets `--apex-select-dropdown-body-max-height` on the dropdown root so the
+    // grouped + searchInDropdown body grows to fill the viewport instead of the
+    // hardcoded 320 px CSS fallback. Called twice: once for the default
+    // below-trigger anchor, again after the reverse-flip handler so the value
+    // matches the chosen side. `maxDropdownHeightPx` (when provided) caps the
+    // dynamic value — useful when callers want a smaller-than-viewport dropdown.
+    adjustGroupedDropdownMaxHeight(reversed, triggerRect) {
+        if (!this.hasGroups()) {
+            return;
+        }
+        const dropdownEl = this.getDropdownEl();
+        if (!dropdownEl) {
+            return;
+        }
+        const VIEWPORT_PADDING = 16;
+        const SEARCH_HEADER_PX = this.isSearchInDropdown() ? 52 : 0;
+        // The `.dropdown` root sits `margin-top` below its anchor and carries a 1px border top and
+        // bottom — chrome that lives OUTSIDE the body the max-height caps. Left unaccounted, the body
+        // fills the whole gap and the assembled dropdown lands a hair past the viewport edge, tripping
+        // the flip-up check even when there is room below. Reserving it keeps a below-anchored grouped
+        // dropdown open downward. A search dropdown never noticed because its header offset absorbed it.
+        const DROPDOWN_CHROME_PX = 17;
+        const MIN_BODY_PX = 160;
+        const availableSpace = reversed
+            ? triggerRect.y - VIEWPORT_PADDING - DROPDOWN_CHROME_PX
+            : window.innerHeight - (triggerRect.y + triggerRect.height) - VIEWPORT_PADDING - DROPDOWN_CHROME_PX;
+        let bodyMax = Math.max(MIN_BODY_PX, availableSpace - SEARCH_HEADER_PX);
+        const cap = this.options.maxDropdownHeightPx;
+        if (cap !== undefined && cap > 0) {
+            bodyMax = Math.min(bodyMax, cap);
+        }
+        dropdownEl.style.setProperty('--apex-select-dropdown-body-max-height', bodyMax + 'px');
+    }
     removeDropdown() {
         this.isDropdown.set(false);
         this.isDropdownReversed = false;
@@ -382,6 +643,11 @@ class ApexSelectComponent {
     }
     onSearch(value, shouldResetHover) {
         this.lastSearch = value;
+        if (this.hasGroups()) {
+            this.filterGroups(value, shouldResetHover);
+            this.updateDropdownHeight();
+            return;
+        }
         if (!value) {
             // Reset to original data if input is empty
             this.filteredData.set([...this.options.data]);
@@ -399,6 +665,36 @@ class ApexSelectComponent {
         this.filteredData.set(filtered);
         this.updateDropdownHeight();
     }
+    filterGroups(value, shouldResetHover) {
+        const sourceGroups = this.options.groups || [];
+        if (!value) {
+            this.filteredGroups.set(this.cloneGroups(sourceGroups));
+            return;
+        }
+        const searchTerm = value.toLowerCase();
+        const result = [];
+        for (const group of sourceGroups) {
+            const matches = group.data.filter(item => item.label.toLowerCase().includes(searchTerm));
+            if (matches.length) {
+                result.push({ label: group.label, data: matches });
+            }
+        }
+        if (shouldResetHover) {
+            let firstHoverSet = false;
+            for (const group of result) {
+                for (const item of group.data) {
+                    if (!firstHoverSet) {
+                        item.isHover = true;
+                        firstHoverSet = true;
+                    }
+                    else {
+                        item.isHover = false;
+                    }
+                }
+            }
+        }
+        this.filteredGroups.set(result);
+    }
     getPlaceholder() {
         const options = this.options;
         const formGroup = options.formGroup;
@@ -445,29 +741,20 @@ class ApexSelectComponent {
         window.addEventListener('keydown', this.keyListener);
     }
     keyup(event) {
-        if (document.activeElement !== this.input?.nativeElement) {
+        const activeEl = document.activeElement;
+        const triggerInputEl = this.input?.nativeElement ?? null;
+        const searchInputEl = this.dropdownSearch?.nativeElement ?? null;
+        const isTriggerFocused = activeEl === triggerInputEl;
+        const isDropdownSearchFocused = this.isSearchInDropdown() && activeEl === searchInputEl;
+        if (!isTriggerFocused && !isDropdownSearchFocused) {
             this.deactivateControl(event);
             return;
         }
-        if (document.activeElement === this.input?.nativeElement) {
-            if (document.activeElement !== this.input?.nativeElement) {
-                return;
-            }
+        if (isDropdownSearchFocused) {
             switch (event.code) {
                 case 'Enter':
                     this.documentEnterKeyup(event);
                     return;
-                case 'Space':
-                    if (!this.options.searchable) {
-                        this.documentEnterKeyup(event);
-                    }
-                    return;
-                case 'Backspace':
-                    if (!this.options.multiple && this.options.searchable && this.control.value.value != null) {
-                        this.onSearch('', false);
-                        this.setValue('');
-                    }
-                    return;
                 case 'Escape':
                     this.deactivateControl(event);
                     return;
@@ -478,11 +765,64 @@ class ApexSelectComponent {
                     this.documentArrowsKeyup(false);
                     return;
             }
-            this.documentKeyup(event);
+            // Typing is handled by the input's (input) event, not here.
+            return;
+        }
+        switch (event.code) {
+            case 'Enter':
+                this.documentEnterKeyup(event);
+                return;
+            case 'Space':
+                if (!this.options.searchable) {
+                    this.documentEnterKeyup(event);
+                }
+                return;
+            case 'Backspace':
+                if (!this.options.multiple && this.options.searchable && this.control.value.value != null) {
+                    this.onSearch('', false);
+                    this.setValue('');
+                }
+                return;
+            case 'Escape':
+                this.deactivateControl(event);
+                return;
+            case 'ArrowDown':
+                this.documentArrowsKeyup(true);
+                return;
+            case 'ArrowUp':
+                this.documentArrowsKeyup(false);
+                return;
+            case 'Home':
+                this.documentHomeEndKeyup(true);
+                return;
+            case 'End':
+                this.documentHomeEndKeyup(false);
+                return;
+        }
+        this.documentKeyup(event);
+    }
+    // Home/End jump the keyboard highlight to the first/last option (APG combobox).
+    documentHomeEndKeyup(toFirst) {
+        const data = this.getNavigableOptions();
+        if (!data.length || !this.isDropdown()) {
+            return;
+        }
+        for (let i = 0; i < data.length; i++) {
+            data[i].isHover = false;
+        }
+        const newIndex = toFirst ? 0 : data.length - 1;
+        data[newIndex].isHover = true;
+        if (this.hasGroups()) {
+            this.filteredGroups.set([...this.filteredGroups()]);
+            this.scrollGroupedOptionIntoView(newIndex);
+        }
+        else {
+            this.filteredData.set([...this.filteredData()]);
+            this.dropdown?.scrollToIndex(newIndex, 'auto');
         }
     }
     documentEnterKeyup(event) {
-        const data = this.filteredData();
+        const data = this.getNavigableOptions();
         for (let i = 0; i < data.length; i++) {
             if (data[i].isHover) {
                 switch (this.options.multiple) {
@@ -498,11 +838,11 @@ class ApexSelectComponent {
         }
     }
     documentArrowsKeyup(isDownArrow) {
-        if (!this.dropdown || !this.filteredData().length) {
+        const data = this.getNavigableOptions();
+        const dataLength = data.length;
+        if (!dataLength) {
             return;
         }
-        const data = this.filteredData();
-        const dataLength = data.length;
         const controlValue = this.control.getRawValue();
         const isControlValue = controlValue && controlValue !== '';
         let hoverIndex = null;
@@ -521,14 +861,34 @@ class ApexSelectComponent {
         newIndex = newIndex < 0 ? 0 : newIndex;
         newIndex = newIndex >= dataLength ? dataLength - 1 : newIndex;
         data[newIndex].isHover = true;
-        this.filteredData.set([...data]);
-        this.dropdown?.scrollToIndex(newIndex, 'auto');
+        if (this.hasGroups()) {
+            this.filteredGroups.set([...this.filteredGroups()]);
+            this.scrollGroupedOptionIntoView(newIndex);
+        }
+        else {
+            this.filteredData.set([...this.filteredData()]);
+            this.dropdown?.scrollToIndex(newIndex, 'auto');
+        }
+    }
+    getNavigableOptions() {
+        if (this.hasGroups()) {
+            return this.filteredGroups().flatMap(group => group.data);
+        }
+        return this.filteredData();
+    }
+    scrollGroupedOptionIntoView(index) {
+        if (!this.dropdownContainer) {
+            return;
+        }
+        const optionEls = this.dropdownContainer.nativeElement.querySelectorAll('.option');
+        const target = optionEls[index];
+        target?.scrollIntoView({ block: 'nearest' });
     }
     documentKeyup(event) {
         if (!this.isDropdown() || this.options.searchable) {
             return;
         }
-        const data = this.filteredData();
+        const data = this.getNavigableOptions();
         for (let i = 0; i < data.length; i++) {
             data[i].isHover = false;
         }
@@ -544,9 +904,17 @@ class ApexSelectComponent {
         }
         if (newIndex !== null) {
             data[newIndex].isHover = true;
-            this.dropdown?.scrollToIndex(newIndex, 'auto');
+            if (this.hasGroups()) {
+                this.filteredGroups.set([...this.filteredGroups()]);
+                this.scrollGroupedOptionIntoView(newIndex);
+            }
+            else {
+                this.dropdown?.scrollToIndex(newIndex, 'auto');
+            }
+        }
+        if (!this.hasGroups()) {
+            this.filteredData.set([...this.filteredData()]);
         }
-        this.filteredData.set([...data]);
     }
     removeProperty(obj, propertyName) {
         let { [propertyName]: removedProperty, ...data } = obj;
@@ -561,13 +929,14 @@ class ApexSelectComponent {
         }
     }
     blockScroll(event) {
-        if (!this.dropdown) {
+        const dropdownEl = this.getDropdownEl();
+        if (!dropdownEl) {
             return;
         }
-        const dropdownEl = this.dropdown.elementRef.nativeElement;
-        const isInsideDropdown = this.isDescendant(dropdownEl, event.target);
+        const target = event.target;
+        const isInsideDropdown = !!target && this.isDescendant(dropdownEl, target);
         if (isInsideDropdown) {
-            const canScroll = dropdownEl.scrollHeight > dropdownEl.clientHeight;
+            const canScroll = this.canScrollAt(target, dropdownEl);
             if (!canScroll) {
                 event.preventDefault();
             }
@@ -575,6 +944,22 @@ class ApexSelectComponent {
         }
         event.preventDefault();
     }
+    canScrollAt(start, boundary) {
+        let el = start;
+        while (el !== null) {
+            if (el.scrollHeight > el.clientHeight) {
+                const overflowY = getComputedStyle(el).overflowY;
+                if (overflowY === 'auto' || overflowY === 'scroll') {
+                    return true;
+                }
+            }
+            if (el === boundary || el === document.body) {
+                break;
+            }
+            el = el.parentElement;
+        }
+        return false;
+    }
     isDescendant(parent, child) {
         while (child !== null) {
             if (child === parent) {
@@ -601,12 +986,13 @@ class ApexSelectComponent {
         this.scrollBlockersAttached = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexSelectComponent, deps: [{ token: i1.OSService }, { token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexSelectComponent, isStandalone: true, selector: "apex-select", inputs: { options: "options" }, outputs: { selectChange: "selectChange", helperTextChange: "helperTextChange" }, host: { listeners: { "document:click": "deactivateControl($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n            @if (options.label !== '') {\n                <div class=\"header\">\n                    <div class=\"label-wrapper\">\n                        <label>{{ options.label }}</label>\n    \n                        @if (options.tooltip) {\n                            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <g>\n                                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                                </g>\n                            </svg>\n                        }\n                    </div>\n    \n                    @if (options.helperText) {\n                        <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n                    }\n                </div>\n            }\n\n            <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n                @if (options.prefixImg) {\n                    <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [alt]=\"'Select prefix icon'\"></apex-img>\n                }\n\n                @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of options.data; track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (options.searchable) {\n                    <!-- used for formControl data binding and reactivness -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <!-- used for searching and data displaying -->\n                    <input #input\n                        [placeholder]=\"getPlaceholder()\"\n                        [readOnly]=\"!options.searchable\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        (keydown)=\"handleKeydown($event)\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        (input)=\"onSearch(input.value, true)\"\n                        autocorrect=\"off\"\n                        spellcheck=\"false\">\n                } @else {\n                    <input #input\n                        readonly\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        [formControlName]=\"options.formControlName\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        (ngModelChange)=\"setVisibleValue($event)\"/>\n                }\n \n                <div class=\"arrow-wrapper\">\n                    <div class=\"arrow\" [class]=\"{ checked: this.isDropdown() }\"></div>\n                </div>\n            </div>\n\n            @if (isDropdown()) {\n                <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx()\" class=\"dropdown\" #dropdown>\n                    <div class=\"option\"\n                            *cdkVirtualFor=\"let data of filteredData();\"\n                            [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                            (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                            @if (options.multiple) {\n                                @if (data.icon) {\n                                    <div class=\"option-icon\">\n                                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"'Option icon.'\"></apex-img>\n                                    </div>\n                                }\n                                <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                                    <div class=\"multiple-checkbox-container\">\n                                        <span>{{ data.label }}</span>\n                                        @if (data.description) { <span>{{ data.description }}</span> }\n                                    </div>\n                                </apex-checkbox>\n                            } @else {\n                                @if (data.icon) {\n                                    <div class=\"option-icon\">\n                                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"'Option icon.'\"></apex-img>\n                                    </div>\n                                }\n                                {{ data.label }}\n                            }\n                        </div>\n                    @if (filteredData().length === 0) {\n                        <div class=\"option disabled\">No options to select from.</div>\n                    }\n                </cdk-virtual-scroll-viewport>\n            }\n        </div>\n    }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.option-icon{width:var(--apex-select-option-icon-size, 16px);height:var(--apex-select-option-icon-size, 16px);min-width:var(--apex-select-option-icon-size, 16px);display:flex;justify-content:center;align-items:center;margin-right:var(--apex-select-option-icon-spacing, 10px)}.option-icon apex-img{max-width:var(--apex-select-option-icon-size, 20px);max-height:var(--apex-select-option-icon-size, 20px);display:flex;justify-content:center;align-items:center}.option-icon apex-img path{fill:var(--apex-select-option-icon-fill, #5D6068);stroke:var(--apex-select-option-icon-stroke, #ffffff00)}.dropdown .option.selected .option-icon apex-img path{fill:var(--apex-select-option-icon-selected-fill, #F96138);stroke:var(--apex-select-option-icon-selected-stroke, #ffffff00)}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ApexChipComponent, selector: "apex-chip", inputs: ["closeIcon", "options"], outputs: ["closeChange"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ApexCheckboxComponent, selector: "apex-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ApexSelectComponent, isStandalone: true, selector: "apex-select", inputs: { options: "options" }, outputs: { selectChange: "selectChange", helperTextChange: "helperTextChange" }, host: { listeners: { "document:click": "deactivateControl($event)" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "label", first: true, predicate: ["label"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "inputWrapper", first: true, predicate: ["inputWrapper"], descendants: true }, { propertyName: "dropdownSearch", first: true, predicate: ["dropdownSearch"], descendants: true }, { propertyName: "dropdownContainer", first: true, predicate: ["dropdownContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n            @if (options.label !== '' && variant() === Variant.Default) {\n                <div class=\"header\">\n                    <div class=\"label-wrapper\">\n                        <label>{{ options.label }}</label>\n\n                        @if (options.tooltip) {\n                            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <g>\n                                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                                </g>\n                            </svg>\n                        }\n                    </div>\n\n                    @if (options.helperText) {\n                        <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n                    }\n                </div>\n            }\n\n            <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled(), 'inset': isInsetLabel(), 'inset-has-value': hasInsetValue() }\">\n                @if (options.prefixImg) {\n                    <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [alt]=\"''\"></apex-img>\n                }\n\n                @if (isSearchInDropdown() && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of getAllOptions(); track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (!isSearchInDropdown() && options.searchable && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of getAllOptions(); track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (isSearchInDropdown()) {\n                    <!-- Hidden input owns the form binding; the visible one is a placeholder slot. -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <input #input\n                        readonly\n                        role=\"combobox\"\n                        aria-haspopup=\"listbox\"\n                        [attr.aria-expanded]=\"isDropdown()\"\n                        [attr.aria-controls]=\"isDropdown() ? listboxId : null\"\n                        [attr.aria-label]=\"ariaLabelValue\"\n                        [attr.aria-activedescendant]=\"activeOptionId()\"\n                        [attr.aria-invalid]=\"checkIfControlInvalid() ? 'true' : null\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"/>\n                } @else if (options.searchable) {\n                    <!-- used for formControl data binding and reactivness -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <!-- used for searching and data displaying -->\n                    <input #input\n                        role=\"combobox\"\n                        aria-haspopup=\"listbox\"\n                        aria-autocomplete=\"list\"\n                        [attr.aria-expanded]=\"isDropdown()\"\n                        [attr.aria-controls]=\"isDropdown() ? listboxId : null\"\n                        [attr.aria-label]=\"ariaLabelValue\"\n                        [attr.aria-activedescendant]=\"activeOptionId()\"\n                        [attr.aria-invalid]=\"checkIfControlInvalid() ? 'true' : null\"\n                        [placeholder]=\"getPlaceholder()\"\n                        [readOnly]=\"!options.searchable\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        (keydown)=\"handleKeydown($event)\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        (input)=\"onSearch(input.value, true)\"\n                        autocorrect=\"off\"\n                        spellcheck=\"false\">\n                } @else {\n                    <input #input\n                        readonly\n                        role=\"combobox\"\n                        aria-haspopup=\"listbox\"\n                        [attr.aria-expanded]=\"isDropdown()\"\n                        [attr.aria-controls]=\"isDropdown() ? listboxId : null\"\n                        [attr.aria-label]=\"ariaLabelValue\"\n                        [attr.aria-activedescendant]=\"activeOptionId()\"\n                        [attr.aria-invalid]=\"checkIfControlInvalid() ? 'true' : null\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        [formControlName]=\"options.formControlName\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        (ngModelChange)=\"setVisibleValue($event)\"/>\n                }\n\n                @if (isInsetLabel() && hasInsetValue()) {\n                    <div class=\"inset-stack\" aria-hidden=\"true\">\n                        <span class=\"inset-label\">{{ options.label }}</span>\n                        <span class=\"inset-value\">{{ insetValueLabel() }}</span>\n                    </div>\n\n                    <button type=\"button\" class=\"inset-clear\" [attr.aria-label]=\"'Clear ' + (options.label || options.placeholder || 'filter')\" (click)=\"clearInsetValue($event)\">\n                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                            <path d=\"M3 3 9 9M9 3 3 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                    </button>\n                }\n\n                <div class=\"arrow-wrapper\" aria-hidden=\"true\">\n                    <div class=\"arrow\" [class]=\"{ checked: this.isDropdown() }\"></div>\n                </div>\n            </div>\n\n            @if (isDropdown()) {\n                @if (isSearchInDropdown()) {\n                    <div #dropdownContainer class=\"dropdown dropdown-wrapper\">\n                        <div class=\"dropdown-search\">\n                            <svg class=\"dropdown-search-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <circle cx=\"7\" cy=\"7\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n                                <path d=\"M11 11L14 14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                            </svg>\n                            <input #dropdownSearch\n                                type=\"text\"\n                                placeholder=\"Search\"\n                                aria-label=\"Search options\"\n                                [attr.aria-controls]=\"listboxId\"\n                                [attr.aria-activedescendant]=\"activeOptionId()\"\n                                autocorrect=\"off\"\n                                spellcheck=\"false\"\n                                (input)=\"onSearch(dropdownSearch.value, true)\"\n                                (keydown)=\"handleKeydown($event)\"/>\n                        </div>\n\n                        @if (options.groups && options.groups.length > 0) {\n                            <div class=\"dropdown-body\" role=\"listbox\" [class.dropdown-body-columns]=\"(options.dropdownColumns ?? 1) > 1\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"options.multiple ? 'true' : null\" [attr.aria-label]=\"ariaLabelValue\">\n                                <ng-container [ngTemplateOutlet]=\"groupBody\"></ng-container>\n                            </div>\n                        } @else {\n                            <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx()\" class=\"dropdown-body dropdown-body-virtual\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"options.multiple ? 'true' : null\" [attr.aria-label]=\"ariaLabelValue\" #dropdown>\n                                <div class=\"option\"\n                                        *cdkVirtualFor=\"let data of filteredData(); let i = index\"\n                                        role=\"option\"\n                                        [id]=\"optionId(i)\"\n                                        [attr.aria-selected]=\"options.multiple ? isMultipleSelected(data) : isValueSelected(data)\"\n                                        [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                                        (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                                        @if (options.multiple) {\n                                            @if (data.icon) {\n                                                <div class=\"option-icon\">\n                                                    <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                                                </div>\n                                            }\n                                            <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                                                <div class=\"multiple-checkbox-container\">\n                                                    <span>{{ data.label }}</span>\n                                                    @if (data.description) { <span>{{ data.description }}</span> }\n                                                </div>\n                                            </apex-checkbox>\n                                        } @else {\n                                            @if (data.icon) {\n                                                <div class=\"option-icon\">\n                                                    <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                                                </div>\n                                            }\n                                            {{ data.label }}\n                                        }\n                                    </div>\n                                @if (filteredData().length === 0) {\n                                    <div class=\"option disabled\">No options to select from.</div>\n                                }\n                            </cdk-virtual-scroll-viewport>\n                        }\n                    </div>\n                } @else if (options.groups && options.groups.length > 0) {\n                    <div #dropdownContainer class=\"dropdown dropdown-wrapper\">\n                        <div class=\"dropdown-body\" role=\"listbox\" [class.dropdown-body-columns]=\"(options.dropdownColumns ?? 1) > 1\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"options.multiple ? 'true' : null\" [attr.aria-label]=\"ariaLabelValue\">\n                            <ng-container [ngTemplateOutlet]=\"groupBody\"></ng-container>\n                        </div>\n                    </div>\n                } @else {\n                    <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx()\" class=\"dropdown\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"options.multiple ? 'true' : null\" [attr.aria-label]=\"ariaLabelValue\" #dropdown>\n                        <div class=\"option\"\n                                *cdkVirtualFor=\"let data of filteredData(); let i = index\"\n                                role=\"option\"\n                                [id]=\"optionId(i)\"\n                                [attr.aria-selected]=\"options.multiple ? isMultipleSelected(data) : isValueSelected(data)\"\n                                [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                                (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                                @if (options.multiple) {\n                                    @if (data.icon) {\n                                        <div class=\"option-icon\">\n                                            <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                                        </div>\n                                    }\n                                    <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                                        <div class=\"multiple-checkbox-container\">\n                                            <span>{{ data.label }}</span>\n                                            @if (data.description) { <span>{{ data.description }}</span> }\n                                        </div>\n                                    </apex-checkbox>\n                                } @else {\n                                    @if (data.icon) {\n                                        <div class=\"option-icon\">\n                                            <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                                        </div>\n                                    }\n                                    {{ data.label }}\n                                }\n                            </div>\n                        @if (filteredData().length === 0) {\n                            <div class=\"option disabled\">No options to select from.</div>\n                        }\n                    </cdk-virtual-scroll-viewport>\n                }\n            }\n        </div>\n    }\n}\n\n<!-- The grouped option list, shared by the search and no-search dropdowns so the group + option\n     markup lives in one place. The Select All master (multiple mode + selectAll) sits above the\n     groups and toggles every option. -->\n<ng-template #groupBody>\n    @if (options.selectAll && options.multiple) {\n        <div class=\"option checkbox select-all-option\"\n             role=\"option\"\n             [attr.aria-selected]=\"isAllSelected()\"\n             (click)=\"toggleSelectAll($event)\">\n            <apex-checkbox [checked]=\"isAllSelected()\">\n                <div class=\"multiple-checkbox-container\"><span>Select all</span></div>\n            </apex-checkbox>\n        </div>\n    }\n\n    @if ((options.dropdownColumns ?? 1) > 1) {\n        <div class=\"group-columns\">\n            @for (column of groupColumns(); track $index) {\n                <div class=\"select-col\">\n                    @for (group of column; track group.label) {\n                        <ng-container [ngTemplateOutlet]=\"groupBlock\" [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                    }\n                </div>\n            }\n        </div>\n    } @else {\n        @for (group of filteredGroups(); track group.label) {\n            <ng-container [ngTemplateOutlet]=\"groupBlock\" [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        }\n    }\n\n    @if (filteredGroups().length === 0) {\n        <div class=\"option disabled\">No options to select from.</div>\n    }\n</ng-template>\n\n<!-- One group: its header followed by its options. Shared by the single-column list and by each\n     flex column, so the option markup lives in exactly one place. -->\n<ng-template #groupBlock let-group>\n    <div class=\"group-header\" role=\"presentation\">{{ group.label }}</div>\n    @for (data of group.data; track data.value) {\n        <div class=\"option\"\n             role=\"option\"\n             [id]=\"optionId(flatIndexOf(data))\"\n             [attr.aria-selected]=\"options.multiple ? isMultipleSelected(data) : isValueSelected(data)\"\n             [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n             (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n            @if (options.multiple) {\n                @if (data.icon) {\n                    <div class=\"option-icon\">\n                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                    </div>\n                }\n                <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                    <div class=\"multiple-checkbox-container\">\n                        <span>{{ data.label }}</span>\n                        @if (data.description) { <span>{{ data.description }}</span> }\n                    </div>\n                </apex-checkbox>\n            } @else {\n                @if (data.icon) {\n                    <div class=\"option-icon\">\n                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                    </div>\n                }\n                {{ data.label }}\n            }\n        </div>\n    }\n</ng-template>\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper.inset{position:relative;border-color:var(--apex-select-inset-border-color, #D3D3D3)}.input-field-wrapper.inset.disabled{opacity:1;cursor:not-allowed;background-color:var(--apex-select-inset-disabled-background-color, #F3F3F3);border:1px solid var(--apex-select-inset-disabled-border-color, #E4E4E4)}.input-field-wrapper.inset-has-value input{color:transparent}.input-field-wrapper.inset-has-value .arrow-wrapper{display:none}.inset-stack{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 38px 0 16px;pointer-events:none}.inset-label{font-size:var(--apex-select-inset-label-font-size, 10px);font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--apex-select-inset-label-color, #7C8182)}.inset-value{font-size:var(--apex-select-inset-value-font-size, 13px);font-weight:600;line-height:1;color:var(--apex-select-inset-value-color, #141414);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inset-clear{position:absolute;top:50%;right:12px;transform:translateY(-50%);display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:none;border-radius:999px;background:var(--apex-select-inset-clear-background, transparent);color:var(--apex-select-inset-clear-color, #7C8182);cursor:pointer}.inset-clear:hover{background:var(--apex-select-inset-clear-hover-background, #141414);color:var(--apex-select-inset-clear-hover-color, #FFFFFF)}.inset-clear svg{width:11px;height:11px;display:block}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;z-index:900;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);animation:fadeIn .3s forwards;opacity:0;margin-top:15px}.dropdown:focus{outline:none}.dropdown{scrollbar-width:thin;scrollbar-color:#F2F2F2 #FAFAFA}.dropdown::-webkit-scrollbar{width:4px}.dropdown::-webkit-scrollbar-thumb{background-color:#f2f2f2;border-radius:99px}.dropdown::-webkit-scrollbar-track{background-color:#fafafa;border-radius:99px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values{scrollbar-width:thin;scrollbar-color:#F2F2F2 #FAFAFA}.values::-webkit-scrollbar{width:4px}.values::-webkit-scrollbar-thumb{background-color:#f2f2f2;border-radius:99px}.values::-webkit-scrollbar-track{background-color:#fafafa;border-radius:99px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.option-icon{width:var(--apex-select-option-icon-size, 16px);height:var(--apex-select-option-icon-size, 16px);min-width:var(--apex-select-option-icon-size, 16px);display:flex;justify-content:center;align-items:center;margin-right:var(--apex-select-option-icon-spacing, 10px)}.option-icon apex-img{max-width:var(--apex-select-option-icon-size, 20px);max-height:var(--apex-select-option-icon-size, 20px);display:flex;justify-content:center;align-items:center}.option-icon apex-img path{fill:var(--apex-select-option-icon-fill, #5D6068);stroke:var(--apex-select-option-icon-stroke, #ffffff00)}.dropdown .option.selected .option-icon apex-img path{fill:var(--apex-select-option-icon-selected-fill, #F96138);stroke:var(--apex-select-option-icon-selected-stroke, #ffffff00)}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.dropdown.dropdown-wrapper{display:flex;flex-direction:column;overflow:hidden;padding:0}.dropdown-search{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--apex-select-dropdown-search-border-color, #E9E9E9);color:var(--apex-select-dropdown-search-icon-color, #5D6068);padding:10px 16px}.dropdown-search-icon{flex:0 0 auto}.dropdown-search input{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--apex-select-input-text-color, #0B1222);padding:0}.dropdown-search input::placeholder{color:var(--apex-select-input-placeholder-color, #9A9A9A)}.dropdown-body{flex:1 1 auto;min-height:0;overflow-y:auto;max-height:var(--apex-select-dropdown-body-max-height, 320px)}.dropdown-body.dropdown-body-virtual{overflow:hidden;max-height:none}.dropdown-body{scrollbar-width:thin;scrollbar-color:#F2F2F2 #FAFAFA}.dropdown-body::-webkit-scrollbar{width:4px}.dropdown-body::-webkit-scrollbar-thumb{background-color:#f2f2f2;border-radius:99px}.dropdown-body::-webkit-scrollbar-track{background-color:#fafafa;border-radius:99px}.group-header{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--apex-select-group-header-color, #9A9A9A);pointer-events:none;-webkit-user-select:none;user-select:none;padding:10px 16px 4px}.dropdown .option.select-all-option{border-bottom:1px solid var(--apex-select-dropdown-border-color, #E9E9E9)}.dropdown-body.dropdown-body-columns{padding:4px 14px 10px}.dropdown-body-columns .group-columns{display:flex;align-items:flex-start;gap:24px}.dropdown-body-columns .select-col{flex:1;min-width:0}.dropdown-body-columns .option,.dropdown-body-columns .group-header{padding-left:8px;padding-right:8px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ApexChipComponent, selector: "apex-chip", inputs: ["closeIcon", "options"], outputs: ["closeChange"] }, { kind: "component", type: ApexImageComponent, selector: "apex-img", inputs: ["src", "alt", "loading"] }, { kind: "directive", type: ApexTooltipDirective, selector: "[apexTooltip]", inputs: ["apexTooltip", "tooltipPosition"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ApexCheckboxComponent, selector: "apex-checkbox", inputs: ["checked", "disabled", "tooltip", "options"], outputs: ["clickChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apex-select', imports: [
                         NgClass,
+                        NgTemplateOutlet,
                         RouterLink,
                         FormsModule,
                         ScrollingModule,
@@ -615,7 +1001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                         ApexTooltipDirective,
                         ReactiveFormsModule,
                         ApexCheckboxComponent,
-                    ], template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n            @if (options.label !== '') {\n                <div class=\"header\">\n                    <div class=\"label-wrapper\">\n                        <label>{{ options.label }}</label>\n    \n                        @if (options.tooltip) {\n                            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <g>\n                                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                                </g>\n                            </svg>\n                        }\n                    </div>\n    \n                    @if (options.helperText) {\n                        <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n                    }\n                </div>\n            }\n\n            <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled() }\">\n                @if (options.prefixImg) {\n                    <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [alt]=\"'Select prefix icon'\"></apex-img>\n                }\n\n                @if (options.searchable && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of options.data; track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (options.searchable) {\n                    <!-- used for formControl data binding and reactivness -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <!-- used for searching and data displaying -->\n                    <input #input\n                        [placeholder]=\"getPlaceholder()\"\n                        [readOnly]=\"!options.searchable\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        (keydown)=\"handleKeydown($event)\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        (input)=\"onSearch(input.value, true)\"\n                        autocorrect=\"off\"\n                        spellcheck=\"false\">\n                } @else {\n                    <input #input\n                        readonly\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        [formControlName]=\"options.formControlName\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        (ngModelChange)=\"setVisibleValue($event)\"/>\n                }\n \n                <div class=\"arrow-wrapper\">\n                    <div class=\"arrow\" [class]=\"{ checked: this.isDropdown() }\"></div>\n                </div>\n            </div>\n\n            @if (isDropdown()) {\n                <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx()\" class=\"dropdown\" #dropdown>\n                    <div class=\"option\"\n                            *cdkVirtualFor=\"let data of filteredData();\"\n                            [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                            (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                            @if (options.multiple) {\n                                @if (data.icon) {\n                                    <div class=\"option-icon\">\n                                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"'Option icon.'\"></apex-img>\n                                    </div>\n                                }\n                                <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                                    <div class=\"multiple-checkbox-container\">\n                                        <span>{{ data.label }}</span>\n                                        @if (data.description) { <span>{{ data.description }}</span> }\n                                    </div>\n                                </apex-checkbox>\n                            } @else {\n                                @if (data.icon) {\n                                    <div class=\"option-icon\">\n                                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"'Option icon.'\"></apex-img>\n                                    </div>\n                                }\n                                {{ data.label }}\n                            }\n                        </div>\n                    @if (filteredData().length === 0) {\n                        <div class=\"option disabled\">No options to select from.</div>\n                    }\n                </cdk-virtual-scroll-viewport>\n            }\n        </div>\n    }\n}\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow:scroll;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);z-index:900;margin-top:15px;opacity:0;animation:fadeIn .3s forwards}.dropdown:focus{outline:none}.dropdown::-webkit-scrollbar{width:16px;padding:8px}.dropdown::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values::-webkit-scrollbar{width:8px;padding:4px}.values::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.values::-webkit-scrollbar-track{background-color:#f8f8f8;border-top-right-radius:8px;border-bottom-right-radius:8px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.option-icon{width:var(--apex-select-option-icon-size, 16px);height:var(--apex-select-option-icon-size, 16px);min-width:var(--apex-select-option-icon-size, 16px);display:flex;justify-content:center;align-items:center;margin-right:var(--apex-select-option-icon-spacing, 10px)}.option-icon apex-img{max-width:var(--apex-select-option-icon-size, 20px);max-height:var(--apex-select-option-icon-size, 20px);display:flex;justify-content:center;align-items:center}.option-icon apex-img path{fill:var(--apex-select-option-icon-fill, #5D6068);stroke:var(--apex-select-option-icon-stroke, #ffffff00)}.dropdown .option.selected .option-icon apex-img path{fill:var(--apex-select-option-icon-selected-fill, #F96138);stroke:var(--apex-select-option-icon-selected-stroke, #ffffff00)}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}\n"] }]
+                    ], template: "@if (options) {\n    @if (options.formGroup && options.formControlName) {\n        <div class=\"container\" (mousedown)=\"preventFocusChange($event)\">\n            @if (options.label !== '' && variant() === Variant.Default) {\n                <div class=\"header\">\n                    <div class=\"label-wrapper\">\n                        <label>{{ options.label }}</label>\n\n                        @if (options.tooltip) {\n                            <svg class=\"tooltip-icon\" [apexTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <g>\n                                    <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                                    <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                                </g>\n                            </svg>\n                        }\n                    </div>\n\n                    @if (options.helperText) {\n                        <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n                    }\n                </div>\n            }\n\n            <div #inputWrapper class=\"input-field-wrapper\" (click)=\"toggleDropdown()\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'invalid': checkIfControlInvalid(), 'disabled': checkIfControlDisabled(), 'inset': isInsetLabel(), 'inset-has-value': hasInsetValue() }\">\n                @if (options.prefixImg) {\n                    <apex-img class=\"prefix\" [src]=\"'assets/img/' + this.options.prefixImg\" [alt]=\"''\"></apex-img>\n                }\n\n                @if (isSearchInDropdown() && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of getAllOptions(); track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (!isSearchInDropdown() && options.searchable && options.multiple && this.showMultipleCount() > 0) {\n                    @if (options.counterAsValue) {\n                        <span class=\"multiple-count\">\n                            {{ this.showMultipleCount() }} selected\n                        </span>\n                    } @else {\n                        <div class=\"chips\">\n                            @for (data of getAllOptions(); track $index) {\n                                @if (isMultipleSelected(data)) {\n                                    <apex-chip [closeIcon]=\"true\" (closeChange)=\"setMultipleValue(data)\">{{ data.label }}</apex-chip>\n                                }\n                            }\n                        </div>\n                    }\n                }\n\n                @if (isSearchInDropdown()) {\n                    <!-- Hidden input owns the form binding; the visible one is a placeholder slot. -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <input #input\n                        readonly\n                        role=\"combobox\"\n                        aria-haspopup=\"listbox\"\n                        [attr.aria-expanded]=\"isDropdown()\"\n                        [attr.aria-controls]=\"isDropdown() ? listboxId : null\"\n                        [attr.aria-label]=\"ariaLabelValue\"\n                        [attr.aria-activedescendant]=\"activeOptionId()\"\n                        [attr.aria-invalid]=\"checkIfControlInvalid() ? 'true' : null\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"/>\n                } @else if (options.searchable) {\n                    <!-- used for formControl data binding and reactivness -->\n                    <input #hiddenInput\n                        class=\"hidden\"\n                        [formControlName]=\"options.formControlName\">\n\n                    <!-- used for searching and data displaying -->\n                    <input #input\n                        role=\"combobox\"\n                        aria-haspopup=\"listbox\"\n                        aria-autocomplete=\"list\"\n                        [attr.aria-expanded]=\"isDropdown()\"\n                        [attr.aria-controls]=\"isDropdown() ? listboxId : null\"\n                        [attr.aria-label]=\"ariaLabelValue\"\n                        [attr.aria-activedescendant]=\"activeOptionId()\"\n                        [attr.aria-invalid]=\"checkIfControlInvalid() ? 'true' : null\"\n                        [placeholder]=\"getPlaceholder()\"\n                        [readOnly]=\"!options.searchable\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        (keydown)=\"handleKeydown($event)\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        (input)=\"onSearch(input.value, true)\"\n                        autocorrect=\"off\"\n                        spellcheck=\"false\">\n                } @else {\n                    <input #input\n                        readonly\n                        role=\"combobox\"\n                        aria-haspopup=\"listbox\"\n                        [attr.aria-expanded]=\"isDropdown()\"\n                        [attr.aria-controls]=\"isDropdown() ? listboxId : null\"\n                        [attr.aria-label]=\"ariaLabelValue\"\n                        [attr.aria-activedescendant]=\"activeOptionId()\"\n                        [attr.aria-invalid]=\"checkIfControlInvalid() ? 'true' : null\"\n                        [disabled]=\"checkIfControlDisabled()\"\n                        [placeholder]=\"getPlaceholder()\"\n                        (focusin)=\"onFocusIn()\"\n                        (focusout)=\"onFocusOut()\"\n                        [formControlName]=\"options.formControlName\"\n                        [ngClass]=\"{ 'no-icon': !options.prefixImg }\"\n                        (ngModelChange)=\"setVisibleValue($event)\"/>\n                }\n\n                @if (isInsetLabel() && hasInsetValue()) {\n                    <div class=\"inset-stack\" aria-hidden=\"true\">\n                        <span class=\"inset-label\">{{ options.label }}</span>\n                        <span class=\"inset-value\">{{ insetValueLabel() }}</span>\n                    </div>\n\n                    <button type=\"button\" class=\"inset-clear\" [attr.aria-label]=\"'Clear ' + (options.label || options.placeholder || 'filter')\" (click)=\"clearInsetValue($event)\">\n                        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n                            <path d=\"M3 3 9 9M9 3 3 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                        </svg>\n                    </button>\n                }\n\n                <div class=\"arrow-wrapper\" aria-hidden=\"true\">\n                    <div class=\"arrow\" [class]=\"{ checked: this.isDropdown() }\"></div>\n                </div>\n            </div>\n\n            @if (isDropdown()) {\n                @if (isSearchInDropdown()) {\n                    <div #dropdownContainer class=\"dropdown dropdown-wrapper\">\n                        <div class=\"dropdown-search\">\n                            <svg class=\"dropdown-search-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                <circle cx=\"7\" cy=\"7\" r=\"5\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\n                                <path d=\"M11 11L14 14\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n                            </svg>\n                            <input #dropdownSearch\n                                type=\"text\"\n                                placeholder=\"Search\"\n                                aria-label=\"Search options\"\n                                [attr.aria-controls]=\"listboxId\"\n                                [attr.aria-activedescendant]=\"activeOptionId()\"\n                                autocorrect=\"off\"\n                                spellcheck=\"false\"\n                                (input)=\"onSearch(dropdownSearch.value, true)\"\n                                (keydown)=\"handleKeydown($event)\"/>\n                        </div>\n\n                        @if (options.groups && options.groups.length > 0) {\n                            <div class=\"dropdown-body\" role=\"listbox\" [class.dropdown-body-columns]=\"(options.dropdownColumns ?? 1) > 1\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"options.multiple ? 'true' : null\" [attr.aria-label]=\"ariaLabelValue\">\n                                <ng-container [ngTemplateOutlet]=\"groupBody\"></ng-container>\n                            </div>\n                        } @else {\n                            <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx()\" class=\"dropdown-body dropdown-body-virtual\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"options.multiple ? 'true' : null\" [attr.aria-label]=\"ariaLabelValue\" #dropdown>\n                                <div class=\"option\"\n                                        *cdkVirtualFor=\"let data of filteredData(); let i = index\"\n                                        role=\"option\"\n                                        [id]=\"optionId(i)\"\n                                        [attr.aria-selected]=\"options.multiple ? isMultipleSelected(data) : isValueSelected(data)\"\n                                        [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                                        (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                                        @if (options.multiple) {\n                                            @if (data.icon) {\n                                                <div class=\"option-icon\">\n                                                    <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                                                </div>\n                                            }\n                                            <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                                                <div class=\"multiple-checkbox-container\">\n                                                    <span>{{ data.label }}</span>\n                                                    @if (data.description) { <span>{{ data.description }}</span> }\n                                                </div>\n                                            </apex-checkbox>\n                                        } @else {\n                                            @if (data.icon) {\n                                                <div class=\"option-icon\">\n                                                    <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                                                </div>\n                                            }\n                                            {{ data.label }}\n                                        }\n                                    </div>\n                                @if (filteredData().length === 0) {\n                                    <div class=\"option disabled\">No options to select from.</div>\n                                }\n                            </cdk-virtual-scroll-viewport>\n                        }\n                    </div>\n                } @else if (options.groups && options.groups.length > 0) {\n                    <div #dropdownContainer class=\"dropdown dropdown-wrapper\">\n                        <div class=\"dropdown-body\" role=\"listbox\" [class.dropdown-body-columns]=\"(options.dropdownColumns ?? 1) > 1\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"options.multiple ? 'true' : null\" [attr.aria-label]=\"ariaLabelValue\">\n                            <ng-container [ngTemplateOutlet]=\"groupBody\"></ng-container>\n                        </div>\n                    </div>\n                } @else {\n                    <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx()\" class=\"dropdown\" role=\"listbox\" [id]=\"listboxId\" [attr.aria-multiselectable]=\"options.multiple ? 'true' : null\" [attr.aria-label]=\"ariaLabelValue\" #dropdown>\n                        <div class=\"option\"\n                                *cdkVirtualFor=\"let data of filteredData(); let i = index\"\n                                role=\"option\"\n                                [id]=\"optionId(i)\"\n                                [attr.aria-selected]=\"options.multiple ? isMultipleSelected(data) : isValueSelected(data)\"\n                                [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n                                (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n                                @if (options.multiple) {\n                                    @if (data.icon) {\n                                        <div class=\"option-icon\">\n                                            <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                                        </div>\n                                    }\n                                    <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                                        <div class=\"multiple-checkbox-container\">\n                                            <span>{{ data.label }}</span>\n                                            @if (data.description) { <span>{{ data.description }}</span> }\n                                        </div>\n                                    </apex-checkbox>\n                                } @else {\n                                    @if (data.icon) {\n                                        <div class=\"option-icon\">\n                                            <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                                        </div>\n                                    }\n                                    {{ data.label }}\n                                }\n                            </div>\n                        @if (filteredData().length === 0) {\n                            <div class=\"option disabled\">No options to select from.</div>\n                        }\n                    </cdk-virtual-scroll-viewport>\n                }\n            }\n        </div>\n    }\n}\n\n<!-- The grouped option list, shared by the search and no-search dropdowns so the group + option\n     markup lives in one place. The Select All master (multiple mode + selectAll) sits above the\n     groups and toggles every option. -->\n<ng-template #groupBody>\n    @if (options.selectAll && options.multiple) {\n        <div class=\"option checkbox select-all-option\"\n             role=\"option\"\n             [attr.aria-selected]=\"isAllSelected()\"\n             (click)=\"toggleSelectAll($event)\">\n            <apex-checkbox [checked]=\"isAllSelected()\">\n                <div class=\"multiple-checkbox-container\"><span>Select all</span></div>\n            </apex-checkbox>\n        </div>\n    }\n\n    @if ((options.dropdownColumns ?? 1) > 1) {\n        <div class=\"group-columns\">\n            @for (column of groupColumns(); track $index) {\n                <div class=\"select-col\">\n                    @for (group of column; track group.label) {\n                        <ng-container [ngTemplateOutlet]=\"groupBlock\" [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                    }\n                </div>\n            }\n        </div>\n    } @else {\n        @for (group of filteredGroups(); track group.label) {\n            <ng-container [ngTemplateOutlet]=\"groupBlock\" [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        }\n    }\n\n    @if (filteredGroups().length === 0) {\n        <div class=\"option disabled\">No options to select from.</div>\n    }\n</ng-template>\n\n<!-- One group: its header followed by its options. Shared by the single-column list and by each\n     flex column, so the option markup lives in exactly one place. -->\n<ng-template #groupBlock let-group>\n    <div class=\"group-header\" role=\"presentation\">{{ group.label }}</div>\n    @for (data of group.data; track data.value) {\n        <div class=\"option\"\n             role=\"option\"\n             [id]=\"optionId(flatIndexOf(data))\"\n             [attr.aria-selected]=\"options.multiple ? isMultipleSelected(data) : isValueSelected(data)\"\n             [ngClass]=\"{ selected: !options.multiple ? isValueSelected(data) : false, preselected: data.isHover, checkbox: options.multiple }\"\n             (click)=\"options.multiple ? setMultipleValue(data, $event) : setValue(data)\">\n            @if (options.multiple) {\n                @if (data.icon) {\n                    <div class=\"option-icon\">\n                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                    </div>\n                }\n                <apex-checkbox [checked]=\"isMultipleSelected(data)\">\n                    <div class=\"multiple-checkbox-container\">\n                        <span>{{ data.label }}</span>\n                        @if (data.description) { <span>{{ data.description }}</span> }\n                    </div>\n                </apex-checkbox>\n            } @else {\n                @if (data.icon) {\n                    <div class=\"option-icon\">\n                        <apex-img [src]=\"'assets/img/' + data.icon\" [alt]=\"''\"></apex-img>\n                    </div>\n                }\n                {{ data.label }}\n            }\n        </div>\n    }\n</ng-template>\n", styles: [":host{display:block;touch-action:manipulation}:host-context(.table) .input-field-wrapper{width:80px;justify-content:center}:host-context(.table) .input-field-wrapper input{width:40px;color:var(--apex-select-input-table-color, #5D6068);font-weight:600;margin:0}.header{display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--apex-select-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header label{font-size:14px;font-weight:600}.header-helper{font-size:12px;text-align:right;color:var(--apex-select-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{width:0;height:1px;display:block;content:\"\";background:var(--apex-select-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}.header .label-wrapper{display:flex;justify-content:center;align-items:center;text-wrap:wrap}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--apex-select-tooltip-icon-fill, transparent);stroke:var(--apex-input-tooltip-icon-stroke, #C6C6C6)}.input-field-wrapper{width:100%;height:44px;display:flex;justify-content:space-around;align-items:center;cursor:pointer;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;background-color:var(--apex-select-input-background-color, #ffffff00);border:solid var(--apex-select-input-border-color, #E9E9E9);border-width:var(--apex-select-input-border-width, 1px);transition:border 1s;border-radius:4px;padding:0 16px}.input-field-wrapper .multiple-count{font-size:14px;padding:0 8px;font-weight:600}.input-field-wrapper::-webkit-scrollbar{display:none}.input-field-wrapper:not(.input-field-wrapper.disabled):hover{border-color:var(--apex-select-input-border-hover-color, #4B5368)}.input-field-wrapper.disabled{opacity:.8;cursor:not-allowed;border:1px dashed var(--apex-select-input-border-disabled-color, #F2F2F2)}.input-field-wrapper .input-field{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 16px}apex-img{width:16px;height:16px}apex-img.prefix path{fill:var(--apex-select-icon-prefix-fill, #C6C6C6);stroke:var(--apex-select-icon-prefix-stroke, transparent)}.input-field-wrapper.disabled label{cursor:not-allowed}.chips{--apex-chip-font-size: var(--apex-select-chip-font-size, 10px);--apex-chip-color: var(--apex-select-chip-color, #FFFFFF);--apex-chip-background-color: var(--apex-select-chip-background-color, #0B1222);--apex-chip-icon-color: var(--apex-select-chip-icon-color, #FFFFFF);display:flex;padding-left:8px}.input-field-wrapper.inset{position:relative;border-color:var(--apex-select-inset-border-color, #D3D3D3)}.input-field-wrapper.inset.disabled{opacity:1;cursor:not-allowed;background-color:var(--apex-select-inset-disabled-background-color, #F3F3F3);border:1px solid var(--apex-select-inset-disabled-border-color, #E4E4E4)}.input-field-wrapper.inset-has-value input{color:transparent}.input-field-wrapper.inset-has-value .arrow-wrapper{display:none}.inset-stack{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 38px 0 16px;pointer-events:none}.inset-label{font-size:var(--apex-select-inset-label-font-size, 10px);font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:var(--apex-select-inset-label-color, #7C8182)}.inset-value{font-size:var(--apex-select-inset-value-font-size, 13px);font-weight:600;line-height:1;color:var(--apex-select-inset-value-color, #141414);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inset-clear{position:absolute;top:50%;right:12px;transform:translateY(-50%);display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:none;border-radius:999px;background:var(--apex-select-inset-clear-background, transparent);color:var(--apex-select-inset-clear-color, #7C8182);cursor:pointer}.inset-clear:hover{background:var(--apex-select-inset-clear-hover-background, #141414);color:var(--apex-select-inset-clear-hover-color, #FFFFFF)}.inset-clear svg{width:11px;height:11px;display:block}.input-field-wrapper input{width:inherit;flex:1;text-overflow:ellipsis;border:none;outline:none;cursor:pointer;background:transparent;color:var(--apex-select-input-text-color, #0B1222);font-size:16px;transform:scale(.875);transform-origin:left center;padding:0;margin:0 12px}.input-field-wrapper input.hidden{display:none}input::placeholder{color:var(--apex-select-input-placeholder-color, #0B1222)}.input-field-wrapper input.no-icon{left:0}.input-field-wrapper.disabled input{cursor:not-allowed}.arrow-wrapper{width:8px;height:8px}.arrow{width:8px;height:8px;position:relative;bottom:3px;border-top:2px solid var(--apex-select-arrow-color, #5D6068);border-left:2px solid var(--apex-select-arrow-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px;transition:all .25s ease-in-out;transform-origin:center;transform:rotate(-135deg)}.arrow.checked{bottom:-2px;transform:rotate(45deg);border-top:2px solid var(--apex-select-arrow-checked-color, #F96138);border-left:2px solid var(--apex-select-arrow-checked-color, #F96138)}.arrow svg{width:16px;height:16px;transform:rotate(0);transition:transform .25s ease-in-out}.arrow.checked svg{transform:rotate(180deg)}.input-field-wrapper.invalid{border:solid var(--apex-select-invalid-color, #F96138);border-width:var(--apex-select-invalid-border-width, 1px)}.input-field-wrapper.invalid label{color:var(--apex-select-invalid-color, #F96138)}.input-field-wrapper apex-chip{margin-right:4px}.dropdown{width:264px;position:fixed;z-index:900;overscroll-behavior:contain;border-radius:8px;border:1px solid var(--apex-select-dropdown-border-color, #E9E9E9);background-color:var(--apex-select-dropdown-background-color, #FFFFFF);box-shadow:var(--apex-select-dropdown-box-shadow);animation:fadeIn .3s forwards;opacity:0;margin-top:15px}.dropdown:focus{outline:none}.dropdown{scrollbar-width:thin;scrollbar-color:#F2F2F2 #FAFAFA}.dropdown::-webkit-scrollbar{width:4px}.dropdown::-webkit-scrollbar-thumb{background-color:#f2f2f2;border-radius:99px}.dropdown::-webkit-scrollbar-track{background-color:#fafafa;border-radius:99px}.dropdown::-webkit-scrollbar-button{display:none}.dropdown.no-scroll{overflow:hidden}.values{scrollbar-width:thin;scrollbar-color:#F2F2F2 #FAFAFA}.values::-webkit-scrollbar{width:4px}.values::-webkit-scrollbar-thumb{background-color:#f2f2f2;border-radius:99px}.values::-webkit-scrollbar-track{background-color:#fafafa;border-radius:99px}.values::-webkit-scrollbar-button{display:none}.dropdown .option{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600;color:#0009;padding:0 16px}.dropdown .option.disabled{pointer-events:none}.dropdown .option:hover,.dropdown .option.preselected{background:#00000005}.dropdown .option.checkbox.selected{--apex-checkbox-text-color: var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.dropdown .option.selected{color:var(--apex-select-input-text-selected-color, #F96138);background:#0000000a}.option-icon{width:var(--apex-select-option-icon-size, 16px);height:var(--apex-select-option-icon-size, 16px);min-width:var(--apex-select-option-icon-size, 16px);display:flex;justify-content:center;align-items:center;margin-right:var(--apex-select-option-icon-spacing, 10px)}.option-icon apex-img{max-width:var(--apex-select-option-icon-size, 20px);max-height:var(--apex-select-option-icon-size, 20px);display:flex;justify-content:center;align-items:center}.option-icon apex-img path{fill:var(--apex-select-option-icon-fill, #5D6068);stroke:var(--apex-select-option-icon-stroke, #ffffff00)}.dropdown .option.selected .option-icon apex-img path{fill:var(--apex-select-option-icon-selected-fill, #F96138);stroke:var(--apex-select-option-icon-selected-stroke, #ffffff00)}.values{width:fit-content;display:flex;flex-wrap:wrap;align-items:center;padding:6px;overflow-x:auto}.values apex-chip{margin:6px 0 0}.single-value{padding:6px}.options-divider{width:calc(100% - 36px);height:var(--apex-select-options-divider-height, 1px);background-color:var(--apex-select-options-divider-color, #E9E9E9);margin:0 auto}.multiple-checkbox-container{display:flex;flex-direction:column;row-gap:3px;padding:12px 0 12px 6px}.multiple-checkbox-container span{word-break:normal;overflow-wrap:break-word;white-space:normal}.multiple-checkbox-container span:nth-of-type(2){font-size:13px;font-weight:500;line-height:1.3;color:#5d6068}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.dropdown.dropdown-wrapper{display:flex;flex-direction:column;overflow:hidden;padding:0}.dropdown-search{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--apex-select-dropdown-search-border-color, #E9E9E9);color:var(--apex-select-dropdown-search-icon-color, #5D6068);padding:10px 16px}.dropdown-search-icon{flex:0 0 auto}.dropdown-search input{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--apex-select-input-text-color, #0B1222);padding:0}.dropdown-search input::placeholder{color:var(--apex-select-input-placeholder-color, #9A9A9A)}.dropdown-body{flex:1 1 auto;min-height:0;overflow-y:auto;max-height:var(--apex-select-dropdown-body-max-height, 320px)}.dropdown-body.dropdown-body-virtual{overflow:hidden;max-height:none}.dropdown-body{scrollbar-width:thin;scrollbar-color:#F2F2F2 #FAFAFA}.dropdown-body::-webkit-scrollbar{width:4px}.dropdown-body::-webkit-scrollbar-thumb{background-color:#f2f2f2;border-radius:99px}.dropdown-body::-webkit-scrollbar-track{background-color:#fafafa;border-radius:99px}.group-header{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--apex-select-group-header-color, #9A9A9A);pointer-events:none;-webkit-user-select:none;user-select:none;padding:10px 16px 4px}.dropdown .option.select-all-option{border-bottom:1px solid var(--apex-select-dropdown-border-color, #E9E9E9)}.dropdown-body.dropdown-body-columns{padding:4px 14px 10px}.dropdown-body-columns .group-columns{display:flex;align-items:flex-start;gap:24px}.dropdown-body-columns .select-col{flex:1;min-width:0}.dropdown-body-columns .option,.dropdown-body-columns .group-header{padding-left:8px;padding-right:8px}\n"] }]
         }], ctorParameters: () => [{ type: i1.OSService }, { type: i0.ElementRef }, { type: i0.IterableDiffers }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -628,6 +1014,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             }], inputWrapper: [{
                 type: ViewChild,
                 args: ['inputWrapper']
+            }], dropdownSearch: [{
+                type: ViewChild,
+                args: ['dropdownSearch']
+            }], dropdownContainer: [{
+                type: ViewChild,
+                args: ['dropdownContainer']
             }], options: [{
                 type: Input
             }], selectChange: [{
@@ -643,5 +1035,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ApexSelectComponent };
+export { ApexSelectComponent, ApexSelectVariant };
 //# sourceMappingURL=apexara-ng-components-select.mjs.map