ngx-tethys 19.1.13 → 20.0.0-next.0

package/fesm2022/ngx-tethys-shared.mjs

@@ -24,7 +24,7 @@ import { ThyTooltipDirective } from 'ngx-tethys/tooltip';
  */
 class ThyTranscludeDirective {
     constructor() {
-        this.thyTransclude = input();
+        this.thyTransclude = input(...(ngDevMode ? [undefined, { debugName: "thyTransclude" }] : []));
         const viewRef = inject(ViewContainerRef);
         this.viewRef = viewRef;
         effect(() => {
@@ -34,15 +34,15 @@ class ThyTranscludeDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyTranscludeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyTranscludeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThyTranscludeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyTranscludeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyTransclude]'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { thyTransclude: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyTransclude", required: false }] }] } });
 
 /**
  * 自动聚焦指令
@@ -58,12 +58,12 @@ class ThyAutofocusDirective {
          * 是否自动聚焦
          * @default false
          */
-        this.thyAutofocus = input(false, { transform: coerceBooleanProperty });
+        this.thyAutofocus = input(false, ...(ngDevMode ? [{ debugName: "thyAutofocus", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 是否自动选择
          * @default false
          */
-        this.thyAutoSelect = input(false, { transform: coerceBooleanProperty });
+        this.thyAutoSelect = input(false, ...(ngDevMode ? [{ debugName: "thyAutoSelect", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         effect(() => {
             if (this.thyAutofocus()) {
                 // Note: this is being run outside of the Angular zone because `element.focus()` doesn't require
@@ -82,15 +82,15 @@ class ThyAutofocusDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyAutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyAutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThyAutofocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyAutofocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[thyAutofocus],textarea[thyAutofocus]'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { thyAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAutofocus", required: false }] }], thyAutoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAutoSelect", required: false }] }] } });
 
 /**
  * 与 (keydown.enter) 区别是支持组合键，当按 Ctrl + Enter 或者 Command + Enter 也会触发
@@ -119,15 +119,15 @@ class ThyEnterDirective {
     ngOnDestroy() {
         this.removeKeydownListenerFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyEnterDirective, isStandalone: true, selector: "[thyEnter]", outputs: { thyEnter: "thyEnter" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ThyEnterDirective, isStandalone: true, selector: "[thyEnter]", outputs: { thyEnter: "thyEnter" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyEnterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyEnterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyEnter]'
                 }]
-        }] });
+        }], propDecorators: { thyEnter: [{ type: i0.Output, args: ["thyEnter"] }] } });
 
 /**
  * @name thyCtrlEnter
@@ -156,15 +156,15 @@ class ThyCtrlEnterDirective {
     ngOnDestroy() {
         this.removeKeydownListenerFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCtrlEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyCtrlEnterDirective, isStandalone: true, selector: "[thyCtrlEnter]", outputs: { thyCtrlEnter: "thyCtrlEnter" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyCtrlEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ThyCtrlEnterDirective, isStandalone: true, selector: "[thyCtrlEnter]", outputs: { thyCtrlEnter: "thyCtrlEnter" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyCtrlEnterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyCtrlEnterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyCtrlEnter]'
                 }]
-        }] });
+        }], propDecorators: { thyCtrlEnter: [{ type: i0.Output, args: ["thyCtrlEnter"] }] } });
 
 /**
  * @name thyShow
@@ -182,7 +182,7 @@ class ThyShowDirective {
         this.ngZone = inject(NgZone);
         this.thyShowChange = output();
         this.hostRenderer = useHostRenderer();
-        this.thyShow = input(false, { transform: coerceBooleanProperty });
+        this.thyShow = input(false, ...(ngDevMode ? [{ debugName: "thyShow", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         effect(() => {
             if (this.thyShow()) {
                 this.hostRenderer.setStyle('display', 'block');
@@ -204,15 +204,15 @@ class ThyShowDirective {
     ngOnDestroy() {
         this.unListenDocument();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyShowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyShowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThyShowDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyShowDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyShow]'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { thyShowChange: [{ type: i0.Output, args: ["thyShowChange"] }], thyShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShow", required: false }] }] } });
 
 /**
  * 阻止事件冒泡
@@ -220,7 +220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  */
 class ThyStopPropagationDirective {
     constructor() {
-        this.thyStopPropagation = input(true);
+        this.thyStopPropagation = input(true, ...(ngDevMode ? [{ debugName: "thyStopPropagation" }] : []));
         this._eventName = computed(() => {
             const stopPropagation = this.thyStopPropagation();
             if (stopPropagation !== false) {
@@ -231,11 +231,11 @@ class ThyStopPropagationDirective {
                     return stopPropagation;
                 }
             }
-        });
+        }, ...(ngDevMode ? [{ debugName: "_eventName" }] : []));
         this._shouldStopPropagation = computed(() => {
             const stopPropagation = this.thyStopPropagation();
             return stopPropagation === false || stopPropagation === 'false' ? false : true;
-        });
+        }, ...(ngDevMode ? [{ debugName: "_shouldStopPropagation" }] : []));
         this._changes$ = new Subject();
         this._destroy$ = new Subject();
         const _host = inject(ElementRef);
@@ -256,15 +256,15 @@ class ThyStopPropagationDirective {
     ngOnDestroy() {
         this._destroy$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyStopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThyStopPropagationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyStopPropagationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyStopPropagation]'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { thyStopPropagation: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyStopPropagation", required: false }] }] } });
 
 /**
  * @name thyContextMenu
@@ -290,15 +290,15 @@ class ThyContextMenuDirective {
     ngOnDestroy() {
         this.removeContextListenerFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ThyContextMenuDirective, isStandalone: true, selector: "[thyContextMenu]", outputs: { thyContextMenu: "thyContextMenu" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ThyContextMenuDirective, isStandalone: true, selector: "[thyContextMenu]", outputs: { thyContextMenu: "thyContextMenu" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyContextMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyContextMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyContextMenu]'
                 }]
-        }] });
+        }], propDecorators: { thyContextMenu: [{ type: i0.Output, args: ["thyContextMenu"] }] } });
 
 const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
 /**
@@ -312,7 +312,7 @@ class ThyScrollDirective {
         this._elementScrolled = new Observable((observer) => this.ngZone.runOutsideAngular(() => fromEvent(this.elementRef.nativeElement, 'scroll', passiveEventListenerOptions)
             .pipe(takeUntil(this._destroyed))
             .subscribe(observer)));
-        this.thyEnable = input(true, { transform: coerceBooleanProperty });
+        this.thyEnable = input(true, ...(ngDevMode ? [{ debugName: "thyEnable", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * @description
          *
@@ -354,15 +354,15 @@ class ThyScrollDirective {
     getElementRef() {
         return this.elementRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThyScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyScrollDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyScroll]'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { thyEnable: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyEnable", required: false }] }], thyOnScrolled: [{ type: i0.Output, args: ["thyOnScrolled"] }] } });
 
 /**
  * @private
@@ -396,10 +396,10 @@ class ThyDragDropDirective {
         this.ngUnsubscribe$.next();
         this.ngUnsubscribe$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyDragDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: ThyDragDropDirective, isStandalone: true, selector: "[thyDragDrop]", queries: [{ propertyName: "draggables", predicate: CdkDrag, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyDragDropDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyDragDropDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyDragDrop]'
@@ -416,8 +416,8 @@ class ThyStringOrTemplateOutletDirective {
     constructor() {
         this.viewContainerRef = inject(ViewContainerRef);
         this.renderer = inject(Renderer2);
-        this.thyStringOrTemplateOutletContext = input();
-        this.thyStringOrTemplateOutlet = input();
+        this.thyStringOrTemplateOutletContext = input(...(ngDevMode ? [undefined, { debugName: "thyStringOrTemplateOutletContext" }] : []));
+        this.thyStringOrTemplateOutlet = input(...(ngDevMode ? [undefined, { debugName: "thyStringOrTemplateOutlet" }] : []));
         effect(() => {
             this.updateView();
         });
@@ -450,16 +450,16 @@ class ThyStringOrTemplateOutletDirective {
             this.renderer.removeChild(this.textNode.parentNode, this.textNode);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStringOrTemplateOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyStringOrTemplateOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThyStringOrTemplateOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyStringOrTemplateOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyStringOrTemplateOutlet]',
                     exportAs: 'thyStringOrTemplateOutlet'
                 }]
-        }], ctorParameters: () => [] });
+        }], 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) {
     return componentRef['_tNode'].inputs?.[inputKey];
@@ -476,17 +476,20 @@ class ThyViewOutletDirective {
         /**
          * 组件或者模板 TemplateRef
          */
-        this.thyViewOutlet = input(null);
+        this.thyViewOutlet = input(null, ...(ngDevMode ? [{ debugName: "thyViewOutlet" }] : []));
         /**
          * 组件和模板上下文传递数据
          */
-        this.thyViewOutletContext = input();
-        this.isViewOutletChanged = linkedSignal({
-            source: () => this.thyViewOutlet(),
-            computation: (source, previous) => {
-                return !!(source && previous?.source && source !== previous?.source);
-            }
-        });
+        this.thyViewOutletContext = input(...(ngDevMode ? [undefined, { debugName: "thyViewOutletContext" }] : []));
+        this.isViewOutletChanged = linkedSignal(...(ngDevMode ? [{ debugName: "isViewOutletChanged", source: () => this.thyViewOutlet(),
+                computation: (source, previous) => {
+                    return !!(source && previous?.source && source !== previous?.source);
+                } }] : [{
+                source: () => this.thyViewOutlet(),
+                computation: (source, previous) => {
+                    return !!(source && previous?.source && source !== previous?.source);
+                }
+            }]));
         effect(() => {
             const thyViewOutlet = this.thyViewOutlet();
             const { viewContainerRef: viewContainerRef } = this;
@@ -545,19 +548,19 @@ class ThyViewOutletDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyViewOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyViewOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThyViewOutletDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyViewOutletDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyViewOutlet]'
                 }]
-        }], ctorParameters: () => [] });
+        }], 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: "19.2.8", ngImport: i0, type: ThySharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: ThySharedModule, imports: [ThyViewOutletDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThySharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: ThySharedModule, imports: [ThyViewOutletDirective,
             ThyTranscludeDirective,
             ThyAutofocusDirective,
             ThyEnterDirective,
@@ -578,9 +581,9 @@ class ThySharedModule {
             ThyDragDropDirective,
             ThyStringOrTemplateOutletDirective,
             ThyViewOutletDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySharedModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThySharedModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThySharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -666,23 +669,23 @@ class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAccessorMixi
          * 是否同一行展示
          * @default false
          */
-        this.thyInline = input(false, { transform: coerceBooleanProperty });
+        this.thyInline = input(false, ...(ngDevMode ? [{ debugName: "thyInline", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * Label 展示文本
          */
-        this.thyLabelText = input();
+        this.thyLabelText = input(...(ngDevMode ? [undefined, { debugName: "thyLabelText" }] : []));
         /**
          * Label 文本多语言 key
          */
-        this.thyLabelTextTranslateKey = input();
+        this.thyLabelTextTranslateKey = input(...(ngDevMode ? [undefined, { debugName: "thyLabelTextTranslateKey" }] : []));
         this._labelText = computed(() => {
             const labelTextTranslateKey = this.thyLabelTextTranslateKey();
             const labelText = this.thyLabelText();
             return labelTextTranslateKey ? this.thyTranslate.instant(labelTextTranslateKey) : labelText || '';
-        });
+        }, ...(ngDevMode ? [{ debugName: "_labelText" }] : []));
         this._isNoText = computed(() => {
             return this.thyInline() && !this._labelText();
-        });
+        }, ...(ngDevMode ? [{ debugName: "_isNoText" }] : []));
         this.disabled = false;
     }
     change() {
@@ -693,10 +696,10 @@ class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAccessorMixi
             this.changeDetectorRef.markForCheck();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyFormCheckBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyFormCheckBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThyFormCheckBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyFormCheckBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -706,7 +709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         '[class.form-check-inline-no-label-text]': '_isNoText()'
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { thyDisabled: [{
+        }], ctorParameters: () => [], propDecorators: { thyInline: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyInline", required: false }] }], thyLabelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyLabelText", required: false }] }], thyLabelTextTranslateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyLabelTextTranslateKey", required: false }] }], thyDisabled: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
             }] } });
@@ -720,23 +723,24 @@ class ThySelectControl {
         this.cdr = inject(ChangeDetectorRef);
         this.ngZone = inject(NgZone);
         this.destroyRef = inject(DestroyRef);
-        this.inputValue = model('');
-        this.isComposing = signal(false);
+        this.inputValue = model('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
+        this.isComposing = signal(false, ...(ngDevMode ? [{ debugName: "isComposing" }] : []));
         this.isFirstPanelOpenedChange = true;
         this.hostRenderer = useHostRenderer();
-        this.thyPanelOpened = input(false, { transform: coerceBooleanProperty });
-        this.thyIsMultiple = input(false, { transform: coerceBooleanProperty });
-        this.thyShowSearch = input(false, { transform: coerceBooleanProperty });
-        this.thySelectedOptions = input();
-        this.previousSelectedOptions = linkedSignal({
-            source: () => this.thySelectedOptions(),
-            computation: (source, previous) => previous?.source
-        });
-        this.thyDisabled = input(false, { transform: coerceBooleanProperty });
-        this.customDisplayTemplate = input(undefined);
-        this.thyAllowClear = input(false, { transform: coerceBooleanProperty });
-        this.thyPlaceholder = input('');
-        this.thySize = input();
+        this.thyPanelOpened = input(false, ...(ngDevMode ? [{ debugName: "thyPanelOpened", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.thyIsMultiple = input(false, ...(ngDevMode ? [{ debugName: "thyIsMultiple", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.thyShowSearch = input(false, ...(ngDevMode ? [{ debugName: "thyShowSearch", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.thySelectedOptions = input(...(ngDevMode ? [undefined, { debugName: "thySelectedOptions" }] : []));
+        this.previousSelectedOptions = linkedSignal(...(ngDevMode ? [{ debugName: "previousSelectedOptions", source: () => this.thySelectedOptions(),
+                computation: (source, previous) => previous?.source }] : [{
+                source: () => this.thySelectedOptions(),
+                computation: (source, previous) => previous?.source
+            }]));
+        this.thyDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.customDisplayTemplate = input(undefined, ...(ngDevMode ? [{ 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" }] : []));
         this.tagSize = computed(() => {
             const value = this.thySize();
             if (value === 'xs' || value === 'sm') {
@@ -748,37 +752,41 @@ class ThySelectControl {
             else {
                 return 'md';
             }
-        });
-        this.thyMaxTagCount = input(0, {
-            transform: (value) => {
-                if (value === 'auto')
-                    return 'auto';
-                return numberAttribute(value, 0);
-            }
-        });
-        this.thyBorderless = input(false, { transform: coerceBooleanProperty });
-        this.thyPreset = input('');
+        }, ...(ngDevMode ? [{ debugName: "tagSize" }] : []));
+        this.thyMaxTagCount = input(0, ...(ngDevMode ? [{ debugName: "thyMaxTagCount", transform: (value) => {
+                    if (value === 'auto')
+                        return 'auto';
+                    return numberAttribute(value, 0);
+                } }] : [{
+                transform: (value) => {
+                    if (value === 'auto')
+                        return 'auto';
+                    return numberAttribute(value, 0);
+                }
+            }]));
+        this.thyBorderless = input(false, ...(ngDevMode ? [{ debugName: "thyBorderless", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.thyPreset = input('', ...(ngDevMode ? [{ debugName: "thyPreset" }] : []));
         this.thyOnSearch = output();
         this.thyOnRemove = output();
         this.thyOnClear = output();
         this.thyOnBlur = output();
-        this.inputElement = viewChild('inputElement');
+        this.inputElement = viewChild('inputElement', ...(ngDevMode ? [{ debugName: "inputElement" }] : []));
         this.locale = injectLocale('shared');
         this.isSelectedValue = computed(() => {
             return ((!this.thyIsMultiple() && !isUndefinedOrNull(this.thySelectedOptions())) ||
                 (this.thyIsMultiple() && this.thySelectedOptions().length > 0));
-        });
-        this.tagsContainer = viewChild('tagsContainer');
-        this.visibleTagCount = signal(0);
+        }, ...(ngDevMode ? [{ debugName: "isSelectedValue" }] : []));
+        this.tagsContainer = viewChild('tagsContainer', ...(ngDevMode ? [{ debugName: "tagsContainer" }] : []));
+        this.visibleTagCount = signal(0, ...(ngDevMode ? [{ debugName: "visibleTagCount" }] : []));
         this.showClearIcon = computed(() => {
             return this.thyAllowClear() && this.isSelectedValue();
-        });
+        }, ...(ngDevMode ? [{ debugName: "showClearIcon" }] : []));
         this.selectedTags = computed(() => {
             if (!this.thyIsMultiple() || !this.thySelectedOptions())
                 return [];
             const selectedOptions = coerceArray(this.thySelectedOptions());
             return selectedOptions;
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedTags" }] : []));
         this.collapsedSelectedTags = computed(() => {
             if (!this.thyIsMultiple() || !this.thySelectedOptions())
                 return [];
@@ -791,7 +799,7 @@ class ThySelectControl {
                 return selectedOptions;
             }
             return selectedOptions.slice(this.visibleTagCount());
-        });
+        }, ...(ngDevMode ? [{ debugName: "collapsedSelectedTags" }] : []));
         this.selectedValueStyle = computed(() => {
             let showSelectedValue = false;
             if (this.thyShowSearch()) {
@@ -806,7 +814,7 @@ class ThySelectControl {
                 showSelectedValue = true;
             }
             return { display: showSelectedValue ? 'flex' : 'none' };
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedValueStyle" }] : []));
         this.placeholderStyle = computed(() => {
             let placeholder = true;
             if (this.isSelectedValue()) {
@@ -819,7 +827,7 @@ class ThySelectControl {
                 placeholder = false;
             }
             return { display: placeholder ? 'block' : 'none' };
-        });
+        }, ...(ngDevMode ? [{ debugName: "placeholderStyle" }] : []));
         effect(() => {
             const panelOpened = this.thyPanelOpened();
             if (this.isFirstPanelOpenedChange) {
@@ -1020,15 +1028,15 @@ class ThySelectControl {
     onBlur(event) {
         this.thyOnBlur.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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.10", ngImport: i0, type: ThySelectControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThySelectControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", 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()'
                     }, 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" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { inputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValue", required: false }] }, { type: i0.Output, args: ["inputValueChange"] }], thyPanelOpened: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPanelOpened", required: false }] }], thyIsMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyIsMultiple", required: false }] }], thyShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyShowSearch", required: false }] }], thySelectedOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySelectedOptions", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], customDisplayTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customDisplayTemplate", required: false }] }], thyAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyAllowClear", required: false }] }], thyPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPlaceholder", required: false }] }], thySize: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySize", required: false }] }], thyMaxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyMaxTagCount", required: false }] }], thyBorderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyBorderless", required: false }] }], thyPreset: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPreset", required: false }] }], thyOnSearch: [{ type: i0.Output, args: ["thyOnSearch"] }], thyOnRemove: [{ type: i0.Output, args: ["thyOnRemove"] }], thyOnClear: [{ type: i0.Output, args: ["thyOnClear"] }], thyOnBlur: [{ type: i0.Output, args: ["thyOnBlur"] }], inputElement: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], tagsContainer: [{ type: i0.ViewChild, args: ['tagsContainer', { isSignal: true }] }] } });
 
 /**
  * @license
@@ -1038,11 +1046,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * found in the LICENSE file at https://angular.io/license
  */
 class ThySelectCommonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: ThySelectCommonModule, imports: [CommonModule, FormsModule, ThyIconModule, ThyTagModule, ThySelectControl], exports: [ThySelectControl] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectCommonModule, imports: [CommonModule, FormsModule, ThyIconModule, ThyTagModule, ThySelectControl] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThySelectCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: ThySelectCommonModule, imports: [CommonModule, FormsModule, ThyIconModule, ThyTagModule, ThySelectControl], exports: [ThySelectControl] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThySelectCommonModule, imports: [CommonModule, FormsModule, ThyIconModule, ThyTagModule, ThySelectControl] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThySelectCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, ThyIconModule, ThyTagModule, ThySelectControl],
@@ -1070,12 +1078,12 @@ class ThyListOption {
         this.parentSelectionList = inject(THY_LIST_OPTION_PARENT_COMPONENT, { optional: true });
         this.role = 'option';
         this.tabIndex = -1;
-        this.isMultiple = computed(() => this.parentSelectionList.multiple());
-        this.isListOption = computed(() => this.parentSelectionList.layout() === 'list');
-        this.isGridOption = computed(() => this.parentSelectionList.layout() === 'grid');
-        this.id = input(`thy-list-option-${_uniqueIdCounter++}`);
-        this.thyValue = input(undefined);
-        this.thyDisabled = input(false, { transform: coerceBooleanProperty });
+        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.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 }]));
     }
     /** Whether the option is selected. */
     get selected() {
@@ -1101,10 +1109,10 @@ class ThyListOption {
     getLabel() {
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyListOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyListOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThyListOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyListOption, decorators: [{
             type: Component,
             args: [{ selector: 'thy-list-option,[thy-list-option]', imports: [ThyIcon], host: {
                         '[class.disabled]': 'thyDisabled()',
@@ -1114,7 +1122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         '[attr.role]': 'role',
                         '[attr.tabindex]': 'tabIndex'
                     }, 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" }]
-        }], propDecorators: { onClick: [{
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], thyValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyValue", required: false }] }], thyDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyDisabled", required: false }] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -1127,10 +1135,10 @@ class ThyOptionGroup extends _MixinBase {
     set thyDisabled(value) {
         this.thyDisabled = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyOptionGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyOptionGroup, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThyOptionGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyOptionGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'thy-list-option-group,[thy-list-option-group]',
@@ -1168,12 +1176,12 @@ class ThyOption extends SelectOptionBase {
         this.element = inject(ElementRef);
         this.parent = inject(THY_OPTION_PARENT_COMPONENT, { optional: true });
         this.cdr = inject(ChangeDetectorRef);
-        this.thyShowOptionCustom = input();
-        this.thySearchKey = input();
-        this.template = viewChild(TemplateRef);
-        this.thyDisabled = input(false, { transform: coerceBooleanProperty });
-        this.hidden = signal(false);
-        this.selected = signal(false);
+        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.selected = signal(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
         this.selectionChange = output();
         this.visibleChange = output();
     }
@@ -1261,10 +1269,10 @@ class ThyOption extends SelectOptionBase {
         this.selectionChange.emit(new ThyOptionSelectionChangeEvent(this, isUserInput));
     }
     ngOnDestroy() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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.10", ngImport: i0, type: ThyOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyOption, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyOption, decorators: [{
             type: Component,
             args: [{ selector: 'thy-option', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ThyIcon], host: {
                         class: 'thy-option-item',
@@ -1279,7 +1287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 type: Input
             }], thyLabelText: [{
                 type: Input
-            }], onClick: [{
+            }], 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: [{
@@ -1294,9 +1302,9 @@ class ThySelectOptionGroup {
     constructor() {
         this._ngZone = inject(NgZone);
         this.cdr = inject(ChangeDetectorRef);
-        this.thyDisabled = input(false, { transform: coerceBooleanProperty });
-        this.hidden = signal(false);
-        this.thyGroupLabel = input(undefined);
+        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) {
@@ -1335,34 +1343,34 @@ class ThySelectOptionGroup {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", 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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThySelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", 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: "19.2.8", ngImport: i0, type: ThySelectOptionGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", 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: { options: [{
+        }], 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');
+        this.optionsTemplate = viewChild('options', ...(ngDevMode ? [{ debugName: "optionsTemplate" }] : []));
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyOptionsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", type: ThyOptionsContainer, isStandalone: true, selector: "thy-options-container", viewQueries: [{ propertyName: "optionsTemplate", first: true, predicate: ["options"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyOptionsContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyOptionsContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyOptionsContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'thy-options-container',
@@ -1373,7 +1381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { optionsTemplate: [{ type: i0.ViewChild, args: ['options', { isSignal: true }] }] } });
 
 /**
  * @license
@@ -1383,11 +1391,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * found in the LICENSE file at https://angular.io/license
  */
 class ThyOptionModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", 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: "19.2.8", ngImport: i0, type: ThyOptionModule, imports: [CommonModule, ThyIconModule, ThyListOption, ThyOption] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", 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.10", ngImport: i0, type: ThyOptionModule, imports: [CommonModule, ThyIconModule, ThyListOption, ThyOption] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyOptionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyOptionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ThyIconModule, ThyListOption, ThyOptionGroup, ThyOption, ThySelectOptionGroup, ThyOptionsContainer],