ngx-tethys 20.0.0 → 20.0.1

package/fesm2022/ngx-tethys-select.mjs

@@ -1,23 +1,23 @@
 import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
 import { isPlatformBrowser, NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, NgZone, ElementRef, ChangeDetectorRef, PLATFORM_ID, input, viewChild, output, contentChild, numberAttribute, contentChildren, viewChildren, effect, untracked, forwardRef, HostListener, ViewChildren, ContentChildren, ViewChild, Input, ChangeDetectionStrategy, Component, model, signal, NgModule } from '@angular/core';
-import * as i1 from '@angular/forms';
+import { InjectionToken, inject, NgZone, ElementRef, ChangeDetectorRef, PLATFORM_ID, computed, input, signal, DestroyRef, viewChild, output, contentChild, numberAttribute, contentChildren, linkedSignal, afterRenderEffect, untracked, forwardRef, HostListener, ViewChildren, ViewChild, Input, ChangeDetectionStrategy, Component, model, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { ThyEmpty, ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { ThyInputDirective, ThyInputModule } from 'ngx-tethys/input';
 import { ThyLoading, ThyLoadingModule } from 'ngx-tethys/loading';
-import { ThySelectOptionGroup, ThySelectControl, ThyStopPropagationDirective, ThyScrollDirective, ThyOptionsContainer, ThyOption, THY_OPTION_PARENT_COMPONENT, ThyOptionModule, ThySharedModule, ThySelectCommonModule } from 'ngx-tethys/shared';
-import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { ThyOption, ThySelectOptionGroup, ThySelectControl, ThyStopPropagationDirective, ThyOptionRender, ThyOptionGroupRender, ThyOptionModule, ThySharedModule, ThySelectCommonModule } from 'ngx-tethys/shared';
+import { TabIndexDisabledControlValueAccessorMixin, ThyClickDispatcher, injectPanelEmptyIcon, getFlexiblePositions, scaleXMotion, scaleYMotion, scaleMotion } from 'ngx-tethys/core';
+import { ENTER, isFunction, coerceBooleanProperty, helpers, elementMatchClosest, SPACE, DOWN_ARROW, UP_ARROW, hasModifierKey, HOME, END, A, TAB } from 'ngx-tethys/util';
+import { timer, Observable } from 'rxjs';
+import { map, filter, startWith, take, distinctUntilChanged } from 'rxjs/operators';
 import { coerceElement } from '@angular/cdk/coercion';
-import { SelectionModel } from '@angular/cdk/collections';
-import { TabIndexDisabledControlValueAccessorMixin, ThyClickDispatcher, injectPanelEmptyIcon, ScrollToService, getFlexiblePositions, scaleXMotion, scaleYMotion, scaleMotion } from 'ngx-tethys/core';
-import { ENTER, isFunction, coerceBooleanProperty, elementMatchClosest, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, SPACE, hasModifierKey, HOME, END, A, helpers, isArray } from 'ngx-tethys/util';
-import { Subject, defer, merge, timer, Observable } from 'rxjs';
-import { map, filter, take, switchMap, takeUntil, startWith, distinctUntilChanged } from 'rxjs/operators';
-import { outputToObservable } from '@angular/core/rxjs-interop';
 import { injectLocale } from 'ngx-tethys/i18n';
+import * as i1 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { useHostRenderer } from '@tethys/cdk/dom';
 
 const THY_SELECT_SCROLL_STRATEGY = new InjectionToken('thy-select-scroll-strategy');
@@ -41,10 +41,9 @@ const THY_SELECT_CONFIG_PROVIDER = {
 
 const SELECT_PANEL_MAX_HEIGHT = 300;
 const SELECT_OPTION_MAX_HEIGHT = 40;
-const SELECT_OPTION_GROUP_MAX_HEIGHT = 30;
-const SELECT_PANEL_PADDING_TOP = 10;
+const SELECT_PANEL_PADDING_TOP = 12;
+const SELECT_PANEL_PADDING_BOTTOM = 12;
 const THY_SELECT_PANEL_MIN_WIDTH = 200;
-const noop$1 = () => { };
 /**
  * 下拉选择组件
  * @name thy-select,thy-custom-select
@@ -61,19 +60,19 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
     get thyDisabled() {
         return this.disabled;
     }
-    handleKeydown(event) {
-        if (!this.disabled) {
-            if (event.keyCode === ENTER) {
-                event.stopPropagation();
-            }
-            this.panelOpen ? this.handleOpenKeydown(event) : this.handleClosedKeydown(event);
+    keydown(event) {
+        if (this.disabled) {
+            return;
         }
+        if (event.keyCode === ENTER) {
+            event.stopPropagation();
+        }
+        this.handleKeydown(event);
     }
     get optionsChanges$() {
-        this.options = this.isReactiveDriven ? this.viewOptions : this.contentOptions;
-        let previousOptions = this.options.toArray();
-        return this.options.changes.pipe(map(data => {
-            return this.options.toArray();
+        let previousOptions = this.optionRenders.toArray();
+        return this.optionRenders.changes.pipe(map(data => {
+            return this.optionRenders.toArray();
         }), filter(data => {
             const res = previousOptions.length !== data.length || previousOptions.some((op, index) => op !== data[index]);
             previousOptions = data;
@@ -88,9 +87,6 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             this.scrollStrategy = this.overlay.scrollStrategies.reposition();
         }
     }
-    get placement() {
-        return this.thyPlacement() || this.config.placement;
-    }
     constructor() {
         super();
         this.ngZone = inject(NgZone);
@@ -106,25 +102,55 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         this.disabled = false;
         this.mode = '';
         this.scrollTop = 0;
-        this.modalValue = null;
         this.defaultOffset = 4;
-        this.dropDownMinWidth = null;
+        this.dropDownClass = computed(() => {
+            const modeClass = `thy-select-dropdown-${this.isMultiple() ? 'multiple' : 'single'}`;
+            return {
+                [`thy-select-dropdown`]: true,
+                [modeClass]: true
+            };
+        }, ...(ngDevMode ? [{ debugName: "dropDownClass" }] : []));
+        this.dropDownMinWidth = computed(() => {
+            const mode = this.thyDropdownWidthMode() || this.config.dropdownWidthMode;
+            let dropdownMinWidth = null;
+            if (mode?.minWidth) {
+                dropdownMinWidth = mode.minWidth;
+            }
+            else if (mode === 'min-width') {
+                dropdownMinWidth = THY_SELECT_PANEL_MIN_WIDTH;
+            }
+            else {
+                dropdownMinWidth = null;
+            }
+            return dropdownMinWidth;
+        }, ...(ngDevMode ? [{ debugName: "dropDownMinWidth" }] : []));
         /**
          * 设置下拉框的最小宽度，默认值 `match-select`，表示与输入框的宽度一致；`min-width` 表示最小宽度为200px；支持自定义最小宽度，比如传 `{minWidth: 150}` 表示最小宽度为150px
          * @default match-select
          */
         this.thyDropdownWidthMode = input(...(ngDevMode ? [undefined, { debugName: "thyDropdownWidthMode" }] : []));
+        this.placement = computed(() => {
+            return this.thyPlacement() || this.config.placement;
+        }, ...(ngDevMode ? [{ debugName: "placement" }] : []));
+        this.dropDownPositions = computed(() => {
+            return getFlexiblePositions(this.placement(), this.defaultOffset);
+        }, ...(ngDevMode ? [{ debugName: "dropDownPositions" }] : []));
+        this.itemSize = SELECT_OPTION_MAX_HEIGHT;
+        this.virtualHeight = computed(() => {
+            const maxVirtualHeight = SELECT_PANEL_MAX_HEIGHT - SELECT_PANEL_PADDING_TOP - SELECT_PANEL_PADDING_BOTTOM;
+            const height = this.filteredGroupsAndOptions().length * this.itemSize;
+            return Math.min(height, maxVirtualHeight);
+        }, ...(ngDevMode ? [{ debugName: "virtualHeight" }] : []));
+        /**
+         * 视觉上能看到的最大选项个数
+         */
+        this.maxItemLength = 7;
+        this.triggerRectWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "triggerRectWidth" }] : []));
         /**
          * 手动聚焦中的标识
          */
         this.manualFocusing = false;
