ngx-tethys 20.0.1 → 20.0.2

package/fesm2022/ngx-tethys-select.mjs

@@ -1,7 +1,7 @@
 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, 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 { InjectionToken, inject, NgZone, ElementRef, ChangeDetectorRef, PLATFORM_ID, computed, input, numberAttribute, signal, DestroyRef, viewChild, output, contentChild, 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';
@@ -16,8 +16,9 @@ import { map, filter, startWith, take, distinctUntilChanged } from 'rxjs/operato
 import { coerceElement } from '@angular/cdk/coercion';
 import { injectLocale } from 'ngx-tethys/i18n';
 import * as i1 from '@angular/cdk/scrolling';
-import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule, ScrollDispatcher } from '@angular/cdk/scrolling';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isUndefinedOrNull } from '@tethys/cdk/is';
 import { useHostRenderer } from '@tethys/cdk/dom';
 
 const THY_SELECT_SCROLL_STRATEGY = new InjectionToken('thy-select-scroll-strategy');
@@ -70,7 +71,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         this.handleKeydown(event);
     }
     get optionsChanges$() {
-        let previousOptions = this.optionRenders.toArray();
+        let previousOptions = this.optionRenders?.toArray();
         return this.optionRenders.changes.pipe(map(data => {
             return this.optionRenders.toArray();
         }), filter(data => {
@@ -135,16 +136,18 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         this.dropDownPositions = computed(() => {
             return getFlexiblePositions(this.placement(), this.defaultOffset);
         }, ...(ngDevMode ? [{ debugName: "dropDownPositions" }] : []));
-        this.itemSize = SELECT_OPTION_MAX_HEIGHT;
+        this.thyItemSize = input(SELECT_OPTION_MAX_HEIGHT, ...(ngDevMode ? [{ debugName: "thyItemSize", transform: value => numberAttribute(value) }] : [{ transform: value => numberAttribute(value) }]));
         this.virtualHeight = computed(() => {
             const maxVirtualHeight = SELECT_PANEL_MAX_HEIGHT - SELECT_PANEL_PADDING_TOP - SELECT_PANEL_PADDING_BOTTOM;
-            const height = this.filteredGroupsAndOptions().length * this.itemSize;
+            const height = this.filteredGroupsAndOptions().length * this.thyItemSize();
             return Math.min(height, maxVirtualHeight);
         }, ...(ngDevMode ? [{ debugName: "virtualHeight" }] : []));
         /**
-         * 视觉上能看到的最大选项个数
+         * 出现滚动条时，视觉上能看到的最大选项个数
          */
-        this.maxItemLength = 7;
+        this.maxItemLength = computed(() => {
+            return Math.round(this.virtualHeight() / this.thyItemSize());
+        }, ...(ngDevMode ? [{ debugName: "maxItemLength" }] : []));
         this.triggerRectWidth = signal(undefined, ...(ngDevMode ? [{ debugName: "triggerRectWidth" }] : []));
         /**
          * 手动聚焦中的标识
@@ -307,7 +310,12 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             return this.filteredGroupsAndOptions().filter(item => item.type === 'option');
         }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
         this.filteredOptionsMap = computed(() => {
-            return helpers.keyBy(this.filteredOptions(), 'value');
+            return this.filteredOptions().reduce((map, item) => {
+                if (!isUndefinedOrNull(item.value)) {
+                    map.set(item.value, item);
+                }
+                return map;
+            }, new Map());
         }, ...(ngDevMode ? [{ debugName: "filteredOptionsMap" }] : []));
         /**
          * 当前选中的值
@@ -415,7 +423,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
     }
     buildAllGroupsAndOptions() {
         let allGroupsAndOptions;
-        const isReactiveDriven = this.thyOptions()?.length > 0;
+        const isReactiveDriven = this.thyOptions() && this.thyOptions().length > 0;
         if (isReactiveDriven) {
             allGroupsAndOptions = this.allGroupsAndOptionsByReactive();
         }
@@ -428,7 +436,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         const options = this.thyOptions();
         const groupMap = new Map();
         const ungroupedOptions = [];
-        let groupsAndOptions = [];
+        const groupsAndOptions = [];
         for (const option of options) {
             if (option.groupLabel) {
                 if (!groupMap.has(option.groupLabel)) {
@@ -508,14 +516,14 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         const keywords = this.keywords();
         const isServerSearch = this.thyServerSearch();
         const allGroupsAndOptions = this.allGroupsAndOptions();
-        let filteredGroupsAndOptions = [];
+        const 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;
+                    const isMatch = (item.searchKey || item.label) && (item.searchKey || item.label).toLowerCase().indexOf(lowerKeywords) > -1;
                     if (isMatch) {
                         matchedOptions.add(item.value);
                         if (item.groupLabel) {
@@ -539,7 +547,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
     updateSelectedOptions() {
         const selectedValues = this.selectedValues();
         const isMultiple = untracked(() => this.isMultiple());
-        let newOptions = [];
+        const newOptions = [];
         if (selectedValues.length) {
             const filteredOptionsMap = this.filteredOptionsMap();
             const oldSelectedOptionsMap = untracked(() => {
@@ -557,7 +565,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
                 return helpers.keyBy(oldSelectedOptions, 'thyValue');
             });
             selectedValues.forEach(value => {
-                let option = filteredOptionsMap[value];
+                const option = filteredOptionsMap.get(value);
                 if (option) {
                     newOptions.push({
                         thyLabelText: option.label,
@@ -578,7 +586,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
     optionsScrolled(index) {
         this.scrolledIndex = index;
         if (this.thyEnableScrollLoad()) {
-            const isScrollToBottom = index + this.maxItemLength >= this.filteredGroupsAndOptions().length;
+            const isScrollToBottom = index + this.maxItemLength() >= this.filteredGroupsAndOptions().length;
             if (isScrollToBottom) {
                 this.thyOnScrollToBottom.emit();
             }
@@ -704,9 +712,20 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             return;
         }
         let toActivatedValue = this.activatedValue();
-        if (!toActivatedValue || !this.filteredOptionsMap()[toActivatedValue]) {
-            if (this.selectedValues().length > 0) {
-                toActivatedValue = this.selectedValues()[0];
+        const filteredOptionsMap = this.filteredOptionsMap();
+        if (!toActivatedValue || !filteredOptionsMap.has(toActivatedValue)) {
+            let selectedValues = this.selectedValues();
+            const lowerKeywords = this.keywords()?.trim()?.toLowerCase();
+            if (lowerKeywords) {
+                selectedValues = selectedValues.filter(value => {
+                    const option = filteredOptionsMap.get(value);
+                    return (option &&
+                        (option.searchKey || option.label) &&
+                        (option.searchKey || option.label).toLowerCase().indexOf(lowerKeywords) > -1);
+                });
+            }
+            if (selectedValues.length > 0) {
+                toActivatedValue = selectedValues[0];
             }
             else {
                 if (this.thyAutoActiveFirstItem()) {
@@ -722,7 +741,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         if (targetIndex === -1) {
             return;
         }
-        if (targetIndex < this.scrolledIndex || targetIndex >= this.scrolledIndex + this.maxItemLength) {
+        if (targetIndex < this.scrolledIndex || targetIndex >= this.scrolledIndex + this.maxItemLength()) {
             this.cdkVirtualScrollViewport()?.scrollToIndex(targetIndex || 0);
         }
         if (needSelect) {
@@ -751,7 +770,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         if (keyCode === DOWN_ARROW || keyCode === UP_ARROW) {
             event.preventDefault();
             const activatedValue = this.activatedValue();
-            const currentOption = this.filteredOptionsMap()[activatedValue];
+            const currentOption = this.filteredOptionsMap().get(activatedValue);
             if (!currentOption) {
                 return;
             }
@@ -834,11 +853,12 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             else {
                 selectedValues.push(value);
             }
-            if (this.thySortComparator()) {
+            const thySortComparator = this.thySortComparator();
+            if (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]);
+                    return thySortComparator(aOption, bOption, [...options]);
                 });
             }
             this.selectedValues.set([...selectedValues]);
@@ -905,23 +925,25 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
     ngOnDestroy() {
         this.unsubscribeTriggerResize();
     }
-    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": "keydown($event)" }, properties: { "class.thy-select-custom": "true", "class.thy-select": "true", "class.menu-is-opened": "panelOpen", "attr.tabindex": "tabIndex" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThySelect, isStandalone: true, selector: "thy-select,thy-custom-select", inputs: { thyDropdownWidthMode: { classPropertyName: "thyDropdownWidthMode", publicName: "thyDropdownWidthMode", isSignal: true, isRequired: false, transformFunction: null }, thyItemSize: { classPropertyName: "thyItemSize", publicName: "thyItemSize", 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: "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 }); }
+            },
+            ScrollDispatcher
+        ], 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]=\"thyItemSize()\"\n          [style.height.px]=\"virtualHeight()\"\n          (scrolledIndexChange)=\"optionsScrolled($event)\"\n          (mouseleave)=\"mouseLeaveOptions()\">\n          <ng-template\n            cdkVirtualFor\n            [cdkVirtualForOf]=\"filteredGroupsAndOptions()\"\n            [cdkVirtualForTrackBy]=\"trackByFn\"\n            [cdkVirtualForTemplateCacheSize]=\"0\"\n            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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelect, decorators: [{
             type: Component,
             args: [{ selector: 'thy-select,thy-custom-select', exportAs: 'thySelect', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ThySelect),
                             multi: true
-                        }
+                        },
+                        ScrollDispatcher
                     ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CdkOverlayOrigin,
                         ThySelectControl,
@@ -941,8 +963,8 @@ 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]=\"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: [{
+                    }, 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]=\"thyItemSize()\"\n          [style.height.px]=\"virtualHeight()\"\n          (scrolledIndexChange)=\"optionsScrolled($event)\"\n          (mouseleave)=\"mouseLeaveOptions()\">\n          <ng-template\n            cdkVirtualFor\n            [cdkVirtualForOf]=\"filteredGroupsAndOptions()\"\n            [cdkVirtualForTrackBy]=\"trackByFn\"\n            [cdkVirtualForTemplateCacheSize]=\"0\"\n            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 }] }], thyItemSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyItemSize", 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 }] }], 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: [{
@@ -973,7 +995,7 @@ class ThyNativeSelect extends TabIndexDisabledControlValueAccessorMixin {
     }
     constructor() {
         super();
-        this.selectElement = viewChild('select', ...(ngDevMode ? [{ debugName: "selectElement" }] : []));
+        this.selectElement = viewChild.required('select');
         this.innerValue = model(null, ...(ngDevMode ? [{ debugName: "innerValue" }] : []));
         this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.hostRenderer = useHostRenderer();
@@ -1004,8 +1026,8 @@ class ThyNativeSelect extends TabIndexDisabledControlValueAccessorMixin {
         this.innerValue.set('');
         this.onChangeFn(this.innerValue());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ThyNativeSelect, isStandalone: true, selector: "thy-native-select", inputs: { innerValue: { classPropertyName: "innerValue", publicName: "innerValue", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { innerValue: "innerValueChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "thy-select" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThyNativeSelect, isStandalone: true, selector: "thy-native-select", inputs: { innerValue: { classPropertyName: "innerValue", publicName: "innerValue", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { innerValue: "innerValueChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "thy-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ThyNativeSelect),
@@ -1013,7 +1035,7 @@ class ThyNativeSelect extends TabIndexDisabledControlValueAccessorMixin {
             }
         ], 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyNativeSelect, decorators: [{
             type: Component,
             args: [{ selector: 'thy-native-select', providers: [
                         {
@@ -1030,8 +1052,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         }], ctorParameters: () => [], propDecorators: { selectElement: [{ type: i0.ViewChild, args: ['select', { isSignal: true }] }], innerValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "innerValue", required: false }] }, { type: i0.Output, args: ["innerValueChange"] }], thySize: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySize", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], thyAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAllowClear", required: false }] }] } });
 
 class ThySelectModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ThySelectModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ThySelectModule, imports: [CommonModule,
             FormsModule,
             ThyInputModule,
             OverlayModule,
@@ -1043,7 +1065,7 @@ class ThySelectModule {
             ThyOptionModule,
             ThyNativeSelect,
             ThySelect], exports: [ThyNativeSelect, ThySelect, ThyOptionModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectModule, providers: [THY_SELECT_SCROLL_STRATEGY_PROVIDER, THY_SELECT_CONFIG_PROVIDER], imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelectModule, providers: [THY_SELECT_SCROLL_STRATEGY_PROVIDER, THY_SELECT_CONFIG_PROVIDER], imports: [CommonModule,
             FormsModule,
             ThyInputModule,
             OverlayModule,
@@ -1056,7 +1078,7 @@ class ThySelectModule {
             ThyNativeSelect,
             ThySelect, ThyOptionModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [