@apexara/ng-components 1.0.6-test.5 → 1.0.6-test.7

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

@@ -23,6 +23,8 @@ class ApexSelectComponent {
         this.label = null;
         this.dropdown = null;
         this.inputWrapper = null;
+        this.dropdownSearch = null;
+        this.dropdownContainer = null;
         this.selectChange = new EventEmitter();
         this.helperTextChange = new EventEmitter();
         this.firstDropdown = signal(0, ...(ngDevMode ? [{ debugName: "firstDropdown" }] : []));
@@ -36,6 +38,7 @@ class ApexSelectComponent {
         this.documentKeyUpSubscription = null;
         this.controlSubscription = null;
         this.filteredData = signal([], ...(ngDevMode ? [{ debugName: "filteredData" }] : []));
+        this.filteredGroups = signal([], ...(ngDevMode ? [{ debugName: "filteredGroups" }] : []));
         this.lastSearch = '';
         this.keyListener = (event) => this.blockArrowScroll(event);
         this.wheelListener = (event) => this.blockScroll(event);
@@ -48,6 +51,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 +84,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 +105,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 +118,30 @@ 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;
+    }
+    getAllOptions() {
+        if (this.hasGroups()) {
+            return (this.options.groups || []).flatMap(group => group.data);
+        }
+        return this.options.data || [];
+    }
+    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 +203,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 +236,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 +265,7 @@ class ApexSelectComponent {
         this.input.nativeElement.value = visibleValue;
     }
     updateDropdownHeight() {
-        if (!this.isDropdown()) {
+        if (!this.isDropdown() || this.hasGroups()) {
             return;
         }
         setTimeout(() => {
@@ -282,23 +332,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,12 +389,12 @@ 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;
@@ -382,6 +438,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 +460,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 +536,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 +560,38 @@ 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;
+        }
+        this.documentKeyup(event);
     }
     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 +607,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 +630,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 +673,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,10 +698,10 @@ 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);
         if (isInsideDropdown) {
             const canScroll = dropdownEl.scrollHeight > dropdownEl.clientHeight;
@@ -601,7 +738,7 @@ 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 !== '') {\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 (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                        [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                        [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                @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                                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\">\n                                @for (group of filteredGroups(); track group.label) {\n                                    <div class=\"group-header\">{{ group.label }}</div>\n                                    @for (data of group.data; track data.value) {\n                                        <div class=\"option\"\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                                    }\n                                }\n\n                                @if (filteredGroups().length === 0) {\n                                    <div class=\"option disabled\">No options to select from.</div>\n                                }\n                            </div>\n                        } @else {\n                            <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx()\" class=\"dropdown-body dropdown-body-virtual\" #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                } @else {\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            }\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;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::-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}}.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::-webkit-scrollbar{width:8px}.dropdown-body::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown-body::-webkit-scrollbar-track{background-color:#f8f8f8}.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}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ApexSelectComponent, decorators: [{
             type: Component,
@@ -615,7 +752,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 !== '') {\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 (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                        [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                        [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                @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                                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\">\n                                @for (group of filteredGroups(); track group.label) {\n                                    <div class=\"group-header\">{{ group.label }}</div>\n                                    @for (data of group.data; track data.value) {\n                                        <div class=\"option\"\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                                    }\n                                }\n\n                                @if (filteredGroups().length === 0) {\n                                    <div class=\"option disabled\">No options to select from.</div>\n                                }\n                            </div>\n                        } @else {\n                            <cdk-virtual-scroll-viewport [itemSize]=\"optionItemSizePx\" [style.height.px]=\"dropdownHeightPx()\" class=\"dropdown-body dropdown-body-virtual\" #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                } @else {\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            }\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;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::-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}}.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::-webkit-scrollbar{width:8px}.dropdown-body::-webkit-scrollbar-thumb{background-color:#e0dfde;border-radius:25px}.dropdown-body::-webkit-scrollbar-track{background-color:#f8f8f8}.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}\n"] }]
         }], ctorParameters: () => [{ type: i1.OSService }, { type: i0.ElementRef }, { type: i0.IterableDiffers }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input']
@@ -628,6 +765,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: [{