ngx-tethys 18.1.0-next.0 → 18.1.0

package/fesm2022/ngx-tethys-shared.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, EventEmitter, Output, ContentChildren, TemplateRef, ChangeDetectorRef, NgModule, HostBinding, numberAttribute, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, Optional, Inject, HostListener, ViewEncapsulation } from '@angular/core';
-import * as i1 from 'ngx-tethys/core';
-import { reqAnimFrame, TabIndexDisabledControlValueAccessorMixin, mixinDisabled, MixinBase } from 'ngx-tethys/core';
+import { inject, ViewContainerRef, Directive, Input, ElementRef, NgZone, Renderer2, EventEmitter, Output, ContentChildren, KeyValueDiffers, TemplateRef, ChangeDetectorRef, NgModule, HostBinding, numberAttribute, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, HostListener, ViewEncapsulation } from '@angular/core';
+import { reqAnimFrame, TabIndexDisabledControlValueAccessorMixin, ThyTranslate, mixinDisabled, MixinBase } from 'ngx-tethys/core';
 import { coerceBooleanProperty, keycodes, isTemplateRef, isUndefinedOrNull, ENTER, SPACE, hasModifierKey } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { Subject, Observable, fromEvent, merge, defer } from 'rxjs';
@@ -11,7 +10,7 @@ import { CdkDrag } from '@angular/cdk/drag-drop';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { ThyTag, ThyTagModule } from 'ngx-tethys/tag';
 import { NgClass, NgStyle, NgTemplateOutlet, CommonModule } from '@angular/common';
-import * as i1$1 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from 'ngx-tethys/grid';
 import { ThyGridModule } from 'ngx-tethys/grid';
