ngx-tethys 19.0.13 → 19.1.0-next.0

package/fesm2022/ngx-tethys-stepper.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { numberAttribute, HostBinding, Input, Component, InjectionToken, inject, TemplateRef, ViewChild, EventEmitter, ContentChildren, ViewChildren, Output, HostListener, Directive, NgModule } from '@angular/core';
+import { input, numberAttribute, ChangeDetectionStrategy, Component, InjectionToken, inject, viewChild, TemplateRef, output, contentChildren, signal, computed, effect, untracked, HostListener, Directive, NgModule } from '@angular/core';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import { ThyIcon } from 'ngx-tethys/icon';
 import { coerceBooleanProperty } from 'ngx-tethys/util';
@@ -11,34 +11,19 @@ import { coerceBooleanProperty } from 'ngx-tethys/util';
  */
 class ThyStepHeader {
     constructor() {
-        this.thyStepHeader = true;
+        this.label = input();
+        this.icon = input();
+        this.index = input(undefined, { transform: numberAttribute });
+        this.selected = input(false, { transform: coerceBooleanProperty });
+        this.active = input(false, { transform: coerceBooleanProperty });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStepHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: ThyStepHeader, isStandalone: true, selector: "thy-step-header", inputs: { label: "label", icon: "icon", index: ["index", "index", numberAttribute], selected: ["selected", "selected", coerceBooleanProperty], active: ["active", "active", coerceBooleanProperty] }, host: { properties: { "class.thy-stepper-header-selected": "this.selected", "class.thy-stepper-header": "this.thyStepHeader" } }, ngImport: i0, template: "<div class=\"thy-step-number\">\n  <span>{{ index + 1 }}</span>\n</div>\n<thy-icon class=\"thy-step-icon\" [thyIconName]=\"icon || 'check-circle'\"></thy-icon>\n<div class=\"thy-step-label\">{{ label }}</div>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyStepHeader, isStandalone: true, selector: "thy-step-header", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "thy-stepper-header" }, ngImport: i0, template: "<div class=\"thy-step-number\">\n  <span>{{ index() + 1 }}</span>\n</div>\n<thy-icon class=\"thy-step-icon\" [thyIconName]=\"icon() || 'check-circle'\"></thy-icon>\n<div class=\"thy-step-label\">{{ label() }}</div>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStepHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-step-header', imports: [ThyIcon], template: "<div class=\"thy-step-number\">\n  <span>{{ index + 1 }}</span>\n</div>\n<thy-icon class=\"thy-step-icon\" [thyIconName]=\"icon || 'check-circle'\"></thy-icon>\n<div class=\"thy-step-label\">{{ label }}</div>\n" }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], index: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], selected: [{
-                type: HostBinding,
-                args: ['class.thy-stepper-header-selected']
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], active: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyStepHeader: [{
-                type: HostBinding,
-                args: ['class.thy-stepper-header']
-            }] } });
+            args: [{ selector: 'thy-step-header', imports: [ThyIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'thy-stepper-header' }, template: "<div class=\"thy-step-number\">\n  <span>{{ index() + 1 }}</span>\n</div>\n<thy-icon class=\"thy-step-icon\" [thyIconName]=\"icon() || 'check-circle'\"></thy-icon>\n<div class=\"thy-step-label\">{{ label() }}</div>\n" }]
+        }] });
 
 const THY_STEPPER_COMPONENT = new InjectionToken('THY_STEPPER_COMPONENT');
 /**
@@ -49,26 +34,28 @@ const THY_STEPPER_COMPONENT = new InjectionToken('THY_STEPPER_COMPONENT');
 class ThyStep {
     constructor() {
         this.stepper = inject(THY_STEPPER_COMPONENT, { optional: true });
+        this.content = viewChild(TemplateRef);
+        this.label = input();
+        /**
+         * 步骤条中每个步骤的label文本
+         */
+        this.thyLabel = input();
+        /**
+         * 步骤条中每个步骤完成的图标
+         * @default check-circle
+         */
+        this.thyIcon = input();
     }
     select() {
-        this.stepper.selected = this;
+        this.stepper.updateSelected(this);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStep, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyStep, isStandalone: true, selector: "thy-step", inputs: { label: "label", thyLabel: "thyLabel", thyIcon: "thyIcon" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.8", type: ThyStep, isStandalone: true, selector: "thy-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, thyLabel: { classPropertyName: "thyLabel", publicName: "thyLabel", isSignal: true, isRequired: false, transformFunction: null }, thyIcon: { classPropertyName: "thyIcon", publicName: "thyIcon", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template><ng-content></ng-content></ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStep, decorators: [{
             type: Component,
             args: [{ selector: 'thy-step', template: "<ng-template><ng-content></ng-content></ng-template>\n" }]
-        }], propDecorators: { content: [{
-                type: ViewChild,
-                args: [TemplateRef, { static: true }]
-            }], label: [{
-                type: Input
-            }], thyLabel: [{
-                type: Input
-            }], thyIcon: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * 步骤条组件
@@ -77,97 +64,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  */
 class ThyStepper {
     constructor() {
+        /**
+         * 当前处于激活状态的步骤 index
+         */
+        this.thySelectedIndex = input(0, { transform: numberAttribute });
+        /**
+         * 当前处于激活状态的步骤实例
+         */
+        this.thySelected = input();
         /**
          * 步骤条导航是否展示，默认展示
          */
-        this.thyShowStepHeader = true;
-        this._selectedIndex = 0;
-        this.selectionChange = new EventEmitter();
-        this.thyStepper = true;
-    }
-    /**
-     * 当前处于激活状态的步骤index
-     * @default 0
-     */
-    set thySelectedIndex(value) {
-        this.selectedIndex = value;
-    }
-    set thySelected(value) {
-        this.selected = value;
-    }
-    set selected(step) {
-        this.selectedIndex = this.steps ? this.steps.toArray().indexOf(step) : -1;
-    }
-    get selected() {
-        return this.steps ? this.steps.toArray()[this.selectedIndex] : null;
+        this.thyShowStepHeader = input(true, { transform: coerceBooleanProperty });
+        this.selectionChange = output();
+        this.steps = contentChildren(ThyStep);
+        this.selectedIndex = signal(0);
+        this.selected = computed(() => this.steps()?.[this.selectedIndex()]);
+        effect(() => {
+            const newIndex = this.thySelectedIndex();
+            if (newIndex) {
+                untracked(() => {
+                    this.updateSelectedIndex(newIndex);
+                });
+            }
+        });
+        effect(() => {
+            const selected = this.thySelected();
+            if (selected) {
+                untracked(() => {
+                    const index = this.steps()?.indexOf(selected);
+                    if (index > -1) {
+                        this.updateSelectedIndex(index);
+                    }
+                });
+            }
+        });
     }
-    set selectedIndex(index) {
-        if (this.steps) {
-            this._updateSelectedItemIndex(index);
+    updateSelectedIndex(newIndex) {
+        if (!this.steps()?.[newIndex]) {
+            return;
         }
-        else {
-            this._selectedIndex = index;
-        }
-    }
-    get selectedIndex() {
-        return this._selectedIndex;
-    }
-    _updateSelectedItemIndex(newIndex) {
-        const stepsArray = this.steps.toArray();
+        const previouslySelectedIndex = this.selectedIndex();
+        const previouslySelectedStep = this.steps() ? this.steps()[previouslySelectedIndex] : null;
+        this.selectedIndex.set(newIndex);
         this.selectionChange.emit({
             selectedIndex: newIndex,
-            previouslySelectedIndex: this._selectedIndex,
-            selectedStep: stepsArray[newIndex],
-            previouslySelectedStep: stepsArray[this._selectedIndex]
+            previouslySelectedIndex: previouslySelectedIndex,
+            selectedStep: this.selected(),
+            previouslySelectedStep: previouslySelectedStep
         });
-        this._selectedIndex = newIndex;
+    }
+    updateSelected(step) {
+        const index = this.steps().indexOf(step);
+        this.updateSelectedIndex(index);
     }
     to(index) {
-        this.selectedIndex = Math.min(index, this.steps.length - 1);
+        this.updateSelectedIndex(Math.min(index, this.steps().length - 1));
     }
     next() {
-        this.selectedIndex = Math.min(this._selectedIndex + 1, this.steps.length - 1);
+        this.updateSelectedIndex(Math.min(this.selectedIndex() + 1, this.steps().length - 1));
     }
     /** Selects and focuses the previous step in list. */
     previous() {
-        this.selectedIndex = Math.max(this._selectedIndex - 1, 0);
+        this.updateSelectedIndex(Math.max(this.selectedIndex() - 1, 0));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStepper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyStepper, isStandalone: true, selector: "thy-stepper", inputs: { thySelectedIndex: ["thySelectedIndex", "thySelectedIndex", numberAttribute], thySelected: "thySelected", thyShowStepHeader: ["thyShowStepHeader", "thyShowStepHeader", coerceBooleanProperty] }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.thy-stepper": "this.thyStepper" } }, providers: [
-            {
-                provide: THY_STEPPER_COMPONENT,
-                useExisting: ThyStepper
-            }
-        ], queries: [{ propertyName: "steps", predicate: ThyStep }], viewQueries: [{ propertyName: "stepHeaders", predicate: ThyStepHeader, descendants: true }], ngImport: i0, template: "@if (thyShowStepHeader) {\n  <div class=\"thy-stepper-header-container\">\n    @for (step of steps; track $index; let i = $index; let isLast = $last) {\n      <thy-step-header\n        [index]=\"i\"\n        [label]=\"step.thyLabel || step.label\"\n        [icon]=\"step.thyIcon\"\n        [selected]=\"selectedIndex === i\"\n        [class.thy-stepper-header-active]=\"i <= selectedIndex\"\n        [active]=\"i <= selectedIndex\">\n      </thy-step-header>\n      @if (!isLast) {\n        <div class=\"thy-stepper-line\" [class.thy-stepper-line-active]=\"i < selectedIndex\"></div>\n      }\n    }\n  </div>\n}\n\n<div class=\"thy-stepper-content-container\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n", dependencies: [{ kind: "component", type: ThyStepHeader, selector: "thy-step-header", inputs: ["label", "icon", "index", "selected", "active"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyStepper, isStandalone: true, selector: "thy-stepper", inputs: { thySelectedIndex: { classPropertyName: "thySelectedIndex", publicName: "thySelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, thySelected: { classPropertyName: "thySelected", publicName: "thySelected", isSignal: true, isRequired: false, transformFunction: null }, thyShowStepHeader: { classPropertyName: "thyShowStepHeader", publicName: "thyShowStepHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, host: { classAttribute: "thy-stepper" }, providers: [{ provide: THY_STEPPER_COMPONENT, useExisting: ThyStepper }], queries: [{ propertyName: "steps", predicate: ThyStep, isSignal: true }], ngImport: i0, template: "@if (thyShowStepHeader()) {\n  <div class=\"thy-stepper-header-container\">\n    @for (step of steps(); track $index; let i = $index; let isLast = $last) {\n      <thy-step-header\n        [index]=\"i\"\n        [label]=\"step.thyLabel() || step.label()\"\n        [icon]=\"step.thyIcon()\"\n        [selected]=\"selectedIndex() === i\"\n        [class.thy-stepper-header-active]=\"i <= selectedIndex()\"\n        [active]=\"i <= selectedIndex()\">\n      </thy-step-header>\n      @if (!isLast) {\n        <div class=\"thy-stepper-line\" [class.thy-stepper-line-active]=\"i < selectedIndex()\"></div>\n      }\n    }\n  </div>\n}\n\n<div class=\"thy-stepper-content-container\">\n  <ng-container [ngTemplateOutlet]=\"selected()?.content()\"></ng-container>\n</div>\n\n ", dependencies: [{ kind: "component", type: ThyStepHeader, selector: "thy-step-header", inputs: ["label", "icon", "index", "selected", "active"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyStepper, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-stepper', providers: [
-                        {
-                            provide: THY_STEPPER_COMPONENT,
-                            useExisting: ThyStepper
-                        }
-                    ], imports: [ThyStepHeader, NgTemplateOutlet], template: "@if (thyShowStepHeader) {\n  <div class=\"thy-stepper-header-container\">\n    @for (step of steps; track $index; let i = $index; let isLast = $last) {\n      <thy-step-header\n        [index]=\"i\"\n        [label]=\"step.thyLabel || step.label\"\n        [icon]=\"step.thyIcon\"\n        [selected]=\"selectedIndex === i\"\n        [class.thy-stepper-header-active]=\"i <= selectedIndex\"\n        [active]=\"i <= selectedIndex\">\n      </thy-step-header>\n      @if (!isLast) {\n        <div class=\"thy-stepper-line\" [class.thy-stepper-line-active]=\"i < selectedIndex\"></div>\n      }\n    }\n  </div>\n}\n\n<div class=\"thy-stepper-content-container\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n" }]
-        }], propDecorators: { thySelectedIndex: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thySelected: [{
-                type: Input
-            }], thyShowStepHeader: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], selectionChange: [{
-                type: Output
-            }], stepHeaders: [{
-                type: ViewChildren,
-                args: [ThyStepHeader]
-            }], steps: [{
-                type: ContentChildren,
-                args: [ThyStep]
-            }], thyStepper: [{
-                type: HostBinding,
-                args: ['class.thy-stepper']
-            }] } });
+            args: [{ selector: 'thy-stepper', providers: [{ provide: THY_STEPPER_COMPONENT, useExisting: ThyStepper }], imports: [ThyStepHeader, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'thy-stepper' }, template: "@if (thyShowStepHeader()) {\n  <div class=\"thy-stepper-header-container\">\n    @for (step of steps(); track $index; let i = $index; let isLast = $last) {\n      <thy-step-header\n        [index]=\"i\"\n        [label]=\"step.thyLabel() || step.label()\"\n        [icon]=\"step.thyIcon()\"\n        [selected]=\"selectedIndex() === i\"\n        [class.thy-stepper-header-active]=\"i <= selectedIndex()\"\n        [active]=\"i <= selectedIndex()\">\n      </thy-step-header>\n      @if (!isLast) {\n        <div class=\"thy-stepper-line\" [class.thy-stepper-line-active]=\"i < selectedIndex()\"></div>\n      }\n    }\n  </div>\n}\n\n<div class=\"thy-stepper-content-container\">\n  <ng-container [ngTemplateOutlet]=\"selected()?.content()\"></ng-container>\n</div>\n\n " }]
+        }], ctorParameters: () => [] });
 
 /**
  * 在步进工作流中移动到下一个步骤的按钮

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

@@ -1 +1 @@
-{"version":3,"file":"ngx-tethys-stepper.mjs","sources":["../../../src/stepper/step-header.component.ts","../../../src/stepper/step-header.component.html","../../../src/stepper/step.component.ts","../../../src/stepper/step.component.html","../../../src/stepper/stepper.component.ts","../../../src/stepper/stepper.component.html","../../../src/stepper/stepper-button.directive.ts","../../../src/stepper/stepper.module.ts","../../../src/stepper/ngx-tethys-stepper.ts"],"sourcesContent":["import { ThyIcon } from 'ngx-tethys/icon';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\nimport { Component, HostBinding, Input, numberAttribute } from '@angular/core';\n\n/**\n * 步骤条头部组件\n * @name thy-step-header\n * @order 25\n */\n@Component({\n    selector: 'thy-step-header',\n    templateUrl: './step-header.component.html',\n    imports: [ThyIcon]\n})\nexport class ThyStepHeader {\n    @Input() label: string;\n\n    @Input() icon: string;\n\n    @Input({ transform: numberAttribute }) index: number;\n\n    @HostBinding('class.thy-stepper-header-selected')\n    @Input({ transform: coerceBooleanProperty })\n    selected: boolean;\n\n    @Input({ transform: coerceBooleanProperty }) active: boolean;\n\n    @HostBinding('class.thy-stepper-header') thyStepHeader = true;\n}\n","<div class=\"thy-step-number\">\n  <span>{{ index + 1 }}</span>\n</div>\n<thy-icon class=\"thy-step-icon\" [thyIconName]=\"icon || 'check-circle'\"></thy-icon>\n<div class=\"thy-step-label\">{{ label }}</div>\n","import { Component, InjectionToken, Input, TemplateRef, ViewChild, inject } from '@angular/core';\n\nexport interface IThyStepperComponent {\n    selected: ThyStep;\n}\n\nexport const THY_STEPPER_COMPONENT = new InjectionToken<IThyStepperComponent>('THY_STEPPER_COMPONENT');\n\n/**\n * 步骤项组件\n * @name thy-step\n * @order 20\n */\n@Component({\n    selector: 'thy-step',\n    templateUrl: './step.component.html'\n})\nexport class ThyStep {\n    stepper = inject(THY_STEPPER_COMPONENT, { optional: true })!;\n\n    @ViewChild(TemplateRef, { static: true }) content: TemplateRef<any>;\n\n    @Input() label: string;\n\n    /**\n     * 步骤条中每个步骤的label文本\n     */\n    @Input() thyLabel: string;\n\n    /**\n     * 步骤条中每个步骤完成的图标\n     * @default check-circle\n     */\n    @Input() thyIcon: string;\n\n    select() {\n        this.stepper.selected = this;\n    }\n}\n","<ng-template><ng-content></ng-content></ng-template>\n","import {\n    Component,\n    ViewChildren,\n    ContentChildren,\n    QueryList,\n    HostBinding,\n    Input,\n    Output,\n    EventEmitter,\n    numberAttribute\n} from '@angular/core';\nimport { ThyStep, IThyStepperComponent, THY_STEPPER_COMPONENT } from './step.component';\nimport { ThyStepHeader } from './step-header.component';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\n/**\n * 步骤条组件\n * @name thy-stepper\n * @order 10\n */\n@Component({\n    selector: 'thy-stepper',\n    templateUrl: 'stepper.component.html',\n    providers: [\n        {\n            provide: THY_STEPPER_COMPONENT,\n            useExisting: ThyStepper\n        }\n    ],\n    imports: [ThyStepHeader, NgTemplateOutlet]\n})\nexport class ThyStepper implements IThyStepperComponent {\n    /**\n     * 当前处于激活状态的步骤index\n     * @default 0\n     */\n    @Input({ transform: numberAttribute })\n    set thySelectedIndex(value: number) {\n        this.selectedIndex = value;\n    }\n\n    @Input()\n    set thySelected(value: ThyStep) {\n        this.selected = value;\n    }\n\n    /**\n     * 步骤条导航是否展示，默认展示\n     */\n    @Input({ transform: coerceBooleanProperty }) thyShowStepHeader = true;\n\n    private _selectedIndex = 0;\n\n    public set selected(step: ThyStep) {\n        this.selectedIndex = this.steps ? this.steps.toArray().indexOf(step) : -1;\n    }\n\n    public get selected() {\n        return this.steps ? this.steps.toArray()[this.selectedIndex] : null;\n    }\n\n    set selectedIndex(index: number) {\n        if (this.steps) {\n            this._updateSelectedItemIndex(index);\n        } else {\n            this._selectedIndex = index;\n        }\n    }\n\n    get selectedIndex() {\n        return this._selectedIndex;\n    }\n\n    @Output() selectionChange: EventEmitter<any> = new EventEmitter<any>();\n\n    @ViewChildren(ThyStepHeader) stepHeaders: QueryList<ThyStepHeader>;\n\n    @ContentChildren(ThyStep) steps: QueryList<ThyStep>;\n\n    @HostBinding('class.thy-stepper') thyStepper = true;\n\n    private _updateSelectedItemIndex(newIndex: number): void {\n        const stepsArray = this.steps.toArray();\n        this.selectionChange.emit({\n            selectedIndex: newIndex,\n            previouslySelectedIndex: this._selectedIndex,\n            selectedStep: stepsArray[newIndex],\n            previouslySelectedStep: stepsArray[this._selectedIndex]\n        });\n        this._selectedIndex = newIndex;\n    }\n\n    to(index: number): void {\n        this.selectedIndex = Math.min(index, this.steps.length - 1);\n    }\n\n    next(): void {\n        this.selectedIndex = Math.min(this._selectedIndex + 1, this.steps.length - 1);\n    }\n\n    /** Selects and focuses the previous step in list. */\n    previous(): void {\n        this.selectedIndex = Math.max(this._selectedIndex - 1, 0);\n    }\n}\n","@if (thyShowStepHeader) {\n  <div class=\"thy-stepper-header-container\">\n    @for (step of steps; track $index; let i = $index; let isLast = $last) {\n      <thy-step-header\n        [index]=\"i\"\n        [label]=\"step.thyLabel || step.label\"\n        [icon]=\"step.thyIcon\"\n        [selected]=\"selectedIndex === i\"\n        [class.thy-stepper-header-active]=\"i <= selectedIndex\"\n        [active]=\"i <= selectedIndex\">\n      </thy-step-header>\n      @if (!isLast) {\n        <div class=\"thy-stepper-line\" [class.thy-stepper-line-active]=\"i < selectedIndex\"></div>\n      }\n    }\n  </div>\n}\n\n<div class=\"thy-stepper-content-container\">\n  <ng-container [ngTemplateOutlet]=\"selected?.content\"></ng-container>\n</div>\n","import { Directive, HostListener, inject } from '@angular/core';\nimport { ThyStepper } from './stepper.component';\n\n/**\n * 在步进工作流中移动到下一个步骤的按钮\n * @description.en-us Button that moves to the next step in a stepper workflow.\n * @name thyStepperNext\n * @order 40\n */\n@Directive({\n    selector: '[thyStepperNext]'\n})\nexport class ThyStepperNextDirective {\n    private stepper = inject(ThyStepper);\n\n    @HostListener('click', ['$event'])\n    click($event: any) {\n        this.stepper.next();\n    }\n}\n\n/**\n * 在步进工作流中移动到上一个步骤的按钮\n * @description.en-us Button that moves to the previous step in a stepper workflow.\n * @name thyStepperPrevious\n * @order 30\n */\n@Directive({\n    selector: '[thyStepperPrevious]'\n})\nexport class ThyStepperPreviousDirective {\n    private stepper = inject(ThyStepper);\n\n    @HostListener('click', ['$event'])\n    click($event: any) {\n        this.stepper.previous();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ThyStepHeader } from './step-header.component';\nimport { ThyStep } from './step.component';\nimport { ThyStepper } from './stepper.component';\nimport { ThyStepperNextDirective, ThyStepperPreviousDirective } from './stepper-button.directive';\n\n@NgModule({\n    imports: [CommonModule, ThyStepHeader, ThyStepper, ThyStep, ThyStepperNextDirective, ThyStepperPreviousDirective],\n    exports: [ThyStepper, ThyStep, ThyStepHeader, ThyStepperNextDirective, ThyStepperPreviousDirective],\n    providers: []\n})\nexport class ThyStepperModule {}\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-stepper.mjs","sources":["../../../src/stepper/step-header.component.ts","../../../src/stepper/step-header.component.html","../../../src/stepper/step.component.ts","../../../src/stepper/step.component.html","../../../src/stepper/stepper.component.ts","../../../src/stepper/stepper.component.html","../../../src/stepper/stepper-button.directive.ts","../../../src/stepper/stepper.module.ts","../../../src/stepper/ngx-tethys-stepper.ts"],"sourcesContent":["import { ThyIcon } from 'ngx-tethys/icon';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\nimport { Component, HostBinding, Input, numberAttribute, input, ChangeDetectionStrategy } from '@angular/core';\n\n/**\n * 步骤条头部组件\n * @name thy-step-header\n * @order 25\n */\n@Component({\n    selector: 'thy-step-header',\n    templateUrl: './step-header.component.html',\n    imports: [ThyIcon],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: { class: 'thy-stepper-header' }\n})\nexport class ThyStepHeader {\n    readonly label = input<string>();\n\n    readonly icon = input<string>();\n\n    readonly index = input<number, unknown>(undefined, { transform: numberAttribute });\n\n    readonly selected = input(false, { transform: coerceBooleanProperty });\n\n    readonly active = input(false, { transform: coerceBooleanProperty });\n}\n","<div class=\"thy-step-number\">\n  <span>{{ index() + 1 }}</span>\n</div>\n<thy-icon class=\"thy-step-icon\" [thyIconName]=\"icon() || 'check-circle'\"></thy-icon>\n<div class=\"thy-step-label\">{{ label() }}</div>\n","import { Component, InjectionToken, TemplateRef, ViewChild, inject, input, WritableSignal, viewChild } from '@angular/core';\n\nexport interface IThyStepperComponent {\n    updateSelected(step: ThyStep): void;\n}\n\nexport const THY_STEPPER_COMPONENT = new InjectionToken<IThyStepperComponent>('THY_STEPPER_COMPONENT');\n\n/**\n * 步骤项组件\n * @name thy-step\n * @order 20\n */\n@Component({ selector: 'thy-step', templateUrl: './step.component.html' })\nexport class ThyStep {\n    stepper = inject(THY_STEPPER_COMPONENT, { optional: true })!;\n\n    readonly content = viewChild<TemplateRef<any>>(TemplateRef);\n\n    readonly label = input<string>();\n\n    /**\n     * 步骤条中每个步骤的label文本\n     */\n    readonly thyLabel = input<string>();\n\n    /**\n     * 步骤条中每个步骤完成的图标\n     * @default check-circle\n     */\n    readonly thyIcon = input<string>();\n\n    select() {\n        this.stepper.updateSelected(this);\n    }\n}\n","<ng-template><ng-content></ng-content></ng-template>\n","import {\n    Component,\n    numberAttribute,\n    viewChildren,\n    output,\n    contentChildren,\n    input,\n    computed,\n    effect,\n    ChangeDetectionStrategy,\n    signal,\n    untracked\n} from '@angular/core';\nimport { ThyStep, IThyStepperComponent, THY_STEPPER_COMPONENT } from './step.component';\nimport { ThyStepHeader } from './step-header.component';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { coerceBooleanProperty } from 'ngx-tethys/util';\n\n/**\n * 步骤条组件\n * @name thy-stepper\n * @order 10\n */\n@Component({\n    selector: 'thy-stepper',\n    templateUrl: 'stepper.component.html',\n    providers: [{ provide: THY_STEPPER_COMPONENT, useExisting: ThyStepper }],\n    imports: [ThyStepHeader, NgTemplateOutlet],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: { class: 'thy-stepper' }\n})\nexport class ThyStepper implements IThyStepperComponent {\n    /**\n     * 当前处于激活状态的步骤 index\n     */\n    readonly thySelectedIndex = input<number, unknown>(0, { transform: numberAttribute });\n\n    /**\n     * 当前处于激活状态的步骤实例\n     */\n    readonly thySelected = input<ThyStep>();\n\n    /**\n     * 步骤条导航是否展示，默认展示\n     */\n    readonly thyShowStepHeader = input(true, { transform: coerceBooleanProperty });\n\n    readonly selectionChange = output<any>();\n\n    readonly steps = contentChildren(ThyStep);\n\n    protected selectedIndex = signal(0);\n\n    protected readonly selected = computed(() => this.steps()?.[this.selectedIndex()]);\n\n    constructor() {\n        effect(() => {\n            const newIndex = this.thySelectedIndex();\n            if (newIndex) {\n                untracked(() => {\n                    this.updateSelectedIndex(newIndex);\n                });\n            }\n        });\n\n        effect(() => {\n            const selected = this.thySelected();\n            if (selected) {\n                untracked(() => {\n                    const index = this.steps()?.indexOf(selected);\n                    if (index > -1) {\n                        this.updateSelectedIndex(index);\n                    }\n                });\n            }\n        });\n    }\n\n    private updateSelectedIndex(newIndex: number): void {\n        if (!this.steps()?.[newIndex]) {\n            return;\n        }\n        const previouslySelectedIndex = this.selectedIndex();\n        const previouslySelectedStep = this.steps() ? this.steps()[previouslySelectedIndex] : null;\n        this.selectedIndex.set(newIndex);\n        this.selectionChange.emit({\n            selectedIndex: newIndex,\n            previouslySelectedIndex: previouslySelectedIndex,\n            selectedStep: this.selected(),\n            previouslySelectedStep: previouslySelectedStep\n        });\n    }\n\n    updateSelected(step: ThyStep): void {\n        const index = this.steps().indexOf(step);\n        this.updateSelectedIndex(index);\n    }\n\n    to(index: number): void {\n        this.updateSelectedIndex(Math.min(index, this.steps().length - 1));\n    }\n\n    next(): void {\n        this.updateSelectedIndex(Math.min(this.selectedIndex() + 1, this.steps().length - 1));\n    }\n\n    /** Selects and focuses the previous step in list. */\n    previous(): void {\n        this.updateSelectedIndex(Math.max(this.selectedIndex() - 1, 0));\n    }\n}\n","@if (thyShowStepHeader()) {\n  <div class=\"thy-stepper-header-container\">\n    @for (step of steps(); track $index; let i = $index; let isLast = $last) {\n      <thy-step-header\n        [index]=\"i\"\n        [label]=\"step.thyLabel() || step.label()\"\n        [icon]=\"step.thyIcon()\"\n        [selected]=\"selectedIndex() === i\"\n        [class.thy-stepper-header-active]=\"i <= selectedIndex()\"\n        [active]=\"i <= selectedIndex()\">\n      </thy-step-header>\n      @if (!isLast) {\n        <div class=\"thy-stepper-line\" [class.thy-stepper-line-active]=\"i < selectedIndex()\"></div>\n      }\n    }\n  </div>\n}\n\n<div class=\"thy-stepper-content-container\">\n  <ng-container [ngTemplateOutlet]=\"selected()?.content()\"></ng-container>\n</div>\n\n ","import { Directive, HostListener, inject } from '@angular/core';\nimport { ThyStepper } from './stepper.component';\n\n/**\n * 在步进工作流中移动到下一个步骤的按钮\n * @description.en-us Button that moves to the next step in a stepper workflow.\n * @name thyStepperNext\n * @order 40\n */\n@Directive({\n    selector: '[thyStepperNext]'\n})\nexport class ThyStepperNextDirective {\n    private stepper = inject(ThyStepper);\n\n    @HostListener('click', ['$event'])\n    click($event: any) {\n        this.stepper.next();\n    }\n}\n\n/**\n * 在步进工作流中移动到上一个步骤的按钮\n * @description.en-us Button that moves to the previous step in a stepper workflow.\n * @name thyStepperPrevious\n * @order 30\n */\n@Directive({\n    selector: '[thyStepperPrevious]'\n})\nexport class ThyStepperPreviousDirective {\n    private stepper = inject(ThyStepper);\n\n    @HostListener('click', ['$event'])\n    click($event: any) {\n        this.stepper.previous();\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ThyStepHeader } from './step-header.component';\nimport { ThyStep } from './step.component';\nimport { ThyStepper } from './stepper.component';\nimport { ThyStepperNextDirective, ThyStepperPreviousDirective } from './stepper-button.directive';\n\n@NgModule({\n    imports: [CommonModule, ThyStepHeader, ThyStepper, ThyStep, ThyStepperNextDirective, ThyStepperPreviousDirective],\n    exports: [ThyStepper, ThyStep, ThyStepHeader, ThyStepperNextDirective, ThyStepperPreviousDirective],\n    providers: []\n})\nexport class ThyStepperModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngx-tethys-switch.mjs

@@ -1,97 +1,101 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, EventEmitter, forwardRef, Output, Input, ViewChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { input, output, signal, computed, viewChild, ElementRef, inject, ChangeDetectorRef, effect, forwardRef, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NgClass, CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TabIndexDisabledControlValueAccessorMixin } from 'ngx-tethys/core';
 import { coerceBooleanProperty } from 'ngx-tethys/util';
 
+const supportedTypes = ['primary', 'info', 'warning', 'danger'];
+const supportedSizes = ['', 'sm', 'xs'];
 /**
  * 开关组件
  * @name thy-switch
  * @order 10
  */
 class ThySwitch extends TabIndexDisabledControlValueAccessorMixin {
-    /**
-     * 类型，目前分为: 'primary' |'info' | 'warning' | 'danger'
-     */
-    set thyType(value) {
-        if (!this.typeArray.includes(value)) {
-            value = 'primary';
-        }
-        this.type = value;
-        if (this.initialized) {
-            this.setClassNames();
-        }
-    }
-    /**
-     * 大小
-     * @type xs | sm | md
-     * @default md
-     */
-    set thySize(value) {
-        if (!this.sizeArray.includes(value)) {
-            value = '';
-        }
-        this.size = value;
-        if (this.initialized) {
-            this.setClassNames();
-        }
-        if (this.loadingInitialized) {
-            this.setLoadingCircle();
-        }
-    }
-    /**
-     * 是否属于禁用状态
-     */
-    set thyDisabled(value) {
-        this.disabled = value;
-        this.setClassNames();
-    }
     get thyDisabled() {
-        return this.disabled;
-    }
-    /**
-     * 是否加载中
-     */
-    set thyLoading(value) {
-        this.loading = value;
-        if (this.initialized) {
-            this.setClassNames();
-        }
-        if (this.loading && !this.loadingInitialized) {
-            this.setLoadingCircle();
-            this.loadingInitialized = true;
-        }
+        return this.disabled();
     }
     constructor() {
         super();
-        this.cdr = inject(ChangeDetectorRef);
-        this.type = 'primary';
-        this.size = '';
-        this.disabled = false;
-        this.loading = false;
-        this.typeArray = ['primary', 'info', 'warning', 'danger'];
-        this.sizeArray = ['', 'sm', 'xs'];
-        this.loadingCircle = {};
-        this.initialized = false;
-        this.loadingInitialized = false;
-        this.isDisabledFirstChange = true;
+        /**
+         * 类型，目前分为: 'primary' |'info' | 'warning' | 'danger'
+         */
+        this.thyType = input('primary');
+        /**
+         * 大小
+         * @type xs | sm | md
+         * @default md
+         */
+        this.thySize = input('');
+        /**
+         * 是否属于禁用状态
+         */
+        this.inputDisabled = input(false, { transform: coerceBooleanProperty, alias: `thyDisabled` });
+        /**
+         * 是否加载中
+         */
+        this.thyLoading = input(false, { transform: coerceBooleanProperty });
         /**
          * 数据变化的回调事件，即将被弃用，请使用 ngModelChange
          * @deprecated
          */
-        this.thyChange = new EventEmitter();
+        this.thyChange = output();
+        this.model = signal(false);
+        this.disabled = signal(false);
+        this.type = computed(() => {
+            if (!supportedTypes.includes(this.thyType())) {
+                return 'primary';
+            }
+            else {
+                return this.thyType();
+            }
+        });
+        this.size = computed(() => {
+            if (!supportedSizes.includes(this.thySize())) {
+                return '';
+            }
+            else {
+                return this.thySize();
+            }
+        });
+        this.classNames = computed(() => {
+            const classList = [`thy-switch-${this.type()}`];
+            if (this.size()) {
+                classList.push(`thy-switch-${this.size()}`);
+            }
+            if (this.disabled() || this.thyLoading()) {
+                classList.push(`thy-switch-disabled`);
+                if (this.model()) {
+                    classList.push(`thy-switch-disabled-true`);
+                }
+            }
+            return classList;
+        });
+        this.loadingCircle = computed(() => {
+            const svgSize = { xs: 12, sm: 16 };
+            const circleSize = svgSize[this.size()] ?? 20;
+            const centerPoint = circleSize / 2;
+            const r = circleSize / 4;
+            return {
+                viewBox: `0 0 ${circleSize} ${circleSize}`,
+                cx: centerPoint,
+                cy: centerPoint,
+                r: r,
+                dasharray: `${2 * Math.PI * r * 0.75} ${2 * Math.PI * r * 0.25}`
+            };
+        });
         this.onModelChange = () => { };
         this.onModelTouched = () => { };
-    }
-    ngOnInit() {
-        this.setClassNames();
-        this.initialized = true;
+        this.switchElementRef = viewChild('switch', { read: (ElementRef) });
+        this.cdr = inject(ChangeDetectorRef);
+        effect(() => {
+            this.disabled.set(this.inputDisabled());
+        });
     }
     writeValue(value) {
-        this.model = value;
+        this.model.set(value);
         this.cdr.markForCheck();
-        // this.setClassNames();
     }
     registerOnChange(fn) {
         this.onModelChange = fn;
@@ -100,85 +104,21 @@ class ThySwitch extends TabIndexDisabledControlValueAccessorMixin {
         this.onModelTouched = fn;
     }
     setDisabledState(isDisabled) {
-        this.disabled = (this.isDisabledFirstChange && this.thyDisabled) || isDisabled;
-        this.isDisabledFirstChange = false;
-        this.setClassNames();
+        this.disabled.set(isDisabled);
     }
     toggle(event) {
-        this.model = !this.model;
-        this.onModelChange(this.model);
+        this.model.set(!this.model());
+        this.onModelChange(this.model());
         this.onModelTouched();
-        this.thyChange.emit(event);
-    }
-    setClassNames() {
-        this.classNames = [`thy-switch-${this.type}`];
-        if (this.size) {
-            this.classNames.push(`thy-switch-${this.size}`);
-        }
-        if (this.disabled || this.loading) {
-            this.classNames.push(`thy-switch-disabled`);
-            if (this.model) {
-                this.classNames.push(`thy-switch-disabled-true`);
-            }
-        }
-        this.cdr.markForCheck();
-    }
-    setLoadingCircle() {
-        const svgSize = {
-            ['xs']: 12,
-            ['sm']: 16,
-            ['']: 20
-        };
-        const circleSize = svgSize[this.size];
-        const centerPoint = circleSize / 2;
-        const r = circleSize / 4;
-        this.loadingCircle = {
-            viewBox: `0 0 ${circleSize} ${circleSize}`,
-            cx: centerPoint,
-            cy: centerPoint,
-            r: r,
-            dasharray: `${2 * Math.PI * r * 0.75} ${2 * Math.PI * r * 0.25}`
-        };
-        this.cdr.markForCheck();
+        this.thyChange?.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySwitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySwitch, isStandalone: true, selector: "thy-switch", inputs: { thyType: "thyType", thySize: "thySize", thyDisabled: ["thyDisabled", "thyDisabled", coerceBooleanProperty], thyLoading: ["thyLoading", "thyLoading", coerceBooleanProperty] }, outputs: { thyChange: "thyChange" }, host: { properties: { "class.thy-switch-xs": "size === \"xs\"", "class.thy-switch-sm": "size === \"sm\"" }, classAttribute: "thy-switch" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ThySwitch),
-                multi: true
-            }
-        ], viewQueries: [{ propertyName: "switchElementRef", first: true, predicate: ["switch"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<label #switch class=\"thy-switch\" [ngClass]=\"classNames\">\n  <input\n    type=\"checkbox\"\n    [attr.tabindex]=\"-1\"\n    [disabled]=\"disabled || loading\"\n    class=\"thy-switch-input\"\n    [checked]=\"model\"\n    (change)=\"toggle($event)\" />\n  <span class=\"thy-switch-label\" [attr.tabindex]=\"tabIndex\"></span>\n  <span class=\"thy-switch-handle\">\n    @if (loading) {\n      <svg [attr.viewBox]=\"loadingCircle?.viewBox\" [class.mb-1]=\"size === 'xs'\">\n        <circle\n          class=\"thy-switch-loading\"\n          [style.transform-origin]=\"loadingCircle?.cx + 'px ' + loadingCircle?.cy + 'px'\"\n          [attr.cx]=\"loadingCircle?.cx\"\n          [attr.cy]=\"loadingCircle?.cy\"\n          [attr.r]=\"loadingCircle?.r\"\n          [attr.stroke]=\"model ? 'rgba(102,152,255,1)' : 'rgba(202,202,202,1)'\"\n          stroke-width=\"1\"\n          [attr.stroke-dasharray]=\"loadingCircle?.dasharray\"\n          fill=\"white\" />\n      </svg>\n    }\n  </span>\n</label>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThySwitch, isStandalone: true, selector: "thy-switch", inputs: { thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "thyDisabled", isSignal: true, isRequired: false, transformFunction: null }, thyLoading: { classPropertyName: "thyLoading", publicName: "thyLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { thyChange: "thyChange" }, host: { properties: { "class.thy-switch-xs": "size() === \"xs\"", "class.thy-switch-sm": "size() === \"sm\"" }, classAttribute: "thy-switch" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ThySwitch), multi: true }], viewQueries: [{ propertyName: "switchElementRef", first: true, predicate: ["switch"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<label #switch class=\"thy-switch\" [ngClass]=\"classNames()\">\n  <input\n    type=\"checkbox\"\n    [attr.tabindex]=\"-1\"\n    [disabled]=\"disabled() || thyLoading()\"\n    class=\"thy-switch-input\"\n    [checked]=\"model()\"\n    (change)=\"toggle($event)\" />\n  <span class=\"thy-switch-label\" [attr.tabindex]=\"tabIndex\"></span>\n  <span class=\"thy-switch-handle\">\n    @if (thyLoading()) {\n      @let circleConfig = loadingCircle();\n      <svg [attr.viewBox]=\"circleConfig?.viewBox\" [class.mb-1]=\"size() === 'xs'\">\n        <circle\n          class=\"thy-switch-loading\"\n          [style.transform-origin]=\"circleConfig?.cx + 'px ' + circleConfig?.cy + 'px'\"\n          [attr.cx]=\"circleConfig?.cx\"\n          [attr.cy]=\"circleConfig?.cy\"\n          [attr.r]=\"circleConfig?.r\"\n          [attr.stroke]=\"model() ? 'rgba(102,152,255,1)' : 'rgba(202,202,202,1)'\"\n          stroke-width=\"1\"\n          [attr.stroke-dasharray]=\"circleConfig?.dasharray\"\n          fill=\"white\" />\n      </svg>\n    }\n  </span>\n</label>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySwitch, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-switch', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ThySwitch),
-                            multi: true
-                        }
-                    ], imports: [NgClass], host: {
-                        class: 'thy-switch',
-                        '[class.thy-switch-xs]': 'size === "xs"',
-                        '[class.thy-switch-sm]': 'size === "sm"'
-                    }, template: "<label #switch class=\"thy-switch\" [ngClass]=\"classNames\">\n  <input\n    type=\"checkbox\"\n    [attr.tabindex]=\"-1\"\n    [disabled]=\"disabled || loading\"\n    class=\"thy-switch-input\"\n    [checked]=\"model\"\n    (change)=\"toggle($event)\" />\n  <span class=\"thy-switch-label\" [attr.tabindex]=\"tabIndex\"></span>\n  <span class=\"thy-switch-handle\">\n    @if (loading) {\n      <svg [attr.viewBox]=\"loadingCircle?.viewBox\" [class.mb-1]=\"size === 'xs'\">\n        <circle\n          class=\"thy-switch-loading\"\n          [style.transform-origin]=\"loadingCircle?.cx + 'px ' + loadingCircle?.cy + 'px'\"\n          [attr.cx]=\"loadingCircle?.cx\"\n          [attr.cy]=\"loadingCircle?.cy\"\n          [attr.r]=\"loadingCircle?.r\"\n          [attr.stroke]=\"model ? 'rgba(102,152,255,1)' : 'rgba(202,202,202,1)'\"\n          stroke-width=\"1\"\n          [attr.stroke-dasharray]=\"loadingCircle?.dasharray\"\n          fill=\"white\" />\n      </svg>\n    }\n  </span>\n</label>\n" }]
-        }], ctorParameters: () => [], propDecorators: { switchElementRef: [{
-                type: ViewChild,
-                args: ['switch', { static: true }]
-            }], thyType: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyDisabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyLoading: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'thy-switch', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ThySwitch), multi: true }], imports: [NgClass], host: { class: 'thy-switch', '[class.thy-switch-xs]': 'size() === "xs"', '[class.thy-switch-sm]': 'size() === "sm"' }, template: "<label #switch class=\"thy-switch\" [ngClass]=\"classNames()\">\n  <input\n    type=\"checkbox\"\n    [attr.tabindex]=\"-1\"\n    [disabled]=\"disabled() || thyLoading()\"\n    class=\"thy-switch-input\"\n    [checked]=\"model()\"\n    (change)=\"toggle($event)\" />\n  <span class=\"thy-switch-label\" [attr.tabindex]=\"tabIndex\"></span>\n  <span class=\"thy-switch-handle\">\n    @if (thyLoading()) {\n      @let circleConfig = loadingCircle();\n      <svg [attr.viewBox]=\"circleConfig?.viewBox\" [class.mb-1]=\"size() === 'xs'\">\n        <circle\n          class=\"thy-switch-loading\"\n          [style.transform-origin]=\"circleConfig?.cx + 'px ' + circleConfig?.cy + 'px'\"\n          [attr.cx]=\"circleConfig?.cx\"\n          [attr.cy]=\"circleConfig?.cy\"\n          [attr.r]=\"circleConfig?.r\"\n          [attr.stroke]=\"model() ? 'rgba(102,152,255,1)' : 'rgba(202,202,202,1)'\"\n          stroke-width=\"1\"\n          [attr.stroke-dasharray]=\"circleConfig?.dasharray\"\n          fill=\"white\" />\n      </svg>\n    }\n  </span>\n</label>\n" }]
+        }], ctorParameters: () => [] });
 
 class ThySwitchModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThySwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }