ngx-tethys 19.0.13 → 19.1.0-next.0

package/fesm2022/ngx-tethys-progress.mjs

@@ -1,6 +1,6 @@
 import { isString, isNumber } from 'ngx-tethys/util';
 import * as i0 from '@angular/core';
-import { numberAttribute, Input, ViewEncapsulation, Component, InjectionToken, inject, HostBinding, ViewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { input, numberAttribute, computed, effect, ViewEncapsulation, Component, InjectionToken, inject, viewChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { useHostRenderer } from '@tethys/cdk/dom';
 import { NgClass, NgStyle, NgTemplateOutlet, CommonModule } from '@angular/common';
 import { ThyTooltipDirective, ThyTooltipModule } from 'ngx-tethys/tooltip';
@@ -9,131 +9,114 @@ import { ThyTooltipDirective, ThyTooltipModule } from 'ngx-tethys/tooltip';
  * @private
  */
 class ThyProgressCircle {
-    set thyType(type) {
-        this.hostRenderer.updateClass(type ? [`progress-circle-${type}`] : []);
-    }
-    set thySize(size) {
-        if (size) {
-            if (isString(size)) {
-                this.progressSize = `progress-circle-inner-${size}`;
-            }
-            else {
-                this.width = size;
-            }
-        }
-    }
     get strokeWidth() {
-        return this.thyStrokeWidth || 6;
+        return this.thyStrokeWidth() || 6;
     }
     constructor() {
         this.hostRenderer = useHostRenderer();
-        this.thyShape = 'strip';
-        this.thyGapDegree = undefined;
-        this.thyGapPosition = 'top';
-        this.trailPathStyle = null;
-        this.width = 112;
-    }
-    ngOnInit() {
-        this.createCircleProgress();
-    }
-    ngOnChanges(changes) {
-        const { thyGapDegree, thyValue, thyGapPosition } = changes;
-        if (thyGapDegree || thyValue || thyGapPosition) {
-            this.createCircleProgress();
-        }
-    }
-    createCircleProgress() {
-        let values = [];
-        if (Array.isArray(this.thyValue)) {
-            let totalValue = 0;
-            values = this.thyValue.map((item, index) => {
-                totalValue += item.value;
-                const currentValue = +((totalValue / this.thyMax) * 100).toFixed(2);
-                return { ...item, value: currentValue };
-            });
-        }
-        else {
-            values = [{ value: this.thyValue }];
-        }
-        const radius = 50 - this.strokeWidth / 2;
-        const gapPosition = this.thyGapPosition || 'top';
-        const len = Math.PI * 2 * radius;
-        const gapDegree = this.thyGapDegree || 0;
-        let beginPositionX = 0;
-        let beginPositionY = -radius;
-        let endPositionX = 0;
-        let endPositionY = radius * -2;
-        switch (gapPosition) {
-            case 'left':
-                beginPositionX = -radius;
-                beginPositionY = 0;
-                endPositionX = radius * 2;
-                endPositionY = 0;
-                break;
-            case 'right':
-                beginPositionX = radius;
-                beginPositionY = 0;
-                endPositionX = radius * -2;
-                endPositionY = 0;
-                break;
-            case 'bottom':
-                beginPositionY = radius;
-                endPositionY = radius * 2;
-                break;
-            default:
-        }
-        this.pathString = `M 50,50 m ${beginPositionX},${beginPositionY} a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY} a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
-        this.trailPathStyle = {
-            strokeDasharray: `${len - gapDegree}px ${len}px`,
-            strokeDashoffset: `-${gapDegree / 2}px`,
-            transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
-        };
-        this.progressCirclePath = values
-            .map((item, index) => {
-            return {
-                stroke: null,
-                value: +item.value,
-                className: item.type ? `progress-circle-path-${item.type}` : null,
-                strokePathStyle: {
-                    stroke: item?.color ? item?.color : null,
-                    transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s',
-                    strokeDasharray: `${((item.value || 0) / 100) * (len - gapDegree)}px ${len}px`,
-                    strokeDashoffset: `-${gapDegree / 2}px`
-                }
+        this.thyType = input(undefined);
+        this.thySize = input(undefined);
+        this.thyValue = input(undefined);
+        this.thyMax = input(undefined, { transform: numberAttribute });
+        this.thyTips = input(undefined);
+        this.thyShape = input('strip');
+        this.thyGapDegree = input(undefined, { transform: numberAttribute });
+        this.thyGapPosition = input('top');
+        this.thyStrokeWidth = input(undefined, { transform: numberAttribute });
+        this.progressSize = computed(() => {
+            const size = this.thySize();
+            if (size && isString(size)) {
+                return `progress-circle-inner-${size}`;
+            }
+            return '';
+        });
+        this.width = computed(() => {
+            const size = this.thySize();
+            if (size && isNumber(size)) {
+                return size;
+            }
+            return 112;
+        });
+        this.circle = computed(() => {
+            let values = [];
+            const thyValue = this.thyValue();
+            if (Array.isArray(thyValue)) {
+                let totalValue = 0;
+                values = thyValue.map((item, index) => {
+                    totalValue += item.value;
+                    const currentValue = +((totalValue / this.thyMax()) * 100).toFixed(2);
+                    return { ...item, value: currentValue };
+                });
+            }
+            else {
+                values = [{ value: thyValue }];
+            }
+            const radius = 50 - this.strokeWidth / 2;
+            const gapPosition = this.thyGapPosition() || 'top';
+            const len = Math.PI * 2 * radius;
+            const gapDegree = this.thyGapDegree() || 0;
+            let beginPositionX = 0;
+            let beginPositionY = -radius;
+            let endPositionX = 0;
+            let endPositionY = radius * -2;
+            switch (gapPosition) {
+                case 'left':
+                    beginPositionX = -radius;
+                    beginPositionY = 0;
+                    endPositionX = radius * 2;
+                    endPositionY = 0;
+                    break;
+                case 'right':
+                    beginPositionX = radius;
+                    beginPositionY = 0;
+                    endPositionX = radius * -2;
+                    endPositionY = 0;
+                    break;
+                case 'bottom':
+                    beginPositionY = radius;
+                    endPositionY = radius * 2;
+                    break;
+                default:
+            }
+            const pathString = `M 50,50 m ${beginPositionX},${beginPositionY} a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY} a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
+            const trailPathStyle = {
+                strokeDasharray: `${len - gapDegree}px ${len}px`,
+                strokeDashoffset: `-${gapDegree / 2}px`,
+                transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
             };
-        })
-            .reverse();
+            const progressCirclePath = values
+                .map((item, index) => {
+                return {
+                    stroke: '',
+                    value: +item.value,
+                    className: item.type ? `progress-circle-path-${item.type}` : null,
+                    strokePathStyle: {
+                        stroke: item?.color ? item?.color : null,
+                        transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s',
+                        strokeDasharray: `${((item.value || 0) / 100) * (len - gapDegree)}px ${len}px`,
+                        strokeDashoffset: `-${gapDegree / 2}px`
+                    }
+                };
+            })
+                .reverse();
+            return { pathString, trailPathStyle, progressCirclePath };
+        });
+        effect(() => {
+            const type = this.thyType();
+            this.hostRenderer.updateClass(type ? [`progress-circle-${type}`] : []);
+        });
     }