@@ -29,10 +28,11 @@ class ThyTranscludeDirective {
     get thyTransclude() {
         return this._ngTransclude;
     }
-    constructor(viewRef) {
+    constructor() {
+        const viewRef = inject(ViewContainerRef);
         this.viewRef = viewRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTranscludeDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTranscludeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: ThyTranscludeDirective, isStandalone: true, selector: "[thyTransclude]", inputs: { thyTransclude: "thyTransclude" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyTranscludeDirective, decorators: [{
@@ -41,7 +41,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: '[thyTransclude]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { thyTransclude: [{
+        }], ctorParameters: () => [], propDecorators: { thyTransclude: [{
                 type: Input
             }] } });
 
@@ -50,6 +50,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @name input[thyAutofocus],textarea[thyAutofocus]
  */
 class ThyAutofocusDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ngZone = inject(NgZone);
+        // 自动选择，用于只读的 input 输入框，方便复制粘贴
+        this._autoSelect = false;
+    }
     /**
      * 是否自动聚焦
      * @default false
@@ -78,13 +84,7 @@ class ThyAutofocusDirective {
     set thyAutoSelect(value) {
         this._autoSelect = value;
     }
-    constructor(elementRef, ngZone) {
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        // 自动选择，用于只读的 input 输入框，方便复制粘贴
-        this._autoSelect = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyAutofocusDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyAutofocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.0", type: ThyAutofocusDirective, isStandalone: true, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: { thyAutofocus: ["thyAutofocus", "thyAutofocus", coerceBooleanProperty], thyAutoSelect: ["thyAutoSelect", "thyAutoSelect", coerceBooleanProperty] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyAutofocusDirective, decorators: [{
@@ -93,7 +93,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: 'input[thyAutofocus],textarea[thyAutofocus]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { thyAutofocus: [{
+        }], propDecorators: { thyAutofocus: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
             }], thyAutoSelect: [{
@@ -106,10 +106,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @name thyEnter
  */
 class ThyEnterDirective {
-    constructor(ngZone, elementRef, renderer) {
-        this.ngZone = ngZone;
-        this.elementRef = elementRef;
-        this.renderer = renderer;
+    constructor() {
+        this.ngZone = inject(NgZone);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
         this.thyEnter = new EventEmitter();
         this.onKeydown = (event) => {
             const keyCode = event.which || event.keyCode;
@@ -128,7 +128,7 @@ class ThyEnterDirective {
     ngOnDestroy() {
         this.removeKeydownListenerFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyEnterDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: ThyEnterDirective, isStandalone: true, selector: "[thyEnter]", outputs: { thyEnter: "thyEnter" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyEnterDirective, decorators: [{
@@ -137,7 +137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: '[thyEnter]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { thyEnter: [{
+        }], propDecorators: { thyEnter: [{
                 type: Output
             }] } });
 
@@ -145,10 +145,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @name thyCtrlEnter
  */
 class ThyCtrlEnterDirective {
-    constructor(ngZone, elementRef, renderer) {
-        this.ngZone = ngZone;
-        this.elementRef = elementRef;
-        this.renderer = renderer;
+    constructor() {
+        this.ngZone = inject(NgZone);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
         this.thyCtrlEnter = new EventEmitter();
         this.onKeydown = (event) => {
             const keyCode = event.which || event.keyCode;
@@ -168,7 +168,7 @@ class ThyCtrlEnterDirective {
     ngOnDestroy() {
         this.removeKeydownListenerFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyCtrlEnterDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyCtrlEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: ThyCtrlEnterDirective, isStandalone: true, selector: "[thyCtrlEnter]", outputs: { thyCtrlEnter: "thyCtrlEnter" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyCtrlEnterDirective, decorators: [{
@@ -177,7 +177,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: '[thyCtrlEnter]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { thyCtrlEnter: [{
+        }], propDecorators: { thyCtrlEnter: [{
                 type: Output
             }] } });
 
@@ -185,6 +185,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @name thyShow
  */
 class ThyShowDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.ngZone = inject(NgZone);
+        this.thyShowChange = new EventEmitter();
+        this.hostRenderer = useHostRenderer();
+    }
     unListenDocument() {
         if (this.unListenEvent) {
             this.unListenEvent();
@@ -210,17 +217,10 @@ class ThyShowDirective {
             this.unListenDocument();
         }
     }
-    constructor(elementRef, renderer, ngZone) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.ngZone = ngZone;
-        this.thyShowChange = new EventEmitter();
-        this.hostRenderer = useHostRenderer();
-    }
     ngOnDestroy() {
         this.unListenDocument();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyShowDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyShowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.0", type: ThyShowDirective, isStandalone: true, selector: "[thyShow]", inputs: { thyShow: ["thyShow", "thyShow", coerceBooleanProperty] }, outputs: { thyShowChange: "thyShowChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyShowDirective, decorators: [{
@@ -229,7 +229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: '[thyShow]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }], propDecorators: { thyShowChange: [{
+        }], propDecorators: { thyShowChange: [{
                 type: Output
             }], thyShow: [{
                 type: Input,
@@ -256,11 +256,13 @@ class ThyStopPropagationDirective {
         }
         this._changes$.next();
     }
-    constructor(_host, _ngZone) {
+    constructor() {
         this._eventName = 'click';
         this._shouldStopPropagation = true;
         this._changes$ = new Subject();
         this._destroy$ = new Subject();
+        const _host = inject(ElementRef);
+        const _ngZone = inject(NgZone);
         this._changes$
             .pipe(
         // Note: we start the stream immediately since the `thyStopPropagation` setter may never be reached.
@@ -274,7 +276,7 @@ class ThyStopPropagationDirective {
     ngOnDestroy() {
         this._destroy$.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyStopPropagationDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyStopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: ThyStopPropagationDirective, isStandalone: true, selector: "[thyStopPropagation]", inputs: { thyStopPropagation: "thyStopPropagation" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyStopPropagationDirective, decorators: [{
@@ -283,7 +285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: '[thyStopPropagation]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { thyStopPropagation: [{
+        }], ctorParameters: () => [], propDecorators: { thyStopPropagation: [{
                 type: Input
             }] } });
 
@@ -291,10 +293,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @name thyContextMenu
  */
 class ThyContextMenuDirective {
-    constructor(ngZone, elementRef, renderer) {
-        this.ngZone = ngZone;
-        this.elementRef = elementRef;
-        this.renderer = renderer;
+    constructor() {
+        this.ngZone = inject(NgZone);
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
         this.thyContextMenu = new EventEmitter();
         this.rightClick = (event) => {
             event.preventDefault();
@@ -311,7 +313,7 @@ class ThyContextMenuDirective {
     ngOnDestroy() {
         this.removeContextListenerFn();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyContextMenuDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyContextMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: ThyContextMenuDirective, isStandalone: true, selector: "[thyContextMenu]", outputs: { thyContextMenu: "thyContextMenu" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyContextMenuDirective, decorators: [{
@@ -320,7 +322,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: '[thyContextMenu]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { thyContextMenu: [{
+        }], propDecorators: { thyContextMenu: [{
                 type: Output
             }] } });
 
@@ -329,23 +331,9 @@ const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: t
  * @name thyScroll
  */
 class ThyScrollDirective {
-    set thyEnable(value) {
-        this._enable = value;
-        if (this._initialled) {
-            if (this._enable && this._subscription === null) {
-                this._subscription = this._elementScrolled.subscribe(() => this.thyOnScrolled.emit(this.elementRef));
-            }
-            else {
-                if (this._subscription) {
-                    this._subscription.unsubscribe();
-                    this._subscription = null;
-                }
-            }
-        }
-    }
-    constructor(elementRef, ngZone) {
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ngZone = inject(NgZone);
         this._destroyed = new Subject();
         this._enable = true;
         this._initialled = false;
@@ -373,6 +361,20 @@ class ThyScrollDirective {
          */
         this.thyOnScrolled = new EventEmitter();
     }
+    set thyEnable(value) {
+        this._enable = value;
+        if (this._initialled) {
+            if (this._enable && this._subscription === null) {
+                this._subscription = this._elementScrolled.subscribe(() => this.thyOnScrolled.emit(this.elementRef));
+            }
+            else {
+                if (this._subscription) {
+                    this._subscription.unsubscribe();
+                    this._subscription = null;
+                }
+            }
+        }
+    }
     ngOnInit() {
         if (this._enable) {
             this._subscription = this._elementScrolled.subscribe(() => this.thyOnScrolled.emit(this.elementRef));
@@ -386,7 +388,7 @@ class ThyScrollDirective {
     getElementRef() {
         return this.elementRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyScrollDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.0", type: ThyScrollDirective, isStandalone: true, selector: "[thyScroll]", inputs: { thyEnable: ["thyEnable", "thyEnable", coerceBooleanProperty] }, outputs: { thyOnScrolled: "thyOnScrolled" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyScrollDirective, decorators: [{
@@ -395,7 +397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: '[thyScroll]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { thyEnable: [{
+        }], propDecorators: { thyEnable: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
             }], thyOnScrolled: [{
@@ -452,9 +454,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @name thyStringOrTemplateOutlet
  */
 class ThyStringOrTemplateOutletDirective {
-    constructor(viewContainerRef, renderer) {
-        this.viewContainerRef = viewContainerRef;
-        this.renderer = renderer;
+    constructor() {
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
     }
     ngOnChanges(changes) {
         if (changes['thyStringOrTemplateOutlet']) {
@@ -486,7 +488,7 @@ class ThyStringOrTemplateOutletDirective {
             this.renderer.removeChild(this.textNode.parentNode, this.textNode);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyStringOrTemplateOutletDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyStringOrTemplateOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: ThyStringOrTemplateOutletDirective, isStandalone: true, selector: "[thyStringOrTemplateOutlet]", inputs: { thyStringOrTemplateOutletContext: "thyStringOrTemplateOutletContext", thyStringOrTemplateOutlet: "thyStringOrTemplateOutlet" }, exportAs: ["thyStringOrTemplateOutlet"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyStringOrTemplateOutletDirective, decorators: [{
@@ -496,7 +498,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     exportAs: 'thyStringOrTemplateOutlet',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }], propDecorators: { thyStringOrTemplateOutletContext: [{
+        }], propDecorators: { thyStringOrTemplateOutletContext: [{
                 type: Input
             }], thyStringOrTemplateOutlet: [{
                 type: Input
@@ -511,9 +513,9 @@ function hasInput(componentRef, inputKey) {
  * @order 10
  */
 class ThyViewOutletDirective {
-    constructor(viewContainerRef, keyValueDiffers) {
-        this.viewContainerRef = viewContainerRef;
-        this.keyValueDiffers = keyValueDiffers;
+    constructor() {
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.keyValueDiffers = inject(KeyValueDiffers);
         /**
          * 组件或者模板 TemplateRef
          */
@@ -570,7 +572,7 @@ class ThyViewOutletDirective {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyViewOutletDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyViewOutletDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: ThyViewOutletDirective, isStandalone: true, selector: "[thyViewOutlet]", inputs: { thyViewOutlet: "thyViewOutlet", thyViewOutletContext: "thyViewOutletContext" }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyViewOutletDirective, decorators: [{
@@ -579,7 +581,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: '[thyViewOutlet]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.KeyValueDiffers }], propDecorators: { thyViewOutlet: [{
+        }], propDecorators: { thyViewOutlet: [{
                 type: Input
             }], thyViewOutletContext: [{
                 type: Input
@@ -708,10 +710,10 @@ class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAccessorMixi
         this.onChangeCallback(value);
         this.markForCheck();
     }
-    constructor(thyTranslate, changeDetectorRef) {
+    constructor() {
         super();
-        this.thyTranslate = thyTranslate;
-        this.changeDetectorRef = changeDetectorRef;
+        this.thyTranslate = inject(ThyTranslate);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
         // The internal data model
         this._innerValue = null;
         this._disabled = false;
@@ -730,12 +732,12 @@ class ThyFormCheckBaseComponent extends TabIndexDisabledControlValueAccessorMixi
             this.changeDetectorRef.markForCheck();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyFormCheckBaseComponent, deps: [{ token: i1.ThyTranslate }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyFormCheckBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.0", type: ThyFormCheckBaseComponent, inputs: { thyInline: ["thyInline", "thyInline", coerceBooleanProperty], thyLabelText: "thyLabelText", thyLabelTextTranslateKey: "thyLabelTextTranslateKey", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, host: { properties: { "class.form-check": "this._isFormCheck", "class.form-check-inline": "this._isFormCheckInline", "class.form-check-checked": "this._isChecked", "class.form-check-inline-no-label-text": "this._isNoText" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyFormCheckBaseComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i1.ThyTranslate }, { type: i0.ChangeDetectorRef }], propDecorators: { _isFormCheck: [{
+        }], ctorParameters: () => [], propDecorators: { _isFormCheck: [{
                 type: HostBinding,
                 args: ['class.form-check']
             }], _isFormCheckInline: [{
@@ -763,6 +765,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @private
  */
 class ThySelectControl {
+    constructor() {
+        this.renderer = inject(Renderer2);
+        this.inputValue = '';
+        this.isComposing = false;
+        this.panelOpened = false;
+        this.isMultiple = false;
+        this.showSearch = false;
+        this.disabled = false;
+        this.hostRenderer = useHostRenderer();
+        this.thyAllowClear = false;
+        this.thyPlaceholder = '';
+        this.thyMaxTagCount = 0;
+        this.thyBorderless = false;
+        this.thyPreset = '';
+        this.thyOnSearch = new EventEmitter();
+        this.thyOnRemove = new EventEmitter();
+        this.thyOnClear = new EventEmitter();
+        this.thyOnBlur = new EventEmitter();
+    }
     get thyPanelOpened() {
         return this.panelOpened;
     }
@@ -895,25 +916,6 @@ class ThySelectControl {
         return ((!this.isMultiple && !isUndefinedOrNull(this.thySelectedOptions)) ||
             (this.isMultiple && this.thySelectedOptions.length > 0));
     }
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.inputValue = '';
-        this.isComposing = false;
-        this.panelOpened = false;
-        this.isMultiple = false;
-        this.showSearch = false;
-        this.disabled = false;
-        this.hostRenderer = useHostRenderer();
-        this.thyAllowClear = false;
-        this.thyPlaceholder = '';
-        this.thyMaxTagCount = 0;
-        this.thyBorderless = false;
-        this.thyPreset = '';
-        this.thyOnSearch = new EventEmitter();
-        this.thyOnRemove = new EventEmitter();
-        this.thyOnClear = new EventEmitter();
-        this.thyOnBlur = new EventEmitter();
-    }
     ngOnInit() {
         this.setSelectControlClass();
     }
@@ -976,15 +978,15 @@ class ThySelectControl {
     onBlur(event) {
         this.thyOnBlur.emit(event);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySelectControl, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { thyPanelOpened: ["thyPanelOpened", "thyPanelOpened", coerceBooleanProperty], thyIsMultiple: ["thyIsMultiple", "thyIsMultiple", coerceBooleanProperty], thyShowSearch: ["thyShowSearch", "thyShowSearch", coerceBooleanProperty], thySelectedOptions: "thySelectedOptions", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], customDisplayTemplate: "customDisplayTemplate", thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty], thyPlaceholder: "thyPlaceholder", thySize: "thySize", thyMaxTagCount: ["thyMaxTagCount", "thyMaxTagCount", numberAttribute], thyBorderless: ["thyBorderless", "thyBorderless", coerceBooleanProperty], thyPreset: "thyPreset" }, outputs: { thyOnSearch: "thyOnSearch", thyOnRemove: "thyOnRemove", thyOnClear: "thyOnClear", thyOnBlur: "thyOnBlur" }, host: { properties: { "class.select-control-borderless": "thyBorderless" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"isComposing = true\"\n    (compositionend)=\"isComposing = 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 (isMultiple) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      @if (thyPreset === 'tag') {\n        @for (item of maxSelectedTags; track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!disabled) {\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 maxSelectedTags; track trackValue($index, item)) {\n          <div\n            thyFlexItem\n            thyTag\n            class=\"choice-item\"\n            [ngClass]=\"{ disabled: disabled === true }\"\n            [thySize]=\"tagSize\"\n            >\n            <div class=\"text-truncate h-100\">\n              @if (!customDisplayTemplate) {\n                {{ item.thyLabelText }}\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!disabled) {\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 (thyMaxTagCount && multipleSelectedValue.length > thyMaxTagCount) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize\"\n          [ngClass]=\"{ disabled: disabled === true }\">\n          <div class=\"text-truncate\">+{{ multipleSelectedValue.length - thyMaxTagCount + 1 }}...</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\">{{ selectedValue?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: selectedValue.thyRawValue || selectedValue.thyValue || selectedValue\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", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySelectControl, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThySelectControl, isStandalone: true, selector: "thy-select-control,[thySelectControl]", inputs: { thyPanelOpened: ["thyPanelOpened", "thyPanelOpened", coerceBooleanProperty], thyIsMultiple: ["thyIsMultiple", "thyIsMultiple", coerceBooleanProperty], thyShowSearch: ["thyShowSearch", "thyShowSearch", coerceBooleanProperty], thySelectedOptions: "thySelectedOptions", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], customDisplayTemplate: "customDisplayTemplate", thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty], thyPlaceholder: "thyPlaceholder", thySize: "thySize", thyMaxTagCount: ["thyMaxTagCount", "thyMaxTagCount", numberAttribute], thyBorderless: ["thyBorderless", "thyBorderless", coerceBooleanProperty], thyPreset: "thyPreset" }, outputs: { thyOnSearch: "thyOnSearch", thyOnRemove: "thyOnRemove", thyOnClear: "thyOnClear", thyOnBlur: "thyOnBlur" }, host: { properties: { "class.select-control-borderless": "thyBorderless" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"isComposing = true\"\n    (compositionend)=\"isComposing = 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 (isMultiple) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      @if (thyPreset === 'tag') {\n        @for (item of maxSelectedTags; track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!disabled) {\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 maxSelectedTags; track trackValue($index, item)) {\n          <div\n            thyFlexItem\n            thyTag\n            class=\"choice-item\"\n            [ngClass]=\"{ disabled: disabled === true }\"\n            [thySize]=\"tagSize\"\n            >\n            <div class=\"text-truncate h-100\">\n              @if (!customDisplayTemplate) {\n                {{ item.thyLabelText }}\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!disabled) {\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 (thyMaxTagCount && multipleSelectedValue.length > thyMaxTagCount) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize\"\n          [ngClass]=\"{ disabled: disabled === true }\">\n          <div class=\"text-truncate\">+{{ multipleSelectedValue.length - thyMaxTagCount + 1 }}...</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\">{{ selectedValue?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: selectedValue.thyRawValue || selectedValue.thyValue || selectedValue\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", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySelectControl, decorators: [{
             type: Component,
             args: [{ selector: 'thy-select-control,[thySelectControl]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [FormsModule, NgClass, NgStyle, ThyTag, NgTemplateOutlet, ThyIcon, ThyGridModule], host: {
                         '[class.select-control-borderless]': 'thyBorderless'
                     }, template: "<ng-template #inputTemplate>\n  <input\n    #inputElement\n    [tabindex]=\"-1\"\n    (compositionstart)=\"isComposing = true\"\n    (compositionend)=\"isComposing = 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 (isMultiple) {\n    <div thyFlex thyWrap=\"wrap\" thyGap=\"4\" thyAlignItems=\"center\" class=\"w-100\">\n      @if (thyPreset === 'tag') {\n        @for (item of maxSelectedTags; track trackValue($index, item)) {\n          <div thyFlexItem class=\"custom-choice-item text-truncate\">\n            <ng-template\n              [ngTemplateOutlet]=\"customDisplayTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\">\n            </ng-template>\n            @if (!disabled) {\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 maxSelectedTags; track trackValue($index, item)) {\n          <div\n            thyFlexItem\n            thyTag\n            class=\"choice-item\"\n            [ngClass]=\"{ disabled: disabled === true }\"\n            [thySize]=\"tagSize\"\n            >\n            <div class=\"text-truncate h-100\">\n              @if (!customDisplayTemplate) {\n                {{ item.thyLabelText }}\n              } @else {\n                <ng-template\n                  [ngTemplateOutlet]=\"customDisplayTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: item.thyRawValue || item.thyValue || item }\"></ng-template>\n              }\n            </div>\n            @if (!disabled) {\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 (thyMaxTagCount && multipleSelectedValue.length > thyMaxTagCount) {\n        <div\n          thyFlexItem\n          class=\"choice-item max-tag-count-choice\"\n          thyTag\n          [thySize]=\"tagSize\"\n          [ngClass]=\"{ disabled: disabled === true }\">\n          <div class=\"text-truncate\">+{{ multipleSelectedValue.length - thyMaxTagCount + 1 }}...</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\">{{ selectedValue?.thyLabelText }}</span>\n        } @else {\n          <ng-template\n            [ngTemplateOutlet]=\"customDisplayTemplate\"\n            [ngTemplateOutletContext]=\"{\n              $implicit: selectedValue.thyRawValue || selectedValue.thyValue || selectedValue\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" }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { thyPanelOpened: [{
+        }], propDecorators: { thyPanelOpened: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
             }], thyIsMultiple: [{
@@ -1067,6 +1069,14 @@ let _uniqueIdCounter = 0;
  * @order 30
  */
 class ThyListOption {
+    constructor() {
+        this.element = inject(ElementRef);
+        this.changeDetector = inject(ChangeDetectorRef);
+        this.parentSelectionList = inject(THY_LIST_OPTION_PARENT_COMPONENT, { optional: true });
+        this._role = 'option';
+        this._tabIndex = -1;
+        this.id = `thy-list-option-${_uniqueIdCounter++}`;
+    }
     get _isListOption() {
         return this.parentSelectionList.layout === 'list';
     }
@@ -1080,16 +1090,6 @@ class ThyListOption {
     get selected() {
         return this.parentSelectionList.isSelected(this);
     }
-    constructor(element, changeDetector, 
-    /** @docs-private */
-    parentSelectionList) {
-        this.element = element;
-        this.changeDetector = changeDetector;
-        this.parentSelectionList = parentSelectionList;
-        this._role = 'option';
-        this._tabIndex = -1;
-        this.id = `thy-list-option-${_uniqueIdCounter++}`;
-    }
     onClick(event) {
         if (this.parentSelectionList.multiple || !this.parentSelectionList.isSelected(this)) {
             this.parentSelectionList.toggleOption(this, event);
@@ -1118,18 +1118,13 @@ class ThyListOption {
     getLabel() {
         return '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyListOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: THY_LIST_OPTION_PARENT_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyListOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyListOption, isStandalone: true, selector: "thy-list-option,[thy-list-option]", inputs: { id: "id", thyValue: "thyValue", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.thy-list-option": "this._isListOption", "class.thy-grid-option": "this._parentLayout", "attr.role": "this._role", "attr.tabindex": "this._tabIndex", "class.disabled": "this.disabled", "class.active": "this.selected" } }, ngImport: i0, template: "<ng-content></ng-content>\n@if (parentSelectionList.multiple && parentSelectionList.layout === 'list') {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (parentSelectionList.layout === 'grid') {\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: "18.2.0", ngImport: i0, type: ThyListOption, decorators: [{
             type: Component,
             args: [{ selector: 'thy-list-option,[thy-list-option]', standalone: true, imports: [ThyIcon], template: "<ng-content></ng-content>\n@if (parentSelectionList.multiple && parentSelectionList.layout === 'list') {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check\"></thy-icon>\n  </span>\n}\n@if (parentSelectionList.layout === 'grid') {\n  <span class=\"checked-icon\">\n    <thy-icon thyIconName=\"check-circle-fill\"></thy-icon>\n  </span>\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [THY_LIST_OPTION_PARENT_COMPONENT]
-                }] }], propDecorators: { _isListOption: [{
+        }], propDecorators: { _isListOption: [{
                 type: HostBinding,
                 args: [`class.thy-list-option`]
             }], _parentLayout: [{
@@ -1215,12 +1210,12 @@ class ThyOption extends SelectOptionBase {
     get selected() {
         return this._selected;
     }
-    constructor(element, parent, group, cdr) {
+    constructor() {
         super();
-        this.element = element;
-        this.parent = parent;
-        this.group = group;
-        this.cdr = cdr;
+        this.element = inject(ElementRef);
+        this.parent = inject(THY_OPTION_PARENT_COMPONENT, { optional: true });
+        this.group = inject(THY_OPTION_GROUP_COMPONENT, { optional: true });
+        this.cdr = inject(ChangeDetectorRef);
         this._selected = false;
         this._hidden = false;
         this._disabled = false;
@@ -1310,23 +1305,13 @@ class ThyOption extends SelectOptionBase {
         this.selectionChange.emit(new ThyOptionSelectionChangeEvent(this, isUserInput));
     }
     ngOnDestroy() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyOption, deps: [{ token: i0.ElementRef }, { token: THY_OPTION_PARENT_COMPONENT, optional: true }, { token: THY_OPTION_GROUP_COMPONENT, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyOption, isStandalone: true, selector: "thy-option", inputs: { thyValue: "thyValue", thyRawValue: "thyRawValue", thyLabelText: "thyLabelText", thyShowOptionCustom: "thyShowOptionCustom", thySearchKey: "thySearchKey", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, outputs: { selectionChange: "selectionChange", visibleChange: "visibleChange" }, host: { listeners: { "click": "onClick($event)", "keydown": "handleKeydown($event)" }, properties: { "class.thy-option-item": "this._isOptionItem", "class.disabled": "this.thyDisabled", "class.hidden": "this.hidden", "attr.tabindex": "this.tabIndex", "class.active": "this.selected" } }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: 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: "18.2.0", ngImport: i0, type: ThyOption, decorators: [{
             type: Component,
             args: [{ selector: 'thy-option', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [ThyIcon], template: "@if (thyShowOptionCustom) {\n  <ng-content></ng-content>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n} @else {\n  <span class=\"text-truncate\">{{ thyLabelText }}</span>\n  <thy-icon class=\"checked-icon\" thyIconName=\"check\"></thy-icon>\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [THY_OPTION_PARENT_COMPONENT]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [THY_OPTION_GROUP_COMPONENT]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { thyValue: [{
+        }], ctorParameters: () => [], propDecorators: { thyValue: [{
                 type: Input
             }], thyRawValue: [{
                 type: Input
@@ -1373,12 +1358,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @private
  */
 class ThySelectOptionGroup {
-    get hidden() {
-        return this._hidden;
-    }
-    constructor(_ngZone, cdr) {
-        this._ngZone = _ngZone;
-        this.cdr = cdr;
+    constructor() {
+        this._ngZone = inject(NgZone);
+        this.cdr = inject(ChangeDetectorRef);
         this._hidden = false;
         this._isOptionGroup = true;
         this._destroy$ = new Subject();
@@ -1389,6 +1371,9 @@ class ThySelectOptionGroup {
             return this._ngZone.onStable.asObservable().pipe(take(1), switchMap(() => this.optionVisibleChanges));
         });
     }
+    get hidden() {
+        return this._hidden;
+    }
     ngAfterContentInit() {
         this.options.changes.pipe(startWith(null), takeUntil(this._destroy$)).subscribe(() => {
             this._resetOptions();
@@ -1419,7 +1404,7 @@ class ThySelectOptionGroup {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySelectOptionGroup, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySelectOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: ThySelectOptionGroup, isStandalone: true, selector: "thy-option-group", inputs: { thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thyGroupLabel: "thyGroupLabel" }, host: { properties: { "class.disabled": "this.thyDisabled", "class.thy-option-item-group": "this._isOptionGroup", "class.thy-select-option-group-hidden": "this.hidden" } }, providers: [
             {
                 provide: THY_OPTION_GROUP_COMPONENT,
@@ -1435,7 +1420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: ThySelectOptionGroup
                         }
                     ], standalone: true, template: "<span class=\"group-name text-truncate\">{{ thyGroupLabel }}</span>\n<ng-content></ng-content>\n" }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { thyDisabled: [{
+        }], propDecorators: { thyDisabled: [{
                 type: Input,
                 args: [{ transform: coerceBooleanProperty }]
             }, {