ngx-tethys 20.0.1 → 20.0.3

package/fesm2022/ngx-tethys-select.mjs

@@ -1,23 +1,24 @@
 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';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { ThyInputDirective, ThyInputModule } from 'ngx-tethys/input';
 import { ThyLoading, ThyLoadingModule } from 'ngx-tethys/loading';
-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 { ThyOption, ThySelectOptionGroup, ThySelectControl, ThyStopPropagationDirective, ThyOptionRender, ThyOptionGroupRender, ThyViewOutletDirective, ThyScrollDirective, ThyOptionModule, ThySharedModule, ThySelectCommonModule } from 'ngx-tethys/shared';
+import { TabIndexDisabledControlValueAccessorMixin, ThyClickDispatcher, injectPanelEmptyIcon, getFlexiblePositions, ScrollToService, 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 { 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" }] : []));
         /**
          * 手动聚焦中的标识
@@ -263,6 +266,11 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
          * 是否隐藏选择框边框
          */
         this.thyBorderless = input(false, ...(ngDevMode ? [{ debugName: "thyBorderless", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : []));
+        /**
+         * 是否启用虚拟滚动，默认值为 false
+         */
+        this.thyVirtualScroll = input(false, ...(ngDevMode ? [{ debugName: "thyVirtualScroll", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         this.scrolledIndex = 0;
         this.cdkVirtualScrollViewport = viewChild(CdkVirtualScrollViewport, ...(ngDevMode ? [{ debugName: "cdkVirtualScrollViewport" }] : []));
         this.shouldActivateOption = false;
@@ -307,7 +315,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" }] : []));
         /**
          * 当前选中的值
@@ -322,7 +335,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
                 }
             }]));
         this.selectedValuesMap = computed(() => {
-            return new Map(this.selectedValues().map(value => [value, true]));
+            return new Map((this.selectedValues() || []).map(value => [value, true]));
         }, ...(ngDevMode ? [{ debugName: "selectedValuesMap" }] : []));
         /**
          * 传给 selectControl 指令的选中值
@@ -415,7 +428,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 +441,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)) {
@@ -475,7 +488,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         let groupsAndOptions = [];
         if (options && options.length > 0) {
             groupsAndOptions = options.map((option) => {
-                const { thyValue, thyRawValue, thyLabelText, thyShowOptionCustom, thyDisabled, template, thySearchKey, groupLabel } = option;
+                const { thyValue, thyRawValue, thyLabelText, thyShowOptionCustom, thyDisabled, template, suffixTemplate, thySearchKey, groupLabel } = option;
                 return {
                     type: 'option',
                     value: thyValue(),
@@ -484,6 +497,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
                     showOptionCustom: thyShowOptionCustom(),
                     disabled: thyDisabled(),
                     template: template(),
+                    suffixTemplate: suffixTemplate(),
                     searchKey: thySearchKey(),
                     groupLabel: groupLabel
                 };
@@ -508,14 +522,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 +553,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 +571,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,
@@ -575,15 +589,23 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             this.selectedOptions.set(isMultiple ? [] : null);
         }
     }
-    optionsScrolled(index) {
+    optionsVirtualScrolled(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();
             }
         }
     }
+    optionsScrolled(elementRef) {
+        const scroll = elementRef.nativeElement.scrollTop, height = elementRef.nativeElement.clientHeight, scrollHeight = elementRef.nativeElement.scrollHeight;
+        if (scroll + height + 10 >= scrollHeight) {
+            this.ngZone.run(() => {
+                this.thyOnScrollToBottom.emit();
+            });
+        }
+    }
     search(keywords) {
         this.shouldActivateOption = true;
         this.activatedValue.set(null);
@@ -704,9 +726,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,8 +755,19 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         if (targetIndex === -1) {
             return;
         }
-        if (targetIndex < this.scrolledIndex || targetIndex >= this.scrolledIndex + this.maxItemLength) {
-            this.cdkVirtualScrollViewport()?.scrollToIndex(targetIndex || 0);
+        if (this.thyVirtualScroll()) {
+            if (targetIndex < this.scrolledIndex || targetIndex >= this.scrolledIndex + this.maxItemLength()) {
+                this.cdkVirtualScrollViewport()?.scrollToIndex(targetIndex || 0);
+            }
+        }
+        else {
+            const panelElement = this.panel()?.nativeElement;
+            if (panelElement) {
+                const optionElement = panelElement.querySelector(`[data-option-value="${toActivatedValue}"]`);
+                if (optionElement) {
+                    ScrollToService.scrollToElement(optionElement, panelElement);
+                }
+            }
         }
         if (needSelect) {
             this.optionRenders.find(option => option.thyValue() === toActivatedValue)?.selectViaInteraction();
@@ -751,7 +795,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,18 +878,18 @@ 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]);
         }
         else {
             this.selectedValues.set([value]);
-            this.close();
         }
         const option = options.find(option => option.thyValue() === value);
         if (option) {
@@ -856,6 +900,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         this.emitModelValueChange();
         if (!this.isMultiple()) {
             this.onTouchedFn();
+            this.close();
         }
     }
     optionHover(value) {
@@ -905,23 +950,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 }, thyVirtualScroll: { classPropertyName: "thyVirtualScroll", publicName: "thyVirtualScroll", 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: "panel", first: true, predicate: ["panel"], 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      @if (thyVirtualScroll()) {\n        <ng-container *thyViewOutlet=\"virtualScrollTemplate\"> </ng-container>\n      } @else {\n        <ng-container *thyViewOutlet=\"defaultTemplate\"> </ng-container>\n      }\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\n<ng-template #virtualScrollTemplate>\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)=\"optionsVirtualScrolled($event)\"\n      (mouseleave)=\"mouseLeaveOptions()\">\n      <ng-template\n        cdkVirtualFor\n        [cdkVirtualForOf]=\"filteredGroupsAndOptions()\"\n        [cdkVirtualForTrackBy]=\"trackByFn\"\n        [cdkVirtualForTemplateCacheSize]=\"0\"\n        let-item>\n        <ng-container\n          *thyViewOutlet=\"\n            renderTemplate;\n            context: {\n              $implicit: item\n            }\n          \">\n        </ng-container>\n      </ng-template>\n    </cdk-virtual-scroll-viewport>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #defaultTemplate>\n  <div\n    #panel\n    class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ thySize() }}\"\n    thyScroll\n    [thyEnable]=\"thyEnableScrollLoad()\"\n    (thyOnScrolled)=\"optionsScrolled($event)\"\n    (mouseleave)=\"mouseLeaveOptions()\">\n    @for (item of filteredGroupsAndOptions(); track trackByFn($index, item)) {\n      <ng-container\n        *thyViewOutlet=\"\n          renderTemplate;\n          context: {\n            $implicit: item\n          }\n        \">\n      </ng-container>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #renderTemplate 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      [attr.data-option-value]=\"item.value\"\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    @if (item.suffixTemplate) {\n      <ng-container *thyViewOutlet=\"item.suffixTemplate\"> </ng-container>\n    }\n  }\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: "directive", type: ThyViewOutletDirective, selector: "[thyViewOutlet]", inputs: ["thyViewOutlet", "thyViewOutletContext"] }, { kind: "directive", type: ThyScrollDirective, selector: "[thyScroll]", inputs: ["thyEnable"], outputs: ["thyOnScrolled"] }, { 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,
@@ -933,6 +980,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         ThyOptionRender,
                         ThyOptionGroupRender,
                         NgTemplateOutlet,
+                        ThyViewOutletDirective,
+                        ThyScrollDirective,
                         ScrollingModule
                     ], host: {
                         '[class.thy-select-custom]': 'true',
@@ -941,11 +990,11 @@ 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      @if (thyVirtualScroll()) {\n        <ng-container *thyViewOutlet=\"virtualScrollTemplate\"> </ng-container>\n      } @else {\n        <ng-container *thyViewOutlet=\"defaultTemplate\"> </ng-container>\n      }\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\n<ng-template #virtualScrollTemplate>\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)=\"optionsVirtualScrolled($event)\"\n      (mouseleave)=\"mouseLeaveOptions()\">\n      <ng-template\n        cdkVirtualFor\n        [cdkVirtualForOf]=\"filteredGroupsAndOptions()\"\n        [cdkVirtualForTrackBy]=\"trackByFn\"\n        [cdkVirtualForTemplateCacheSize]=\"0\"\n        let-item>\n        <ng-container\n          *thyViewOutlet=\"\n            renderTemplate;\n            context: {\n              $implicit: item\n            }\n          \">\n        </ng-container>\n      </ng-template>\n    </cdk-virtual-scroll-viewport>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #defaultTemplate>\n  <div\n    #panel\n    class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ thySize() }}\"\n    thyScroll\n    [thyEnable]=\"thyEnableScrollLoad()\"\n    (thyOnScrolled)=\"optionsScrolled($event)\"\n    (mouseleave)=\"mouseLeaveOptions()\">\n    @for (item of filteredGroupsAndOptions(); track trackByFn($index, item)) {\n      <ng-container\n        *thyViewOutlet=\"\n          renderTemplate;\n          context: {\n            $implicit: item\n          }\n        \">\n      </ng-container>\n    }\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n<ng-template #renderTemplate 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      [attr.data-option-value]=\"item.value\"\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    @if (item.suffixTemplate) {\n      <ng-container *thyViewOutlet=\"item.suffixTemplate\"> </ng-container>\n    }\n  }\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: [{
+            }], 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 }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], thyVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyVirtualScroll", 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 }]
             }], 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: [{
@@ -973,7 +1022,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 +1053,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 +1062,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 +1079,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 +1092,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 +1105,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: [