-        this.destroy$ = new Subject();
-        this.optionSelectionChanges = defer(() => {
-            if (this.options) {
-                return merge(...this.options.map(option => outputToObservable(option.selectionChange)));
-            }
-            return this.ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionSelectionChanges));
-        });
+        this.destroyRef = inject(DestroyRef);
         this.cdkConnectedOverlay = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "cdkConnectedOverlay" }] : []));
         this.panelOpen = false;
         /**
@@ -237,70 +263,119 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
          * 是否隐藏选择框边框
          */
         this.thyBorderless = input(false, ...(ngDevMode ? [{ debugName: "thyBorderless", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
-        this.isReactiveDriven = false;
-        this.optionGroups = [];
+        this.scrolledIndex = 0;
+        this.cdkVirtualScrollViewport = viewChild(CdkVirtualScrollViewport, ...(ngDevMode ? [{ debugName: "cdkVirtualScrollViewport" }] : []));
+        this.shouldActivateOption = false;
         /**
          * option 列表
          */
         this.thyOptions = input(undefined, ...(ngDevMode ? [{ debugName: "thyOptions", transform: (value) => {
-                    if (value === null) {
+                    if (helpers.isUndefinedOrNull(value)) {
                         value = [];
                     }
-                    this.innerOptions = value;
-                    this.isReactiveDriven = true;
-                    this.buildReactiveOptions();
                     return value;
                 } }] : [{
                 transform: (value) => {
-                    if (value === null) {
+                    if (helpers.isUndefinedOrNull(value)) {
                         value = [];
                     }
-                    this.innerOptions = value;
-                    this.isReactiveDriven = true;
-                    this.buildReactiveOptions();
                     return value;
                 }
             }]));
+        this.keywords = signal('', ...(ngDevMode ? [{ debugName: "keywords" }] : []));
         /**
          * 目前只支持多选选中项的展示，默认为空，渲染文字模板，传入tag，渲染展示模板,
          * @default ''｜tag
          */
         this.thyPreset = input('', ...(ngDevMode ? [{ debugName: "thyPreset" }] : []));
-        this.panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : []));
+        this.options = contentChildren(ThyOption, ...(ngDevMode ? [{ debugName: "options", descendants: true }] : [{ descendants: true }]));
+        this.groups = contentChildren(ThySelectOptionGroup, ...(ngDevMode ? [{ debugName: "groups", descendants: true }] : [{ descendants: true }]));
         /**
-         * @private
+         * 所有分组和选项
+         */
+        this.allGroupsAndOptions = signal([], ...(ngDevMode ? [{ debugName: "allGroupsAndOptions" }] : []));
+        /**
+         * 渲染的分组和选项，基于 keywords 过滤后
+         */
+        this.filteredGroupsAndOptions = computed(() => {
+            return this.buildFilteredGroupsAndOptions();
+        }, ...(ngDevMode ? [{ debugName: "filteredGroupsAndOptions" }] : []));
+        /**
+         * 渲染的选项
+         */
+        this.filteredOptions = computed(() => {
+            return this.filteredGroupsAndOptions().filter(item => item.type === 'option');
+        }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
+        this.filteredOptionsMap = computed(() => {
+            return helpers.keyBy(this.filteredOptions(), 'value');
+        }, ...(ngDevMode ? [{ debugName: "filteredOptionsMap" }] : []));
+        /**
+         * 当前选中的值
+         */
+        this.selectedValues = linkedSignal(...(ngDevMode ? [{ debugName: "selectedValues", source: () => this.thyMode(),
+                computation: () => {
+                    return [];
+                } }] : [{
+                source: () => this.thyMode(),
+                computation: () => {
+                    return [];
+                }
+            }]));
+        this.selectedValuesMap = computed(() => {
+            return new Map(this.selectedValues().map(value => [value, true]));
+        }, ...(ngDevMode ? [{ debugName: "selectedValuesMap" }] : []));
+        /**
+         * 传给 selectControl 指令的选中值
          */
-        this.contentGroups = contentChildren(ThySelectOptionGroup, ...(ngDevMode ? [{ debugName: "contentGroups" }] : []));
-        this.viewGroups = viewChildren(ThySelectOptionGroup, ...(ngDevMode ? [{ debugName: "viewGroups" }] : []));
-        this.isSearching = false;
-        this.groupBy = (item) => item.groupLabel;
+        this.selectedOptions = linkedSignal(...(ngDevMode ? [{ debugName: "selectedOptions", source: () => this.thyMode(),
+                computation: () => {
+                    return this.thyMode() === 'multiple' ? [] : null;
+                } }] : [{
+                source: () => this.thyMode(),
+                computation: () => {
+                    return this.thyMode() === 'multiple' ? [] : null;
+                }
+            }]));
+        this.isMultiple = computed(() => {
+            return this.thyMode() === 'multiple';
+        }, ...(ngDevMode ? [{ debugName: "isMultiple" }] : []));
+        this.empty = computed(() => {
+            return !this.selectedValues().length;
+        }, ...(ngDevMode ? [{ debugName: "empty" }] : []));
+        this.activatedValue = signal(null, ...(ngDevMode ? [{ debugName: "activatedValue" }] : []));
         const selectConfig = this.selectConfig;
         this.config = { ...DEFAULT_SELECT_CONFIG, ...selectConfig };
         this.buildScrollStrategy();
-        effect(() => {
-            this.mode = this.thyMode();
+        afterRenderEffect(() => {
+            const options = this.options();
+            const groups = this.groups();
+            const reactiveOptions = this.thyOptions();
             untracked(() => {
-                this.instanceSelectionModel();
-                this.getPositions();
-                this.setDropDownClass();
+                this.buildAllGroupsAndOptions();
             });
         });
+        afterRenderEffect(() => {
+            this.updateSelectedOptions();
+        });
     }
     writeValue(value) {
-        this.modalValue = value;
-        this.setSelectionByModelValue(this.modalValue);
+        let selectedValues;
+        if (helpers.isUndefinedOrNull(value)) {
+            selectedValues = [];
+        }
+        else if (this.isMultiple()) {
+            selectedValues = value;
+        }
+        else {
+            selectedValues = [value];
+        }
+        this.selectedValues.set(selectedValues);
     }
     ngOnInit() {
-        this.getPositions();
-        this.dropDownMinWidth = this.getDropdownMinWidth();
-        if (!this.selectionModel) {
-            this.instanceSelectionModel();
-        }
-        this.setDropDownClass();
         if (isPlatformBrowser(this.platformId)) {
             this.thyClickDispatcher
                 .clicked(0)
-                .pipe(takeUntil(this.destroy$))
+                .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(event => {
                 if (!this.elementRef.nativeElement.contains(event.target) && this.panelOpen) {
                     this.ngZone.run(() => {
@@ -311,74 +386,16 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             });
         }
     }
-    buildOptionGroups(options) {
-        const optionGroups = [];
-        const groups = [...new Set(options.filter(item => this.groupBy(item)).map(sub => this.groupBy(sub)))];
-        const groupMap = new Map();
-        groups.forEach(group => {
-            const children = options.filter(item => this.groupBy(item) === group);
-            const groupOption = {
-                groupLabel: group,
-                children: children
-            };
-            groupMap.set(group, groupOption);
-        });
-        options.forEach(option => {
-            if (this.groupBy(option)) {
-                const currentIndex = optionGroups.findIndex(item => item.groupLabel === this.groupBy(option));
-                if (currentIndex === -1) {
-                    const item = groupMap.get(this.groupBy(option));
-                    optionGroups.push(item);
-                }
-            }
-            else {
-                optionGroups.push(option);
-            }
-        });
-        return optionGroups;
-    }
-    buildReactiveOptions() {
-        if (this.innerOptions.filter(item => this.groupBy(item)).length > 0) {
-            this.optionGroups = this.buildOptionGroups(this.innerOptions);
-        }
-        else {
-            this.optionGroups = this.innerOptions;
-        }
-    }
-    getDropdownMinWidth() {
-        const mode = this.thyDropdownWidthMode() || this.config.dropdownWidthMode;
-        let dropdownMinWidth = null;
-        if (mode?.minWidth) {
-            dropdownMinWidth = mode.minWidth;
-        }
-        else if (mode === 'min-width') {
-            dropdownMinWidth = THY_SELECT_PANEL_MIN_WIDTH;
-        }
-        else {
-            dropdownMinWidth = null;
-        }
-        return dropdownMinWidth;
-    }
     ngAfterViewInit() {
-        if (this.isReactiveDriven) {
-            this.setup();
-        }
-    }
-    ngAfterContentInit() {
-        if (!this.isReactiveDriven) {
-            this.setup();
-        }
+        this.setup();
     }
     setup() {
-        this.optionsChanges$.pipe(startWith(null), takeUntil(this.destroy$)).subscribe(data => {
-            this.resetOptions();
-            this.initializeSelection();
-            this.initKeyManager();
-            if (this.isSearching) {
-                this.highlightCorrectOption(false);
-                this.isSearching = false;
+        this.optionsChanges$.pipe(startWith(null), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            // Don't scroll to default highlighted option when scroll load more options
+            if (this.shouldActivateOption) {
+                this.shouldActivateOption = false;
+                this.scrollToActivatedOption();
             }
-            this.changeDetectorRef.markForCheck();
             this.ngZone.onStable
                 .asObservable()
                 .pipe(take(1))
@@ -396,57 +413,185 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             });
         }
     }
-    get isHiddenOptions() {
-        return this.options.toArray().every(option => option.hidden());
+    buildAllGroupsAndOptions() {
+        let allGroupsAndOptions;
+        const isReactiveDriven = this.thyOptions()?.length > 0;
+        if (isReactiveDriven) {
+            allGroupsAndOptions = this.allGroupsAndOptionsByReactive();
+        }
+        else {
+            allGroupsAndOptions = this.allGroupsAndOptionsByTemplate();
+        }
+        this.allGroupsAndOptions.set(allGroupsAndOptions);
     }
-    onAttached() {
-        this.cdkConnectedOverlay()
-            .positionChange.pipe(take(1))
-            .subscribe(() => {
-            if (this.panel()) {
-                if (this.keyManager.activeItem) {
-                    ScrollToService.scrollToElement(this.keyManager.activeItem.element.nativeElement, this.panel().nativeElement);
-                    this.changeDetectorRef.detectChanges();
+    allGroupsAndOptionsByReactive() {
+        const options = this.thyOptions();
+        const groupMap = new Map();
+        const ungroupedOptions = [];
+        let groupsAndOptions = [];
+        for (const option of options) {
+            if (option.groupLabel) {
+                if (!groupMap.has(option.groupLabel)) {
+                    groupMap.set(option.groupLabel, []);
                 }
-                else {
-                    if (!this.empty) {
-                        ScrollToService.scrollToElement(this.selectionModel.selected[0].element.nativeElement, this.panel().nativeElement);
-                        this.changeDetectorRef.detectChanges();
+                groupMap.get(option.groupLabel).push(option);
+            }
+            else {
+                ungroupedOptions.push(option);
+            }
+        }
+        for (const [groupLabel, groupOptions] of groupMap) {
+            groupsAndOptions.push({
+                type: 'group',
+                label: groupLabel
+            });
+            for (const option of groupOptions) {
+                groupsAndOptions.push({
+                    type: 'option',
+                    value: option.value,
+                    label: option.label,
+                    rawValue: option,
+                    showOptionCustom: false,
+                    disabled: !!option.disabled,
+                    groupLabel: option.groupLabel
+                });
+            }
+        }
+        for (const option of ungroupedOptions) {
+            groupsAndOptions.push({
+                type: 'option',
+                value: option.value,
+                label: option.label,
+                rawValue: option,
+                showOptionCustom: false,
+                disabled: !!option.disabled
+            });
+        }
+        return groupsAndOptions;
+    }
+    allGroupsAndOptionsByTemplate() {
+        const options = this.options();
+        const groups = this.groups();
+        let groupsAndOptions = [];
+        if (options && options.length > 0) {
+            groupsAndOptions = options.map((option) => {
+                const { thyValue, thyRawValue, thyLabelText, thyShowOptionCustom, thyDisabled, template, thySearchKey, groupLabel } = option;
+                return {
+                    type: 'option',
+                    value: thyValue(),
+                    rawValue: thyRawValue(),
+                    label: thyLabelText(),
+                    showOptionCustom: thyShowOptionCustom(),
+                    disabled: thyDisabled(),
+                    template: template(),
+                    searchKey: thySearchKey(),
+                    groupLabel: groupLabel
+                };
+            });
+        }
+        if (groups && groups.length > 0) {
+            for (const group of groups) {
+                const groupIndex = groupsAndOptions.findIndex(option => option.groupLabel === group.thyGroupLabel());
+                if (groupIndex > -1) {
+                    const groupItem = {
+                        type: 'group',
+                        label: group.thyGroupLabel(),
+                        disabled: group.thyDisabled()
+                    };
+                    groupsAndOptions.splice(groupIndex, 0, groupItem);
+                }
+            }
+        }
+        return groupsAndOptions;
+    }
+    buildFilteredGroupsAndOptions() {
+        const keywords = this.keywords();
+        const isServerSearch = this.thyServerSearch();
+        const allGroupsAndOptions = this.allGroupsAndOptions();
+        let filteredGroupsAndOptions = [];
+        if (keywords && !isServerSearch) {
+            const lowerKeywords = keywords.toLowerCase();
+            const matchedOptions = new Set();
+            const matchedGroupLabels = new Set();
+            for (const item of allGroupsAndOptions) {
+                if (item.type === 'option') {
+                    const isMatch = (item.searchKey || item.label).toLowerCase().indexOf(lowerKeywords) > -1;
+                    if (isMatch) {
+                        matchedOptions.add(item.value);
+                        if (item.groupLabel) {
+                            matchedGroupLabels.add(item.groupLabel);
+                        }
                     }
                 }
             }
-        });
+            for (const item of allGroupsAndOptions) {
+                if (item.type === 'group' && matchedGroupLabels.has(item.label)) {
+                    filteredGroupsAndOptions.push(item);
+                }
+                else if (item.type === 'option' && matchedOptions.has(item.value)) {
+                    filteredGroupsAndOptions.push(item);
+                }
+            }
+            return filteredGroupsAndOptions;
+        }
+        return allGroupsAndOptions;
     }
-    dropDownMouseMove(event) {
-        if (this.keyManager.activeItem) {
-            this.keyManager.setActiveItem(-1);
+    updateSelectedOptions() {
+        const selectedValues = this.selectedValues();
+        const isMultiple = untracked(() => this.isMultiple());
+        let newOptions = [];
+        if (selectedValues.length) {
+            const filteredOptionsMap = this.filteredOptionsMap();
+            const oldSelectedOptionsMap = untracked(() => {
+                const selected = this.selectedOptions();
+                let oldSelectedOptions;
+                if (helpers.isArray(selected)) {
+                    oldSelectedOptions = selected;
+                }
+                else if (selected) {
+                    oldSelectedOptions = [selected];
+                }
+                else {
+                    oldSelectedOptions = [];
+                }
+                return helpers.keyBy(oldSelectedOptions, 'thyValue');
+            });
+            selectedValues.forEach(value => {
+                let option = filteredOptionsMap[value];
+                if (option) {
+                    newOptions.push({
+                        thyLabelText: option.label,
+                        thyValue: option.value,
+                        thyRawValue: option.rawValue
+                    });
+                }
+                else if (oldSelectedOptionsMap[value]) {
+                    newOptions.push(oldSelectedOptionsMap[value]);
+                }
+            });
+            this.selectedOptions.set(isMultiple ? newOptions : newOptions.length ? newOptions[0] : null);
+        }
+        else {
+            this.selectedOptions.set(isMultiple ? [] : null);
         }
     }
-    onOptionsScrolled(elementRef) {
-        const scroll = elementRef.nativeElement.scrollTop, height = elementRef.nativeElement.clientHeight, scrollHeight = elementRef.nativeElement.scrollHeight;
-        if (scroll + height + 10 >= scrollHeight) {
-            this.ngZone.run(() => {
+    optionsScrolled(index) {
+        this.scrolledIndex = index;
+        if (this.thyEnableScrollLoad()) {
+            const isScrollToBottom = index + this.maxItemLength >= this.filteredGroupsAndOptions().length;
+            if (isScrollToBottom) {
                 this.thyOnScrollToBottom.emit();
-            });
+            }
         }
     }
-    onSearchFilter(searchText) {
-        searchText = searchText.trim();
+    search(keywords) {
+        this.shouldActivateOption = true;
+        this.activatedValue.set(null);
+        this.keywords.set(keywords.trim());
         if (this.thyServerSearch()) {
-            this.isSearching = true;
-            this.thyOnSearch.emit(searchText);
+            this.thyOnSearch.emit(keywords);
         }
         else {
-            const options = this.options.toArray();
-            options.forEach(option => {
-                if (option.matchSearchText(searchText)) {
-                    option.showOption();
-                }
-                else {
-                    option.hideOption();
-                }
-            });
-            this.highlightCorrectOption(false);
             this.updateCdkConnectedOverlayPositions();
         }
     }
@@ -478,14 +623,12 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         if (this.disabled) {
             return;
         }
-        if (!this.options.find(option => option === $event.item)) {
-            $event.item.deselect();
-            // fix option unselect can not emit changes;
-            this.onSelect($event.item, true);
-        }
-        else {
-            $event.item.deselect();
+        const selectedValue = this.selectedValues();
+        const index = selectedValue.indexOf($event.item.thyValue);
+        if (index > -1) {
+            this.selectedValues.set([...selectedValue.slice(0, index), ...selectedValue.slice(index + 1)]);
         }
+        this.emitModelValueChange();
     }
     clearSelectValue(event) {
         if (event) {
@@ -494,8 +637,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         if (this.disabled) {
             return;
         }
-        this.selectionModel.clear();
-        this.changeDetectorRef.markForCheck();
+        this.selectedValues.set([]);
         this.emitModelValueChange();
     }
     updateCdkConnectedOverlayPositions() {
@@ -505,19 +647,6 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             }
         });
     }
-    get selected() {
-        return this.isMultiple ? this.selectionModel.selected : this.selectionModel.selected[0];
-    }
-    get isMultiple() {
-        return this.mode === 'multiple';
-    }
-    get empty() {
-        return !this.selectionModel || this.selectionModel.isEmpty();
-    }
-    getItemCount() {
-        const group = this.isReactiveDriven ? this.viewGroups() : this.contentGroups();
-        return this.options.length + group.length;
-    }
     toggle(event) {
         if (this.panelOpen) {
             if (!this.thyShowSearch()) {
@@ -529,19 +658,20 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         }
     }
     open() {
-        if (this.disabled || !this.options || this.panelOpen) {
+        if (this.disabled || this.panelOpen) {
             return;
         }
-        this.triggerRectWidth = this.getOriginRectWidth();
+        this.triggerRectWidth.set(this.getOriginRectWidth());
         this.subscribeTriggerResize();
         this.panelOpen = true;
-        this.highlightCorrectOption();
+        this.shouldActivateOption = true;
         this.thyOnExpandStatusChange.emit(this.panelOpen);
         this.changeDetectorRef.markForCheck();
     }
     close() {
         if (this.panelOpen) {
             this.panelOpen = false;
+            this.scrolledIndex = 0;
             this.unsubscribeTriggerResize();
             this.thyOnExpandStatusChange.emit(this.panelOpen);
             this.changeDetectorRef.markForCheck();
@@ -549,252 +679,190 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         }
     }
     emitModelValueChange() {
-        const selectedValues = this.selectionModel.selected;
-        const changeValue = selectedValues.map((option) => {
-            return option.thyValue;
-        });
-        if (this.isMultiple) {
-            this.modalValue = changeValue;
+        let modelValue;
+        const selectedValues = this.selectedValues();
+        if (this.isMultiple()) {
+            modelValue = selectedValues;
         }
         else {
-            if (changeValue.length === 0) {
-                this.modalValue = null;
+            if (selectedValues.length === 0) {
+                modelValue = null;
             }
             else {
-                this.modalValue = changeValue[0];
+                modelValue = selectedValues[0];
             }
         }
-        this.onChangeFn(this.modalValue);
+        this.onChangeFn(modelValue);
         this.updateCdkConnectedOverlayPositions();
     }
-    highlightCorrectOption(fromOpenPanel = true) {
-        if (this.keyManager && this.panelOpen) {
-            if (fromOpenPanel) {
-                if (this.keyManager.activeItem) {
-                    return;
-                }
-                if (this.empty) {
-                    if (!this.thyAutoActiveFirstItem()) {
-                        return;
-                    }
-                    this.keyManager.setFirstItemActive();
-                }
-                else {
-                    this.keyManager.setActiveItem(this.selectionModel.selected[0]);
-                }
+    scrollToActivatedOption(needSelect = false) {
+        if (!this.panelOpen) {
+            return;
+        }
+        const filteredOptions = this.filteredOptions();
+        if (!filteredOptions.length) {
+            return;
+        }
+        let toActivatedValue = this.activatedValue();
+        if (!toActivatedValue || !this.filteredOptionsMap()[toActivatedValue]) {
+            if (this.selectedValues().length > 0) {
+                toActivatedValue = this.selectedValues()[0];
             }
             else {
-                if (!this.thyAutoActiveFirstItem()) {
-                    return;
+                if (this.thyAutoActiveFirstItem()) {
+                    toActivatedValue = filteredOptions[0].value || null;
                 }
-                // always set first option active
-                this.keyManager.setFirstItemActive();
             }
+            if (!toActivatedValue) {
+                return;
+            }
+            this.activatedValue.set(toActivatedValue);
         }
-    }
-    initKeyManager() {
-        if (this.keyManager && this.keyManager.activeItem) {
-            this.keyManager.activeItem.setInactiveStyles();
+        const targetIndex = this.filteredGroupsAndOptions().findIndex(item => item.value === toActivatedValue);
+        if (targetIndex === -1) {
+            return;
         }
-        this.keyManager = new ActiveDescendantKeyManager(this.options)
-            .withTypeAhead()
-            .withWrap()
-            .withVerticalOrientation()
-            .withAllowedModifierKeys(['shiftKey']);
-        this.keyManager.tabOut.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            this.focus();
-            this.close();
-        });
-        this.keyManager.change.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            if (this.panelOpen && this.panel()) {
-                if (this.keyManager.activeItem) {
-                    ScrollToService.scrollToElement(this.keyManager.activeItem.element.nativeElement, this.panel().nativeElement);
-                }
-            }
-            else if (!this.panelOpen && !this.isMultiple && this.keyManager.activeItem) {
-                this.keyManager.activeItem.selectViaInteraction();
-            }
-        });
-    }
-    handleClosedKeydown(event) {
-        const keyCode = event.keyCode;
-        const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW || keyCode === LEFT_ARROW || keyCode === RIGHT_ARROW;
-        const isOpenKey = keyCode === ENTER || keyCode === SPACE;
-        const manager = this.keyManager;
-        // Open the select on ALT + arrow key to match the native <select>
-        if ((isOpenKey && !hasModifierKey(event)) || ((this.isMultiple || event.altKey) && isArrowKey)) {
-            event.preventDefault(); // prevents the page from scrolling down when pressing space
-            this.open();
+        if (targetIndex < this.scrolledIndex || targetIndex >= this.scrolledIndex + this.maxItemLength) {
+            this.cdkVirtualScrollViewport()?.scrollToIndex(targetIndex || 0);
         }
-        else if (!this.isMultiple) {
-            if (keyCode === HOME || keyCode === END) {
-                keyCode === HOME ? manager.setFirstItemActive() : manager.setLastItemActive();
-                event.preventDefault();
-            }
-            else {
-                manager.onKeydown(event);
-            }
+        if (needSelect) {
+            this.optionRenders.find(option => option.thyValue() === toActivatedValue)?.selectViaInteraction();
         }
     }
-    handleOpenKeydown(event) {
+    handleKeydown(event) {
         const keyCode = event.keyCode;
+        const isOpenKey = keyCode === ENTER || keyCode === SPACE;
         const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW;
-        const manager = this.keyManager;
-        if (keyCode === HOME || keyCode === END) {
-            event.preventDefault();
-            keyCode === HOME ? manager.setFirstItemActive() : manager.setLastItemActive();
+        if (event.altKey) {
+            if (this.panelOpen && isArrowKey) {
+                event.preventDefault();
+                this.close();
+                return;
+            }
         }
-        else if (isArrowKey && event.altKey) {
-            // Close the select on ALT + arrow key to match the native <select>
-            event.preventDefault();
-            this.close();
+        if (!this.panelOpen) {
+            this.open();
+            if (isOpenKey) {
+                event.preventDefault();
+                return;
+            }
         }
-        else if ((keyCode === ENTER || keyCode === SPACE) && (manager.activeItem || !this.empty) && !hasModifierKey(event)) {
+        const filteredOptions = this.filteredOptions();
+        if (keyCode === DOWN_ARROW || keyCode === UP_ARROW) {
             event.preventDefault();
-            if (!manager.activeItem) {
-                if (manager.activeItemIndex === -1 && !this.empty) {
-                    manager.setActiveItem(this.selectionModel.selected[0]);
+            const activatedValue = this.activatedValue();
+            const currentOption = this.filteredOptionsMap()[activatedValue];
+            if (!currentOption) {
+                return;
+            }
+            const currentIndex = filteredOptions.indexOf(currentOption);
+            let targetIndex;
+            if (keyCode === DOWN_ARROW) {
+                targetIndex = currentIndex + 1;
+                if (targetIndex > filteredOptions.length - 1) {
+                    targetIndex = 0;
+                }
+                let attempts = 0;
+                while (filteredOptions[targetIndex]?.disabled && attempts < filteredOptions.length) {
+                    targetIndex++;
+                    if (targetIndex > filteredOptions.length - 1) {
+                        targetIndex = 0;
+                    }
+                    attempts++;
                 }
             }
-            manager.activeItem.selectViaInteraction();
-        }
-        else if (this.isMultiple && keyCode === A && event.ctrlKey) {
-            event.preventDefault();
-            const hasDeselectedOptions = this.options.some(opt => !opt.disabled && !opt.selected());
-            this.options.forEach(option => {
-                if (!option.disabled) {
-                    hasDeselectedOptions ? option.select() : option.deselect();
+            else {
+                targetIndex = currentIndex - 1;
+                if (targetIndex < 0) {
+                    targetIndex = filteredOptions.length - 1;
                 }
-            });
-        }
-        else {
-            if (manager.activeItemIndex === -1 && !this.empty) {
-                manager.setActiveItem(this.selectionModel.selected[0]);
+                let attempts = 0;
+                while (filteredOptions[targetIndex]?.disabled && attempts < filteredOptions.length) {
+                    targetIndex--;
+                    if (targetIndex < 0) {
+                        targetIndex = filteredOptions.length - 1;
+                    }
+                    attempts++;
+                }
+            }
+            const targetOption = filteredOptions[targetIndex];
+            if (targetOption?.disabled) {
+                return;
+            }
+            this.activatedValue.set(targetOption.value);
+            if (!hasModifierKey(event)) {
+                this.scrollToActivatedOption();
             }
-            const previouslyFocusedIndex = manager.activeItemIndex;
-            manager.onKeydown(event);
-            if (this.isMultiple &&
-                isArrowKey &&
-                event.shiftKey &&
-                manager.activeItem &&
-                manager.activeItemIndex !== previouslyFocusedIndex) {
-                manager.activeItem.selectViaInteraction();
+            else if (this.isMultiple() && event.shiftKey) {
+                this.scrollToActivatedOption(true);
             }
         }
-    }
-    getPositions() {
-        this.dropDownPositions = getFlexiblePositions(this.thyPlacement() || this.config.placement, this.defaultOffset);
-    }
-    instanceSelectionModel() {
-        if (this.selectionModel) {
-            this.selectionModel.clear();
+        else if (keyCode === HOME || keyCode === END) {
+            event.preventDefault();
+            const targetOption = keyCode === HOME ? filteredOptions[0] : filteredOptions[filteredOptions.length - 1];
+            this.activatedValue.set(targetOption.value);
+            this.scrollToActivatedOption();
         }
-        this.selectionModel = new SelectionModel(this.isMultiple);
-        if (this.selectionModelSubscription) {
-            this.selectionModelSubscription.unsubscribe();
-            this.selectionModelSubscription = null;
+        else if ((keyCode === ENTER || keyCode === SPACE) && (this.activatedValue() || !this.empty()) && !hasModifierKey(event)) {
+            event.preventDefault();
+            this.scrollToActivatedOption(true);
         }
-        this.selectionModelSubscription = this.selectionModel.changed.pipe(takeUntil(this.destroy$)).subscribe(event => {
-            event.added.forEach(option => option.select());
-            event.removed.forEach(option => option.deselect());
-        });
-    }
-    resetOptions() {
-        const changedOrDestroyed$ = merge(this.optionsChanges$, this.destroy$);
-        this.optionSelectionChanges.pipe(takeUntil(changedOrDestroyed$)).subscribe((event) => {
-            this.onSelect(event.option, event.isUserInput);
-            if (event.isUserInput && !this.isMultiple && this.panelOpen) {
-                this.close();
-                this.focus();
+        else if (this.isMultiple() && keyCode === A && event.ctrlKey) {
+            event.preventDefault();
+            const hasDeselectedOptions = filteredOptions.some(opt => !opt.disabled && !this.selectedValues().includes(opt.value));
+            let selectedValues = [];
+            if (hasDeselectedOptions) {
+                selectedValues = filteredOptions.filter(option => !option.disabled).map(option => option.value);
             }
-        });
-    }
-    initializeSelection() {
-        Promise.resolve().then(() => {
-            this.setSelectionByModelValue(this.modalValue);
-        });
-    }
-    setDropDownClass() {
-        let modeClass = '';
-        if (this.isMultiple) {
-            modeClass = `thy-select-dropdown-${this.mode}`;
+            this.selectedValues.set(selectedValues);
+            this.emitModelValueChange();
         }
-        else {
-            modeClass = `thy-select-dropdown-single`;
+        else if (keyCode === TAB) {
+            this.focus();
+            this.close();
         }
-        this.dropDownClass = {
-            [`thy-select-dropdown`]: true,
-            [modeClass]: true
-        };
     }
-    setSelectionByModelValue(modalValue) {
-        if (helpers.isUndefinedOrNull(modalValue)) {
-            if (this.selectionModel.selected.length > 0) {
-                this.selectionModel.clear();
-                this.changeDetectorRef.markForCheck();
+    optionClick(event) {
+        const { value, isUserInput } = event;
+        const options = this.options();
+        if (this.isMultiple()) {
+            const selectedValues = this.selectedValues() || [];
+            const index = selectedValues.indexOf(value);
+            if (index > -1) {
+                selectedValues.splice(index, 1);
             }
-            return;
-        }
-        if (this.isMultiple) {
-            if (isArray(modalValue)) {
-                const selected = [...this.selectionModel.selected];
-                this.selectionModel.clear();
-                modalValue.forEach(itemValue => {
-                    const option = this.options.find(_option => _option.thyValue === itemValue) ||
-                        selected.find(_option => _option.thyValue === itemValue);
-                    if (option) {
-                        this.selectionModel.select(option);
-                    }
-                });
+            else {
+                selectedValues.push(value);
             }
-        }
-        else {
-            const selectedOption = this.options?.find(option => {
-                return option.thyValue === modalValue;
-            });
-            if (selectedOption) {
-                this.selectionModel.select(selectedOption);
+            if (this.thySortComparator()) {
+                selectedValues.sort((a, b) => {
+                    const aOption = options.find(option => option.thyValue() === a);
+                    const bOption = options.find(option => option.thyValue() === b);
+                    return this.thySortComparator()(aOption, bOption, [...options]);
+                });
             }
-        }
-        this.changeDetectorRef.markForCheck();
-    }
-    onSelect(option, isUserInput) {
-        const wasSelected = this.selectionModel.isSelected(option);
-        if (option.thyValue == null && !this.isMultiple) {
-            option.deselect();
-            this.selectionModel.clear();
+            this.selectedValues.set([...selectedValues]);
         }
         else {
-            if (wasSelected !== option.selected()) {
-                option.selected() ? this.selectionModel.select(option) : this.selectionModel.deselect(option);
-            }
-            if (isUserInput) {
-                this.keyManager.setActiveItem(option);
-            }
-            if (this.isMultiple) {
-                this.sortValues();
-                if (isUserInput) {
-                    this.focus();
-                }
-            }
+            this.selectedValues.set([value]);
+            this.close();
         }
-        if (wasSelected !== this.selectionModel.isSelected(option)) {
-            this.emitModelValueChange();
+        const option = options.find(option => option.thyValue() === value);
+        if (option) {
+            const selected = this.selectedValues().includes(value);
+            option.selected.set(selected);
+            option.selectionChange.emit({ option, isUserInput });
         }
-        if (!this.isMultiple) {
+        this.emitModelValueChange();
+        if (!this.isMultiple()) {
             this.onTouchedFn();
         }
-        this.changeDetectorRef.markForCheck();
     }
-    sortValues() {
-        if (this.isMultiple) {
-            const options = this.options.toArray();
-            if (this.thySortComparator()) {
-                this.selectionModel.sort((a, b) => {
-                    return this.thySortComparator()(a, b, options);
-                });
-            }
-        }
+    optionHover(value) {
+        this.activatedValue.set(value);
+    }
+    mouseLeaveOptions() {
+        this.activatedValue.set(null);
     }
     getOriginRectWidth() {
         return this.thyOrigin() ? coerceElement(this.thyOrigin()).offsetWidth : this.trigger.nativeElement.offsetWidth;
@@ -813,7 +881,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             }), distinctUntilChanged())
                 .subscribe((width) => {
                 this.ngZone.run(() => {
-                    this.triggerRectWidth = width;
+                    this.triggerRectWidth.set(width);
                     this.updateCdkConnectedOverlayPositions();
                     this.changeDetectorRef.markForCheck();
                 });
@@ -826,31 +894,29 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             this.resizeSubscription = null;
         }
     }
+    trackByFn(index, item) {
+        if (item.type === 'group') {
+            return item.label || index;
+        }
+        if (item.type === 'option') {
+            return item.value || index;
+        }
+    }
     ngOnDestroy() {
         this.unsubscribeTriggerResize();
-        this.destroy$.next();
-        this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ThySelect, isStandalone: true, selector: "thy-select,thy-custom-select", inputs: { thyDropdownWidthMode: { classPropertyName: "thyDropdownWidthMode", publicName: "thyDropdownWidthMode", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceHolder: { classPropertyName: "thyPlaceHolder", publicName: "thyPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, thyServerSearch: { classPropertyName: "thyServerSearch", publicName: "thyServerSearch", isSignal: true, isRequired: false, transformFunction: null }, thyLoadState: { classPropertyName: "thyLoadState", publicName: "thyLoadState", isSignal: true, isRequired: false, transformFunction: null }, thyAutoActiveFirstItem: { classPropertyName: "thyAutoActiveFirstItem", publicName: "thyAutoActiveFirstItem", isSignal: true, isRequired: false, transformFunction: null }, thyMode: { classPropertyName: "thyMode", publicName: "thyMode", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyEmptyStateText: { classPropertyName: "thyEmptyStateText", publicName: "thyEmptyStateText", isSignal: true, isRequired: false, transformFunction: null }, thyEmptySearchMessageText: { classPropertyName: "thyEmptySearchMessageText", publicName: "thyEmptySearchMessageText", isSignal: true, isRequired: false, transformFunction: null }, thyEnableScrollLoad: { classPropertyName: "thyEnableScrollLoad", publicName: "thyEnableScrollLoad", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thySortComparator: { classPropertyName: "thySortComparator", publicName: "thySortComparator", isSignal: true, isRequired: false, transformFunction: null }, thyFooterTemplate: { classPropertyName: "thyFooterTemplate", publicName: "thyFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyPlacement: { classPropertyName: "thyPlacement", publicName: "thyPlacement", isSignal: true, isRequired: false, transformFunction: null }, thyOrigin: { classPropertyName: "thyOrigin", publicName: "thyOrigin", isSignal: true, isRequired: false, transformFunction: null }, thyFooterClass: { classPropertyName: "thyFooterClass", publicName: "thyFooterClass", isSignal: true, isRequired: false, transformFunction: null }, thyAutoExpand: { classPropertyName: "thyAutoExpand", publicName: "thyAutoExpand", isSignal: true, isRequired: false, transformFunction: null }, thyHasBackdrop: { classPropertyName: "thyHasBackdrop", publicName: "thyHasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, thyMaxTagCount: { classPropertyName: "thyMaxTagCount", publicName: "thyMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, thyBorderless: { classPropertyName: "thyBorderless", publicName: "thyBorderless", isSignal: true, isRequired: false, transformFunction: null }, thyOptions: { classPropertyName: "thyOptions", publicName: "thyOptions", isSignal: true, isRequired: false, transformFunction: null }, thyPreset: { classPropertyName: "thyPreset", publicName: "thyPreset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnSearch: "thyOnSearch", thyOnScrollToBottom: "thyOnScrollToBottom", thyOnExpandStatusChange: "thyOnExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "keydown": "handleKeydown($event)" }, properties: { "class.thy-select-custom": "true", "class.thy-select": "true", "class.menu-is-opened": "panelOpen", "attr.tabindex": "tabIndex" } }, providers: [
-            {
-                provide: THY_OPTION_PARENT_COMPONENT,
-                useExisting: ThySelect
-            },
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ThySelect, isStandalone: true, selector: "thy-select,thy-custom-select", inputs: { thyDropdownWidthMode: { classPropertyName: "thyDropdownWidthMode", publicName: "thyDropdownWidthMode", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceHolder: { classPropertyName: "thyPlaceHolder", publicName: "thyPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, thyServerSearch: { classPropertyName: "thyServerSearch", publicName: "thyServerSearch", isSignal: true, isRequired: false, transformFunction: null }, thyLoadState: { classPropertyName: "thyLoadState", publicName: "thyLoadState", isSignal: true, isRequired: false, transformFunction: null }, thyAutoActiveFirstItem: { classPropertyName: "thyAutoActiveFirstItem", publicName: "thyAutoActiveFirstItem", isSignal: true, isRequired: false, transformFunction: null }, thyMode: { classPropertyName: "thyMode", publicName: "thyMode", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyEmptyStateText: { classPropertyName: "thyEmptyStateText", publicName: "thyEmptyStateText", isSignal: true, isRequired: false, transformFunction: null }, thyEmptySearchMessageText: { classPropertyName: "thyEmptySearchMessageText", publicName: "thyEmptySearchMessageText", isSignal: true, isRequired: false, transformFunction: null }, thyEnableScrollLoad: { classPropertyName: "thyEnableScrollLoad", publicName: "thyEnableScrollLoad", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thySortComparator: { classPropertyName: "thySortComparator", publicName: "thySortComparator", isSignal: true, isRequired: false, transformFunction: null }, thyFooterTemplate: { classPropertyName: "thyFooterTemplate", publicName: "thyFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyPlacement: { classPropertyName: "thyPlacement", publicName: "thyPlacement", isSignal: true, isRequired: false, transformFunction: null }, thyOrigin: { classPropertyName: "thyOrigin", publicName: "thyOrigin", isSignal: true, isRequired: false, transformFunction: null }, thyFooterClass: { classPropertyName: "thyFooterClass", publicName: "thyFooterClass", isSignal: true, isRequired: false, transformFunction: null }, thyAutoExpand: { classPropertyName: "thyAutoExpand", publicName: "thyAutoExpand", isSignal: true, isRequired: false, transformFunction: null }, thyHasBackdrop: { classPropertyName: "thyHasBackdrop", publicName: "thyHasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, thyMaxTagCount: { classPropertyName: "thyMaxTagCount", publicName: "thyMaxTagCount", isSignal: true, isRequired: false, transformFunction: null }, thyBorderless: { classPropertyName: "thyBorderless", publicName: "thyBorderless", isSignal: true, isRequired: false, transformFunction: null }, thyOptions: { classPropertyName: "thyOptions", publicName: "thyOptions", isSignal: true, isRequired: false, transformFunction: null }, thyPreset: { classPropertyName: "thyPreset", publicName: "thyPreset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnSearch: "thyOnSearch", thyOnScrollToBottom: "thyOnScrollToBottom", thyOnExpandStatusChange: "thyOnExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "keydown": "keydown($event)" }, properties: { "class.thy-select-custom": "true", "class.thy-select": "true", "class.menu-is-opened": "panelOpen", "attr.tabindex": "tabIndex" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ThySelect),
                 multi: true
             }
-        ], queries: [{ propertyName: "selectedValueDisplayRef", first: true, predicate: ["selectedDisplay"], descendants: true, isSignal: true }, { propertyName: "contentGroups", predicate: ThySelectOptionGroup, isSignal: true }, { propertyName: "contentOptions", predicate: ThyOption, descendants: true }], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "viewGroups", predicate: ThySelectOptionGroup, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, static: true }, { propertyName: "viewOptions", predicate: ThyOption, descendants: true }], exportAs: ["thySelect"], usesInheritance: true, ngImport: i0, template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selected\"\n  [thyIsMultiple]=\"isMultiple\"\n  [thyShowSearch]=\"thyShowSearch()\"\n  [thyAllowClear]=\"thyAllowClear()\"\n  [thySize]=\"thySize()\"\n  [thyPlaceholder]=\"thyPlaceHolder()\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef()\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless()\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"onSearchFilter($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount()\"\n  [thyPreset]=\"thyPreset()\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin() || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (attach)=\"onAttached()\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass\"\n    [@scaleYMotion]=\"placement === 'top' || placement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement === 'left' || placement === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"placement !== 'top' && placement !== 'bottom' && placement !== 'left' && placement !== 'right' ? 'enter' : 'void'\"\n    (mousemove)=\"dropDownMouseMove($event)\">\n    @if (contentOptions?.length > 0 || contentGroups?.length > 0 || innerOptions?.length > 0) {\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ thySize() }}\"\n        thyScroll\n        (thyOnScrolled)=\"onOptionsScrolled($event)\"\n        [thyEnable]=\"thyEnableScrollLoad()\">\n        @if (isReactiveDriven) {\n          <ng-template [ngTemplateOutlet]=\"optionsContainer.optionsTemplate()\"></ng-template>\n        }\n        <ng-content></ng-content>\n        @if (isHiddenOptions) {\n          <thy-loading [thyDone]=\"thyLoadState()\" thySize=\"sm\"></thy-loading>\n          <div class=\"thy-select-empty-content\">\n            @if (thyLoadState()) {\n              <thy-empty [thyMessage]=\"thyEmptySearchMessageText()\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <thy-loading [thyDone]=\"thyLoadState()\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        @if (thyLoadState()) {\n          <thy-empty [thyMessage]=\"thyEmptyStateText()\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n        }\n      </div>\n    }\n    @if (thyFooterTemplate()) {\n      <div [class]=\"thyFooterClass() ? thyFooterClass() : 'thy-custom-select-footer'\">\n        @if (thyFooterTemplate()) {\n          <ng-template [ngTemplateOutlet]=\"thyFooterTemplate()\"></ng-template>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<thy-options-container #optionsContainer>\n  @for (option of optionGroups; track $index) {\n    @if (!option.children) {\n      <thy-option\n        [thyDisabled]=\"option.disabled\"\n        [thyLabelText]=\"option.label\"\n        [thyValue]=\"option.value\"\n        [thyRawValue]=\"option\"></thy-option>\n    } @else {\n      <thy-option-group [thyGroupLabel]=\"option.groupLabel\">\n        @for (sub of option.children; track sub.value) {\n          <thy-option [thyDisabled]=\"sub.disabled\" [thyLabelText]=\"sub.label\" [thyValue]=\"sub.value\" [thyRawValue]=\"sub\"></thy-option>\n        }\n      </thy-option-group>\n    }\n  }\n</thy-options-container>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ThySelectControl, selector: "thy-select-control,[thySelectControl]", inputs: ["inputValue", "thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["inputValueChange", "thyOnSearch", "thyOnRemove", "thyOnClear", "thyOnBlur"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ThyScrollDirective, selector: "[thyScroll]", inputs: ["thyEnable"], outputs: ["thyOnScrolled"] }, { kind: "component", type: ThyLoading, selector: "thy-loading", inputs: ["thyDone", "thyTip", "thyIsMask"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: ThyOptionsContainer, selector: "thy-options-container" }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "component", type: ThySelectOptionGroup, selector: "thy-option-group", inputs: ["thyDisabled", "thyGroupLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "selectedValueDisplayRef", first: true, predicate: ["selectedDisplay"], descendants: true, isSignal: true }, { propertyName: "options", predicate: ThyOption, descendants: true, isSignal: true }, { propertyName: "groups", predicate: ThySelectOptionGroup, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, static: true }, { propertyName: "optionRenders", predicate: ThyOptionRender, descendants: true }], exportAs: ["thySelect"], usesInheritance: true, ngImport: i0, template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selectedOptions()\"\n  [thyIsMultiple]=\"isMultiple()\"\n  [thyShowSearch]=\"thyShowSearch()\"\n  [thyAllowClear]=\"thyAllowClear()\"\n  [thySize]=\"thySize()\"\n  [thyPlaceholder]=\"thyPlaceHolder()\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef()\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless()\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"search($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount()\"\n  [thyPreset]=\"thyPreset()\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions()\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin() || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth()\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth()\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass()\"\n    [@scaleYMotion]=\"placement() === 'top' || placement() === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement() === 'left' || placement() === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      placement() !== 'top' && placement() !== 'bottom' && placement() !== 'left' && placement() !== 'right' ? 'enter' : 'void'\n    \">\n    @if (filteredGroupsAndOptions()?.length > 0) {\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ thySize() }} thy-select-dropdown-options-with-virtual-scroll\">\n        <cdk-virtual-scroll-viewport\n          class=\"thy-select-scroll-viewport\"\n          [itemSize]=\"itemSize\"\n          [style.height.px]=\"virtualHeight()\"\n          (scrolledIndexChange)=\"optionsScrolled($event)\"\n          (mouseleave)=\"mouseLeaveOptions()\">\n          <ng-template cdkVirtualFor [cdkVirtualForOf]=\"filteredGroupsAndOptions()\" [cdkVirtualForTrackBy]=\"trackByFn\" let-item>\n            @if (item.type === 'group') {\n              <thy-option-group-render [thyGroupLabel]=\"item.label\"></thy-option-group-render>\n            } @else {\n              <thy-option-render\n                [thyValue]=\"item.value\"\n                [thyRawValue]=\"item.rawValue\"\n                [thyLabelText]=\"item.label\"\n                [thyShowOptionCustom]=\"item.showOptionCustom\"\n                [thySearchKey]=\"item.searchKey\"\n                [thyDisabled]=\"item.disabled\"\n                [thyTemplate]=\"item.template\"\n                [thyShowCheckedIcon]=\"isMultiple()\"\n                [thySelectedValuesMap]=\"selectedValuesMap()\"\n                [thyActivatedValue]=\"activatedValue()\"\n                (optionHover)=\"optionHover($event)\"\n                (optionClick)=\"optionClick($event)\">\n              </thy-option-render>\n            }\n          </ng-template>\n        </cdk-virtual-scroll-viewport>\n        <ng-content></ng-content>\n      </div>\n    } @else {\n      <thy-loading [thyDone]=\"thyLoadState()\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        @if (thyLoadState()) {\n          @let isSearching = keywords();\n          <thy-empty\n            [thyMessage]=\"isSearching ? thyEmptySearchMessageText() : thyEmptyStateText()\"\n            thySize=\"sm\"\n            [thyIconName]=\"emptyIcon()\"></thy-empty>\n        }\n      </div>\n    }\n    @if (thyFooterTemplate()) {\n      <div [class]=\"thyFooterClass() ? thyFooterClass() : 'thy-custom-select-footer'\">\n        @if (thyFooterTemplate()) {\n          <ng-template [ngTemplateOutlet]=\"thyFooterTemplate()\"></ng-template>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ThySelectControl, selector: "thy-select-control,[thySelectControl]", inputs: ["inputValue", "thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["inputValueChange", "thyOnSearch", "thyOnRemove", "thyOnClear", "thyOnBlur"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThyLoading, selector: "thy-loading", inputs: ["thyDone", "thyTip", "thyIsMask"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: ThyOptionRender, selector: "thy-option-render", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thySearchKey", "thyDisabled", "thyShowOptionCustom", "thyTemplate", "thyTemplateContext", "thyShowCheckedIcon", "thySelectedValuesMap", "thyActivatedValue"], outputs: ["optionClick", "optionHover"] }, { kind: "component", type: ThyOptionGroupRender, selector: "thy-option-group-render", inputs: ["thyGroupLabel", "thyDisabled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelect, decorators: [{
             type: Component,
             args: [{ selector: 'thy-select,thy-custom-select', exportAs: 'thySelect', providers: [
-                        {
-                            provide: THY_OPTION_PARENT_COMPONENT,
-                            useExisting: ThySelect
-                        },
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ThySelect),
@@ -862,13 +928,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         CdkConnectedOverlay,
                         ThyStopPropagationDirective,
                         NgClass,
-                        ThyScrollDirective,
                         ThyLoading,
                         ThyEmpty,
-                        ThyOptionsContainer,
-                        ThyOption,
-                        ThySelectOptionGroup,
-                        NgTemplateOutlet
+                        ThyOptionRender,
+                        ThyOptionGroupRender,
+                        NgTemplateOutlet,
+                        ScrollingModule
                     ], host: {
                         '[class.thy-select-custom]': 'true',
                         '[class.thy-select]': 'true',
@@ -876,20 +941,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         '[attr.tabindex]': 'tabIndex',
                         '(focus)': 'onFocus($event)',
                         '(blur)': 'onBlur($event)'
-                    }, animations: [scaleXMotion, scaleYMotion, scaleMotion], template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selected\"\n  [thyIsMultiple]=\"isMultiple\"\n  [thyShowSearch]=\"thyShowSearch()\"\n  [thyAllowClear]=\"thyAllowClear()\"\n  [thySize]=\"thySize()\"\n  [thyPlaceholder]=\"thyPlaceHolder()\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef()\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless()\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"onSearchFilter($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount()\"\n  [thyPreset]=\"thyPreset()\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin() || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (attach)=\"onAttached()\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass\"\n    [@scaleYMotion]=\"placement === 'top' || placement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement === 'left' || placement === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"placement !== 'top' && placement !== 'bottom' && placement !== 'left' && placement !== 'right' ? 'enter' : 'void'\"\n    (mousemove)=\"dropDownMouseMove($event)\">\n    @if (contentOptions?.length > 0 || contentGroups?.length > 0 || innerOptions?.length > 0) {\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ thySize() }}\"\n        thyScroll\n        (thyOnScrolled)=\"onOptionsScrolled($event)\"\n        [thyEnable]=\"thyEnableScrollLoad()\">\n        @if (isReactiveDriven) {\n          <ng-template [ngTemplateOutlet]=\"optionsContainer.optionsTemplate()\"></ng-template>\n        }\n        <ng-content></ng-content>\n        @if (isHiddenOptions) {\n          <thy-loading [thyDone]=\"thyLoadState()\" thySize=\"sm\"></thy-loading>\n          <div class=\"thy-select-empty-content\">\n            @if (thyLoadState()) {\n              <thy-empty [thyMessage]=\"thyEmptySearchMessageText()\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <thy-loading [thyDone]=\"thyLoadState()\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        @if (thyLoadState()) {\n          <thy-empty [thyMessage]=\"thyEmptyStateText()\" thySize=\"sm\" [thyIconName]=\"emptyIcon()\"></thy-empty>\n        }\n      </div>\n    }\n    @if (thyFooterTemplate()) {\n      <div [class]=\"thyFooterClass() ? thyFooterClass() : 'thy-custom-select-footer'\">\n        @if (thyFooterTemplate()) {\n          <ng-template [ngTemplateOutlet]=\"thyFooterTemplate()\"></ng-template>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<thy-options-container #optionsContainer>\n  @for (option of optionGroups; track $index) {\n    @if (!option.children) {\n      <thy-option\n        [thyDisabled]=\"option.disabled\"\n        [thyLabelText]=\"option.label\"\n        [thyValue]=\"option.value\"\n        [thyRawValue]=\"option\"></thy-option>\n    } @else {\n      <thy-option-group [thyGroupLabel]=\"option.groupLabel\">\n        @for (sub of option.children; track sub.value) {\n          <thy-option [thyDisabled]=\"sub.disabled\" [thyLabelText]=\"sub.label\" [thyValue]=\"sub.value\" [thyRawValue]=\"sub\"></thy-option>\n        }\n      </thy-option-group>\n    }\n  }\n</thy-options-container>\n" }]
+                    }, animations: [scaleXMotion, scaleYMotion, scaleMotion], template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selectedOptions()\"\n  [thyIsMultiple]=\"isMultiple()\"\n  [thyShowSearch]=\"thyShowSearch()\"\n  [thyAllowClear]=\"thyAllowClear()\"\n  [thySize]=\"thySize()\"\n  [thyPlaceholder]=\"thyPlaceHolder()\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef()\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless()\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"search($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount()\"\n  [thyPreset]=\"thyPreset()\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop()\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions()\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin() || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth()\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth()\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass()\"\n    [@scaleYMotion]=\"placement() === 'top' || placement() === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement() === 'left' || placement() === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"\n      placement() !== 'top' && placement() !== 'bottom' && placement() !== 'left' && placement() !== 'right' ? 'enter' : 'void'\n    \">\n    @if (filteredGroupsAndOptions()?.length > 0) {\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ thySize() }} thy-select-dropdown-options-with-virtual-scroll\">\n        <cdk-virtual-scroll-viewport\n          class=\"thy-select-scroll-viewport\"\n          [itemSize]=\"itemSize\"\n          [style.height.px]=\"virtualHeight()\"\n          (scrolledIndexChange)=\"optionsScrolled($event)\"\n          (mouseleave)=\"mouseLeaveOptions()\">\n          <ng-template cdkVirtualFor [cdkVirtualForOf]=\"filteredGroupsAndOptions()\" [cdkVirtualForTrackBy]=\"trackByFn\" let-item>\n            @if (item.type === 'group') {\n              <thy-option-group-render [thyGroupLabel]=\"item.label\"></thy-option-group-render>\n            } @else {\n              <thy-option-render\n                [thyValue]=\"item.value\"\n                [thyRawValue]=\"item.rawValue\"\n                [thyLabelText]=\"item.label\"\n                [thyShowOptionCustom]=\"item.showOptionCustom\"\n                [thySearchKey]=\"item.searchKey\"\n                [thyDisabled]=\"item.disabled\"\n                [thyTemplate]=\"item.template\"\n                [thyShowCheckedIcon]=\"isMultiple()\"\n                [thySelectedValuesMap]=\"selectedValuesMap()\"\n                [thyActivatedValue]=\"activatedValue()\"\n                (optionHover)=\"optionHover($event)\"\n                (optionClick)=\"optionClick($event)\">\n              </thy-option-render>\n            }\n          </ng-template>\n        </cdk-virtual-scroll-viewport>\n        <ng-content></ng-content>\n      </div>\n    } @else {\n      <thy-loading [thyDone]=\"thyLoadState()\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        @if (thyLoadState()) {\n          @let isSearching = keywords();\n          <thy-empty\n            [thyMessage]=\"isSearching ? thyEmptySearchMessageText() : thyEmptyStateText()\"\n            thySize=\"sm\"\n            [thyIconName]=\"emptyIcon()\"></thy-empty>\n        }\n      </div>\n    }\n    @if (thyFooterTemplate()) {\n      <div [class]=\"thyFooterClass() ? thyFooterClass() : 'thy-custom-select-footer'\">\n        @if (thyFooterTemplate()) {\n          <ng-template [ngTemplateOutlet]=\"thyFooterTemplate()\"></ng-template>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { thyDropdownWidthMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDropdownWidthMode", required: false }] }], cdkConnectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], thyOnSearch: [{ type: i0.Output, args: ["thyOnSearch"] }], thyOnScrollToBottom: [{ type: i0.Output, args: ["thyOnScrollToBottom"] }], thyOnExpandStatusChange: [{ type: i0.Output, args: ["thyOnExpandStatusChange"] }], thyShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowSearch", required: false }] }], thyPlaceHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPlaceHolder", required: false }] }], thyServerSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyServerSearch", required: false }] }], thyLoadState: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyLoadState", required: false }] }], thyAutoActiveFirstItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAutoActiveFirstItem", required: false }] }], thyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyMode", required: false }] }], thySize: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySize", required: false }] }], thyEmptyStateText: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyEmptyStateText", required: false }] }], thyEmptySearchMessageText: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyEmptySearchMessageText", required: false }] }], thyEnableScrollLoad: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyEnableScrollLoad", required: false }] }], thyAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAllowClear", required: false }] }], thyDisabled: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
-            }], thySortComparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySortComparator", required: false }] }], thyFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyFooterTemplate", required: false }] }], thyPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPlacement", required: false }] }], thyOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyOrigin", required: false }] }], thyFooterClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyFooterClass", required: false }] }], selectedValueDisplayRef: [{ type: i0.ContentChild, args: ['selectedDisplay', { isSignal: true }] }], thyAutoExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAutoExpand", required: false }] }], thyHasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyHasBackdrop", required: false }] }], thyMaxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyMaxTagCount", required: false }] }], thyBorderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyBorderless", required: false }] }], thyOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyOptions", required: false }] }], thyPreset: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPreset", required: false }] }], trigger: [{
+            }], thySortComparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySortComparator", required: false }] }], thyFooterTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyFooterTemplate", required: false }] }], thyPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPlacement", required: false }] }], thyOrigin: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyOrigin", required: false }] }], thyFooterClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyFooterClass", required: false }] }], selectedValueDisplayRef: [{ type: i0.ContentChild, args: ['selectedDisplay', { isSignal: true }] }], thyAutoExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAutoExpand", required: false }] }], thyHasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyHasBackdrop", required: false }] }], thyMaxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyMaxTagCount", required: false }] }], thyBorderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyBorderless", required: false }] }], cdkVirtualScrollViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], thyOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyOptions", required: false }] }], thyPreset: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPreset", required: false }] }], trigger: [{
                 type: ViewChild,
                 args: ['trigger', { read: ElementRef, static: true }]
-            }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], contentOptions: [{
-                type: ContentChildren,
-                args: [ThyOption, { descendants: true }]
-            }], viewOptions: [{
+            }], options: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ThyOption), { ...{ descendants: true }, isSignal: true }] }], groups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ThySelectOptionGroup), { ...{ descendants: true }, isSignal: true }] }], optionRenders: [{
                 type: ViewChildren,
-                args: [ThyOption]
-            }], contentGroups: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ThySelectOptionGroup), { isSignal: true }] }], viewGroups: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => ThySelectOptionGroup), { isSignal: true }] }], handleKeydown: [{
+                args: [ThyOptionRender]
+            }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
@@ -949,7 +1011,7 @@ class ThyNativeSelect extends TabIndexDisabledControlValueAccessorMixin {
                 useExisting: forwardRef(() => ThyNativeSelect),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<select\n  #select\n  thyInput\n  [tabindex]=\"-1\"\n  [thySize]=\"thySize()\"\n  [disabled]=\"disabled()\"\n  [(ngModel)]=\"innerValue\"\n  (ngModelChange)=\"ngModelChange()\"\n  (blur)=\"onBlur($event)\"\n  [class.thy-select-selection-allow-clear]=\"thyAllowClear()\">\n  <ng-content></ng-content>\n</select>\n<thy-icon thyIconName=\"angle-down\"></thy-icon>\n@if (thyAllowClear() && innerValue()) {\n  <a class=\"thy-select-remove remove-link\" href=\"javascript:;\" (click)=\"clearSelectValue($event)\">\n    <thy-icon class=\"remove-link-icon\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </a>\n}\n", dependencies: [{ kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+        ], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<select\n  #select\n  thyInput\n  [tabindex]=\"-1\"\n  [thySize]=\"thySize()\"\n  [disabled]=\"disabled()\"\n  [(ngModel)]=\"innerValue\"\n  (ngModelChange)=\"ngModelChange()\"\n  (blur)=\"onBlur($event)\"\n  [class.thy-select-selection-allow-clear]=\"thyAllowClear()\">\n  <ng-content></ng-content>\n</select>\n<thy-icon thyIconName=\"angle-down\"></thy-icon>\n@if (thyAllowClear() && innerValue()) {\n  <a class=\"thy-select-remove remove-link\" href=\"javascript:;\" (click)=\"clearSelectValue($event)\">\n    <thy-icon class=\"remove-link-icon\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </a>\n}\n", dependencies: [{ kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyNativeSelect, decorators: [{
             type: Component,