+    ngOnInit() { }
+    ngOnChanges(changes) { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyProgressCircle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyProgressCircle, isStandalone: true, selector: "thy-progress-circle", inputs: { thyType: "thyType", thySize: "thySize", thyValue: "thyValue", thyMax: ["thyMax", "thyMax", numberAttribute], thyTips: "thyTips", thyShape: "thyShape", thyGapDegree: ["thyGapDegree", "thyGapDegree", numberAttribute], thyGapPosition: "thyGapPosition", thyStrokeWidth: ["thyStrokeWidth", "thyStrokeWidth", numberAttribute] }, host: { classAttribute: "progress-circle" }, usesOnChanges: true, ngImport: i0, template: "<div\n  [thyTooltip]=\"thyTips\"\n  [thyTooltipDisabled]=\"!thyTips\"\n  [style.width.px]=\"width\"\n  [style.height.px]=\"width\"\n  [ngClass]=\"progressSize\"\n  class=\"progress-circle-inner\">\n  <svg class=\"progress-circle-svg\" viewBox=\"0 0 100 100\">\n    <path\n      class=\"progress-circle-trail\"\n      fill-opacity=\"0\"\n      [attr.d]=\"pathString\"\n      [ngStyle]=\"trailPathStyle\"\n      [attr.stroke-width]=\"strokeWidth\"></path>\n    @for (p of progressCirclePath; track $index) {\n      <path\n        class=\"progress-circle-path\"\n        [ngClass]=\"p.className\"\n        fill-opacity=\"0\"\n        [attr.d]=\"pathString\"\n        [attr.stroke-linecap]=\"'round'\"\n        [attr.stroke]=\"p.stroke\"\n        [attr.stroke-width]=\"p.value ? strokeWidth : 0\"\n        [ngStyle]=\"p.strokePathStyle\"></path>\n    }\n  </svg>\n  <span class=\"progress-circle-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n", dependencies: [{ kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyProgressCircle, isStandalone: true, selector: "thy-progress-circle", inputs: { thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyMax: { classPropertyName: "thyMax", publicName: "thyMax", isSignal: true, isRequired: false, transformFunction: null }, thyTips: { classPropertyName: "thyTips", publicName: "thyTips", isSignal: true, isRequired: false, transformFunction: null }, thyShape: { classPropertyName: "thyShape", publicName: "thyShape", isSignal: true, isRequired: false, transformFunction: null }, thyGapDegree: { classPropertyName: "thyGapDegree", publicName: "thyGapDegree", isSignal: true, isRequired: false, transformFunction: null }, thyGapPosition: { classPropertyName: "thyGapPosition", publicName: "thyGapPosition", isSignal: true, isRequired: false, transformFunction: null }, thyStrokeWidth: { classPropertyName: "thyStrokeWidth", publicName: "thyStrokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "progress-circle" }, usesOnChanges: true, ngImport: i0, template: "@let tips = thyTips();\n@let circleAttr = circle();\n<div\n  [thyTooltip]=\"tips\"\n  [thyTooltipDisabled]=\"!tips\"\n  [style.width.px]=\"width()\"\n  [style.height.px]=\"width()\"\n  [ngClass]=\"progressSize()\"\n  class=\"progress-circle-inner\">\n  <svg class=\"progress-circle-svg\" viewBox=\"0 0 100 100\">\n    <path\n      class=\"progress-circle-trail\"\n      fill-opacity=\"0\"\n      [attr.d]=\"circleAttr.pathString\"\n      [ngStyle]=\"circleAttr.trailPathStyle\"\n      [attr.stroke-width]=\"strokeWidth\"></path>\n    @for (p of circleAttr.progressCirclePath; track $index) {\n      <path\n        class=\"progress-circle-path\"\n        [ngClass]=\"p.className\"\n        fill-opacity=\"0\"\n        [attr.d]=\"circleAttr.pathString\"\n        [attr.stroke-linecap]=\"'round'\"\n        [attr.stroke]=\"p.stroke\"\n        [attr.stroke-width]=\"p.value ? strokeWidth : 0\"\n        [ngStyle]=\"p.strokePathStyle\"></path>\n    }\n  </svg>\n  <span class=\"progress-circle-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n", dependencies: [{ kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyProgressCircle, decorators: [{
             type: Component,
             args: [{ selector: 'thy-progress-circle', encapsulation: ViewEncapsulation.None, host: {
                         class: 'progress-circle'
-                    }, imports: [ThyTooltipDirective, NgClass, NgStyle], template: "<div\n  [thyTooltip]=\"thyTips\"\n  [thyTooltipDisabled]=\"!thyTips\"\n  [style.width.px]=\"width\"\n  [style.height.px]=\"width\"\n  [ngClass]=\"progressSize\"\n  class=\"progress-circle-inner\">\n  <svg class=\"progress-circle-svg\" viewBox=\"0 0 100 100\">\n    <path\n      class=\"progress-circle-trail\"\n      fill-opacity=\"0\"\n      [attr.d]=\"pathString\"\n      [ngStyle]=\"trailPathStyle\"\n      [attr.stroke-width]=\"strokeWidth\"></path>\n    @for (p of progressCirclePath; track $index) {\n      <path\n        class=\"progress-circle-path\"\n        [ngClass]=\"p.className\"\n        fill-opacity=\"0\"\n        [attr.d]=\"pathString\"\n        [attr.stroke-linecap]=\"'round'\"\n        [attr.stroke]=\"p.stroke\"\n        [attr.stroke-width]=\"p.value ? strokeWidth : 0\"\n        [ngStyle]=\"p.strokePathStyle\"></path>\n    }\n  </svg>\n  <span class=\"progress-circle-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { thyType: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyValue: [{
-                type: Input
-            }], thyMax: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyTips: [{
-                type: Input
-            }], thyShape: [{
-                type: Input
-            }], thyGapDegree: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyGapPosition: [{
-                type: Input
-            }], thyStrokeWidth: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }] } });
+                    }, imports: [ThyTooltipDirective, NgClass, NgStyle], template: "@let tips = thyTips();\n@let circleAttr = circle();\n<div\n  [thyTooltip]=\"tips\"\n  [thyTooltipDisabled]=\"!tips\"\n  [style.width.px]=\"width()\"\n  [style.height.px]=\"width()\"\n  [ngClass]=\"progressSize()\"\n  class=\"progress-circle-inner\">\n  <svg class=\"progress-circle-svg\" viewBox=\"0 0 100 100\">\n    <path\n      class=\"progress-circle-trail\"\n      fill-opacity=\"0\"\n      [attr.d]=\"circleAttr.pathString\"\n      [ngStyle]=\"circleAttr.trailPathStyle\"\n      [attr.stroke-width]=\"strokeWidth\"></path>\n    @for (p of circleAttr.progressCirclePath; track $index) {\n      <path\n        class=\"progress-circle-path\"\n        [ngClass]=\"p.className\"\n        fill-opacity=\"0\"\n        [attr.d]=\"circleAttr.pathString\"\n        [attr.stroke-linecap]=\"'round'\"\n        [attr.stroke]=\"p.stroke\"\n        [attr.stroke-width]=\"p.value ? strokeWidth : 0\"\n        [ngStyle]=\"p.strokePathStyle\"></path>\n    }\n  </svg>\n  <span class=\"progress-circle-content\">\n    <ng-content></ng-content>\n  </span>\n</div>\n" }]
+        }], ctorParameters: () => [] });
 
 const THY_PROGRESS_COMPONENT = new InjectionToken('THY_PROGRESS_COMPONENT');
 /**
@@ -143,137 +126,134 @@ class ThyProgressStrip {
     constructor() {
         this.progress = inject(THY_PROGRESS_COMPONENT);
         this.hostRenderer = useHostRenderer();
-        this.isProgressBar = true;
-        this.percent = 0;
-    }
-    set thyType(type) {
-        this.hostRenderer.updateClass(type ? [`progress-bar-${type}`] : []);
-    }
-    set thyValue(value) {
-        if (!value && value !== 0) {
-            return;
-        }
-        this.value = value;
-        this.recalculatePercentage();
-    }
-    set thyColor(color) {
-        this.color = color || '';
-    }
-    recalculatePercentage() {
-        this.percent = +((this.value / this.progress.max) * 100).toFixed(2);
+        this.thyTips = input(undefined);
+        this.thyType = input();
+        this.thyValue = input(0, {
+            transform: numberAttribute
+        });
+        this.thyColor = input();
+        this.percent = computed(() => {
+            const value = this.thyValue();
+            if (!value && value !== 0) {
+                return 0;
+            }
+            return +((value / this.progress.max()) * 100).toFixed(2);
+        });
+        effect(() => {
+            const type = this.thyType();
+            this.hostRenderer.updateClass(type ? [`progress-bar-${type}`] : []);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyProgressStrip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.8", type: ThyProgressStrip, isStandalone: true, selector: "thy-progress-bar", inputs: { thyTips: "thyTips", thyType: "thyType", thyValue: ["thyValue", "thyValue", numberAttribute], thyColor: "thyColor" }, host: { properties: { "class.progress-bar": "this.isProgressBar", "style.width.%": "this.percent" } }, ngImport: i0, template: "<div class=\"progress-bar-inner\" [ngStyle]=\"{ 'background-color': color }\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyProgressStrip, isStandalone: true, selector: "thy-progress-bar", inputs: { thyTips: { classPropertyName: "thyTips", publicName: "thyTips", isSignal: true, isRequired: false, transformFunction: null }, thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: true, isRequired: false, transformFunction: null }, thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyColor: { classPropertyName: "thyColor", publicName: "thyColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.%": "percent()" }, classAttribute: "progress-bar" }, ngImport: i0, template: "<div class=\"progress-bar-inner\" [ngStyle]=\"{ 'background-color': thyColor() }\">\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyProgressStrip, decorators: [{
             type: Component,
-            args: [{ selector: 'thy-progress-bar', encapsulation: ViewEncapsulation.None, imports: [NgStyle], template: "<div class=\"progress-bar-inner\" [ngStyle]=\"{ 'background-color': color }\">\n  <ng-content></ng-content>\n</div>\n" }]
-        }], propDecorators: { isProgressBar: [{
-                type: HostBinding,
-                args: [`class.progress-bar`]
-            }], percent: [{
-                type: HostBinding,
-                args: ['style.width.%']
-            }], thyTips: [{
-                type: Input
-            }], thyType: [{
-                type: Input
-            }], thyValue: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyColor: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'thy-progress-bar', encapsulation: ViewEncapsulation.None, imports: [NgStyle], host: {
+                        class: 'progress-bar',
+                        '[style.width.%]': 'percent()'
+                    }, template: "<div class=\"progress-bar-inner\" [ngStyle]=\"{ 'background-color': thyColor() }\">\n  <ng-content></ng-content>\n</div>\n" }]
+        }], ctorParameters: () => [] });
 
 /**
  * 进度条组件
  * @name thy-progress
  */
 class ThyProgress {
-    set barsQueryList(value) {
-        this.bars = value.toArray();
-    }
-    /**
-     * 进度条大小
-     * @type xs | sm | md
-     * @default md
-     */
-    set thySize(size) {
-        this.size = size;
-        this.hostRenderer.updateClass(size ? [`progress-${size}`] : []);
-    }
-    /**
-     * 进度值，传入数字时显示百分比 = value / max * 100，当传入数组时显示多个 bar，stacked 模式的进度条
-     * @type number | ThyProgressStackedValue[]
-     */
-    set thyValue(value) {
-        // 自动求和计算 max
-        if (Array.isArray(value)) {
-            this.isStacked = true;
-            this.value = [...value].filter(item => item.value !== 0);
-            this.barsTotalValue = this.value.reduce((total, item) => {
-                return total + item.value;
-            }, 0);
-            this.calculateMax();
-        }
-        else {
-            this.value = value;
-        }
-    }
-    /**
-     * 最大值，主要计算百分比进度的分母使用，当 thyValue 传入数组时，自动累加数组中的 value 之和为 max
-     */
-    set thyMax(max) {
-        this.settedMax = max;
-        this.calculateMax();
-    }
     constructor() {
-        this.bars = [];
         this.hostRenderer = useHostRenderer();
-        this.max = 100;
-        this.isStacked = false;
+        this.barsTotalValue = computed(() => {
+            const value = this.thyValue();
+            if (Array.isArray(value)) {
+                return value.reduce((total, item) => {
+                    return total + item.value;
+                }, 0);
+            }
+            return undefined;
+        });
+        this.max = computed(() => {
+            const setMax = this.thyMax();
+            const barsTotalValue = this.barsTotalValue();
+            let result = 100;
+            if (isNumber(setMax) && setMax > 0) {
+                result = setMax;
+            }
+            else if (isNumber(barsTotalValue)) {
+                result = barsTotalValue;
+            }
+            if (result < barsTotalValue) {
+                result = barsTotalValue;
+            }
+            return result;
+        });
+        this.isStacked = computed(() => {
+            return Array.isArray(this.thyValue());
+        });
+        this.bars = viewChildren(ThyProgressStrip);
         /**
          * 进度条类型: `primary` | `success` | `info` | `warning` | `danger`
          */
-        this.thyType = 'primary';
+        this.thyType = input('primary');
+        /**
+         * 进度条大小
+         * @type xs | sm | md
+         * @default md
+         */
+        this.thySize = input('md');
+        /**
+         * 进度值，传入数字时显示百分比 = value / max * 100，当传入数组时显示多个 bar，stacked 模式的进度条
+         * @type number | ThyProgressStackedValue[]
+         */
+        this.thyValue = input(undefined, {
+            transform: (value) => {
+                if (Array.isArray(value)) {
+                    return [...value].filter(item => item.value !== 0);
+                }
+                else {
+                    return value;
+                }
+            }
+        });
+        /**
+         * 最大值，主要计算百分比进度的分母使用，当 thyValue 传入数组时，自动累加数组中的 value 之和为 max
+         */
+        this.thyMax = input(undefined, { transform: numberAttribute });
+        /**
+         * 鼠标移入进度条时显示的提示文案或者模板
+         */
+        this.thyTips = input(undefined);
         /**
          * 进度形状
          * @type strip | circle
          */
-        this.thyShape = 'strip';
+        this.thyShape = input('strip');
         /**
          * 圆形进度条缺口角度，可取值 0 ~ 360
          */
-        this.thyGapDegree = undefined;
+        this.thyGapDegree = input(undefined, { transform: numberAttribute });
         /**
          * 圆形进度条缺口位置
          * @type top | bottom | left | right
          */
-        this.thyGapPosition = 'top';
+        this.thyGapPosition = input('top');
+        /**
+         * 	圆形进度条线的宽度
+         */
+        this.thyStrokeWidth = input(undefined, { transform: numberAttribute });
+        effect(() => {
+            const size = this.thySize();
+            this.hostRenderer.updateClass(size ? [`progress-${size}`] : []);
+        });
     }
     ngOnInit() { }
     ngOnChanges(changes) { }
-    calculateMax() {
-        if (isNumber(this.settedMax) && this.settedMax > 0) {
-            this.max = this.settedMax;
-        }
-        else {
-            this.max = this.barsTotalValue;
-        }
-        if (this.max < this.barsTotalValue) {
-            this.max = this.barsTotalValue;
-        }
-        this.bars.forEach(bar => {
-            bar.recalculatePercentage();
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyProgress, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyProgress, isStandalone: true, selector: "thy-progress", inputs: { thyType: "thyType", thySize: "thySize", thyValue: "thyValue", thyMax: ["thyMax", "thyMax", numberAttribute], thyTips: "thyTips", thyShape: "thyShape", thyGapDegree: ["thyGapDegree", "thyGapDegree", numberAttribute], thyGapPosition: "thyGapPosition", thyStrokeWidth: ["thyStrokeWidth", "thyStrokeWidth", numberAttribute] }, host: { properties: { "class.thy-progress-strip": "thyShape === 'strip'", "class.thy-progress-circle": "thyShape === 'circle'", "attr.max": "this.max", "class.progress-stacked": "this.isStacked" }, classAttribute: "thy-progress progress" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyProgress, isStandalone: true, selector: "thy-progress", inputs: { thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyValue: { classPropertyName: "thyValue", publicName: "thyValue", isSignal: true, isRequired: false, transformFunction: null }, thyMax: { classPropertyName: "thyMax", publicName: "thyMax", isSignal: true, isRequired: false, transformFunction: null }, thyTips: { classPropertyName: "thyTips", publicName: "thyTips", isSignal: true, isRequired: false, transformFunction: null }, thyShape: { classPropertyName: "thyShape", publicName: "thyShape", isSignal: true, isRequired: false, transformFunction: null }, thyGapDegree: { classPropertyName: "thyGapDegree", publicName: "thyGapDegree", isSignal: true, isRequired: false, transformFunction: null }, thyGapPosition: { classPropertyName: "thyGapPosition", publicName: "thyGapPosition", isSignal: true, isRequired: false, transformFunction: null }, thyStrokeWidth: { classPropertyName: "thyStrokeWidth", publicName: "thyStrokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-progress-strip": "thyShape() === 'strip'", "class.thy-progress-circle": "thyShape() === 'circle'", "class.progress-stacked": "isStacked()", "attr.max": "max()" }, classAttribute: "thy-progress progress" }, providers: [
             {
                 provide: THY_PROGRESS_COMPONENT,
                 useExisting: ThyProgress
             }
-        ], viewQueries: [{ propertyName: "barsQueryList", predicate: ThyProgressStrip, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  @if (thyShape === 'strip') {\n    <div class=\"thy-progress-strip-outer\">\n      @if (isStacked) {\n        @for (item of value; track $index) {\n          <thy-progress-bar\n            [thyType]=\"item.type\"\n            [ngClass]=\"{ 'cursor-pointer': item.tips || thyTips }\"\n            [thyTooltip]=\"item.tips || thyTips\"\n            [thyTooltipTemplateContext]=\"item\"\n            [thyTooltipDisabled]=\"!thyTips && !item.tips\"\n            [thyColor]=\"item.color\"\n            [thyValue]=\"item.value\"\n            >{{ item.label }}\n          </thy-progress-bar>\n        }\n      } @else {\n        @if (value) {\n          <thy-progress-bar\n            [thyType]=\"thyType\"\n            [ngClass]=\"{ 'cursor-pointer': thyTips }\"\n            [thyTooltip]=\"thyTips\"\n            [thyTooltipTemplateContext]=\"value\"\n            [thyTooltipDisabled]=\"!thyTips\"\n            [thyValue]=\"value\">\n          </thy-progress-bar>\n        }\n      }\n    </div>\n    @if (thyShape === 'strip') {\n      <div class=\"thy-progress-strip-text\">\n        <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template>\n      </div>\n    }\n  } @else {\n    <thy-progress-circle\n      [thyType]=\"thyType\"\n      [thyTooltip]=\"thyTips\"\n      [thyTooltipDisabled]=\"!thyTips\"\n      [thyTooltipTemplateContext]=\"value\"\n      [thyValue]=\"value\"\n      [thySize]=\"size\"\n      [thyMax]=\"max\"\n      [thyGapDegree]=\"thyGapDegree\"\n      [thyGapPosition]=\"thyGapPosition\"\n      [thyStrokeWidth]=\"thyStrokeWidth\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template\n    ></thy-progress-circle>\n  }\n</ng-container>\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyProgressStrip, selector: "thy-progress-bar", inputs: ["thyTips", "thyType", "thyValue", "thyColor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyProgressCircle, selector: "thy-progress-circle", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "bars", predicate: ThyProgressStrip, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  @if (thyShape()=== 'strip') {\n    <div class=\"thy-progress-strip-outer\">\n      @if (isStacked()) {\n        @for (item of thyValue(); track $index) {\n          <thy-progress-bar\n            [thyType]=\"item.type\"\n            [ngClass]=\"{ 'cursor-pointer': item.tips || thyTips()}\"\n            [thyTooltip]=\"item.tips || thyTips()\"\n            [thyTooltipTemplateContext]=\"item\"\n            [thyTooltipDisabled]=\"!thyTips() && !item.tips\"\n            [thyColor]=\"item.color\"\n            [thyValue]=\"item.value\"\n            >{{ item.label }}\n          </thy-progress-bar>\n        }\n      } @else {\n        @let value = thyValue();\n        @if (value) {\n          <thy-progress-bar\n            [thyType]=\"thyType()\"\n            [ngClass]=\"{ 'cursor-pointer': thyTips()}\"\n            [thyTooltip]=\"thyTips()\"\n            [thyTooltipTemplateContext]=\"value\"\n            [thyTooltipDisabled]=\"!thyTips()\"\n            [thyValue]=\"value\">\n          </thy-progress-bar>\n        }\n      }\n    </div>\n    @if (thyShape()=== 'strip') {\n      <div class=\"thy-progress-strip-text\">\n        <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template>\n      </div>\n    }\n  } @else {\n    @let value = thyValue();\n    <thy-progress-circle\n      [thyType]=\"thyType()\"\n      [thyTooltip]=\"thyTips()\"\n      [thyTooltipDisabled]=\"!thyTips()\"\n      [thyTooltipTemplateContext]=\"value\"\n      [thyValue]=\"value\"\n      [thySize]=\"thySize()\"\n      [thyMax]=\"max()\"\n      [thyGapDegree]=\"thyGapDegree()\"\n      [thyGapPosition]=\"thyGapPosition()\"\n      [thyStrokeWidth]=\"thyStrokeWidth()\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template\n    ></thy-progress-circle>\n  }\n</ng-container>\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyProgressStrip, selector: "thy-progress-bar", inputs: ["thyTips", "thyType", "thyValue", "thyColor"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyProgressCircle, selector: "thy-progress-circle", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyProgress, decorators: [{
             type: Component,
@@ -284,40 +264,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         }
                     ], host: {
                         class: `thy-progress progress`,
-                        '[class.thy-progress-strip]': `thyShape === 'strip'`,
-                        '[class.thy-progress-circle]': `thyShape === 'circle'`
-                    }, imports: [ThyProgressStrip, NgClass, ThyTooltipDirective, NgTemplateOutlet, ThyProgressCircle], template: "<ng-container>\n  @if (thyShape === 'strip') {\n    <div class=\"thy-progress-strip-outer\">\n      @if (isStacked) {\n        @for (item of value; track $index) {\n          <thy-progress-bar\n            [thyType]=\"item.type\"\n            [ngClass]=\"{ 'cursor-pointer': item.tips || thyTips }\"\n            [thyTooltip]=\"item.tips || thyTips\"\n            [thyTooltipTemplateContext]=\"item\"\n            [thyTooltipDisabled]=\"!thyTips && !item.tips\"\n            [thyColor]=\"item.color\"\n            [thyValue]=\"item.value\"\n            >{{ item.label }}\n          </thy-progress-bar>\n        }\n      } @else {\n        @if (value) {\n          <thy-progress-bar\n            [thyType]=\"thyType\"\n            [ngClass]=\"{ 'cursor-pointer': thyTips }\"\n            [thyTooltip]=\"thyTips\"\n            [thyTooltipTemplateContext]=\"value\"\n            [thyTooltipDisabled]=\"!thyTips\"\n            [thyValue]=\"value\">\n          </thy-progress-bar>\n        }\n      }\n    </div>\n    @if (thyShape === 'strip') {\n      <div class=\"thy-progress-strip-text\">\n        <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template>\n      </div>\n    }\n  } @else {\n    <thy-progress-circle\n      [thyType]=\"thyType\"\n      [thyTooltip]=\"thyTips\"\n      [thyTooltipDisabled]=\"!thyTips\"\n      [thyTooltipTemplateContext]=\"value\"\n      [thyValue]=\"value\"\n      [thySize]=\"size\"\n      [thyMax]=\"max\"\n      [thyGapDegree]=\"thyGapDegree\"\n      [thyGapPosition]=\"thyGapPosition\"\n      [thyStrokeWidth]=\"thyStrokeWidth\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template\n    ></thy-progress-circle>\n  }\n</ng-container>\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { max: [{
-                type: HostBinding,
-                args: ['attr.max']
-            }], isStacked: [{
-                type: HostBinding,
-                args: [`class.progress-stacked`]
-            }], barsQueryList: [{
-                type: ViewChildren,
-                args: [ThyProgressStrip]
-            }], thyType: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyValue: [{
-                type: Input
-            }], thyMax: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyTips: [{
-                type: Input
-            }], thyShape: [{
-                type: Input
-            }], thyGapDegree: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], thyGapPosition: [{
-                type: Input
-            }], thyStrokeWidth: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }] } });
+                        '[class.thy-progress-strip]': `thyShape() === 'strip'`,
+                        '[class.thy-progress-circle]': `thyShape() === 'circle'`,
+                        '[class.progress-stacked]': 'isStacked()',
+                        '[attr.max]': 'max()'
+                    }, imports: [ThyProgressStrip, NgClass, ThyTooltipDirective, NgTemplateOutlet, ThyProgressCircle], template: "<ng-container>\n  @if (thyShape()=== 'strip') {\n    <div class=\"thy-progress-strip-outer\">\n      @if (isStacked()) {\n        @for (item of thyValue(); track $index) {\n          <thy-progress-bar\n            [thyType]=\"item.type\"\n            [ngClass]=\"{ 'cursor-pointer': item.tips || thyTips()}\"\n            [thyTooltip]=\"item.tips || thyTips()\"\n            [thyTooltipTemplateContext]=\"item\"\n            [thyTooltipDisabled]=\"!thyTips() && !item.tips\"\n            [thyColor]=\"item.color\"\n            [thyValue]=\"item.value\"\n            >{{ item.label }}\n          </thy-progress-bar>\n        }\n      } @else {\n        @let value = thyValue();\n        @if (value) {\n          <thy-progress-bar\n            [thyType]=\"thyType()\"\n            [ngClass]=\"{ 'cursor-pointer': thyTips()}\"\n            [thyTooltip]=\"thyTips()\"\n            [thyTooltipTemplateContext]=\"value\"\n            [thyTooltipDisabled]=\"!thyTips()\"\n            [thyValue]=\"value\">\n          </thy-progress-bar>\n        }\n      }\n    </div>\n    @if (thyShape()=== 'strip') {\n      <div class=\"thy-progress-strip-text\">\n        <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template>\n      </div>\n    }\n  } @else {\n    @let value = thyValue();\n    <thy-progress-circle\n      [thyType]=\"thyType()\"\n      [thyTooltip]=\"thyTips()\"\n      [thyTooltipDisabled]=\"!thyTips()\"\n      [thyTooltipTemplateContext]=\"value\"\n      [thyValue]=\"value\"\n      [thySize]=\"thySize()\"\n      [thyMax]=\"max()\"\n      [thyGapDegree]=\"thyGapDegree()\"\n      [thyGapPosition]=\"thyGapPosition()\"\n      [thyStrokeWidth]=\"thyStrokeWidth()\">\n      <ng-template [ngTemplateOutlet]=\"contentTemplate\"></ng-template\n    ></thy-progress-circle>\n  }\n</ng-container>\n\n<ng-template #contentTemplate>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
 
 class ThyProgressModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }