ngx-tethys 20.0.1-0 → 20.0.2

package/fesm2022/ngx-tethys-shared.mjs

@@ -3,8 +3,8 @@ import { input, inject, ViewContainerRef, effect, Directive, ElementRef, NgZone,
 import { reqAnimFrame, TabIndexDisabledControlValueAccessorMixin, ThyTranslate, mixinDisabled, MixinBase } from 'ngx-tethys/core';
 import { coerceBooleanProperty, keycodes, isTemplateRef, isUndefinedOrNull, coerceArray, ENTER, SPACE, hasModifierKey } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
-import { Subject, Observable, fromEvent, merge, throttleTime, of, defer } from 'rxjs';
-import { startWith, switchMap, takeUntil, take, debounceTime, map } from 'rxjs/operators';
+import { Subject, Observable, fromEvent, merge, throttleTime, of } from 'rxjs';
+import { startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import { CdkDrag } from '@angular/cdk/drag-drop';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
@@ -12,7 +12,7 @@ import { ThyTag, ThyTagModule } from 'ngx-tethys/tag';
 import { NgClass, NgStyle, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
 import * as i2 from 'ngx-tethys/grid';
 import { ThyGridModule } from 'ngx-tethys/grid';
@@ -34,10 +34,10 @@ class ThyTranscludeDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyTranscludeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: ThyTranscludeDirective, isStandalone: true, selector: "[thyTransclude]", inputs: { thyTransclude: { classPropertyName: "thyTransclude", publicName: "thyTransclude", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyTranscludeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: ThyTranscludeDirective, isStandalone: true, selector: "[thyTransclude]", inputs: { thyTransclude: { classPropertyName: "thyTransclude", publicName: "thyTransclude", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyTranscludeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyTranscludeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyTransclude]'
@@ -82,10 +82,10 @@ class ThyAutofocusDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyAutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: ThyAutofocusDirective, isStandalone: true, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: { thyAutofocus: { classPropertyName: "thyAutofocus", publicName: "thyAutofocus", isSignal: true, isRequired: false, transformFunction: null }, thyAutoSelect: { classPropertyName: "thyAutoSelect", publicName: "thyAutoSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyAutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: ThyAutofocusDirective, isStandalone: true, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: { thyAutofocus: { classPropertyName: "thyAutofocus", publicName: "thyAutofocus", isSignal: true, isRequired: false, transformFunction: null }, thyAutoSelect: { classPropertyName: "thyAutoSelect", publicName: "thyAutoSelect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyAutofocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyAutofocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[thyAutofocus],textarea[thyAutofocus]'
@@ -119,10 +119,10 @@ class ThyEnterDirective {
     ngOnDestroy() {
         this.removeKeydownListenerFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: ThyEnterDirective, isStandalone: true, selector: "[thyEnter]", outputs: { thyEnter: "thyEnter" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ThyEnterDirective, isStandalone: true, selector: "[thyEnter]", outputs: { thyEnter: "thyEnter" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyEnterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyEnterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyEnter]'
@@ -156,10 +156,10 @@ class ThyCtrlEnterDirective {
     ngOnDestroy() {
         this.removeKeydownListenerFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCtrlEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: ThyCtrlEnterDirective, isStandalone: true, selector: "[thyCtrlEnter]", outputs: { thyCtrlEnter: "thyCtrlEnter" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCtrlEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ThyCtrlEnterDirective, isStandalone: true, selector: "[thyCtrlEnter]", outputs: { thyCtrlEnter: "thyCtrlEnter" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyCtrlEnterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyCtrlEnterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyCtrlEnter]'
@@ -182,6 +182,7 @@ class ThyShowDirective {
         this.ngZone = inject(NgZone);
         this.thyShowChange = output();
         this.hostRenderer = useHostRenderer();
+        this.unListenEvent = null;
         this.thyShow = input(false, ...(ngDevMode ? [{ debugName: "thyShow", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         effect(() => {
             if (this.thyShow()) {
@@ -204,10 +205,10 @@ class ThyShowDirective {
     ngOnDestroy() {
         this.unListenDocument();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyShowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: ThyShowDirective, isStandalone: true, selector: "[thyShow]", inputs: { thyShow: { classPropertyName: "thyShow", publicName: "thyShow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyShowChange: "thyShowChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyShowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: ThyShowDirective, isStandalone: true, selector: "[thyShow]", inputs: { thyShow: { classPropertyName: "thyShow", publicName: "thyShow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyShowChange: "thyShowChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyShowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyShowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyShow]'
@@ -256,10 +257,10 @@ class ThyStopPropagationDirective {
     ngOnDestroy() {
         this._destroy$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyStopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: ThyStopPropagationDirective, isStandalone: true, selector: "[thyStopPropagation]", inputs: { thyStopPropagation: { classPropertyName: "thyStopPropagation", publicName: "thyStopPropagation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyStopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: ThyStopPropagationDirective, isStandalone: true, selector: "[thyStopPropagation]", inputs: { thyStopPropagation: { classPropertyName: "thyStopPropagation", publicName: "thyStopPropagation", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyStopPropagationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyStopPropagationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyStopPropagation]'
@@ -290,10 +291,10 @@ class ThyContextMenuDirective {
     ngOnDestroy() {
         this.removeContextListenerFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: ThyContextMenuDirective, isStandalone: true, selector: "[thyContextMenu]", outputs: { thyContextMenu: "thyContextMenu" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ThyContextMenuDirective, isStandalone: true, selector: "[thyContextMenu]", outputs: { thyContextMenu: "thyContextMenu" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyContextMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyContextMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyContextMenu]'
@@ -309,6 +310,7 @@ class ThyScrollDirective {
         this.elementRef = inject(ElementRef);
         this.ngZone = inject(NgZone);
         this._destroyed = new Subject();
+        this._subscription = null;
         this._elementScrolled = new Observable((observer) => this.ngZone.runOutsideAngular(() => fromEvent(this.elementRef.nativeElement, 'scroll', passiveEventListenerOptions)
             .pipe(takeUntil(this._destroyed))
             .subscribe(observer)));
@@ -354,10 +356,10 @@ class ThyScrollDirective {
     getElementRef() {
         return this.elementRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: ThyScrollDirective, isStandalone: true, selector: "[thyScroll]", inputs: { thyEnable: { classPropertyName: "thyEnable", publicName: "thyEnable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnScrolled: "thyOnScrolled" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: ThyScrollDirective, isStandalone: true, selector: "[thyScroll]", inputs: { thyEnable: { classPropertyName: "thyEnable", publicName: "thyEnable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyOnScrolled: "thyOnScrolled" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyScroll]'
@@ -396,10 +398,10 @@ class ThyDragDropDirective {
         this.ngUnsubscribe$.next();
         this.ngUnsubscribe$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: ThyDragDropDirective, isStandalone: true, selector: "[thyDragDrop]", queries: [{ propertyName: "draggables", predicate: CdkDrag, descendants: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: ThyDragDropDirective, isStandalone: true, selector: "[thyDragDrop]", queries: [{ propertyName: "draggables", predicate: CdkDrag, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyDragDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyDragDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyDragDrop]'
@@ -416,6 +418,7 @@ class ThyStringOrTemplateOutletDirective {
     constructor() {
         this.viewContainerRef = inject(ViewContainerRef);
         this.renderer = inject(Renderer2);
+        this.viewRef = null;
         this.thyStringOrTemplateOutletContext = input(...(ngDevMode ? [undefined, { debugName: "thyStringOrTemplateOutletContext" }] : []));
         this.thyStringOrTemplateOutlet = input(...(ngDevMode ? [undefined, { debugName: "thyStringOrTemplateOutlet" }] : []));
         effect(() => {
@@ -435,7 +438,7 @@ class ThyStringOrTemplateOutletDirective {
                 this.viewRef = this.viewContainerRef.createEmbeddedView(thyStringOrTemplateOutlet, this.thyStringOrTemplateOutletContext());
             }
             else {
-                this.textNode = this.renderer.createText(thyStringOrTemplateOutlet + '');
+                this.textNode = this.renderer.createText(`${thyStringOrTemplateOutlet}`);
                 const element = this.viewContainerRef.element.nativeElement;
                 this.renderer.insertBefore(element.parentNode, this.textNode, element);
             }
@@ -450,10 +453,10 @@ class ThyStringOrTemplateOutletDirective {
             this.renderer.removeChild(this.textNode.parentNode, this.textNode);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyStringOrTemplateOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: ThyStringOrTemplateOutletDirective, isStandalone: true, selector: "[thyStringOrTemplateOutlet]", inputs: { thyStringOrTemplateOutletContext: { classPropertyName: "thyStringOrTemplateOutletContext", publicName: "thyStringOrTemplateOutletContext", isSignal: true, isRequired: false, transformFunction: null }, thyStringOrTemplateOutlet: { classPropertyName: "thyStringOrTemplateOutlet", publicName: "thyStringOrTemplateOutlet", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["thyStringOrTemplateOutlet"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyStringOrTemplateOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: ThyStringOrTemplateOutletDirective, isStandalone: true, selector: "[thyStringOrTemplateOutlet]", inputs: { thyStringOrTemplateOutletContext: { classPropertyName: "thyStringOrTemplateOutletContext", publicName: "thyStringOrTemplateOutletContext", isSignal: true, isRequired: false, transformFunction: null }, thyStringOrTemplateOutlet: { classPropertyName: "thyStringOrTemplateOutlet", publicName: "thyStringOrTemplateOutlet", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["thyStringOrTemplateOutlet"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyStringOrTemplateOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyStringOrTemplateOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyStringOrTemplateOutlet]',
@@ -462,6 +465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         }], ctorParameters: () => [], propDecorators: { thyStringOrTemplateOutletContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyStringOrTemplateOutletContext", required: false }] }], thyStringOrTemplateOutlet: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyStringOrTemplateOutlet", required: false }] }] } });
 
 function hasInput(componentRef, inputKey) {
+    // @ts-ignore
     return componentRef['_tNode'].inputs?.[inputKey];
 }
 /**
@@ -548,10 +552,10 @@ class ThyViewOutletDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyViewOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: ThyViewOutletDirective, isStandalone: true, selector: "[thyViewOutlet]", inputs: { thyViewOutlet: { classPropertyName: "thyViewOutlet", publicName: "thyViewOutlet", isSignal: true, isRequired: false, transformFunction: null }, thyViewOutletContext: { classPropertyName: "thyViewOutletContext", publicName: "thyViewOutletContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyViewOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: ThyViewOutletDirective, isStandalone: true, selector: "[thyViewOutlet]", inputs: { thyViewOutlet: { classPropertyName: "thyViewOutlet", publicName: "thyViewOutlet", isSignal: true, isRequired: false, transformFunction: null }, thyViewOutletContext: { classPropertyName: "thyViewOutletContext", publicName: "thyViewOutletContext", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyViewOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyViewOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyViewOutlet]'
@@ -559,8 +563,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         }], ctorParameters: () => [], propDecorators: { thyViewOutlet: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyViewOutlet", required: false }] }], thyViewOutletContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyViewOutletContext", required: false }] }] } });
 
 class ThySharedModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ThySharedModule, imports: [ThyViewOutletDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ThySharedModule, imports: [ThyViewOutletDirective,
             ThyTranscludeDirective,
             ThyAutofocusDirective,
             ThyEnterDirective,
@@ -581,9 +585,9 @@ class ThySharedModule {
             ThyDragDropDirective,
             ThyStringOrTemplateOutletDirective,
             ThyViewOutletDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySharedModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySharedModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -696,10 +700,10 @@ class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAccessorMixi
             this.changeDetectorRef.markForCheck();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyFormCheckBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.14", type: ThyFormCheckBaseComponent, isStandalone: true, inputs: { thyInline: { classPropertyName: "thyInline", publicName: "thyInline", isSignal: true, isRequired: false, transformFunction: null }, thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: true, isRequired: false, transformFunction: null }, thyLabelTextTranslateKey: { classPropertyName: "thyLabelTextTranslateKey", publicName: "thyLabelTextTranslateKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty } }, host: { properties: { "class.form-check": "_isFormCheck", "class.form-check-inline": "thyInline()", "class.form-check-checked": "_isChecked", "class.form-check-inline-no-label-text": "_isNoText()" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyFormCheckBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.15", type: ThyFormCheckBaseComponent, isStandalone: true, inputs: { thyInline: { classPropertyName: "thyInline", publicName: "thyInline", isSignal: true, isRequired: false, transformFunction: null }, thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: true, isRequired: false, transformFunction: null }, thyLabelTextTranslateKey: { classPropertyName: "thyLabelTextTranslateKey", publicName: "thyLabelTextTranslateKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty } }, host: { properties: { "class.form-check": "_isFormCheck", "class.form-check-inline": "thyInline()", "class.form-check-checked": "_isChecked", "class.form-check-inline-no-label-text": "_isNoText()" } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyFormCheckBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyFormCheckBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -737,7 +741,7 @@ class ThySelectControl {
                 computation: (source, previous) => previous?.source
             }]));
         this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
-        this.customDisplayTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "customDisplayTemplate" }] : []));
+        this.customDisplayTemplate = input(...(ngDevMode ? [undefined, { debugName: "customDisplayTemplate" }] : []));
         this.thyAllowClear = input(false, ...(ngDevMode ? [{ debugName: "thyAllowClear", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         this.thyPlaceholder = input('', ...(ngDevMode ? [{ debugName: "thyPlaceholder" }] : []));
         this.thySize = input(...(ngDevMode ? [undefined, { debugName: "thySize" }] : []));
@@ -924,7 +928,7 @@ class ThySelectControl {
     calculateVisibleTags() {
         if (!this.tagsContainer()?.nativeElement)
             return;
-        const containerWidth = this.tagsContainer().nativeElement.offsetWidth;
+        const containerWidth = this.tagsContainer()?.nativeElement.offsetWidth;
         if (containerWidth <= 0)
             return;
         const selectedOptions = coerceArray(this.thySelectedOptions());
@@ -949,10 +953,9 @@ class ThySelectControl {
         let totalWidth = 0;
         let visibleCount = 0;
         Promise.resolve().then(() => {
-            const tagElements = this.tagsContainer().nativeElement.querySelectorAll('.choice-item.selected,.custom-choice-item');
+            const tagElements = this.tagsContainer()?.nativeElement.querySelectorAll('.choice-item.selected,.custom-choice-item');
             for (let i = 0; i < selectedOptions.length; i++) {
-                let tagWidth;
-                tagWidth = (tagElements[i]?.offsetWidth || 80) + TAG_GAP;
+                const tagWidth = (tagElements[i]?.offsetWidth || 80) + TAG_GAP;
                 if (totalWidth + tagWidth > availableWidth) {
                     break;
                 }
@@ -1028,10 +1031,10 @@ class ThySelectControl {
     onBlur(event) {
         this.thyOnBlur.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null }, thyPanelOpened: { classPropertyName: "thyPanelOpened", publicName: "thyPanelOpened", isSignal: true, isRequired: false, transformFunction: null }, thyIsMultiple: { classPropertyName: "thyIsMultiple", publicName: "thyIsMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thySelectedOptions: { classPropertyName: "thySelectedOptions", publicName: "thySelectedOptions", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, customDisplayTemplate: { classPropertyName: "customDisplayTemplate", publicName: "customDisplayTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", 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 }, thyPreset: { classPropertyName: "thyPreset", publicName: "thyPreset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValue: "inputValueChange", thyOnSearch: "thyOnSearch", thyOnRemove: "thyOnRemove", thyOnClear: "thyOnClear", thyOnBlur: "thyOnBlur" }, host: { properties: { "class.select-control-borderless": "thyBorderless()" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "tagsContainer", first: true, predicate: ["tagsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"compositionChange(true)\"\n    (compositionend)=\"compositionChange(false)\"\n    autocomplete=\"something-new\"\n    [ngClass]=\"searchInputControlClass\"\n    (input)=\"updateWidth()\"\n    [ngModel]=\"inputValue()\"\n    (ngModelChange)=\"setInputValue($event)\"\n    (keydown.backspace)=\"handleBackspace($event)\"\n    [disabled]=\"thyDisabled()\"\n    (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n  @if (!isSelectedValue()) {\n    <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle()\">\n      {{ thyPlaceholder() }}\n    </div>\n  }\n  @if (thyIsMultiple()) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\" #tagsContainer>\n      @if (thyPreset() === 'tag') {\n        @for (item of selectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\" [ngClass]=\"{ hidden: $index > visibleTagCount() - 1 }\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (item of selectedTags(); track trackValue($index, item)) {\n          <div\n            thyFlexItem\n            thyTag\n            class=\"choice-item selected\"\n            [ngClass]=\"{ disabled: thyDisabled() === true, hidden: $index > visibleTagCount() - 1 }\"\n            [thySize]=\"tagSize()\">\n            <div class=\"text-truncate h-100 d-flex align-items-center\">\n              @if (!customDisplayTemplate()) {\n                <thy-flexible-text [thyTooltipContent]=\"item?.thyLabelText\" class=\"text-truncate h-100\">\n                  {{ item?.thyLabelText }}\n                </thy-flexible-text>\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      }\n      @if (collapsedSelectedTags()?.length > 0) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize()\"\n          [ngClass]=\"{ disabled: thyDisabled() === true }\"\n          [thyTooltip]=\"maxTagTooltip\">\n          <div class=\"text-truncate\">+{{ collapsedSelectedTags()?.length }}</div>\n        </div>\n      }\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  } @else {\n    @if (isSelectedValue()) {\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle()\">\n        @if (!customDisplayTemplate()) {\n          <span class=\"text-truncate\">{{ thySelectedOptions()?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate()\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: thySelectedOptions()?.thyRawValue || thySelectedOptions()?.thyValue || thySelectedOptions()\n            }\"></ng-template>\n        }\n      </div>\n    }\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  }\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon()) {\n  <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n    <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </span>\n}\n\n<ng-template #maxTagTooltip>\n  @let lastIndex = collapsedSelectedTags().length - 1;\n  @for (item of collapsedSelectedTags(); track trackValue($index, item)) {\n    {{ item.thyLabelText }}\n    @if ($index !== lastIndex) {\n      {{ locale().comma }}\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyGridModule }, { kind: "directive", type: i2.ThyFlex, selector: "[thyFlex]", inputs: ["thyDirection", "thyWrap", "thyJustifyContent", "thyAlignItems", "thyGap"] }, { kind: "directive", type: i2.ThyFlexItem, selector: "[thyFlexItem]", inputs: ["thyFlexItem", "thyGrow", "thyShrink", "thyBasis"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelectControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null }, thyPanelOpened: { classPropertyName: "thyPanelOpened", publicName: "thyPanelOpened", isSignal: true, isRequired: false, transformFunction: null }, thyIsMultiple: { classPropertyName: "thyIsMultiple", publicName: "thyIsMultiple", isSignal: true, isRequired: false, transformFunction: null }, thyShowSearch: { classPropertyName: "thyShowSearch", publicName: "thyShowSearch", isSignal: true, isRequired: false, transformFunction: null }, thySelectedOptions: { classPropertyName: "thySelectedOptions", publicName: "thySelectedOptions", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, customDisplayTemplate: { classPropertyName: "customDisplayTemplate", publicName: "customDisplayTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyAllowClear: { classPropertyName: "thyAllowClear", publicName: "thyAllowClear", isSignal: true, isRequired: false, transformFunction: null }, thyPlaceholder: { classPropertyName: "thyPlaceholder", publicName: "thyPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", 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 }, thyPreset: { classPropertyName: "thyPreset", publicName: "thyPreset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValue: "inputValueChange", thyOnSearch: "thyOnSearch", thyOnRemove: "thyOnRemove", thyOnClear: "thyOnClear", thyOnBlur: "thyOnBlur" }, host: { properties: { "class.select-control-borderless": "thyBorderless()" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "tagsContainer", first: true, predicate: ["tagsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"compositionChange(true)\"\n    (compositionend)=\"compositionChange(false)\"\n    autocomplete=\"something-new\"\n    [ngClass]=\"searchInputControlClass\"\n    (input)=\"updateWidth()\"\n    [ngModel]=\"inputValue()\"\n    (ngModelChange)=\"setInputValue($event)\"\n    (keydown.backspace)=\"handleBackspace($event)\"\n    [disabled]=\"thyDisabled()\"\n    (blur)=\"onBlur($event)\" />\n</ng-template>\n\n<div class=\"select-control-rendered\">\n  @if (!isSelectedValue()) {\n    <div class=\"text-placeholder text-truncate\" [ngStyle]=\"placeholderStyle()\">\n      {{ thyPlaceholder() }}\n    </div>\n  }\n  @if (thyIsMultiple()) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\" #tagsContainer>\n      @if (thyPreset() === 'tag') {\n        @for (item of selectedTags(); track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\" [ngClass]=\"{ hidden: $index > visibleTagCount() - 1 }\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      } @else {\n        @for (item of selectedTags(); track trackValue($index, item)) {\n          <div\n            thyFlexItem\n            thyTag\n            class=\"choice-item selected\"\n            [ngClass]=\"{ disabled: thyDisabled() === true, hidden: $index > visibleTagCount() - 1 }\"\n            [thySize]=\"tagSize()\">\n            <div class=\"text-truncate h-100 d-flex align-items-center\">\n              @if (!customDisplayTemplate()) {\n                <thy-flexible-text [thyTooltipContent]=\"item?.thyLabelText\" class=\"text-truncate h-100\">\n                  {{ item?.thyLabelText }}\n                </thy-flexible-text>\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate()\"\n                  [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!thyDisabled()) {\n              <div class=\"choice-remove-link ml-1\" (click)=\"removeHandle(item, $event)\">\n                <span>\n                  <thy-icon thyIconName=\"close\" class=\"font-size-sm\"></thy-icon>\n                </span>\n              </div>\n            }\n          </div>\n        }\n      }\n      @if (collapsedSelectedTags()?.length > 0) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize()\"\n          [ngClass]=\"{ disabled: thyDisabled() === true }\"\n          [thyTooltip]=\"maxTagTooltip\">\n          <div class=\"text-truncate\">+{{ collapsedSelectedTags()?.length }}</div>\n        </div>\n      }\n      <div thyFlexItem class=\"select-control-search\">\n        <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n      </div>\n    </div>\n  } @else {\n    @if (isSelectedValue()) {\n      <div class=\"selected-value text-truncate\" [ngStyle]=\"selectedValueStyle()\">\n        @if (!customDisplayTemplate()) {\n          <span class=\"text-truncate\">{{ thySelectedOptions()?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate()\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: thySelectedOptions()?.thyRawValue || thySelectedOptions()?.thyValue || thySelectedOptions()\n            }\"></ng-template>\n        }\n      </div>\n    }\n    <div class=\"select-control-search\">\n      <ng-template [ngTemplateOutlet]=\"inputTemplate\"></ng-template>\n    </div>\n  }\n</div>\n<span class=\"select-control-arrow\">\n  <thy-icon thyIconName=\"angle-down\" class=\"font-size-base\"></thy-icon>\n</span>\n@if (showClearIcon()) {\n  <span class=\"select-control-clear remove-link\" (click)=\"clearHandle($event)\">\n    <thy-icon class=\"remove-link-icon font-size-base\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </span>\n}\n\n<ng-template #maxTagTooltip>\n  @let lastIndex = collapsedSelectedTags().length - 1;\n  @for (item of collapsedSelectedTags(); track trackValue($index, item)) {\n    {{ item.thyLabelText }}\n    @if ($index !== lastIndex) {\n      {{ locale().comma }}\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyGridModule }, { kind: "directive", type: i2.ThyFlex, selector: "[thyFlex]", inputs: ["thyDirection", "thyWrap", "thyJustifyContent", "thyAlignItems", "thyGap"] }, { kind: "directive", type: i2.ThyFlexItem, selector: "[thyFlexItem]", inputs: ["thyFlexItem", "thyGrow", "thyShrink", "thyBasis"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelectControl, decorators: [{
             type: Component,
             args: [{ selector: 'thy-select-control,[thySelectControl]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgClass, NgStyle, ThyTag, NgTemplateOutlet, ThyIcon, ThyGridModule, ThyTooltipDirective, ThyFlexibleText], host: {
                         '[class.select-control-borderless]': 'thyBorderless()'
@@ -1046,11 +1049,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * found in the LICENSE file at https://angular.io/license
  */
 class ThySelectCommonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ThySelectCommonModule, imports: [CommonModule, FormsModule, ThyIconModule, ThyTagModule, ThySelectControl], exports: [ThySelectControl] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectCommonModule, imports: [CommonModule, FormsModule, ThyIconModule, ThyTagModule, ThySelectControl] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelectCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ThySelectCommonModule, imports: [CommonModule, FormsModule, ThyIconModule, ThyTagModule, ThySelectControl], exports: [ThySelectControl] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelectCommonModule, imports: [CommonModule, FormsModule, ThyIconModule, ThyTagModule, ThySelectControl] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelectCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ThyIconModule, ThyTagModule, ThySelectControl],
@@ -1058,10 +1061,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-/**
- * Injection token used to provide the parent component to options.
- */
-const THY_OPTION_PARENT_COMPONENT = new InjectionToken('THY_OPTION_PARENT_COMPONENT');
 /**
  * Injection token used to provide the parent component to options.
  */
@@ -1078,9 +1077,9 @@ class ThyListOption {
         this.parentSelectionList = inject(THY_LIST_OPTION_PARENT_COMPONENT, { optional: true });
         this.role = 'option';
         this.tabIndex = -1;
-        this.isMultiple = computed(() => this.parentSelectionList.multiple(), ...(ngDevMode ? [{ debugName: "isMultiple" }] : []));
-        this.isListOption = computed(() => this.parentSelectionList.layout() === 'list', ...(ngDevMode ? [{ debugName: "isListOption" }] : []));
-        this.isGridOption = computed(() => this.parentSelectionList.layout() === 'grid', ...(ngDevMode ? [{ debugName: "isGridOption" }] : []));
+        this.isMultiple = computed(() => (this.parentSelectionList?.multiple && this.parentSelectionList.multiple()) ?? false, ...(ngDevMode ? [{ debugName: "isMultiple" }] : []));
+        this.isListOption = computed(() => this.parentSelectionList?.layout && this.parentSelectionList?.layout() === 'list', ...(ngDevMode ? [{ debugName: "isListOption" }] : []));
+        this.isGridOption = computed(() => this.parentSelectionList?.layout && this.parentSelectionList?.layout() === 'grid', ...(ngDevMode ? [{ debugName: "isGridOption" }] : []));
         this.id = input(`thy-list-option-${_uniqueIdCounter++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
         this.thyValue = input(undefined, ...(ngDevMode ? [{ debugName: "thyValue" }] : []));
         this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
@@ -1090,7 +1089,7 @@ class ThyListOption {
         return this.parentSelectionList.isSelected(this);
     }
     onClick(event) {
-        if (this.parentSelectionList.multiple() || !this.parentSelectionList.isSelected(this)) {
+        if ((this.parentSelectionList.multiple && this.parentSelectionList.multiple()) || !this.parentSelectionList.isSelected(this)) {
             this.parentSelectionList.toggleOption(this, event);
             this.parentSelectionList.setActiveOption(this);
         }
@@ -1109,10 +1108,10 @@ class ThyListOption {
     getLabel() {
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyListOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ThyListOption, isStandalone: true, selector: "thy-list-option,[thy-list-option]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.disabled": "thyDisabled()", "class.thy-list-option": "isListOption()", "class.thy-grid-option": "isGridOption()", "class.active": "selected", "attr.role": "role", "attr.tabindex": "tabIndex" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (isMultiple() && isListOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (isGridOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n  </span>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyListOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThyListOption, isStandalone: true, selector: "thy-list-option,[thy-list-option]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.disabled": "thyDisabled()", "class.thy-list-option": "isListOption()", "class.thy-grid-option": "isGridOption()", "class.active": "selected", "attr.role": "role", "attr.tabindex": "tabIndex" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (isMultiple() && isListOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (isGridOption()) {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n  </span>\n}\n", dependencies: [{ 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: ThyListOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyListOption, decorators: [{
             type: Component,
             args: [{ selector: 'thy-list-option,[thy-list-option]', imports: [ThyIcon], host: {
                         '[class.disabled]': 'thyDisabled()',
@@ -1135,10 +1134,10 @@ class ThyOptionGroup extends _MixinBase {
     set thyDisabled(value) {
         this.thyDisabled = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ThyOptionGroup, isStandalone: true, selector: "thy-list-option-group,[thy-list-option-group]", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyOptionGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: ThyOptionGroup, isStandalone: true, selector: "thy-list-option-group,[thy-list-option-group]", usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyOptionGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'thy-list-option-group,[thy-list-option-group]',
@@ -1148,8 +1147,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-class SelectOptionBase {
+class ThySelectOptionGroup {
+    constructor() {
+        this.thyGroupLabel = input(...(ngDevMode ? [undefined, { debugName: "thyGroupLabel" }] : []));
+        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: ThySelectOptionGroup, isStandalone: true, selector: "thy-option-group", inputs: { thyGroupLabel: { classPropertyName: "thyGroupLabel", publicName: "thyGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThySelectOptionGroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'thy-option-group',
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { thyGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyGroupLabel", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }] } });
 
 class ThyOptionSelectionChangeEvent {
     constructor(option, isUserInput = false) {
@@ -1157,39 +1169,155 @@ class ThyOptionSelectionChangeEvent {
         this.isUserInput = isUserInput;
     }
 }
-class ThyOptionVisibleChangeEvent {
-}
 /**
- * @private
- * @order 20
+ * 选项组件
+ * @name thy-option
  */
-class ThyOption extends SelectOptionBase {
-    // 继承至 Highlightable，无法修改为 Signal
-    get disabled() {
-        return this.hidden() || this.thyDisabled();
-    }
-    get tabIndex() {
-        return this.disabled ? '-1' : '0';
-    }
+class ThyOption {
     constructor() {
-        super();
-        this.element = inject(ElementRef);
-        this.parent = inject(THY_OPTION_PARENT_COMPONENT, { optional: true });
-        this.cdr = inject(ChangeDetectorRef);
+        /**
+         * 选项的值，具有唯一性
+         */
+        this.thyValue = input(...(ngDevMode ? [undefined, { debugName: "thyValue" }] : []));
+        /**
+         * 选项的原始值
+         */
+        this.thyRawValue = input(...(ngDevMode ? [undefined, { debugName: "thyRawValue" }] : []));
+        /**
+         * 选项的文本
+         */
+        this.thyLabelText = input(...(ngDevMode ? [undefined, { debugName: "thyLabelText" }] : []));
+        /**
+         * 是否显示自定义模板
+         */
         this.thyShowOptionCustom = input(...(ngDevMode ? [undefined, { debugName: "thyShowOptionCustom" }] : []));
+        /**
+         * 搜索关键字
+         */
         this.thySearchKey = input(...(ngDevMode ? [undefined, { debugName: "thySearchKey" }] : []));
-        this.template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "template" }] : []));
-        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
-        this.hidden = signal(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+        /**
+         * 是否禁用
+         */
+        this.thyDisabled = input(...(ngDevMode ? [undefined, { debugName: "thyDisabled" }] : []));
+        /**
+         * 是否选中，会跟随 ThyOptionSelectionChangeEvent 抛出去
+         */
         this.selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+        /**
+         * 选项被选中时的回调
+         */
         this.selectionChange = output();
-        this.visibleChange = output();
+        /**
+         * 模板
+         */
+        this.template = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "template" }] : []));
+        this.optionGroupComponent = inject(ThySelectOptionGroup, { optional: true });
     }
-    getHostElement() {
-        return this.element.nativeElement;
+    get groupLabel() {
+        return this.optionGroupComponent?.thyGroupLabel() || '';
     }
-    onClick(event) {
-        this.selectViaInteraction();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: ThyOption, isStandalone: true, selector: "thy-option", inputs: { thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyRawValue: { classPropertyName: "thyRawValue", publicName: "thyRawValue", isSignal: true, isRequired: false, transformFunction: null }, thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: true, isRequired: false, transformFunction: null }, thyShowOptionCustom: { classPropertyName: "thyShowOptionCustom", publicName: "thyShowOptionCustom", isSignal: true, isRequired: false, transformFunction: null }, thySearchKey: { classPropertyName: "thySearchKey", publicName: "thySearchKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyOption, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'thy-option',
+                    template: `
+        <ng-template>
+            <ng-content></ng-content>
+        </ng-template>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { thyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyValue", required: false }] }], thyRawValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyRawValue", required: false }] }], thyLabelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyLabelText", required: false }] }], thyShowOptionCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowOptionCustom", required: false }] }], thySearchKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySearchKey", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+/**
+ * 选项渲染组件
+ * @private
+ * @name thy-option-render
+ */
+class ThyOptionRender {
+    constructor() {
+        this.element = inject(ElementRef);
+        this.hostRenderer = useHostRenderer();
+        /**
+         * 选项的值，具有唯一性
+         */
+        this.thyValue = input(...(ngDevMode ? [undefined, { debugName: "thyValue" }] : []));
+        /**
+         * 选项的原始值
+         */
+        this.thyRawValue = input(...(ngDevMode ? [undefined, { debugName: "thyRawValue" }] : []));
+        /**
+         * 选项的文本
+         */
+        this.thyLabelText = input(...(ngDevMode ? [undefined, { debugName: "thyLabelText" }] : []));
+        /**
+         * 搜索关键字
+         */
+        this.thySearchKey = input(...(ngDevMode ? [undefined, { debugName: "thySearchKey" }] : []));
+        /**
+         * 是否禁用
+         */
+        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        /**
+         * 是否显示自定义模板
+         */
+        this.thyShowOptionCustom = input(false, ...(ngDevMode ? [{ debugName: "thyShowOptionCustom", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        /**
+         * 模板
+         */
+        this.thyTemplate = input(...(ngDevMode ? [undefined, { debugName: "thyTemplate" }] : []));
+        /**
+         * 模板上下文
+         */
+        this.thyTemplateContext = input(...(ngDevMode ? [undefined, { debugName: "thyTemplateContext" }] : []));
+        /**
+         * 被选中时，是否显示勾选图标
+         */
+        this.thyShowCheckedIcon = input(false, ...(ngDevMode ? [{ debugName: "thyShowCheckedIcon", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        /**
+         * Select 组件选中的值
+         */
+        this.thySelectedValuesMap = input(new Map(), ...(ngDevMode ? [{ debugName: "thySelectedValuesMap" }] : []));
+        /**
+         * 当前高亮选项的值
+         */
+        this.thyActivatedValue = input(...(ngDevMode ? [undefined, { debugName: "thyActivatedValue" }] : []));
+        /**
+         * 点击选项时的回调
+         */
+        this.optionClick = output();
+        /**
+         * 鼠标悬浮时的回调
+         */
+        this.optionHover = output();
+        /**
+         * 是否被选中
+         */
+        this.selected = computed(() => {
+            return this.thySelectedValuesMap().has(this.thyValue());
+        }, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+        /**
+         * 是否高亮
+         */
+        this.activated = computed(() => {
+            return this.thyActivatedValue() === this.thyValue();
+        }, ...(ngDevMode ? [{ debugName: "activated" }] : []));
+        this.tabIndex = computed(() => {
+            return this.thyDisabled() ? '-1' : '0';
+        }, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+        effect(() => {
+            this.activated() ? this.setActiveStyles() : this.setInactiveStyles();
+        });
+    }
+    mouseEnter() {
+        this.optionHover.emit(this.thyValue());
     }
     handleKeydown(event) {
         if ((event.keyCode === ENTER || event.keyCode === SPACE) && !hasModifierKey(event)) {
@@ -1198,190 +1326,66 @@ class ThyOption extends SelectOptionBase {
         }
     }
     selectViaInteraction() {
-        if (!this.disabled) {
-            const selected = this.parent.isMultiple ? !this.selected() : true;
-            this.selected.set(selected);
-            this.cdr.markForCheck();
-            this.emitSelectionChangeEvent(true);
+        if (!this.thyDisabled()) {
+            this.optionClick.emit({ value: this.thyValue(), isUserInput: true });
         }
     }
-    select(event) {
-        if (!this.disabled) {
+    select() {
+        if (!this.thyDisabled()) {
             if (!this.selected()) {
-                this.selected.set(true);
-                this.emitSelectionChangeEvent();
-                this.cdr.markForCheck();
+                this.optionClick.emit({ value: this.thyValue() });
             }
         }
     }
     deselect() {
-        if (this.selected() || this.disabled) {
-            this.selected.set(false);
-            this.emitSelectionChangeEvent();
-            this.cdr.markForCheck();
-        }
-    }
-    hideOption() {
-        if (!this.hidden()) {
-            this.hidden.set(true);
-            this.visibleChange.emit({ option: this });
-            this.cdr.markForCheck();
-        }
-    }
-    showOption() {
-        if (this.hidden()) {
-            this.hidden.set(false);
-            this.visibleChange.emit({ option: this });
-            this.cdr.markForCheck();
-        }
-    }
-    matchSearchText(searchText) {
-        const thySearchKey = this.thySearchKey();
-        if (thySearchKey) {
-            if (thySearchKey.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        }
-        else {
-            if (this.thyLabelText.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
-                return true;
-            }
-            else {
-                return false;
-            }
+        if (this.selected() || this.thyDisabled()) {
+            this.optionClick.emit({ value: this.thyValue() });
         }
     }
     setActiveStyles() {
-        this.getHostElement().classList.add('hover');
-        this.cdr.markForCheck();
+        this.hostRenderer.addClass('hover');
     }
     setInactiveStyles() {
-        this.getHostElement().classList.remove('hover');
-        this.cdr.markForCheck();
+        this.hostRenderer.removeClass('hover');
     }
-    getLabel() {
-        return '';
-    }
-    emitSelectionChangeEvent(isUserInput = false) {
-        this.selectionChange.emit(new ThyOptionSelectionChangeEvent(this, isUserInput));
-    }
-    ngOnDestroy() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ThyOption, isStandalone: true, selector: "thy-option", inputs: { thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: false, isRequired: false, transformFunction: null }, thyRawValue: { classPropertyName: "thyRawValue", publicName: "thyRawValue", isSignal: false, isRequired: false, transformFunction: null }, thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: false, isRequired: false, transformFunction: null }, thyShowOptionCustom: { classPropertyName: "thyShowOptionCustom", publicName: "thyShowOptionCustom", isSignal: true, isRequired: false, transformFunction: null }, thySearchKey: { classPropertyName: "thySearchKey", publicName: "thySearchKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", visibleChange: "visibleChange" }, host: { listeners: { "click": "onClick($event)", "keydown": "handleKeydown($event)" }, properties: { "class.disabled": "thyDisabled()", "class.hidden": "hidden()", "attr.tabindex": "tabIndex", "class.active": "selected()" }, classAttribute: "thy-option-item" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (thyShowOptionCustom()) {\n  <ng-content></ng-content>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText }}</span>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyOptionRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ThyOptionRender, isStandalone: true, selector: "thy-option-render", inputs: { thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyRawValue: { classPropertyName: "thyRawValue", publicName: "thyRawValue", isSignal: true, isRequired: false, transformFunction: null }, thyLabelText: { classPropertyName: "thyLabelText", publicName: "thyLabelText", isSignal: true, isRequired: false, transformFunction: null }, thySearchKey: { classPropertyName: "thySearchKey", publicName: "thySearchKey", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyShowOptionCustom: { classPropertyName: "thyShowOptionCustom", publicName: "thyShowOptionCustom", isSignal: true, isRequired: false, transformFunction: null }, thyTemplate: { classPropertyName: "thyTemplate", publicName: "thyTemplate", isSignal: true, isRequired: false, transformFunction: null }, thyTemplateContext: { classPropertyName: "thyTemplateContext", publicName: "thyTemplateContext", isSignal: true, isRequired: false, transformFunction: null }, thyShowCheckedIcon: { classPropertyName: "thyShowCheckedIcon", publicName: "thyShowCheckedIcon", isSignal: true, isRequired: false, transformFunction: null }, thySelectedValuesMap: { classPropertyName: "thySelectedValuesMap", publicName: "thySelectedValuesMap", isSignal: true, isRequired: false, transformFunction: null }, thyActivatedValue: { classPropertyName: "thyActivatedValue", publicName: "thyActivatedValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionClick: "optionClick", optionHover: "optionHover" }, host: { listeners: { "click": "selectViaInteraction()", "mouseenter": "mouseEnter()", "keydown": "handleKeydown($event)" }, properties: { "class.disabled": "thyDisabled()", "attr.tabindex": "tabIndex()", "class.active": "selected()" }, classAttribute: "thy-option-item" }, ngImport: i0, template: "@if (thyShowOptionCustom()) {\n  <ng-container *ngTemplateOutlet=\"thyTemplate(); context: thyTemplateContext()\"></ng-container>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText() }}</span>\n}\n@if (thyShowCheckedIcon() && selected()) {\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyOptionRender, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ThyIcon], host: {
+            args: [{ selector: 'thy-option-render', imports: [ThyIcon, NgTemplateOutlet], host: {
                         class: 'thy-option-item',
                         '[class.disabled]': 'thyDisabled()',
-                        '[class.hidden]': 'hidden()',
-                        '[attr.tabindex]': `tabIndex`,
-                        '[class.active]': 'selected()'
-                    }, template: "@if (thyShowOptionCustom()) {\n  <ng-content></ng-content>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText }}</span>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n" }]
-        }], ctorParameters: () => [], propDecorators: { thyValue: [{
-                type: Input
-            }], thyRawValue: [{
-                type: Input
-            }], thyLabelText: [{
-                type: Input
-            }], thyShowOptionCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowOptionCustom", required: false }] }], thySearchKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySearchKey", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
+                        '[attr.tabindex]': `tabIndex()`,
+                        '[class.active]': 'selected()',
+                        '(click)': 'selectViaInteraction()',
+                        '(mouseenter)': 'mouseEnter()',
+                        '(keydown)': 'handleKeydown($event)'
+                    }, template: "@if (thyShowOptionCustom()) {\n  <ng-container *ngTemplateOutlet=\"thyTemplate(); context: thyTemplateContext()\"></ng-container>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText() }}</span>\n}\n@if (thyShowCheckedIcon() && selected()) {\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { thyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyValue", required: false }] }], thyRawValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyRawValue", required: false }] }], thyLabelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyLabelText", required: false }] }], thySearchKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySearchKey", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], thyShowOptionCustom: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowOptionCustom", required: false }] }], thyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyTemplate", required: false }] }], thyTemplateContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyTemplateContext", required: false }] }], thyShowCheckedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowCheckedIcon", required: false }] }], thySelectedValuesMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySelectedValuesMap", required: false }] }], thyActivatedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyActivatedValue", required: false }] }], optionClick: [{ type: i0.Output, args: ["optionClick"] }], optionHover: [{ type: i0.Output, args: ["optionHover"] }] } });
 
 /**
  * @private
  */
-class ThySelectOptionGroup {
+class ThyOptionGroupRender {
     constructor() {
-        this._ngZone = inject(NgZone);
-        this.cdr = inject(ChangeDetectorRef);
-        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
-        this.hidden = signal(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
         this.thyGroupLabel = input(undefined, ...(ngDevMode ? [{ debugName: "thyGroupLabel" }] : []));
-        this._destroy$ = new Subject();
-        this.optionVisibleChanges = defer(() => {
-            if (this.options) {
-                return merge(...this.options.map(option => outputToObservable(option.visibleChange)));
-            }
-            return this._ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionVisibleChanges));
-        });
-    }
-    ngAfterContentInit() {
-        this.options.changes.pipe(startWith(null), takeUntil(this._destroy$)).subscribe(() => {
-            this._resetOptions();
-        });
-    }
-    _resetOptions() {
-        const changedOrDestroyed$ = merge(this.options.changes, this._destroy$);
-        merge(...this.options.map(option => outputToObservable(option.visibleChange)))
-            .pipe(takeUntil(changedOrDestroyed$), debounceTime(10), map((event) => {
-            const hasOption = this.options.find(option => {
-                if (!option.hidden()) {
-                    return true;
-                }
-            });
-            if (hasOption) {
-                return false;
-            }
-            else {
-                return true;
-            }
-        }))
-            .subscribe((data) => {
-            this.hidden.set(data);
-            this.cdr.markForCheck();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: ThySelectOptionGroup, isStandalone: true, selector: "thy-option-group", inputs: { thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyGroupLabel: { classPropertyName: "thyGroupLabel", publicName: "thyGroupLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "thyDisabled()", "class.thy-select-option-group-hidden": "hidden()" }, classAttribute: "thy-option-item-group" }, queries: [{ propertyName: "options", predicate: ThyOption }], ngImport: i0, template: "<span class=\"group-name text-truncate\">{{ thyGroupLabel() }}</span>\n<ng-content></ng-content>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThySelectOptionGroup, decorators: [{
-            type: Component,
-            args: [{ selector: 'thy-option-group', host: {
-                        class: 'thy-option-item-group',
-                        '[class.disabled]': 'thyDisabled()',
-                        '[class.thy-select-option-group-hidden]': 'hidden()'
-                    }, template: "<span class=\"group-name text-truncate\">{{ thyGroupLabel() }}</span>\n<ng-content></ng-content>\n" }]
-        }], propDecorators: { thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], thyGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyGroupLabel", required: false }] }], options: [{
-                type: ContentChildren,
-                args: [ThyOption]
-            }] } });
-
-class ThyOptionsContainer {
-    constructor() {
-        this.optionsTemplate = viewChild('options', ...(ngDevMode ? [{ debugName: "optionsTemplate" }] : []));
+        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
     }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.14", type: ThyOptionsContainer, isStandalone: true, selector: "thy-options-container", viewQueries: [{ propertyName: "optionsTemplate", first: true, predicate: ["options"], descendants: true, isSignal: true }], ngImport: i0, template: `
-        <ng-template #options>
-            <ng-content></ng-content>
-        </ng-template>
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyOptionGroupRender, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: ThyOptionGroupRender, isStandalone: true, selector: "thy-option-group-render", inputs: { thyGroupLabel: { classPropertyName: "thyGroupLabel", publicName: "thyGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, thyDisabled: { classPropertyName: "thyDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.disabled": "thyDisabled()" }, classAttribute: "thy-option-group-render" }, ngImport: i0, template: `<span class="group-name text-truncate">{{ thyGroupLabel() }}</span>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionsContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyOptionGroupRender, decorators: [{
             type: Component,
             args: [{
-                    selector: 'thy-options-container',
-                    template: `
-        <ng-template #options>
-            <ng-content></ng-content>
-        </ng-template>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    selector: 'thy-option-group-render',
+                    template: `<span class="group-name text-truncate">{{ thyGroupLabel() }}</span>`,
+                    host: {
+                        class: 'thy-option-group-render',
+                        '[class.disabled]': 'thyDisabled()'
+                    }
                 }]
-        }], ctorParameters: () => [], propDecorators: { optionsTemplate: [{ type: i0.ViewChild, args: ['options', { isSignal: true }] }] } });
+        }], propDecorators: { thyGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyGroupLabel", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }] } });
 
 /**
  * @license
@@ -1391,21 +1395,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * found in the LICENSE file at https://angular.io/license
  */
 class ThyOptionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionModule, imports: [CommonModule, ThyIconModule, ThyListOption, ThyOptionGroup, ThyOption, ThySelectOptionGroup, ThyOptionsContainer], exports: [ThyListOption, ThyOptionGroup, ThyOption, ThySelectOptionGroup, ThyOptionsContainer] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionModule, imports: [CommonModule, ThyIconModule, ThyListOption, ThyOption] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: ThyOptionModule, imports: [CommonModule,
+            ThyIconModule,
+            ThyListOption,
+            ThyOptionGroup,
+            ThyOption,
+            ThyOptionRender,
+            ThySelectOptionGroup,
+            ThyOptionGroupRender], exports: [ThyListOption, ThyOptionGroup, ThyOption, ThyOptionRender, ThySelectOptionGroup, ThyOptionGroupRender] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyOptionModule, imports: [CommonModule,
+            ThyIconModule,
+            ThyListOption,
+            ThyOptionRender] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ThyOptionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ThyOptionModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ThyIconModule, ThyListOption, ThyOptionGroup, ThyOption, ThySelectOptionGroup, ThyOptionsContainer],
-                    exports: [ThyListOption, ThyOptionGroup, ThyOption, ThySelectOptionGroup, ThyOptionsContainer]
+                    imports: [
+                        CommonModule,
+                        ThyIconModule,
+                        ThyListOption,
+                        ThyOptionGroup,
+                        ThyOption,
+                        ThyOptionRender,
+                        ThySelectOptionGroup,
+                        ThyOptionGroupRender
+                    ],
+                    exports: [ThyListOption, ThyOptionGroup, ThyOption, ThyOptionRender, ThySelectOptionGroup, ThyOptionGroupRender]
                 }]
         }] });
 
+class SelectOptionBase {
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SelectOptionBase, THY_LIST_OPTION_PARENT_COMPONENT, THY_OPTION_PARENT_COMPONENT, ThyAutofocusDirective, ThyContextMenuDirective, ThyCtrlEnterDirective, ThyDragDropDirective, ThyEnterDirective, ThyFormCheckBaseComponent, ThyListOption, ThyOption, ThyOptionGroup, ThyOptionModule, ThyOptionSelectionChangeEvent, ThyOptionVisibleChangeEvent, ThyOptionsContainer, ThyScrollDirective, ThySelectCommonModule, ThySelectControl, ThySelectOptionGroup, ThySharedModule, ThyShowDirective, ThyStopPropagationDirective, ThyStringOrTemplateOutletDirective, ThyTranscludeDirective, ThyViewOutletDirective };
+export { SelectOptionBase, THY_LIST_OPTION_PARENT_COMPONENT, ThyAutofocusDirective, ThyContextMenuDirective, ThyCtrlEnterDirective, ThyDragDropDirective, ThyEnterDirective, ThyFormCheckBaseComponent, ThyListOption, ThyOption, ThyOptionGroup, ThyOptionGroupRender, ThyOptionModule, ThyOptionRender, ThyOptionSelectionChangeEvent, ThyScrollDirective, ThySelectCommonModule, ThySelectControl, ThySelectOptionGroup, ThySharedModule, ThyShowDirective, ThyStopPropagationDirective, ThyStringOrTemplateOutletDirective, ThyTranscludeDirective, ThyViewOutletDirective };
 //# sourceMappingURL=ngx-tethys-shared.mjs.map