ngx-tethys 18.0.8 → 18.1.0-next.1

package/fesm2022/ngx-tethys-segment.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Optional, Inject, Input, HostBinding, EventEmitter, numberAttribute, ViewEncapsulation, ContentChildren, Output, NgModule } from '@angular/core';
-import { NgClass, NgIf, CommonModule } from '@angular/common';
+import { InjectionToken, inject, ElementRef, NgZone, ChangeDetectorRef, Renderer2, Component, ChangeDetectionStrategy, Input, HostBinding, DestroyRef, EventEmitter, numberAttribute, ViewEncapsulation, ContentChildren, Output, NgModule } from '@angular/core';
+import { NgClass, CommonModule } from '@angular/common';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { ThyTooltipModule } from 'ngx-tethys/tooltip';
 import { thumbMotion } from 'ngx-tethys/core';
@@ -16,17 +16,19 @@ const THY_SEGMENTED_COMPONENT = new InjectionToken('THY_SEGMENTED_COMPONENT');
  * @name thy-segment-item,[thy-segment-item]
  */
 class ThySegmentItem {
-    constructor(elementRef, ngZone, cdr, renderer, parent) {
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this.cdr = cdr;
-        this.renderer = renderer;
-        this.parent = parent;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ngZone = inject(NgZone);
+        this.cdr = inject(ChangeDetectorRef);
+        this.renderer = inject(Renderer2);
+        this.parent = inject(THY_SEGMENTED_COMPONENT, { optional: true });
         /**
          * 是否禁用该选项
          */
         this.thyDisabled = false;
         this.destroy$ = new Subject();
+        const elementRef = this.elementRef;
+        const ngZone = this.ngZone;
         ngZone.runOutsideAngular(() => fromEvent(elementRef.nativeElement, 'click')
             .pipe(takeUntil(this.destroy$))
             .subscribe((event) => {
@@ -68,20 +70,15 @@ class ThySegmentItem {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySegmentItem, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: THY_SEGMENTED_COMPONENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: ThySegmentItem, isStandalone: true, selector: "thy-segment-item,[thy-segment-item]", inputs: { thyValue: "thyValue", thyIcon: "thyIcon", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, host: { properties: { "class.disabled": "this.thyDisabled" }, classAttribute: "thy-segment-item" }, ngImport: i0, template: "<div\n  class=\"thy-segment-item-label\"\n  [ngClass]=\"{\n    'thy-segment-item-label-only-icon': isOnlyIcon\n  }\"\n>\n  <thy-icon *ngIf=\"thyIcon\" class=\"thy-segment-item-icon\" [ngClass]=\"{ 'icon-with-text': isWithText }\" [thyIconName]=\"thyIcon\"></thy-icon>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "18.2.0", ngImport: i0, type: ThySegmentItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThySegmentItem, isStandalone: true, selector: "thy-segment-item,[thy-segment-item]", inputs: { thyValue: "thyValue", thyIcon: "thyIcon", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty] }, host: { properties: { "class.disabled": "this.thyDisabled" }, classAttribute: "thy-segment-item" }, ngImport: i0, template: "<div\n  class=\"thy-segment-item-label\"\n  [ngClass]=\"{\n    'thy-segment-item-label-only-icon': isOnlyIcon\n  }\"\n  >\n  @if (thyIcon) {\n    <thy-icon class=\"thy-segment-item-icon\" [ngClass]=\"{ 'icon-with-text': isWithText }\" [thyIconName]=\"thyIcon\"></thy-icon>\n  }\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ThySegmentItem, decorators: [{
             type: Component,
             args: [{ selector: 'thy-segment-item,[thy-segment-item]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'thy-segment-item'
-                    }, standalone: true, imports: [NgClass, NgIf, ThyIcon], template: "<div\n  class=\"thy-segment-item-label\"\n  [ngClass]=\"{\n    'thy-segment-item-label-only-icon': isOnlyIcon\n  }\"\n>\n  <thy-icon *ngIf=\"thyIcon\" class=\"thy-segment-item-icon\" [ngClass]=\"{ 'icon-with-text': isWithText }\" [thyIconName]=\"thyIcon\"></thy-icon>\n  <ng-content></ng-content>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [THY_SEGMENTED_COMPONENT]
-                }] }], propDecorators: { thyValue: [{
+                    }, standalone: true, imports: [NgClass, ThyIcon], template: "<div\n  class=\"thy-segment-item-label\"\n  [ngClass]=\"{\n    'thy-segment-item-label-only-icon': isOnlyIcon\n  }\"\n  >\n  @if (thyIcon) {\n    <thy-icon class=\"thy-segment-item-icon\" [ngClass]=\"{ 'icon-with-text': isWithText }\" [thyIconName]=\"thyIcon\"></thy-icon>\n  }\n  <ng-content></ng-content>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { thyValue: [{
                 type: Input
             }], thyIcon: [{
                 type: Input
@@ -98,28 +95,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * @name thy-segment
  */
 class ThySegment {
-    /**
-     * 选中选项的索引
-     */
-    set thyActiveIndex(value) {
-        this.newActiveIndex = value;
-        if (value < 0 || value === this.activeIndex) {
-            return;
-        }
-        setTimeout(() => {
-            const selectedItem = this.options?.get(this.activeIndex);
-            if (selectedItem) {
-                selectedItem.unselect();
-                this.changeSelectedItem(this.options.get(value));
-            }
-            else {
-                this.activeIndex = value;
-            }
-        });
-    }
-    constructor(cdr, destroyRef) {
-        this.cdr = cdr;
-        this.destroyRef = destroyRef;
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
         /**
          * 大小
          * @type xs | sm | md | default
@@ -141,6 +119,25 @@ class ThySegment {
         this.animationState = null;
         this.transitionedTo = null;
     }
+    /**
+     * 选中选项的索引
+     */
+    set thyActiveIndex(value) {
+        this.newActiveIndex = value;
+        if (value < 0 || value === this.activeIndex) {
+            return;
+        }
+        setTimeout(() => {
+            const selectedItem = this.options?.get(this.activeIndex);
+            if (selectedItem) {
+                selectedItem.unselect();
+                this.changeSelectedItem(this.options.get(value));
+            }
+            else {
+                this.activeIndex = value;
+            }
+        });
+    }
     ngAfterContentInit() {
         this.selectedItem = this.options.get(this.newActiveIndex) || this.options.get(0);
         this.selectedItem?.select();
@@ -180,13 +177,13 @@ class ThySegment {
             this.cdr.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySegment, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: ThySegment, isStandalone: true, selector: "thy-segment", inputs: { thySize: "thySize", thyMode: "thyMode", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thyActiveIndex: ["thyActiveIndex", "thyActiveIndex", numberAttribute] }, outputs: { thySelectChange: "thySelectChange" }, host: { properties: { "class.thy-segment-xs": "thySize === 'xs'", "class.thy-segment-sm": "thySize === 'sm'", "class.thy-segment-md": "thySize === 'md'", "class.thy-segment-default": "!thySize || thySize === 'default'", "class.thy-segment-block": "thyMode === 'block'", "class.disabled": "this.thyDisabled" }, classAttribute: "thy-segment" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySegment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThySegment, isStandalone: true, selector: "thy-segment", inputs: { thySize: "thySize", thyMode: "thyMode", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thyActiveIndex: ["thyActiveIndex", "thyActiveIndex", numberAttribute] }, outputs: { thySelectChange: "thySelectChange" }, host: { properties: { "class.thy-segment-xs": "thySize === 'xs'", "class.thy-segment-sm": "thySize === 'sm'", "class.thy-segment-md": "thySize === 'md'", "class.thy-segment-default": "!thySize || thySize === 'default'", "class.thy-segment-block": "thyMode === 'block'", "class.disabled": "this.thyDisabled" }, classAttribute: "thy-segment" }, providers: [
             {
                 provide: THY_SEGMENTED_COMPONENT,
                 useExisting: ThySegment
             }
-        ], queries: [{ propertyName: "options", predicate: ThySegmentItem }], exportAs: ["thySegment"], ngImport: i0, template: "<div class=\"thy-segment-group\">\n  <div\n    *ngIf=\"animationState\"\n    class=\"thy-segment-thumb thy-segment-thumb-motion\"\n    [@thumbMotion]=\"animationState\"\n    (@thumbMotion.done)=\"handleThumbAnimationDone($event)\"\n  ></div>\n\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [thumbMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "options", predicate: ThySegmentItem }], exportAs: ["thySegment"], ngImport: i0, template: "<div class=\"thy-segment-group\">\n  @if (animationState) {\n    <div\n      class=\"thy-segment-thumb thy-segment-thumb-motion\"\n      [@thumbMotion]=\"animationState\"\n      (@thumbMotion.done)=\"handleThumbAnimationDone($event)\"\n    ></div>\n  }\n\n  <ng-content></ng-content>\n</div>\n", animations: [thumbMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySegment, decorators: [{
             type: Component,
@@ -202,8 +199,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         '[class.thy-segment-md]': `thySize === 'md'`,
                         '[class.thy-segment-default]': `!thySize || thySize === 'default'`,
                         '[class.thy-segment-block]': `thyMode === 'block'`
-                    }, standalone: true, imports: [NgIf], template: "<div class=\"thy-segment-group\">\n  <div\n    *ngIf=\"animationState\"\n    class=\"thy-segment-thumb thy-segment-thumb-motion\"\n    [@thumbMotion]=\"animationState\"\n    (@thumbMotion.done)=\"handleThumbAnimationDone($event)\"\n  ></div>\n\n  <ng-content></ng-content>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }], propDecorators: { options: [{
+                    }, standalone: true, imports: [], template: "<div class=\"thy-segment-group\">\n  @if (animationState) {\n    <div\n      class=\"thy-segment-thumb thy-segment-thumb-motion\"\n      [@thumbMotion]=\"animationState\"\n      (@thumbMotion.done)=\"handleThumbAnimationDone($event)\"\n    ></div>\n  }\n\n  <ng-content></ng-content>\n</div>\n" }]
+        }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [ThySegmentItem]
             }], thySize: [{

package/fesm2022/ngx-tethys-segment.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-tethys-segment.mjs","sources":["../../../src/segment/segment.token.ts","../../../src/segment/segment-item.component.ts","../../../src/segment/segment-item.component.html","../../../src/segment/segment.component.ts","../../../src/segment/segment.component.html","../../../src/segment/segment.module.ts","../../../src/segment/ngx-tethys-segment.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { ThySegmentItem } from './segment-item.component';\n\nexport interface IThySegmentComponent {\n    thyMode: string;\n    thyDisabled: boolean;\n    selectedItem: ThySegmentItem;\n    changeSelectedItem: (item: ThySegmentItem, event?: Event) => void;\n}\n\nexport const THY_SEGMENTED_COMPONENT = new InjectionToken<IThySegmentComponent>('THY_SEGMENTED_COMPONENT');\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    HostBinding,\n    Inject,\n    Input,\n    NgZone,\n    OnDestroy,\n    Optional,\n    Renderer2\n} from '@angular/core';\nimport { IThySegmentComponent, THY_SEGMENTED_COMPONENT } from './segment.token';\nimport { assertIconOnly, coerceBooleanProperty } from 'ngx-tethys/util';\nimport { Subject, fromEvent } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { SafeAny } from 'ngx-tethys/types';\nimport { ThyIcon } from 'ngx-tethys/icon';\nimport { NgClass, NgIf } from '@angular/common';\n\n/**\n * 分段控制器的选项组件\n * @name thy-segment-item,[thy-segment-item]\n */\n@Component({\n    selector: 'thy-segment-item,[thy-segment-item]',\n    templateUrl: './segment-item.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'thy-segment-item'\n    },\n    standalone: true,\n    imports: [NgClass, NgIf, ThyIcon]\n})\nexport class ThySegmentItem implements AfterViewInit, OnDestroy {\n    /**\n     * 选项的值\n     */\n    @Input() thyValue: SafeAny;\n\n    /**\n     * 选项的图标\n     */\n    @Input() thyIcon: string;\n\n    /**\n     * 是否禁用该选项\n     */\n    @Input({ transform: coerceBooleanProperty })\n    @HostBinding(`class.disabled`)\n    thyDisabled = false;\n\n    public isOnlyIcon: boolean;\n\n    public isWithText: boolean;\n\n    private destroy$ = new Subject<void>();\n\n    constructor(\n        public elementRef: ElementRef,\n        private ngZone: NgZone,\n        private cdr: ChangeDetectorRef,\n        private renderer: Renderer2,\n        @Optional() @Inject(THY_SEGMENTED_COMPONENT) private parent: IThySegmentComponent\n    ) {\n        ngZone.runOutsideAngular(() =>\n            fromEvent(elementRef.nativeElement, 'click')\n                .pipe(takeUntil(this.destroy$))\n                .subscribe((event: Event) => {\n                    if (!this.thyDisabled && !this.parent.thyDisabled && this.parent.selectedItem && this.parent.selectedItem !== this) {\n                        ngZone.run(() => {\n                            this.parent.selectedItem.unselect();\n                            this.parent.changeSelectedItem(this, event);\n                        });\n                    }\n                })\n        );\n    }\n\n    ngAfterViewInit(): void {\n        const labelDiv = this.elementRef.nativeElement.children[0];\n        this.isOnlyIcon = assertIconOnly(labelDiv) && this.parent.thyMode === 'inline';\n        this.cdr.detectChanges();\n\n        this.wrapSpanForText(labelDiv.childNodes);\n    }\n\n    public select() {\n        this.elementRef.nativeElement.classList.add('active');\n    }\n\n    public unselect() {\n        this.elementRef.nativeElement.classList.remove('active');\n    }\n\n    private wrapSpanForText(nodes: NodeList): void {\n        nodes.forEach(node => {\n            if (node.nodeName === '#text') {\n                const span = this.renderer.createElement('span');\n                const parent = this.renderer.parentNode(node);\n                this.renderer.insertBefore(parent, span, node);\n                this.renderer.appendChild(span, node);\n            }\n\n            if (node.nodeName === '#text' || node.nodeName === 'SPAN') {\n                this.isWithText = true;\n                this.cdr.detectChanges();\n            }\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n}\n","<div\n  class=\"thy-segment-item-label\"\n  [ngClass]=\"{\n    'thy-segment-item-label-only-icon': isOnlyIcon\n  }\"\n>\n  <thy-icon *ngIf=\"thyIcon\" class=\"thy-segment-item-icon\" [ngClass]=\"{ 'icon-with-text': isWithText }\" [thyIconName]=\"thyIcon\"></thy-icon>\n  <ng-content></ng-content>\n</div>\n","import {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    DestroyRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    Output,\n    QueryList,\n    ViewEncapsulation,\n    numberAttribute\n} from '@angular/core';\nimport { ThumbAnimationProps } from 'ngx-tethys/core';\nimport { thumbMotion } from 'ngx-tethys/core';\nimport { ThySegmentItem } from './segment-item.component';\nimport { IThySegmentComponent, THY_SEGMENTED_COMPONENT } from './segment.token';\nimport { ThySegmentEvent } from './types';\nimport { AnimationEvent } from '@angular/animations';\nimport { NgIf } from '@angular/common';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\nexport type ThySegmentSize = 'xs' | 'sm' | 'md' | 'default';\n\nexport type ThySegmentMode = 'block' | 'inline';\n\n/**\n * 分段控制器组件\n * @name thy-segment\n */\n@Component({\n    selector: 'thy-segment',\n    templateUrl: './segment.component.html',\n    exportAs: 'thySegment',\n    animations: [thumbMotion],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        {\n            provide: THY_SEGMENTED_COMPONENT,\n            useExisting: ThySegment\n        }\n    ],\n    host: {\n        class: 'thy-segment',\n        '[class.thy-segment-xs]': `thySize === 'xs'`,\n        '[class.thy-segment-sm]': `thySize === 'sm'`,\n        '[class.thy-segment-md]': `thySize === 'md'`,\n        '[class.thy-segment-default]': `!thySize || thySize === 'default'`,\n        '[class.thy-segment-block]': `thyMode === 'block'`\n    },\n    standalone: true,\n    imports: [NgIf]\n})\nexport class ThySegment implements IThySegmentComponent, AfterContentInit {\n    /**\n     * @internal\n     */\n    @ContentChildren(ThySegmentItem) options!: QueryList<ThySegmentItem>;\n\n    /**\n     * 大小\n     * @type xs | sm | md | default\n     */\n    @Input() thySize: ThySegmentSize = 'default';\n\n    /**\n     * 模式\n     * @type block | inline\n     */\n    @Input() thyMode: ThySegmentMode = 'block';\n\n    /**\n     * 是否禁用分段控制器\n     */\n    @Input({ transform: coerceBooleanProperty })\n    @HostBinding(`class.disabled`)\n    thyDisabled = false;\n\n    /**\n     * 选中选项的索引\n     */\n    @Input({ transform: numberAttribute })\n    set thyActiveIndex(value: number) {\n        this.newActiveIndex = value;\n        if (value < 0 || value === this.activeIndex) {\n            return;\n        }\n        setTimeout(() => {\n            const selectedItem = this.options?.get(this.activeIndex);\n            if (selectedItem) {\n                selectedItem.unselect();\n                this.changeSelectedItem(this.options.get(value));\n            } else {\n                this.activeIndex = value;\n            }\n        });\n    }\n\n    /**\n     * 选项被选中的回调事件\n     */\n    @Output() readonly thySelectChange = new EventEmitter<ThySegmentEvent>();\n\n    public selectedItem: ThySegmentItem;\n\n    private newActiveIndex: number;\n\n    private activeIndex: number;\n\n    public animationState: null | { value: string; params: ThumbAnimationProps } = null;\n\n    public transitionedTo: any = null;\n\n    constructor(\n        private cdr: ChangeDetectorRef,\n        private destroyRef: DestroyRef\n    ) {}\n\n    ngAfterContentInit(): void {\n        this.selectedItem = this.options.get(this.newActiveIndex) || this.options.get(0);\n        this.selectedItem?.select();\n\n        this.options.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n            this.options.forEach(item => {\n                item.unselect();\n            });\n            this.selectedItem = this.options.get(this.newActiveIndex) || this.options.get(0);\n            this.selectedItem?.select();\n            this.cdr.detectChanges();\n        });\n    }\n\n    public changeSelectedItem(item: ThySegmentItem, event?: Event): void {\n        this.animationState = {\n            value: 'from',\n            params: getThumbAnimationProps(this.options?.get(this.activeIndex || 0)?.elementRef.nativeElement!)\n        };\n        this.selectedItem = null;\n        this.cdr.detectChanges();\n\n        this.animationState = {\n            value: 'to',\n            params: getThumbAnimationProps(item.elementRef.nativeElement!)\n        };\n        this.transitionedTo = item;\n        this.activeIndex = this.options?.toArray().findIndex(option => {\n            return option.thyValue === item?.thyValue;\n        });\n        this.thySelectChange.emit({ event: event, value: item.thyValue, activeIndex: this.activeIndex });\n        this.cdr.detectChanges();\n    }\n\n    public handleThumbAnimationDone(event: AnimationEvent): void {\n        if (event.fromState === 'from') {\n            this.selectedItem = this.transitionedTo;\n            this.selectedItem?.select();\n            this.transitionedTo = null;\n            this.animationState = null;\n            this.cdr.detectChanges();\n        }\n    }\n}\n\nfunction getThumbAnimationProps(element: HTMLElement): ThumbAnimationProps {\n    return {\n        transform: element.offsetLeft,\n        width: element.clientWidth\n    };\n}\n","<div class=\"thy-segment-group\">\n  <div\n    *ngIf=\"animationState\"\n    class=\"thy-segment-thumb thy-segment-thumb-motion\"\n    [@thumbMotion]=\"animationState\"\n    (@thumbMotion.done)=\"handleThumbAnimationDone($event)\"\n  ></div>\n\n  <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ThyIconModule } from 'ngx-tethys/icon';\nimport { ThyTooltipModule } from 'ngx-tethys/tooltip';\nimport { ThySegment } from './segment.component';\nimport { ThySegmentItem } from './segment-item.component';\n\n@NgModule({\n    imports: [CommonModule, ThyIconModule, ThyTooltipModule, ThySegment, ThySegmentItem],\n    exports: [ThySegment, ThySegmentItem]\n})\nexport class ThySegmentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngx-tethys-segment.mjs","sources":["../../../src/segment/segment.token.ts","../../../src/segment/segment-item.component.ts","../../../src/segment/segment-item.component.html","../../../src/segment/segment.component.ts","../../../src/segment/segment.component.html","../../../src/segment/segment.module.ts","../../../src/segment/ngx-tethys-segment.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\nimport { ThySegmentItem } from './segment-item.component';\n\nexport interface IThySegmentComponent {\n    thyMode: string;\n    thyDisabled: boolean;\n    selectedItem: ThySegmentItem;\n    changeSelectedItem: (item: ThySegmentItem, event?: Event) => void;\n}\n\nexport const THY_SEGMENTED_COMPONENT = new InjectionToken<IThySegmentComponent>('THY_SEGMENTED_COMPONENT');\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    NgZone,\n    OnDestroy,\n    Renderer2,\n    inject\n} from '@angular/core';\nimport { IThySegmentComponent, THY_SEGMENTED_COMPONENT } from './segment.token';\nimport { assertIconOnly, coerceBooleanProperty } from 'ngx-tethys/util';\nimport { Subject, fromEvent } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { SafeAny } from 'ngx-tethys/types';\nimport { ThyIcon } from 'ngx-tethys/icon';\nimport { NgClass } from '@angular/common';\n\n/**\n * 分段控制器的选项组件\n * @name thy-segment-item,[thy-segment-item]\n */\n@Component({\n    selector: 'thy-segment-item,[thy-segment-item]',\n    templateUrl: './segment-item.component.html',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'thy-segment-item'\n    },\n    standalone: true,\n    imports: [NgClass, ThyIcon]\n})\nexport class ThySegmentItem implements AfterViewInit, OnDestroy {\n    elementRef = inject(ElementRef);\n    private ngZone = inject(NgZone);\n    private cdr = inject(ChangeDetectorRef);\n    private renderer = inject(Renderer2);\n    private parent = inject(THY_SEGMENTED_COMPONENT, { optional: true })!;\n\n    /**\n     * 选项的值\n     */\n    @Input() thyValue: SafeAny;\n\n    /**\n     * 选项的图标\n     */\n    @Input() thyIcon: string;\n\n    /**\n     * 是否禁用该选项\n     */\n    @Input({ transform: coerceBooleanProperty })\n    @HostBinding(`class.disabled`)\n    thyDisabled = false;\n\n    public isOnlyIcon: boolean;\n\n    public isWithText: boolean;\n\n    private destroy$ = new Subject<void>();\n\n    constructor() {\n        const elementRef = this.elementRef;\n        const ngZone = this.ngZone;\n\n        ngZone.runOutsideAngular(() =>\n            fromEvent(elementRef.nativeElement, 'click')\n                .pipe(takeUntil(this.destroy$))\n                .subscribe((event: Event) => {\n                    if (!this.thyDisabled && !this.parent.thyDisabled && this.parent.selectedItem && this.parent.selectedItem !== this) {\n                        ngZone.run(() => {\n                            this.parent.selectedItem.unselect();\n                            this.parent.changeSelectedItem(this, event);\n                        });\n                    }\n                })\n        );\n    }\n\n    ngAfterViewInit(): void {\n        const labelDiv = this.elementRef.nativeElement.children[0];\n        this.isOnlyIcon = assertIconOnly(labelDiv) && this.parent.thyMode === 'inline';\n        this.cdr.detectChanges();\n\n        this.wrapSpanForText(labelDiv.childNodes);\n    }\n\n    public select() {\n        this.elementRef.nativeElement.classList.add('active');\n    }\n\n    public unselect() {\n        this.elementRef.nativeElement.classList.remove('active');\n    }\n\n    private wrapSpanForText(nodes: NodeList): void {\n        nodes.forEach(node => {\n            if (node.nodeName === '#text') {\n                const span = this.renderer.createElement('span');\n                const parent = this.renderer.parentNode(node);\n                this.renderer.insertBefore(parent, span, node);\n                this.renderer.appendChild(span, node);\n            }\n\n            if (node.nodeName === '#text' || node.nodeName === 'SPAN') {\n                this.isWithText = true;\n                this.cdr.detectChanges();\n            }\n        });\n    }\n\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n}\n","<div\n  class=\"thy-segment-item-label\"\n  [ngClass]=\"{\n    'thy-segment-item-label-only-icon': isOnlyIcon\n  }\"\n  >\n  @if (thyIcon) {\n    <thy-icon class=\"thy-segment-item-icon\" [ngClass]=\"{ 'icon-with-text': isWithText }\" [thyIconName]=\"thyIcon\"></thy-icon>\n  }\n  <ng-content></ng-content>\n</div>\n","import {\n    AfterContentInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ContentChildren,\n    DestroyRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    Output,\n    QueryList,\n    ViewEncapsulation,\n    numberAttribute,\n    inject\n} from '@angular/core';\nimport { ThumbAnimationProps } from 'ngx-tethys/core';\nimport { thumbMotion } from 'ngx-tethys/core';\nimport { ThySegmentItem } from './segment-item.component';\nimport { IThySegmentComponent, THY_SEGMENTED_COMPONENT } from './segment.token';\nimport { ThySegmentEvent } from './types';\nimport { AnimationEvent } from '@angular/animations';\n\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\nexport type ThySegmentSize = 'xs' | 'sm' | 'md' | 'default';\n\nexport type ThySegmentMode = 'block' | 'inline';\n\n/**\n * 分段控制器组件\n * @name thy-segment\n */\n@Component({\n    selector: 'thy-segment',\n    templateUrl: './segment.component.html',\n    exportAs: 'thySegment',\n    animations: [thumbMotion],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    providers: [\n        {\n            provide: THY_SEGMENTED_COMPONENT,\n            useExisting: ThySegment\n        }\n    ],\n    host: {\n        class: 'thy-segment',\n        '[class.thy-segment-xs]': `thySize === 'xs'`,\n        '[class.thy-segment-sm]': `thySize === 'sm'`,\n        '[class.thy-segment-md]': `thySize === 'md'`,\n        '[class.thy-segment-default]': `!thySize || thySize === 'default'`,\n        '[class.thy-segment-block]': `thyMode === 'block'`\n    },\n    standalone: true,\n    imports: []\n})\nexport class ThySegment implements IThySegmentComponent, AfterContentInit {\n    private cdr = inject(ChangeDetectorRef);\n    private destroyRef = inject(DestroyRef);\n\n    /**\n     * @internal\n     */\n    @ContentChildren(ThySegmentItem) options!: QueryList<ThySegmentItem>;\n\n    /**\n     * 大小\n     * @type xs | sm | md | default\n     */\n    @Input() thySize: ThySegmentSize = 'default';\n\n    /**\n     * 模式\n     * @type block | inline\n     */\n    @Input() thyMode: ThySegmentMode = 'block';\n\n    /**\n     * 是否禁用分段控制器\n     */\n    @Input({ transform: coerceBooleanProperty })\n    @HostBinding(`class.disabled`)\n    thyDisabled = false;\n\n    /**\n     * 选中选项的索引\n     */\n    @Input({ transform: numberAttribute })\n    set thyActiveIndex(value: number) {\n        this.newActiveIndex = value;\n        if (value < 0 || value === this.activeIndex) {\n            return;\n        }\n        setTimeout(() => {\n            const selectedItem = this.options?.get(this.activeIndex);\n            if (selectedItem) {\n                selectedItem.unselect();\n                this.changeSelectedItem(this.options.get(value));\n            } else {\n                this.activeIndex = value;\n            }\n        });\n    }\n\n    /**\n     * 选项被选中的回调事件\n     */\n    @Output() readonly thySelectChange = new EventEmitter<ThySegmentEvent>();\n\n    public selectedItem: ThySegmentItem;\n\n    private newActiveIndex: number;\n\n    private activeIndex: number;\n\n    public animationState: null | { value: string; params: ThumbAnimationProps } = null;\n\n    public transitionedTo: any = null;\n\n    ngAfterContentInit(): void {\n        this.selectedItem = this.options.get(this.newActiveIndex) || this.options.get(0);\n        this.selectedItem?.select();\n\n        this.options.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {\n            this.options.forEach(item => {\n                item.unselect();\n            });\n            this.selectedItem = this.options.get(this.newActiveIndex) || this.options.get(0);\n            this.selectedItem?.select();\n            this.cdr.detectChanges();\n        });\n    }\n\n    public changeSelectedItem(item: ThySegmentItem, event?: Event): void {\n        this.animationState = {\n            value: 'from',\n            params: getThumbAnimationProps(this.options?.get(this.activeIndex || 0)?.elementRef.nativeElement!)\n        };\n        this.selectedItem = null;\n        this.cdr.detectChanges();\n\n        this.animationState = {\n            value: 'to',\n            params: getThumbAnimationProps(item.elementRef.nativeElement!)\n        };\n        this.transitionedTo = item;\n        this.activeIndex = this.options?.toArray().findIndex(option => {\n            return option.thyValue === item?.thyValue;\n        });\n        this.thySelectChange.emit({ event: event, value: item.thyValue, activeIndex: this.activeIndex });\n        this.cdr.detectChanges();\n    }\n\n    public handleThumbAnimationDone(event: AnimationEvent): void {\n        if (event.fromState === 'from') {\n            this.selectedItem = this.transitionedTo;\n            this.selectedItem?.select();\n            this.transitionedTo = null;\n            this.animationState = null;\n            this.cdr.detectChanges();\n        }\n    }\n}\n\nfunction getThumbAnimationProps(element: HTMLElement): ThumbAnimationProps {\n    return {\n        transform: element.offsetLeft,\n        width: element.clientWidth\n    };\n}\n","<div class=\"thy-segment-group\">\n  @if (animationState) {\n    <div\n      class=\"thy-segment-thumb thy-segment-thumb-motion\"\n      [@thumbMotion]=\"animationState\"\n      (@thumbMotion.done)=\"handleThumbAnimationDone($event)\"\n    ></div>\n  }\n\n  <ng-content></ng-content>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ThyIconModule } from 'ngx-tethys/icon';\nimport { ThyTooltipModule } from 'ngx-tethys/tooltip';\nimport { ThySegment } from './segment.component';\nimport { ThySegmentItem } from './segment-item.component';\n\n@NgModule({\n    imports: [CommonModule, ThyIconModule, ThyTooltipModule, ThySegment, ThySegmentItem],\n    exports: [ThySegment, ThySegmentItem]\n})\nexport class ThySegmentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,uBAAuB,GAAG,IAAI,cAAc,CAAuB,yBAAyB,CAAC;;ACW1G;;;AAGG;MAWU,cAAc,CAAA;AA8BvB,IAAA,WAAA,GAAA;AA7BA,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AACxB,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;AACxB,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAChC,QAAA,IAAA,CAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAM,CAAA,MAAA,GAAG,MAAM,CAAC,uBAAuB,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAE,CAAC;AAYtE;;AAEG;QAGH,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;AAMZ,QAAA,IAAA,CAAA,QAAQ,GAAG,IAAI,OAAO,EAAQ,CAAC;AAGnC,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;AACnC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;AAE3B,QAAA,MAAM,CAAC,iBAAiB,CAAC,MACrB,SAAS,CAAC,UAAU,CAAC,aAAa,EAAE,OAAO,CAAC;AACvC,aAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC9B,aAAA,SAAS,CAAC,CAAC,KAAY,KAAI;YACxB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY,KAAK,IAAI,EAAE;AAChH,gBAAA,MAAM,CAAC,GAAG,CAAC,MAAK;AACZ,oBAAA,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;oBACpC,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAChD,iBAAC,CAAC,CAAC;aACN;SACJ,CAAC,CACT,CAAC;KACL;IAED,eAAe,GAAA;AACX,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AAC3D,QAAA,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,OAAO,KAAK,QAAQ,CAAC;AAC/E,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;AAEzB,QAAA,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;KAC7C;IAEM,MAAM,GAAA;QACT,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;KACzD;IAEM,QAAQ,GAAA;QACX,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;KAC5D;AAEO,IAAA,eAAe,CAAC,KAAe,EAAA;AACnC,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;AACjB,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,EAAE;gBAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBACjD,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;gBAC9C,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;gBAC/C,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;aACzC;AAED,YAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,IAAI,IAAI,CAAC,QAAQ,KAAK,MAAM,EAAE;AACvD,gBAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACvB,gBAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;aAC5B;AACL,SAAC,CAAC,CAAC;KACN;IAED,WAAW,GAAA;AACP,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;AACrB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;KAC5B;8GAnFQ,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAd,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,uKAoBH,qBAAqB,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECvD7C,8TAWA,EDsBc,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,OAAO,oFAAE,OAAO,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,eAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,uBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAEjB,cAAc,EAAA,UAAA,EAAA,CAAA;kBAV1B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qCAAqC,EAE9B,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACzC,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,kBAAkB;AAC5B,qBAAA,EAAA,UAAA,EACW,IAAI,EACP,OAAA,EAAA,CAAC,OAAO,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,8TAAA,EAAA,CAAA;wDAYlB,QAAQ,EAAA,CAAA;sBAAhB,KAAK;gBAKG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAON,WAAW,EAAA,CAAA;sBAFV,KAAK;uBAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAA;;sBAC1C,WAAW;uBAAC,CAAgB,cAAA,CAAA,CAAA;;;AE1BjC;;;AAGG;MAyBU,UAAU,CAAA;AAxBvB,IAAA,WAAA,GAAA;AAyBY,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC;AAChC,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAOxC;;;AAGG;QACM,IAAO,CAAA,OAAA,GAAmB,SAAS,CAAC;AAE7C;;;AAGG;QACM,IAAO,CAAA,OAAA,GAAmB,OAAO,CAAC;AAE3C;;AAEG;QAGH,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;AAsBpB;;AAEG;AACgB,QAAA,IAAA,CAAA,eAAe,GAAG,IAAI,YAAY,EAAmB,CAAC;QAQlE,IAAc,CAAA,cAAA,GAA0D,IAAI,CAAC;QAE7E,IAAc,CAAA,cAAA,GAAQ,IAAI,CAAC;AA6CrC,KAAA;AA9EG;;AAEG;IACH,IACI,cAAc,CAAC,KAAa,EAAA;AAC5B,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC5B,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,WAAW,EAAE;YACzC,OAAO;SACV;QACD,UAAU,CAAC,MAAK;AACZ,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACzD,IAAI,YAAY,EAAE;gBACd,YAAY,CAAC,QAAQ,EAAE,CAAC;AACxB,gBAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;aACpD;iBAAM;AACH,gBAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;aAC5B;AACL,SAAC,CAAC,CAAC;KACN;IAiBD,kBAAkB,GAAA;QACd,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACjF,QAAA,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC;AAE5B,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,MAAK;AAC1E,YAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,IAAG;gBACxB,IAAI,CAAC,QAAQ,EAAE,CAAC;AACpB,aAAC,CAAC,CAAC;YACH,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACjF,YAAA,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC;AAC5B,YAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;AAC7B,SAAC,CAAC,CAAC;KACN;IAEM,kBAAkB,CAAC,IAAoB,EAAE,KAAa,EAAA;QACzD,IAAI,CAAC,cAAc,GAAG;AAClB,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,sBAAsB,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE,UAAU,CAAC,aAAc,CAAC;SACtG,CAAC;AACF,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;QAEzB,IAAI,CAAC,cAAc,GAAG;AAClB,YAAA,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,sBAAsB,CAAC,IAAI,CAAC,UAAU,CAAC,aAAc,CAAC;SACjE,CAAC;AACF,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;AAC3B,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,SAAS,CAAC,MAAM,IAAG;AAC1D,YAAA,OAAO,MAAM,CAAC,QAAQ,KAAK,IAAI,EAAE,QAAQ,CAAC;AAC9C,SAAC,CAAC,CAAC;QACH,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;AACjG,QAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;KAC5B;AAEM,IAAA,wBAAwB,CAAC,KAAqB,EAAA;AACjD,QAAA,IAAI,KAAK,CAAC,SAAS,KAAK,MAAM,EAAE;AAC5B,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC;AACxC,YAAA,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC;AAC5B,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;AAC3B,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;AAC3B,YAAA,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;SAC5B;KACJ;8GAzGQ,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAV,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,EAwBC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,aAAA,EAAA,aAAA,EAAA,qBAAqB,CAOrB,EAAA,cAAA,EAAA,CAAA,gBAAA,EAAA,gBAAA,EAAA,eAAe,CAhDxB,EAAA,EAAA,OAAA,EAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,sBAAA,EAAA,kBAAA,EAAA,sBAAA,EAAA,kBAAA,EAAA,sBAAA,EAAA,kBAAA,EAAA,2BAAA,EAAA,mCAAA,EAAA,yBAAA,EAAA,qBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,SAAA,EAAA;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,uBAAuB;AAChC,gBAAA,WAAW,EAAE,UAAU;AAC1B,aAAA;AACJ,SAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,SAAA,EAmBgB,cAAc,ECjEnC,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,uSAWA,ED2BgB,UAAA,EAAA,CAAC,WAAW,CAAC,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA,EAAA;;2FAoBhB,UAAU,EAAA,UAAA,EAAA,CAAA;kBAxBtB,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAEb,QAAA,EAAA,YAAY,EACV,UAAA,EAAA,CAAC,WAAW,CAAC,EAAA,aAAA,EACV,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EACpC,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,uBAAuB;AAChC,4BAAA,WAAW,EAAY,UAAA;AAC1B,yBAAA;qBACJ,EACK,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,wBAAwB,EAAE,CAAkB,gBAAA,CAAA;AAC5C,wBAAA,wBAAwB,EAAE,CAAkB,gBAAA,CAAA;AAC5C,wBAAA,wBAAwB,EAAE,CAAkB,gBAAA,CAAA;AAC5C,wBAAA,6BAA6B,EAAE,CAAmC,iCAAA,CAAA;AAClE,wBAAA,2BAA2B,EAAE,CAAqB,mBAAA,CAAA;qBACrD,EACW,UAAA,EAAA,IAAI,WACP,EAAE,EAAA,QAAA,EAAA,uSAAA,EAAA,CAAA;8BASsB,OAAO,EAAA,CAAA;sBAAvC,eAAe;uBAAC,cAAc,CAAA;gBAMtB,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAMG,OAAO,EAAA,CAAA;sBAAf,KAAK;gBAON,WAAW,EAAA,CAAA;sBAFV,KAAK;uBAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAA;;sBAC1C,WAAW;uBAAC,CAAgB,cAAA,CAAA,CAAA;gBAOzB,cAAc,EAAA,CAAA;sBADjB,KAAK;uBAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAA;gBAoBlB,eAAe,EAAA,CAAA;sBAAjC,MAAM;;AAyDX,SAAS,sBAAsB,CAAC,OAAoB,EAAA;IAChD,OAAO;QACH,SAAS,EAAE,OAAO,CAAC,UAAU;QAC7B,KAAK,EAAE,OAAO,CAAC,WAAW;KAC7B,CAAC;AACN;;MEhKa,gBAAgB,CAAA;8GAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,EAHf,OAAA,EAAA,CAAA,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,cAAc,CACzE,EAAA,OAAA,EAAA,CAAA,UAAU,EAAE,cAAc,CAAA,EAAA,CAAA,CAAA,EAAA;AAE3B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAHf,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAc,cAAc,CAAA,EAAA,CAAA,CAAA,EAAA;;2FAG1E,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAJ5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAE,UAAU,EAAE,cAAc,CAAC;AACpF,oBAAA,OAAO,EAAE,CAAC,UAAU,EAAE,cAAc,CAAC;AACxC,iBAAA,CAAA;;;ACVD;;AAEG;;;;"}

package/fesm2022/ngx-tethys-select.mjs

@@ -1,17 +1,15 @@
-import * as i1 from '@angular/cdk/overlay';
 import { Overlay, CdkConnectedOverlay, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
-import { isPlatformBrowser, NgClass, NgIf, NgTemplateOutlet, NgFor, CommonModule } from '@angular/common';
+import { isPlatformBrowser, NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, PLATFORM_ID, numberAttribute, forwardRef, ElementRef, Component, ChangeDetectionStrategy, Inject, Optional, Input, ViewChild, HostBinding, Output, ContentChild, ContentChildren, ViewChildren, HostListener, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/forms';
+import { InjectionToken, inject, NgZone, ElementRef, ChangeDetectorRef, PLATFORM_ID, EventEmitter, numberAttribute, forwardRef, Component, ChangeDetectionStrategy, Input, ViewChild, HostBinding, Output, ContentChild, ContentChildren, ViewChildren, HostListener, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { ThyEmpty, ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { ThyInputDirective, ThyInputModule } from 'ngx-tethys/input';
 import { ThyLoading, ThyLoadingModule } from 'ngx-tethys/loading';
 import { THY_OPTION_PARENT_COMPONENT, ThyOption, ThySelectOptionGroup, ThySelectControl, ThyStopPropagationDirective, ThyScrollDirective, ThyOptionsContainer, ThySharedModule, ThySelectCommonModule, ThyOptionModule } from 'ngx-tethys/shared';
-import * as i2 from 'ngx-tethys/core';
-import { TabIndexDisabledControlValueAccessorMixin, ScrollToService, getFlexiblePositions, scaleXMotion, scaleYMotion, scaleMotion } from 'ngx-tethys/core';
+import { TabIndexDisabledControlValueAccessorMixin, ThyClickDispatcher, ScrollToService, getFlexiblePositions, scaleXMotion, scaleYMotion, scaleMotion } from 'ngx-tethys/core';
 import { ENTER, isFunction, elementMatchClosest, DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, SPACE, hasModifierKey, HOME, END, A, helpers, isArray, coerceBooleanProperty } from 'ngx-tethys/util';
 import { Subject, defer, merge, timer, Observable } from 'rxjs';
 import { map, filter, take, switchMap, takeUntil, startWith, distinctUntilChanged } from 'rxjs/operators';
@@ -139,16 +137,16 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
     get placement() {
         return this.thyPlacement || this.config.placement;
     }
-    constructor(ngZone, elementRef, changeDetectorRef, overlay, thyClickDispatcher, platformId, scrollStrategyFactory, selectConfig) {
+    constructor() {
         super();
-        this.ngZone = ngZone;
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.overlay = overlay;
-        this.thyClickDispatcher = thyClickDispatcher;
-        this.platformId = platformId;
-        this.scrollStrategyFactory = scrollStrategyFactory;
-        this.selectConfig = selectConfig;
+        this.ngZone = inject(NgZone);
+        this.elementRef = inject(ElementRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.overlay = inject(Overlay);
+        this.thyClickDispatcher = inject(ThyClickDispatcher);
+        this.platformId = inject(PLATFORM_ID);
+        this.scrollStrategyFactory = inject(THY_SELECT_SCROLL_STRATEGY, { optional: true });
+        this.selectConfig = inject(THY_SELECT_CONFIG, { optional: true });
         this.disabled = false;
         this.mode = '';
         this.emptyStateText = '暂无可选项';
@@ -225,6 +223,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         this.thyPreset = '';
         this.isSearching = false;
         this.groupBy = (item) => item.groupLabel;
+        const selectConfig = this.selectConfig;
         this.config = { ...DEFAULT_SELECT_CONFIG, ...selectConfig };
         this.buildScrollStrategy();
     }
@@ -773,8 +772,8 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySelect, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Overlay }, { token: i2.ThyClickDispatcher }, { token: PLATFORM_ID }, { token: THY_SELECT_SCROLL_STRATEGY, optional: true }, { token: THY_SELECT_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: ThySelect, isStandalone: true, selector: "thy-select,thy-custom-select", inputs: { thyDropdownWidthMode: "thyDropdownWidthMode", thyShowSearch: ["thyShowSearch", "thyShowSearch", coerceBooleanProperty], thyPlaceHolder: "thyPlaceHolder", thyServerSearch: ["thyServerSearch", "thyServerSearch", coerceBooleanProperty], thyLoadState: ["thyLoadState", "thyLoadState", coerceBooleanProperty], thyAutoActiveFirstItem: ["thyAutoActiveFirstItem", "thyAutoActiveFirstItem", coerceBooleanProperty], thyMode: "thyMode", thySize: "thySize", thyEmptyStateText: "thyEmptyStateText", thyEmptySearchMessageText: "thyEmptySearchMessageText", thyEnableScrollLoad: ["thyEnableScrollLoad", "thyEnableScrollLoad", coerceBooleanProperty], thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty], thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thySortComparator: "thySortComparator", thyFooterTemplate: "thyFooterTemplate", thyPlacement: "thyPlacement", thyOrigin: "thyOrigin", thyFooterClass: "thyFooterClass", thyAutoExpand: ["thyAutoExpand", "thyAutoExpand", coerceBooleanProperty], thyHasBackdrop: ["thyHasBackdrop", "thyHasBackdrop", coerceBooleanProperty], thyMaxTagCount: ["thyMaxTagCount", "thyMaxTagCount", numberAttribute], thyBorderless: ["thyBorderless", "thyBorderless", coerceBooleanProperty], thyOptions: "thyOptions", thyPreset: "thyPreset" }, outputs: { thyOnSearch: "thyOnSearch", thyOnScrollToBottom: "thyOnScrollToBottom", thyOnExpandStatusChange: "thyOnExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabIndex", "class.thy-select-custom": "this.isSelectCustom", "class.thy-select": "this.isSelect", "class.menu-is-opened": "this.panelOpen" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThySelect, isStandalone: true, selector: "thy-select,thy-custom-select", inputs: { thyDropdownWidthMode: "thyDropdownWidthMode", thyShowSearch: ["thyShowSearch", "thyShowSearch", coerceBooleanProperty], thyPlaceHolder: "thyPlaceHolder", thyServerSearch: ["thyServerSearch", "thyServerSearch", coerceBooleanProperty], thyLoadState: ["thyLoadState", "thyLoadState", coerceBooleanProperty], thyAutoActiveFirstItem: ["thyAutoActiveFirstItem", "thyAutoActiveFirstItem", coerceBooleanProperty], thyMode: "thyMode", thySize: "thySize", thyEmptyStateText: "thyEmptyStateText", thyEmptySearchMessageText: "thyEmptySearchMessageText", thyEnableScrollLoad: ["thyEnableScrollLoad", "thyEnableScrollLoad", coerceBooleanProperty], thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty], thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thySortComparator: "thySortComparator", thyFooterTemplate: "thyFooterTemplate", thyPlacement: "thyPlacement", thyOrigin: "thyOrigin", thyFooterClass: "thyFooterClass", thyAutoExpand: ["thyAutoExpand", "thyAutoExpand", coerceBooleanProperty], thyHasBackdrop: ["thyHasBackdrop", "thyHasBackdrop", coerceBooleanProperty], thyMaxTagCount: ["thyMaxTagCount", "thyMaxTagCount", numberAttribute], thyBorderless: ["thyBorderless", "thyBorderless", coerceBooleanProperty], thyOptions: "thyOptions", thyPreset: "thyPreset" }, outputs: { thyOnSearch: "thyOnSearch", thyOnScrollToBottom: "thyOnScrollToBottom", thyOnExpandStatusChange: "thyOnExpandStatusChange" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabIndex", "class.thy-select-custom": "this.isSelectCustom", "class.thy-select": "this.isSelect", "class.menu-is-opened": "this.panelOpen" } }, providers: [
             {
                 provide: THY_OPTION_PARENT_COMPONENT,
                 useExisting: ThySelect
@@ -784,7 +783,7 @@ class ThySelect extends TabIndexDisabledControlValueAccessorMixin {
                 useExisting: forwardRef(() => ThySelect),
                 multi: true
             }
-        ], queries: [{ propertyName: "selectedValueDisplayRef", first: true, predicate: ["selectedDisplay"], descendants: true }, { propertyName: "contentOptions", predicate: ThyOption, descendants: true }, { propertyName: "contentGroups", predicate: ThySelectOptionGroup }], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, read: ElementRef }, { propertyName: "viewOptions", predicate: ThyOption, descendants: true }, { propertyName: "viewGroups", predicate: ThySelectOptionGroup, descendants: true }], exportAs: ["thySelect"], usesInheritance: true, ngImport: i0, template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selected\"\n  [thyIsMultiple]=\"isMultiple\"\n  [thyShowSearch]=\"thyShowSearch\"\n  [thyAllowClear]=\"thyAllowClear\"\n  [thySize]=\"thySize\"\n  [thyPlaceholder]=\"thyPlaceHolder\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"onSearchFilter($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount\"\n  [thyPreset]=\"thyPreset\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (attach)=\"onAttached()\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass\"\n    [@scaleYMotion]=\"placement === 'top' || placement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement === 'left' || placement === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"placement !== 'top' && placement !== 'bottom' && placement !== 'left' && placement !== 'right' ? 'enter' : 'void'\"\n    (mousemove)=\"dropDownMouseMove($event)\">\n    <ng-container *ngIf=\"contentOptions?.length > 0 || contentGroups?.length > 0 || innerOptions?.length > 0; else emptyPlaceholder\">\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ size }}\"\n        thyScroll\n        (thyOnScrolled)=\"onOptionsScrolled($event)\"\n        [thyEnable]=\"thyEnableScrollLoad\">\n        <ng-template *ngIf=\"isReactiveDriven\" [ngTemplateOutlet]=\"optionsContainer.optionsTemplate\"></ng-template>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isHiddenOptions\">\n          <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n          <div class=\"thy-select-empty-content\">\n            <thy-empty *ngIf=\"thyLoadState\" [thyMessage]=\"emptySearchMessageText\" thySize=\"sm\"></thy-empty>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n    <ng-template #emptyPlaceholder>\n      <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        <thy-empty *ngIf=\"thyLoadState\" [thyMessage]=\"emptyStateText\" thySize=\"sm\"></thy-empty>\n      </div>\n    </ng-template>\n    <div *ngIf=\"thyFooterTemplate\" [class]=\"thyFooterClass ? thyFooterClass : 'thy-custom-select-footer'\">\n      <ng-template *ngIf=\"thyFooterTemplate\" [ngTemplateOutlet]=\"thyFooterTemplate\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<thy-options-container #optionsContainer>\n  <ng-container *ngFor=\"let option of optionGroups\">\n    <thy-option\n      *ngIf=\"!option.children; else optionGroup\"\n      [thyDisabled]=\"option.disabled\"\n      [thyLabelText]=\"option.label\"\n      [thyValue]=\"option.value\"\n      [thyRawValue]=\"option\"></thy-option>\n    <ng-template #optionGroup>\n      <thy-option-group [thyGroupLabel]=\"option.groupLabel\">\n        <thy-option\n          *ngFor=\"let sub of option.children\"\n          [thyDisabled]=\"sub.disabled\"\n          [thyLabelText]=\"sub.label\"\n          [thyValue]=\"sub.value\"\n          [thyRawValue]=\"sub\"></thy-option>\n      </thy-option-group>\n    </ng-template>\n  </ng-container>\n</thy-options-container>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ThySelectControl, selector: "thy-select-control,[thySelectControl]", inputs: ["thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["thyOnSearch", "thyOnRemove", "thyOnClear", "thyOnBlur"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ThyScrollDirective, selector: "[thyScroll]", inputs: ["thyEnable"], outputs: ["thyOnScrolled"] }, { kind: "component", type: ThyLoading, selector: "thy-loading", inputs: ["thyDone", "thyTip", "thyIsMask"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: ThyOptionsContainer, selector: "thy-options-container" }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "component", type: ThySelectOptionGroup, selector: "thy-option-group", inputs: ["thyDisabled", "thyGroupLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "selectedValueDisplayRef", first: true, predicate: ["selectedDisplay"], descendants: true }, { propertyName: "contentOptions", predicate: ThyOption, descendants: true }, { propertyName: "contentGroups", predicate: ThySelectOptionGroup }], viewQueries: [{ propertyName: "cdkConnectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, static: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, static: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, read: ElementRef }, { propertyName: "viewOptions", predicate: ThyOption, descendants: true }, { propertyName: "viewGroups", predicate: ThySelectOptionGroup, descendants: true }], exportAs: ["thySelect"], usesInheritance: true, ngImport: i0, template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selected\"\n  [thyIsMultiple]=\"isMultiple\"\n  [thyShowSearch]=\"thyShowSearch\"\n  [thyAllowClear]=\"thyAllowClear\"\n  [thySize]=\"thySize\"\n  [thyPlaceholder]=\"thyPlaceHolder\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"onSearchFilter($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount\"\n  [thyPreset]=\"thyPreset\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (attach)=\"onAttached()\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass\"\n    [@scaleYMotion]=\"placement === 'top' || placement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement === 'left' || placement === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"placement !== 'top' && placement !== 'bottom' && placement !== 'left' && placement !== 'right' ? 'enter' : 'void'\"\n    (mousemove)=\"dropDownMouseMove($event)\">\n    @if (contentOptions?.length > 0 || contentGroups?.length > 0 || innerOptions?.length > 0) {\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ size }}\"\n        thyScroll\n        (thyOnScrolled)=\"onOptionsScrolled($event)\"\n        [thyEnable]=\"thyEnableScrollLoad\">\n        @if (isReactiveDriven) {\n          <ng-template [ngTemplateOutlet]=\"optionsContainer.optionsTemplate\"></ng-template>\n        }\n        <ng-content></ng-content>\n        @if (isHiddenOptions) {\n          <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n          <div class=\"thy-select-empty-content\">\n            @if (thyLoadState) {\n              <thy-empty [thyMessage]=\"emptySearchMessageText\" thySize=\"sm\"></thy-empty>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        @if (thyLoadState) {\n          <thy-empty [thyMessage]=\"emptyStateText\" thySize=\"sm\"></thy-empty>\n        }\n      </div>\n    }\n    @if (thyFooterTemplate) {\n      <div [class]=\"thyFooterClass ? thyFooterClass : 'thy-custom-select-footer'\">\n        @if (thyFooterTemplate) {\n          <ng-template [ngTemplateOutlet]=\"thyFooterTemplate\"></ng-template>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<thy-options-container #optionsContainer>\n  @for (option of optionGroups; track $index) {\n    @if (!option.children) {\n      <thy-option\n        [thyDisabled]=\"option.disabled\"\n        [thyLabelText]=\"option.label\"\n        [thyValue]=\"option.value\"\n        [thyRawValue]=\"option\"></thy-option>\n    } @else {\n      <thy-option-group [thyGroupLabel]=\"option.groupLabel\">\n        @for (sub of option.children; track sub.value) {\n          <thy-option [thyDisabled]=\"sub.disabled\" [thyLabelText]=\"sub.label\" [thyValue]=\"sub.value\" [thyRawValue]=\"sub\"></thy-option>\n        }\n      </thy-option-group>\n    }\n  }\n</thy-options-container>\n", dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ThySelectControl, selector: "thy-select-control,[thySelectControl]", inputs: ["thyPanelOpened", "thyIsMultiple", "thyShowSearch", "thySelectedOptions", "thyDisabled", "customDisplayTemplate", "thyAllowClear", "thyPlaceholder", "thySize", "thyMaxTagCount", "thyBorderless", "thyPreset"], outputs: ["thyOnSearch", "thyOnRemove", "thyOnClear", "thyOnBlur"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ThyScrollDirective, selector: "[thyScroll]", inputs: ["thyEnable"], outputs: ["thyOnScrolled"] }, { kind: "component", type: ThyLoading, selector: "thy-loading", inputs: ["thyDone", "thyTip", "thyIsMask"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: ThyOptionsContainer, selector: "thy-options-container" }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "component", type: ThySelectOptionGroup, selector: "thy-option-group", inputs: ["thyDisabled", "thyGroupLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [scaleXMotion, scaleYMotion, scaleMotion], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThySelect, decorators: [{
             type: Component,
@@ -804,34 +803,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         CdkConnectedOverlay,
                         ThyStopPropagationDirective,
                         NgClass,
-                        NgIf,
                         ThyScrollDirective,
                         ThyLoading,
                         ThyEmpty,
                         ThyOptionsContainer,
                         ThyOption,
                         ThySelectOptionGroup,
-                        NgTemplateOutlet,
-                        NgFor
+                        NgTemplateOutlet
                     ], host: {
                         '[attr.tabindex]': 'tabIndex',
                         '(focus)': 'onFocus($event)',
                         '(blur)': 'onBlur($event)'
-                    }, animations: [scaleXMotion, scaleYMotion, scaleMotion], template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selected\"\n  [thyIsMultiple]=\"isMultiple\"\n  [thyShowSearch]=\"thyShowSearch\"\n  [thyAllowClear]=\"thyAllowClear\"\n  [thySize]=\"thySize\"\n  [thyPlaceholder]=\"thyPlaceHolder\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"onSearchFilter($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount\"\n  [thyPreset]=\"thyPreset\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (attach)=\"onAttached()\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass\"\n    [@scaleYMotion]=\"placement === 'top' || placement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement === 'left' || placement === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"placement !== 'top' && placement !== 'bottom' && placement !== 'left' && placement !== 'right' ? 'enter' : 'void'\"\n    (mousemove)=\"dropDownMouseMove($event)\">\n    <ng-container *ngIf=\"contentOptions?.length > 0 || contentGroups?.length > 0 || innerOptions?.length > 0; else emptyPlaceholder\">\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ size }}\"\n        thyScroll\n        (thyOnScrolled)=\"onOptionsScrolled($event)\"\n        [thyEnable]=\"thyEnableScrollLoad\">\n        <ng-template *ngIf=\"isReactiveDriven\" [ngTemplateOutlet]=\"optionsContainer.optionsTemplate\"></ng-template>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isHiddenOptions\">\n          <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n          <div class=\"thy-select-empty-content\">\n            <thy-empty *ngIf=\"thyLoadState\" [thyMessage]=\"emptySearchMessageText\" thySize=\"sm\"></thy-empty>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n    <ng-template #emptyPlaceholder>\n      <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        <thy-empty *ngIf=\"thyLoadState\" [thyMessage]=\"emptyStateText\" thySize=\"sm\"></thy-empty>\n      </div>\n    </ng-template>\n    <div *ngIf=\"thyFooterTemplate\" [class]=\"thyFooterClass ? thyFooterClass : 'thy-custom-select-footer'\">\n      <ng-template *ngIf=\"thyFooterTemplate\" [ngTemplateOutlet]=\"thyFooterTemplate\"></ng-template>\n    </div>\n  </div>\n</ng-template>\n\n<thy-options-container #optionsContainer>\n  <ng-container *ngFor=\"let option of optionGroups\">\n    <thy-option\n      *ngIf=\"!option.children; else optionGroup\"\n      [thyDisabled]=\"option.disabled\"\n      [thyLabelText]=\"option.label\"\n      [thyValue]=\"option.value\"\n      [thyRawValue]=\"option\"></thy-option>\n    <ng-template #optionGroup>\n      <thy-option-group [thyGroupLabel]=\"option.groupLabel\">\n        <thy-option\n          *ngFor=\"let sub of option.children\"\n          [thyDisabled]=\"sub.disabled\"\n          [thyLabelText]=\"sub.label\"\n          [thyValue]=\"sub.value\"\n          [thyRawValue]=\"sub\"></thy-option>\n      </thy-option-group>\n    </ng-template>\n  </ng-container>\n</thy-options-container>\n" }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Overlay }, { type: i2.ThyClickDispatcher }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [THY_SELECT_SCROLL_STRATEGY]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [THY_SELECT_CONFIG]
-                }] }], propDecorators: { thyDropdownWidthMode: [{
+                    }, animations: [scaleXMotion, scaleYMotion, scaleMotion], template: "<div\n  cdk-overlay-origin\n  thySelectControl\n  (click)=\"toggle($event)\"\n  #origin=\"cdkOverlayOrigin\"\n  #trigger\n  [thyPanelOpened]=\"panelOpen\"\n  [thySelectedOptions]=\"selected\"\n  [thyIsMultiple]=\"isMultiple\"\n  [thyShowSearch]=\"thyShowSearch\"\n  [thyAllowClear]=\"thyAllowClear\"\n  [thySize]=\"thySize\"\n  [thyPlaceholder]=\"thyPlaceHolder\"\n  [customDisplayTemplate]=\"selectedValueDisplayRef\"\n  [thyDisabled]=\"disabled\"\n  [thyBorderless]=\"thyBorderless\"\n  (thyOnClear)=\"clearSelectValue($event)\"\n  (thyOnRemove)=\"remove($event)\"\n  (thyOnSearch)=\"onSearchFilter($event)\"\n  (thyOnBlur)=\"onBlur($event)\"\n  [thyMaxTagCount]=\"thyMaxTagCount\"\n  [thyPreset]=\"thyPreset\"></div>\n\n<ng-template\n  cdk-connected-overlay\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  [cdkConnectedOverlayHasBackdrop]=\"thyHasBackdrop\"\n  [cdkConnectedOverlayPositions]=\"dropDownPositions\"\n  [cdkConnectedOverlayOrigin]=\"thyOrigin || origin\"\n  [cdkConnectedOverlayOpen]=\"panelOpen\"\n  [cdkConnectedOverlayWidth]=\"triggerRectWidth\"\n  [cdkConnectedOverlayMinWidth]=\"dropDownMinWidth\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  cdkConnectedOverlayTransformOriginOn=\".thy-select-dropdown\"\n  (attach)=\"onAttached()\"\n  (detach)=\"close()\">\n  <div\n    thyStopPropagation\n    [attr.tabindex]=\"-1\"\n    [ngClass]=\"dropDownClass\"\n    [@scaleYMotion]=\"placement === 'top' || placement === 'bottom' ? 'enter' : 'void'\"\n    [@scaleXMotion]=\"placement === 'left' || placement === 'right' ? 'enter' : 'void'\"\n    [@scaleMotion]=\"placement !== 'top' && placement !== 'bottom' && placement !== 'left' && placement !== 'right' ? 'enter' : 'void'\"\n    (mousemove)=\"dropDownMouseMove($event)\">\n    @if (contentOptions?.length > 0 || contentGroups?.length > 0 || innerOptions?.length > 0) {\n      <div\n        #panel\n        class=\"thy-select-dropdown-options thy-select-dropdown-options-{{ size }}\"\n        thyScroll\n        (thyOnScrolled)=\"onOptionsScrolled($event)\"\n        [thyEnable]=\"thyEnableScrollLoad\">\n        @if (isReactiveDriven) {\n          <ng-template [ngTemplateOutlet]=\"optionsContainer.optionsTemplate\"></ng-template>\n        }\n        <ng-content></ng-content>\n        @if (isHiddenOptions) {\n          <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n          <div class=\"thy-select-empty-content\">\n            @if (thyLoadState) {\n              <thy-empty [thyMessage]=\"emptySearchMessageText\" thySize=\"sm\"></thy-empty>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <thy-loading [thyDone]=\"thyLoadState\" thySize=\"sm\"></thy-loading>\n      <div class=\"thy-select-empty-content\">\n        @if (thyLoadState) {\n          <thy-empty [thyMessage]=\"emptyStateText\" thySize=\"sm\"></thy-empty>\n        }\n      </div>\n    }\n    @if (thyFooterTemplate) {\n      <div [class]=\"thyFooterClass ? thyFooterClass : 'thy-custom-select-footer'\">\n        @if (thyFooterTemplate) {\n          <ng-template [ngTemplateOutlet]=\"thyFooterTemplate\"></ng-template>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n\n<thy-options-container #optionsContainer>\n  @for (option of optionGroups; track $index) {\n    @if (!option.children) {\n      <thy-option\n        [thyDisabled]=\"option.disabled\"\n        [thyLabelText]=\"option.label\"\n        [thyValue]=\"option.value\"\n        [thyRawValue]=\"option\"></thy-option>\n    } @else {\n      <thy-option-group [thyGroupLabel]=\"option.groupLabel\">\n        @for (sub of option.children; track sub.value) {\n          <thy-option [thyDisabled]=\"sub.disabled\" [thyLabelText]=\"sub.label\" [thyValue]=\"sub.value\" [thyRawValue]=\"sub\"></thy-option>\n        }\n      </thy-option-group>\n    }\n  }\n</thy-options-container>\n" }]
+        }], ctorParameters: () => [], propDecorators: { thyDropdownWidthMode: [{
                 type: Input
             }], cdkConnectedOverlay: [{
                 type: ViewChild,
@@ -952,9 +936,9 @@ class ThyNativeSelect extends TabIndexDisabledControlValueAccessorMixin {
     setDisabledState(isDisabled) {
         this._disabled = isDisabled;
     }
-    constructor(elementRef) {
+    constructor() {
         super();
-        this.elementRef = elementRef;
+        this.elementRef = inject(ElementRef);
         // The internal data model
         this._innerValue = null;
         this._disabled = false;
@@ -985,14 +969,14 @@ class ThyNativeSelect extends TabIndexDisabledControlValueAccessorMixin {
         this._innerValue = '';
         this.onChangeFn(this._innerValue);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyNativeSelect, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.0", type: ThyNativeSelect, isStandalone: true, selector: "thy-native-select", inputs: { thySize: "thySize", name: "name", thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty] }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "tabIndex", "class.thy-select": "this._isSelect" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ThyNativeSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: ThyNativeSelect, isStandalone: true, selector: "thy-native-select", inputs: { thySize: "thySize", name: "name", thyAllowClear: ["thyAllowClear", "thyAllowClear", coerceBooleanProperty] }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur($event)" }, properties: { "attr.tabindex": "tabIndex", "class.thy-select": "this._isSelect" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ThyNativeSelect),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<select\n  #select\n  thyInput\n  [tabindex]=\"-1\"\n  [thySize]=\"_size\"\n  [disabled]=\"_disabled\"\n  [(ngModel)]=\"_innerValue\"\n  (ngModelChange)=\"ngModelChange()\"\n  (blur)=\"onBlur($event)\"\n  [class.thy-select-selection-allow-clear]=\"thyAllowClear\">\n  <ng-content></ng-content>\n</select>\n<thy-icon thyIconName=\"angle-down\"></thy-icon>\n<a class=\"thy-select-remove remove-link\" href=\"javascript:;\" (click)=\"clearSelectValue($event)\" *ngIf=\"thyAllowClear && _innerValue\">\n  <thy-icon class=\"remove-link-icon\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n</a>\n", dependencies: [{ kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        ], viewQueries: [{ propertyName: "selectElement", first: true, predicate: ["select"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<select\n  #select\n  thyInput\n  [tabindex]=\"-1\"\n  [thySize]=\"_size\"\n  [disabled]=\"_disabled\"\n  [(ngModel)]=\"_innerValue\"\n  (ngModelChange)=\"ngModelChange()\"\n  (blur)=\"onBlur($event)\"\n  [class.thy-select-selection-allow-clear]=\"thyAllowClear\">\n  <ng-content></ng-content>\n</select>\n<thy-icon thyIconName=\"angle-down\"></thy-icon>\n@if (thyAllowClear && _innerValue) {\n  <a class=\"thy-select-remove remove-link\" href=\"javascript:;\" (click)=\"clearSelectValue($event)\">\n    <thy-icon class=\"remove-link-icon\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </a>\n}\n", dependencies: [{ kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "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: ThyNativeSelect, decorators: [{
             type: Component,
@@ -1002,12 +986,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: forwardRef(() => ThyNativeSelect),
                             multi: true
                         }
-                    ], standalone: true, imports: [ThyInputDirective, FormsModule, ThyIcon, NgIf], host: {
+                    ], standalone: true, imports: [ThyInputDirective, FormsModule, ThyIcon], host: {
                         '[attr.tabindex]': 'tabIndex',
                         '(focus)': 'onFocus($event)',
                         '(blur)': 'onBlur($event)'
-                    }, template: "<select\n  #select\n  thyInput\n  [tabindex]=\"-1\"\n  [thySize]=\"_size\"\n  [disabled]=\"_disabled\"\n  [(ngModel)]=\"_innerValue\"\n  (ngModelChange)=\"ngModelChange()\"\n  (blur)=\"onBlur($event)\"\n  [class.thy-select-selection-allow-clear]=\"thyAllowClear\">\n  <ng-content></ng-content>\n</select>\n<thy-icon thyIconName=\"angle-down\"></thy-icon>\n<a class=\"thy-select-remove remove-link\" href=\"javascript:;\" (click)=\"clearSelectValue($event)\" *ngIf=\"thyAllowClear && _innerValue\">\n  <thy-icon class=\"remove-link-icon\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n</a>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectElement: [{
+                    }, template: "<select\n  #select\n  thyInput\n  [tabindex]=\"-1\"\n  [thySize]=\"_size\"\n  [disabled]=\"_disabled\"\n  [(ngModel)]=\"_innerValue\"\n  (ngModelChange)=\"ngModelChange()\"\n  (blur)=\"onBlur($event)\"\n  [class.thy-select-selection-allow-clear]=\"thyAllowClear\">\n  <ng-content></ng-content>\n</select>\n<thy-icon thyIconName=\"angle-down\"></thy-icon>\n@if (thyAllowClear && _innerValue) {\n  <a class=\"thy-select-remove remove-link\" href=\"javascript:;\" (click)=\"clearSelectValue($event)\">\n    <thy-icon class=\"remove-link-icon\" thyIconName=\"close-circle-bold-fill\"></thy-icon>\n  </a>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { selectElement: [{
                 type: ViewChild,
                 args: ['select', { static: true }]
             }], _isSelect: [{