ngx-tethys 20.0.2 → 20.0.3

package/fesm2022/ngx-tethys-select.mjs

@@ -8,8 +8,8 @@ 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';
@@ -266,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;
@@ -330,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 指令的选中值
@@ -483,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(),
@@ -492,6 +497,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
                     showOptionCustom: thyShowOptionCustom(),
                     disabled: thyDisabled(),
                     template: template(),
+                    suffixTemplate: suffixTemplate(),
                     searchKey: thySearchKey(),
                     groupLabel: groupLabel
                 };
@@ -583,7 +589,7 @@ 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;
@@ -592,6 +598,14 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
             }
         }
     }
+    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);
@@ -741,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();
@@ -865,7 +890,6 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         }
         else {
             this.selectedValues.set([value]);
-            this.close();
         }
         const option = options.find(option => option.thyValue() === value);
         if (option) {
@@ -876,6 +900,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         this.emitModelValueChange();
         if (!this.isMultiple()) {
             this.onTouchedFn();
+            this.close();
         }
     }
     optionHover(value) {
@@ -926,14 +951,14 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         this.unsubscribeTriggerResize();
     }
     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: [
+    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
             },
             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 }); }
+        ], 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.15", ngImport: i0, type: ThySelect, decorators: [{
             type: Component,
@@ -955,6 +980,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         ThyOptionRender,
                         ThyOptionGroupRender,
                         NgTemplateOutlet,
+                        ThyViewOutletDirective,
+                        ThyScrollDirective,
                         ScrollingModule
                     ], host: {
                         '[class.thy-select-custom]': 'true',
@@ -963,11 +990,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", 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]=\"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" }]
+                    }, 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: [{