@ng-nest/ui 17.0.12 → 18.0.0

package/fesm2022/ng-nest-ui-progress.mjs

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { Component, Input, inject, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import { __decorate } from 'tslib';
-import { XProperty, XInputNumber, XWithConfig, XInputBoolean, XConfigService, XIsNumber, XIsChange, XIsEmpty, XIsString, XIsObjectArray, XIsFunction } from '@ng-nest/ui/core';
+import { input, Component, computed, ViewEncapsulation, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { XPropertyFunction, XToNumber, XToCssPixelValue, XToBoolean, XIsNumber, XIsEmpty, XIsString, XIsObjectArray, XIsFunction } from '@ng-nest/ui/core';
 import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { XIconComponent } from '@ng-nest/ui/icon';
@@ -12,154 +11,273 @@ import { XIconComponent } from '@ng-nest/ui/icon';
  * @decorator component
  */
 const XProgressPrefix = 'x-progress';
-const X_CONFIG_NAME = 'progress';
+const X_PROGRESS_CONFIG_NAME = 'progress';
 /**
  * Progress Property
  */
-class XProgressProperty extends XProperty {
+class XProgressProperty extends XPropertyFunction(X_PROGRESS_CONFIG_NAME) {
     constructor() {
         super(...arguments);
         /**
          * @zh_CN 进度条类型
          * @en_US Progress bar type
          */
-        this.type = 'line';
+        this.type = input('line');
         /**
          * @zh_CN 显示进度 0-100
          * @en_US Show progress 0-100
          */
-        this.percent = 0;
+        this.percent = input(0, { transform: XToNumber });
+        /**
+         * @zh_CN 进度条高度
+         * @en_US Height of progress bar
+         */
+        this.height = input(this.config?.height ?? '1rem', { transform: XToCssPixelValue });
         /**
          * @zh_CN 状态
          * @en_US Status
          */
-        this.status = 'normal';
+        this.status = input('normal');
         /**
-         * @zh_CN 是否显示百分比文本
+         * @zh_CN 是否显示百分比文本信息
          * @en_US Whether to display percentage text
          */
-        this.info = true;
+        this.info = input(true, { transform: XToBoolean });
+        /**
+         * @zh_CN 文本信息宽度
+         * @en_US The width of the text information
+         */
+        this.infoWidth = input('3.5rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 百分比文本是否显示在进度条里面
+         * @en_US Whether the percentage text is displayed in the progress bar
+         */
+        this.inside = input(false, { transform: XToBoolean });
+        /**
+         * @zh_CN 自定义百分比文本内容
+         * @en_US Custom percentage text content
+         */
+        this.format = input();
+        /**
+         * @zh_CN 自定义颜色
+         * @en_US Custom color
+         */
+        this.color = input();
+        /**
+         * @zh_CN 渐变颜色
+         * @en_US Gradient color
+         */
+        this.gradient = input();
+        /**
+         * @zh_CN 步骤进度条
+         * @en_US Steps progress bar
+         */
+        this.steps = input(null, { transform: XToNumber });
+        /**
+         * @zh_CN 单个步骤的宽度
+         * @en_US Single step width
+         */
+        this.stepWidth = input('2rem', { transform: XToCssPixelValue });
+        /**
+         * @zh_CN 单个步骤的宽度自适应
+         * @en_US Single step width flex
+         */
+        this.stepFlex = input(false, { transform: XToBoolean });
         /**
          * @zh_CN 圆环/仪表盘厚度
          * @en_US Ring thickness
          */
-        this.thickness = '0.5rem';
+        this.thickness = input('1rem', { transform: XToCssPixelValue });
         /**
          * @zh_CN 圆环/仪表盘尺寸
          * @en_US Ring size
          */
-        this.size = '5rem';
+        this.size = input('8rem', { transform: XToCssPixelValue });
         /**
          * @zh_CN 仪表盘缺口角度 0~300
          * @en_US Dashboard notch angle
          */
-        this.notchAngle = 80;
+        this.notchAngle = input(80, { transform: XToNumber });
+        /**
+         * @zh_CN 分段显示颜色，只适用 type = 'line'
+         * @en_US Segmentation display color, only use of type = 'line'
+         */
+        this.subsection = input(false, { transform: XToBoolean });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XProgressProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: XProgressProperty, selector: "x-progress-property", inputs: { type: "type", percent: "percent", height: "height", status: "status", info: "info", inside: "inside", format: "format", color: "color", gradient: "gradient", steps: "steps", stepWidth: "stepWidth", stepFlex: "stepFlex", thickness: "thickness", size: "size", notchAngle: "notchAngle", subsection: "subsection" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XProgressProperty, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: XProgressProperty, selector: "x-progress-property", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, percent: { classPropertyName: "percent", publicName: "percent", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: false, transformFunction: null }, infoWidth: { classPropertyName: "infoWidth", publicName: "infoWidth", isSignal: true, isRequired: false, transformFunction: null }, inside: { classPropertyName: "inside", publicName: "inside", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, stepWidth: { classPropertyName: "stepWidth", publicName: "stepWidth", isSignal: true, isRequired: false, transformFunction: null }, stepFlex: { classPropertyName: "stepFlex", publicName: "stepFlex", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, notchAngle: { classPropertyName: "notchAngle", publicName: "notchAngle", isSignal: true, isRequired: false, transformFunction: null }, subsection: { classPropertyName: "subsection", publicName: "subsection", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-__decorate([
-    XInputNumber()
-], XProgressProperty.prototype, "percent", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '0.5rem')
-], XProgressProperty.prototype, "height", void 0);
-__decorate([
-    XInputBoolean()
-], XProgressProperty.prototype, "info", void 0);
-__decorate([
-    XInputBoolean()
-], XProgressProperty.prototype, "inside", void 0);
-__decorate([
-    XWithConfig(X_CONFIG_NAME, '1rem')
-], XProgressProperty.prototype, "stepWidth", void 0);
-__decorate([
-    XInputBoolean()
-], XProgressProperty.prototype, "stepFlex", void 0);
-__decorate([
-    XInputBoolean()
-], XProgressProperty.prototype, "subsection", void 0);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XProgressProperty, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XProgressProperty, decorators: [{
             type: Component,
             args: [{ selector: `${XProgressPrefix}-property`, template: '' }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], percent: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], status: [{
-                type: Input
-            }], info: [{
-                type: Input
-            }], inside: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], gradient: [{
-                type: Input
-            }], steps: [{
-                type: Input
-            }], stepWidth: [{
-                type: Input
-            }], stepFlex: [{
-                type: Input
-            }], thickness: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], notchAngle: [{
-                type: Input
-            }], subsection: [{
-                type: Input
-            }] } });
+        }] });
 
 class XProgressComponent extends XProgressProperty {
     constructor() {
         super(...arguments);
-        this.stepsArray = [];
-        this.configService = inject(XConfigService);
-    }
-    get maskWidth() {
-        return XIsNumber(this.percent) ? 100 - Number(this.percent) : 100;
-    }
-    ngOnChanges(simples) {
-        const { status, percent, gradient, steps, type, notchAngle } = simples;
-        XIsChange(type, status) && this.setClassMap();
-        XIsChange(percent) && this.setColor();
-        XIsChange(gradient) && this.setGradient();
-        XIsChange(steps, percent) && this.setSteps();
-        XIsChange(type, percent, notchAngle) && this.setType();
-    }
-    setClassMap() {
-        this.classMap = {
-            [`${XProgressPrefix}-${this.status}`]: true,
-            [`${XProgressPrefix}-${this.type}`]: true,
-            [`${XProgressPrefix}-inside`]: Boolean(this.inside)
-        };
-    }
-    setColor() {
-        if (this.subsection) {
-            this.setSubLinearGradient();
-        }
-        else {
-            if (XIsEmpty(this.color))
-                return;
-            if (XIsString(this.color)) {
-                this.currentColor = this.color;
+        this.maskWidth = computed(() => (XIsNumber(this.percent()) ? 100 - this.percent() : 100));
+        this.classMap = computed(() => ({
+            [`${XProgressPrefix}-${this.status()}`]: true,
+            [`${XProgressPrefix}-${this.type()}`]: true,
+            [`${XProgressPrefix}-inside`]: this.inside()
+        }));
+        this.stepsArray = computed(() => {
+            const steps = this.steps();
+            if (XIsEmpty(steps)) {
+                return [];
             }
-            else if (XIsObjectArray(this.color)) {
-                this.currentColor = this.getLevelColor(this.percent);
+            else {
+                const critical = Math.ceil((this.percent() / 100) * steps);
+                return Array.from({ length: steps }).map((_, index) => index + 1 <= critical);
             }
-            else if (XIsFunction(this.color)) {
-                this.currentColor = this.color(this.percent);
+        });
+        this.currentColor = computed(() => {
+            if (this.subsection())
+                return '';
+            const color = this.color();
+            if (XIsEmpty(color))
+                return '';
+            if (XIsString(color)) {
+                return color;
             }
-        }
+            else if (XIsObjectArray(color)) {
+                return this.getLevelColor(this.percent(), color);
+            }
+            else if (XIsFunction(color)) {
+                return color(this.percent());
+            }
+        });
+        this.linearGradient = computed(() => {
+            if (this.subsection())
+                return '';
+            if (XIsEmpty(this.gradient())) {
+                return '';
+            }
+            else {
+                const { from, to, direction = 'to right', ...percents } = this.gradient() || {};
+                if (Object.keys(percents).length !== 0) {
+                    return `linear-gradient(${direction}, ${this.sortGradient(percents).map(({ key, value }) => `${value} ${key}%`)})`;
+                }
+                return `linear-gradient(${direction}, ${from}, ${to})`;
+            }
+        });
+        /**
+         * circle 中的 100% 等于 clip-path 中的 400%
+         */
+        this.circleClipPath = computed(() => {
+            if (this.type() !== 'circle')
+                return '';
+            let value = this.percent() * 4;
+            let k1 = 'polygon(50% 50%,50% 0%,';
+            let k2 = k1 + '100% 0%,';
+            let k3 = k2 + '100% 100%,';
+            let k4 = k3 + '0% 100%,';
+            let k5 = k4 + '0% 0%,';
+            if (value <= 50) {
+                value += 50;
+                return `${k1}${value}% 0%)`;
+            }
+            else if (value > 50 && value <= 150) {
+                value -= 50;
+                return `${k2}100% ${value}%)`;
+            }
+            else if (value > 150 && value <= 250) {
+                value = 250 - value;
+                return `${k3}${value}% 100%)`;
+            }
+            else if (value > 250 && value <= 350) {
+                value = 350 - value;
+                return `${k4}0% ${value}%)`;
+            }
+            else if (value > 350 && value <= 400) {
+                value -= 350;
+                return `${k5}${value}% 0%)`;
+            }
+            return '';
+        });
+        this.railValue = computed(() => {
+            if (this.type() !== 'dashboard')
+                return 0;
+            return (this.notchAngle() / 360) * 50 * 4;
+        });
+        this.dashboardStart = computed(() => {
+            if (this.type() !== 'dashboard')
+                return '';
+            let k1 = `polygon(50% 50%,`;
+            let per = 0;
+            let railValue = this.railValue();
+            if (railValue <= 50) {
+                per = 50 - railValue;
+                return `${k1} ${per}% 100%`;
+            }
+            else if (railValue > 50 && railValue <= 150) {
+                per = 150 - railValue;
+                return `${k1} 0% ${per}%`;
+            }
+            else if (railValue > 150 && railValue <= 250) {
+                per = railValue - 150;
+                return `${k1} ${per}% 0%`;
+            }
+            return '';
+        });
+        /**
+         *
+         * 90 polygon(50% 50%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
+         * 180 polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 50%);
+         * 270 polygon(50% 50%, 0% 0%, 100% 0%);
+         */
+        this.dashboardRailClipPath = computed(() => {
+            if (this.type() !== 'dashboard')
+                return '';
+            let start = this.dashboardStart();
+            let per = 0;
+            let railValue = this.railValue();
+            if (railValue <= 50) {
+                per = 50 - railValue;
+                return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% 100%, ${100 - per}% 100%)`;
+            }
+            else if (railValue > 50 && railValue <= 150) {
+                per = 150 - railValue;
+                return `${start}, 0% 0%, 100% 0%, 100% ${per}%)`;
+            }
+            else if (railValue > 150 && railValue <= 250) {
+                per = railValue - 150;
+                return `${start}, ${100 - per}% 0%)`;
+            }
+            return '';
+        });
+        this.dashboardClipPath = computed(() => {
+            if (this.type() !== 'dashboard')
+                return '';
+            return this.setCircleClipPathValue(this.dashboardStart(), this.railValue());
+        });
+        this.subLinearGradient = computed(() => {
+            if (!this.subsection())
+                return '';
+            let colors = this.color();
+            if (!colors || colors.length <= 0) {
+                return `linear-gradient(to right, var(--x-primary) 0%, var(--x-primary) 100%)`;
+            }
+            else if (colors.length === 1) {
+                colors.push({ percent: 100, color: 'var(--x-primary)' });
+            }
+            colors = colors.sort((a, b) => a.percent - b.percent);
+            let lgs = [];
+            colors.reduce((a, b, index) => {
+                if (index === 1 && a.percent > 0) {
+                    lgs.push(`${a.color} 0%, ${a.color} ${a.percent}%`);
+                }
+                lgs.push(`${b.color} ${a.percent}%, ${b.color} ${b.percent}%`);
+                if (index === colors.length - 1 && b.percent < 100) {
+                    lgs.push(`var(--x-primary) ${b.percent}%, var(--x-primary) 100%`);
+                }
+                return b;
+            });
+            return `linear-gradient(to right,${lgs.join(',')})`;
+        });
     }
-    getLevelColor(percent) {
-        let colors = this.color.sort((a, b) => a.percent - b.percent);
+    getLevelColor(percent, color) {
+        let colors = color.sort((a, b) => a.percent - b.percent);
         for (let i = 0; i < colors.length; i++) {
             if (colors[i].percent > Number(percent)) {
                 return colors[i].color;
@@ -167,21 +285,6 @@ class XProgressComponent extends XProgressProperty {
         }
         return colors[colors.length - 1].color;
     }
-    setGradient() {
-        if (this.subsection)
-            return;
-        if (XIsEmpty(this.gradient)) {
-            this.linearGradient = '';
-        }
-        else {
-            const { from, to, direction = 'to right', ...percents } = this.gradient || {};
-            if (Object.keys(percents).length !== 0) {
-                this.linearGradient = `linear-gradient(${direction}, ${this.sortGradient(percents).map(({ key, value }) => `${value} ${key}%`)})`;
-                return;
-            }
-            this.linearGradient = `linear-gradient(${direction}, ${from}, ${to})`;
-        }
-    }
     sortGradient(percents) {
         let arr = [];
         Object.keys(percents).forEach((key) => {
@@ -193,146 +296,45 @@ class XProgressComponent extends XProgressProperty {
         });
         return arr.sort((a, b) => a.key - b.key);
     }
-    setSubLinearGradient() {
-        let colors = this.color;
-        if (!colors || colors.length <= 0) {
-            this.subLinearGradient = `linear-gradient(to right, var(--x-primary) 0%, var(--x-primary) 100%)`;
-            return;
-        }
-        else if (colors.length === 1) {
-            colors.push({ percent: 100, color: 'var(--x-primary)' });
-        }
-        colors = colors.sort((a, b) => a.percent - b.percent);
-        let lgs = [];
-        colors.reduce((a, b, index) => {
-            if (index === 1 && a.percent > 0) {
-                lgs.push(`${a.color} 0%, ${a.color} ${a.percent}%`);
-            }
-            lgs.push(`${b.color} ${a.percent}%, ${b.color} ${b.percent}%`);
-            if (index === colors.length - 1 && b.percent < 100) {
-                lgs.push(`var(--x-primary) ${b.percent}%, var(--x-primary) 100%`);
-            }
-            return b;
-        });
-        this.subLinearGradient = `linear-gradient(to right,${lgs.join(',')})`;
-    }
-    setSteps() {
-        if (XIsEmpty(this.steps)) {
-            this.stepsArray = [];
-        }
-        else {
-            const critical = Math.ceil((Number(this.percent) / 100) * this.steps);
-            this.stepsArray = Array.from({ length: this.steps }).map((_, index) => index + 1 <= critical);
-        }
-    }
-    setType() {
-        if (this.type === 'circle') {
-            this.setCircleClipPath();
-        }
-        else if (this.type === 'dashboard') {
-            this.setDashboardClipPath();
-        }
-    }
-    /**
-     * circle 中的 100% 等于 clip-path 中的 400%
-     */
-    setCircleClipPath() {
-        let value = Number(this.percent) * 4;
-        let k1 = 'polygon(50% 50%,50% 0%,';
-        let k2 = k1 + '100% 0%,';
-        let k3 = k2 + '100% 100%,';
-        let k4 = k3 + '0% 100%,';
-        let k5 = k4 + '0% 0%,';
-        if (value <= 50) {
-            value += 50;
-            this.circleClipPath = `${k1}${value}% 0%)`;
-        }
-        else if (value > 50 && value <= 150) {
-            value -= 50;
-            this.circleClipPath = `${k2}100% ${value}%)`;
-        }
-        else if (value > 150 && value <= 250) {
-            value = 250 - value;
-            this.circleClipPath = `${k3}${value}% 100%)`;
-        }
-        else if (value > 250 && value <= 350) {
-            value = 350 - value;
-            this.circleClipPath = `${k4}0% ${value}%)`;
-        }
-        else if (value > 350 && value <= 400) {
-            value -= 350;
-            this.circleClipPath = `${k5}${value}% 0%)`;
-        }
-    }
-    /**
-     *
-     * 90 polygon(50% 50%, 0% 100%, 0% 0%, 100% 0%, 100% 100%);
-     * 180 polygon(50% 50%, 0% 50%, 0% 0%, 100% 0%, 100% 50%);
-     * 270 polygon(50% 50%, 0% 0%, 100% 0%);
-     */
-    setDashboardClipPath() {
-        let railValue = (Number(this.notchAngle) / 360) * 50 * 4;
-        let k1 = `polygon(50% 50%,`;
-        let start = '';
-        let per = 0;
-        if (railValue <= 50) {
-            per = 50 - railValue;
-            start = `${k1} ${per}% 100%`;
-            this.dashboardRailClipPath = `${start}, 0% 100%, 0% 0%, 100% 0%, 100% 100%, ${100 - per}% 100%)`;
-        }
-        else if (railValue > 50 && railValue <= 150) {
-            per = 150 - railValue;
-            start = `${k1} 0% ${per}%`;
-            this.dashboardRailClipPath = `${start}, 0% 0%, 100% 0%, 100% ${per}%)`;
-        }
-        else if (railValue > 150 && railValue <= 250) {
-            per = railValue - 150;
-            start = `${k1} ${per}% 0%`;
-            this.dashboardRailClipPath = `${start}, ${100 - per}% 0%)`;
-        }
-        this.setCircleClipPathValue(start, railValue);
-    }
     setCircleClipPathValue(start, railValue) {
-        let value = ((400 - railValue * 2) / 100) * Number(this.percent);
+        let value = ((400 - railValue * 2) / 100) * this.percent();
         let val = value + railValue;
         if (val <= 50) {
             val = 50 - val;
-            this.dashboardClipPath = `${start}, ${val}% 100%)`;
+            return `${start}, ${val}% 100%)`;
         }
         else if (val > 50 && val <= 150) {
             val = 150 - val;
-            this.dashboardClipPath = `${start}, 0% 100%, 0% ${val}%)`;
+            return `${start}, 0% 100%, 0% ${val}%)`;
         }
         else if (val > 150 && val <= 250) {
             val = val - 150;
-            this.dashboardClipPath = `${start}, 0% 100%, 0% 0%, ${val}% 0%)`;
+            return `${start}, 0% 100%, 0% 0%, ${val}% 0%)`;
         }
         else if (val > 250 && val <= 350) {
             val = val - 250;
-            this.dashboardClipPath = `${start}, 0% 100%, 0% 0%, 100% 0%, 100% ${val}%)`;
+            return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% ${val}%)`;
         }
         else if (val > 350 && val <= 400) {
             val = 100 - (val - 350);
-            this.dashboardClipPath = `${start}, 0% 100%, 0% 0%, 100% 0%, 100% 100%, ${val}% 100%)`;
+            return `${start}, 0% 100%, 0% 0%, 100% 0%, 100% 100%, ${val}% 100%)`;
         }
+        return '';
     }
-    onFormat(percent) {
-        return this.format && this.format(percent);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.10", type: XProgressComponent, isStandalone: true, selector: "x-progress", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"x-progress\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-progress-steps]=\"stepsArray.length > 0\"\r\n  [class.x-progress-steps-flex]=\"stepFlex\"\r\n>\r\n  @switch (type) {\r\n    @case ('circle') {\r\n      <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n    }\r\n    @case ('dashboard') {\r\n      <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n  @if (stepsArray.length === 0) {\r\n    <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n  }\r\n  @if (stepsArray.length > 0) {\r\n    <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n  }\r\n  @if (info && !inside) {\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size\" [style.height]=\"size\">\r\n    <div class=\"x-progress-ring-rail\" [style.border-width]=\"thickness\"></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"circleClipPath\"\r\n      [style.background-color]=\"currentColor\"\r\n      [style.border-width]=\"thickness\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dashboardTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size\" [style.height]=\"size\">\r\n    <div class=\"x-progress-ring-rail\" [style.clip-path]=\"dashboardRailClipPath\" [style.border-width]=\"thickness\"></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"dashboardClipPath\"\r\n      [style.background-color]=\"currentColor\"\r\n      [style.border-width]=\"thickness\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #trackTpl>\r\n  <div class=\"x-progress-track\">\r\n    <div\r\n      class=\"x-progress-rail\"\r\n      [class.x-progress-mask]=\"subsection\"\r\n      [style.background-image]=\"subsection ? subLinearGradient : 'none'\"\r\n    >\r\n      <div\r\n        class=\"x-progress-bg\"\r\n        [style.width.%]=\"percent\"\r\n        [style.background-color]=\"currentColor\"\r\n        [style.background-image]=\"linearGradient\"\r\n        [style.height]=\"height\"\r\n        [style.line-height]=\"height\"\r\n      >\r\n        @if (info && inside) {\r\n          <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n        }\r\n      </div>\r\n      @if (subsection) {\r\n        <div\r\n          class=\"x-progress-bg-mask\"\r\n          [style.width.%]=\"maskWidth\"\r\n          [style.height]=\"height\"\r\n          [style.line-height]=\"height\"\r\n        ></div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n  @for (step of stepsArray; track i; let i = $index) {\r\n    <div\r\n      class=\"x-progress-step\"\r\n      [class.x-progress-step-active]=\"step\"\r\n      [style.background-color]=\"currentColor\"\r\n      [style.width]=\"stepWidth\"\r\n      [style.flex]=\"stepFlex ? 1 : 'none'\"\r\n      [style.height]=\"height\"\r\n      [style.line-height]=\"height\"\r\n    ></div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #textTpl>\r\n  <span class=\"x-progress-text\">\r\n    @switch (status) {\r\n      @case ('success') {\r\n        <x-icon type=\"fto-check-circle\"></x-icon>\r\n      }\r\n      @case ('exception') {\r\n        <x-icon type=\"fto-x-circle\"></x-icon>\r\n      }\r\n      @case ('warning') {\r\n        <x-icon type=\"fto-help-circle\"></x-icon>\r\n      }\r\n      @default {\r\n        @if (format) {\r\n          {{ onFormat(percent) }}\r\n        } @else {\r\n          {{ percent }}%\r\n        }\r\n      }\r\n    }\r\n  </span>\r\n</ng-template>\r\n", styles: ["@keyframes x-progress-active{0%{width:0;opacity:.1}20%{width:0;opacity:.5}to{width:100%;opacity:0}}x-progress{display:initial}.x-progress{margin:0;padding:0;display:inline-flex;align-items:center;width:100%}.x-progress-track{width:100%;display:inline-flex;align-items:center}.x-progress-rail{position:relative;display:inline-flex;width:100%;overflow:hidden;vertical-align:middle;background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-bg{position:relative;background-color:var(--x-primary);transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;border-radius:var(--x-border-radius);text-align:right;color:#fff}.x-progress-bg>span{margin:0 .325rem}.x-progress-circle,.x-progress-dashboard,.x-progress-steps:not(.x-progress-steps-flex){width:initial}.x-progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.x-progress-ring-rail{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-border-100);border-radius:100%}.x-progress-ring-bg{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-primary);border-radius:100%;transition:clip-path .3s cubic-bezier(.08,.82,.17,1) 0s}.x-progress-ring .x-progress-text{margin-left:0;justify-content:center;font-size:var(--x-font-size-large)}.x-progress-mask .x-progress-bg{background:transparent}.x-progress-bg-mask{transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;background-color:var(--x-border-100);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-progress-step{background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-step:not(:first-child){margin-left:.125rem}.x-progress-step-active{background-color:var(--x-primary)}.x-progress-text{margin-left:.5rem;width:3.25rem;display:inline-flex;align-items:center;white-space:nowrap}.x-progress-active .x-progress-bg:before{position:absolute;inset:0;background:var(--x-background-100);border-radius:var(--x-border-radius);opacity:0;animation:x-progress-active 2s cubic-bezier(.23,1,.32,1) infinite;content:\"\"}.x-progress-exception .x-progress-text{color:var(--x-danger)}.x-progress-exception .x-progress-bg,.x-progress-exception .x-progress-step-active{background-color:var(--x-danger)}.x-progress-exception .x-progress-ring-bg{border-color:var(--x-danger)}.x-progress-success .x-progress-text{color:var(--x-success)}.x-progress-success .x-progress-bg,.x-progress-success .x-progress-step-active{background-color:var(--x-success)}.x-progress-success .x-progress-ring-bg{border-color:var(--x-success)}.x-progress-warning .x-progress-text{color:var(--x-warning)}.x-progress-warning .x-progress-bg,.x-progress-warning .x-progress-step-active{background-color:var(--x-warning)}.x-progress-warning .x-progress-ring-bg{border-color:var(--x-warning)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XProgressComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: XProgressComponent, isStandalone: true, selector: "x-progress", usesInheritance: true, ngImport: i0, template: "<div\r\n  class=\"x-progress\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-progress-steps]=\"stepsArray().length > 0\"\r\n  [class.x-progress-steps-flex]=\"stepFlex()\"\r\n>\r\n  @switch (type()) {\r\n    @case ('circle') {\r\n      <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n    }\r\n    @case ('dashboard') {\r\n      <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n  @if (stepsArray().length === 0) {\r\n    <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n  }\r\n  @if (stepsArray().length > 0) {\r\n    <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n  }\r\n  @if (info() && !inside()) {\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n    <div class=\"x-progress-ring-rail\" [style.border-width]=\"thickness()\"></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"circleClipPath()\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dashboardTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n    <div\r\n      class=\"x-progress-ring-rail\"\r\n      [style.clip-path]=\"dashboardRailClipPath()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"dashboardClipPath()\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #trackTpl>\r\n  <div class=\"x-progress-track\">\r\n    <div\r\n      class=\"x-progress-rail\"\r\n      [class.x-progress-mask]=\"subsection()\"\r\n      [style.background-image]=\"subsection() ? subLinearGradient() : 'none'\"\r\n    >\r\n      <div\r\n        class=\"x-progress-bg\"\r\n        [style.width.%]=\"percent()\"\r\n        [style.background-color]=\"currentColor()\"\r\n        [style.background-image]=\"linearGradient()\"\r\n        [style.height]=\"height()\"\r\n        [style.line-height]=\"height()\"\r\n      >\r\n        @if (info() && inside()) {\r\n          <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n        }\r\n      </div>\r\n      @if (subsection()) {\r\n        <div\r\n          class=\"x-progress-bg-mask\"\r\n          [style.width.%]=\"maskWidth()\"\r\n          [style.height]=\"height()\"\r\n          [style.line-height]=\"height()\"\r\n        ></div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n  @for (step of stepsArray(); track i; let i = $index) {\r\n    <div\r\n      class=\"x-progress-step\"\r\n      [class.x-progress-step-active]=\"step\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.width]=\"stepWidth()\"\r\n      [style.flex]=\"stepFlex() ? 1 : 'none'\"\r\n      [style.height]=\"height()\"\r\n      [style.line-height]=\"height()\"\r\n    ></div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #textTpl>\r\n  <span class=\"x-progress-text\" [style.width]=\"infoWidth()\">\r\n    @switch (status()) {\r\n      @case ('success') {\r\n        <x-icon type=\"fto-check-circle\"></x-icon>\r\n      }\r\n      @case ('exception') {\r\n        <x-icon type=\"fto-x-circle\"></x-icon>\r\n      }\r\n      @case ('warning') {\r\n        <x-icon type=\"fto-help-circle\"></x-icon>\r\n      }\r\n      @default {\r\n        @if (format()) {\r\n          {{ format()!(percent()) }}\r\n        } @else {\r\n          {{ percent() }}%\r\n        }\r\n      }\r\n    }\r\n  </span>\r\n</ng-template>\r\n", styles: ["@keyframes x-progress-active{0%{width:0;opacity:.1}20%{width:0;opacity:.5}to{width:100%;opacity:0}}x-progress{display:initial}.x-progress{margin:0;padding:0;display:inline-flex;align-items:center;width:100%}.x-progress-track{width:100%;display:inline-flex;align-items:center}.x-progress-rail{position:relative;display:inline-flex;width:100%;overflow:hidden;vertical-align:middle;background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-bg{position:relative;background-color:var(--x-primary);transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;border-radius:var(--x-border-radius);text-align:right;color:#fff}.x-progress-bg>span{margin:0 .325rem}.x-progress-circle,.x-progress-dashboard,.x-progress-steps:not(.x-progress-steps-flex){width:initial}.x-progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.x-progress-ring-rail{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-border-100);border-radius:100%}.x-progress-ring-bg{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-primary);border-radius:100%;transition:clip-path .3s cubic-bezier(.08,.82,.17,1) 0s}.x-progress-ring .x-progress-text{margin-left:0;justify-content:center;font-size:var(--x-font-size-large)}.x-progress-mask .x-progress-bg{background:transparent}.x-progress-bg-mask{transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;background-color:var(--x-border-100);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-progress-step{background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-step:not(:first-child){margin-left:.125rem}.x-progress-step-active{background-color:var(--x-primary)}.x-progress-text{margin-left:.5rem;display:inline-flex;align-items:center;white-space:nowrap}.x-progress-text x-icon{font-size:1.25rem}.x-progress-active .x-progress-bg:before{position:absolute;inset:0;background:var(--x-background-100);border-radius:var(--x-border-radius);opacity:0;animation:x-progress-active 2s cubic-bezier(.23,1,.32,1) infinite;content:\"\"}.x-progress-exception .x-progress-text{color:var(--x-danger)}.x-progress-exception .x-progress-bg,.x-progress-exception .x-progress-step-active{background-color:var(--x-danger)}.x-progress-exception .x-progress-ring-bg{border-color:var(--x-danger)}.x-progress-success .x-progress-text{color:var(--x-success)}.x-progress-success .x-progress-bg,.x-progress-success .x-progress-step-active{background-color:var(--x-success)}.x-progress-success .x-progress-ring-bg{border-color:var(--x-success)}.x-progress-warning .x-progress-text{color:var(--x-warning)}.x-progress-warning .x-progress-bg,.x-progress-warning .x-progress-step-active{background-color:var(--x-warning)}.x-progress-warning .x-progress-ring-bg{border-color:var(--x-warning)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: XIconComponent, selector: "x-icon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: `${XProgressPrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-progress\"\r\n  [ngClass]=\"classMap\"\r\n  [class.x-progress-steps]=\"stepsArray.length > 0\"\r\n  [class.x-progress-steps-flex]=\"stepFlex\"\r\n>\r\n  @switch (type) {\r\n    @case ('circle') {\r\n      <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n    }\r\n    @case ('dashboard') {\r\n      <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n  @if (stepsArray.length === 0) {\r\n    <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n  }\r\n  @if (stepsArray.length > 0) {\r\n    <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n  }\r\n  @if (info && !inside) {\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size\" [style.height]=\"size\">\r\n    <div class=\"x-progress-ring-rail\" [style.border-width]=\"thickness\"></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"circleClipPath\"\r\n      [style.background-color]=\"currentColor\"\r\n      [style.border-width]=\"thickness\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dashboardTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size\" [style.height]=\"size\">\r\n    <div class=\"x-progress-ring-rail\" [style.clip-path]=\"dashboardRailClipPath\" [style.border-width]=\"thickness\"></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"dashboardClipPath\"\r\n      [style.background-color]=\"currentColor\"\r\n      [style.border-width]=\"thickness\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #trackTpl>\r\n  <div class=\"x-progress-track\">\r\n    <div\r\n      class=\"x-progress-rail\"\r\n      [class.x-progress-mask]=\"subsection\"\r\n      [style.background-image]=\"subsection ? subLinearGradient : 'none'\"\r\n    >\r\n      <div\r\n        class=\"x-progress-bg\"\r\n        [style.width.%]=\"percent\"\r\n        [style.background-color]=\"currentColor\"\r\n        [style.background-image]=\"linearGradient\"\r\n        [style.height]=\"height\"\r\n        [style.line-height]=\"height\"\r\n      >\r\n        @if (info && inside) {\r\n          <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n        }\r\n      </div>\r\n      @if (subsection) {\r\n        <div\r\n          class=\"x-progress-bg-mask\"\r\n          [style.width.%]=\"maskWidth\"\r\n          [style.height]=\"height\"\r\n          [style.line-height]=\"height\"\r\n        ></div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n  @for (step of stepsArray; track i; let i = $index) {\r\n    <div\r\n      class=\"x-progress-step\"\r\n      [class.x-progress-step-active]=\"step\"\r\n      [style.background-color]=\"currentColor\"\r\n      [style.width]=\"stepWidth\"\r\n      [style.flex]=\"stepFlex ? 1 : 'none'\"\r\n      [style.height]=\"height\"\r\n      [style.line-height]=\"height\"\r\n    ></div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #textTpl>\r\n  <span class=\"x-progress-text\">\r\n    @switch (status) {\r\n      @case ('success') {\r\n        <x-icon type=\"fto-check-circle\"></x-icon>\r\n      }\r\n      @case ('exception') {\r\n        <x-icon type=\"fto-x-circle\"></x-icon>\r\n      }\r\n      @case ('warning') {\r\n        <x-icon type=\"fto-help-circle\"></x-icon>\r\n      }\r\n      @default {\r\n        @if (format) {\r\n          {{ onFormat(percent) }}\r\n        } @else {\r\n          {{ percent }}%\r\n        }\r\n      }\r\n    }\r\n  </span>\r\n</ng-template>\r\n", styles: ["@keyframes x-progress-active{0%{width:0;opacity:.1}20%{width:0;opacity:.5}to{width:100%;opacity:0}}x-progress{display:initial}.x-progress{margin:0;padding:0;display:inline-flex;align-items:center;width:100%}.x-progress-track{width:100%;display:inline-flex;align-items:center}.x-progress-rail{position:relative;display:inline-flex;width:100%;overflow:hidden;vertical-align:middle;background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-bg{position:relative;background-color:var(--x-primary);transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;border-radius:var(--x-border-radius);text-align:right;color:#fff}.x-progress-bg>span{margin:0 .325rem}.x-progress-circle,.x-progress-dashboard,.x-progress-steps:not(.x-progress-steps-flex){width:initial}.x-progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.x-progress-ring-rail{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-border-100);border-radius:100%}.x-progress-ring-bg{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-primary);border-radius:100%;transition:clip-path .3s cubic-bezier(.08,.82,.17,1) 0s}.x-progress-ring .x-progress-text{margin-left:0;justify-content:center;font-size:var(--x-font-size-large)}.x-progress-mask .x-progress-bg{background:transparent}.x-progress-bg-mask{transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;background-color:var(--x-border-100);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-progress-step{background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-step:not(:first-child){margin-left:.125rem}.x-progress-step-active{background-color:var(--x-primary)}.x-progress-text{margin-left:.5rem;width:3.25rem;display:inline-flex;align-items:center;white-space:nowrap}.x-progress-active .x-progress-bg:before{position:absolute;inset:0;background:var(--x-background-100);border-radius:var(--x-border-radius);opacity:0;animation:x-progress-active 2s cubic-bezier(.23,1,.32,1) infinite;content:\"\"}.x-progress-exception .x-progress-text{color:var(--x-danger)}.x-progress-exception .x-progress-bg,.x-progress-exception .x-progress-step-active{background-color:var(--x-danger)}.x-progress-exception .x-progress-ring-bg{border-color:var(--x-danger)}.x-progress-success .x-progress-text{color:var(--x-success)}.x-progress-success .x-progress-bg,.x-progress-success .x-progress-step-active{background-color:var(--x-success)}.x-progress-success .x-progress-ring-bg{border-color:var(--x-success)}.x-progress-warning .x-progress-text{color:var(--x-warning)}.x-progress-warning .x-progress-bg,.x-progress-warning .x-progress-step-active{background-color:var(--x-warning)}.x-progress-warning .x-progress-ring-bg{border-color:var(--x-warning)}\n"] }]
+            args: [{ selector: `${XProgressPrefix}`, standalone: true, imports: [NgClass, NgTemplateOutlet, FormsModule, XIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"x-progress\"\r\n  [ngClass]=\"classMap()\"\r\n  [class.x-progress-steps]=\"stepsArray().length > 0\"\r\n  [class.x-progress-steps-flex]=\"stepFlex()\"\r\n>\r\n  @switch (type()) {\r\n    @case ('circle') {\r\n      <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n    }\r\n    @case ('dashboard') {\r\n      <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n    }\r\n    @default {\r\n      <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n    }\r\n  }\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n  @if (stepsArray().length === 0) {\r\n    <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n  }\r\n  @if (stepsArray().length > 0) {\r\n    <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n  }\r\n  @if (info() && !inside()) {\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #circleTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n    <div class=\"x-progress-ring-rail\" [style.border-width]=\"thickness()\"></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"circleClipPath()\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dashboardTpl>\r\n  <div class=\"x-progress-ring\" [style.width]=\"size()\" [style.height]=\"size()\">\r\n    <div\r\n      class=\"x-progress-ring-rail\"\r\n      [style.clip-path]=\"dashboardRailClipPath()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <div\r\n      class=\"x-progress-ring-bg\"\r\n      [style.clip-path]=\"dashboardClipPath()\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.border-width]=\"thickness()\"\r\n    ></div>\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #trackTpl>\r\n  <div class=\"x-progress-track\">\r\n    <div\r\n      class=\"x-progress-rail\"\r\n      [class.x-progress-mask]=\"subsection()\"\r\n      [style.background-image]=\"subsection() ? subLinearGradient() : 'none'\"\r\n    >\r\n      <div\r\n        class=\"x-progress-bg\"\r\n        [style.width.%]=\"percent()\"\r\n        [style.background-color]=\"currentColor()\"\r\n        [style.background-image]=\"linearGradient()\"\r\n        [style.height]=\"height()\"\r\n        [style.line-height]=\"height()\"\r\n      >\r\n        @if (info() && inside()) {\r\n          <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n        }\r\n      </div>\r\n      @if (subsection()) {\r\n        <div\r\n          class=\"x-progress-bg-mask\"\r\n          [style.width.%]=\"maskWidth()\"\r\n          [style.height]=\"height()\"\r\n          [style.line-height]=\"height()\"\r\n        ></div>\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n  @for (step of stepsArray(); track i; let i = $index) {\r\n    <div\r\n      class=\"x-progress-step\"\r\n      [class.x-progress-step-active]=\"step\"\r\n      [style.background-color]=\"currentColor()\"\r\n      [style.width]=\"stepWidth()\"\r\n      [style.flex]=\"stepFlex() ? 1 : 'none'\"\r\n      [style.height]=\"height()\"\r\n      [style.line-height]=\"height()\"\r\n    ></div>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #textTpl>\r\n  <span class=\"x-progress-text\" [style.width]=\"infoWidth()\">\r\n    @switch (status()) {\r\n      @case ('success') {\r\n        <x-icon type=\"fto-check-circle\"></x-icon>\r\n      }\r\n      @case ('exception') {\r\n        <x-icon type=\"fto-x-circle\"></x-icon>\r\n      }\r\n      @case ('warning') {\r\n        <x-icon type=\"fto-help-circle\"></x-icon>\r\n      }\r\n      @default {\r\n        @if (format()) {\r\n          {{ format()!(percent()) }}\r\n        } @else {\r\n          {{ percent() }}%\r\n        }\r\n      }\r\n    }\r\n  </span>\r\n</ng-template>\r\n", styles: ["@keyframes x-progress-active{0%{width:0;opacity:.1}20%{width:0;opacity:.5}to{width:100%;opacity:0}}x-progress{display:initial}.x-progress{margin:0;padding:0;display:inline-flex;align-items:center;width:100%}.x-progress-track{width:100%;display:inline-flex;align-items:center}.x-progress-rail{position:relative;display:inline-flex;width:100%;overflow:hidden;vertical-align:middle;background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-bg{position:relative;background-color:var(--x-primary);transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;border-radius:var(--x-border-radius);text-align:right;color:#fff}.x-progress-bg>span{margin:0 .325rem}.x-progress-circle,.x-progress-dashboard,.x-progress-steps:not(.x-progress-steps-flex){width:initial}.x-progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}.x-progress-ring-rail{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-border-100);border-radius:100%}.x-progress-ring-bg{position:absolute;width:100%;height:100%;border-style:solid;border-color:var(--x-primary);border-radius:100%;transition:clip-path .3s cubic-bezier(.08,.82,.17,1) 0s}.x-progress-ring .x-progress-text{margin-left:0;justify-content:center;font-size:var(--x-font-size-large)}.x-progress-mask .x-progress-bg{background:transparent}.x-progress-bg-mask{transition:width .3s cubic-bezier(.08,.82,.17,1) 0s;background-color:var(--x-border-100);border-top-right-radius:var(--x-border-radius);border-bottom-right-radius:var(--x-border-radius)}.x-progress-step{background-color:var(--x-border-100);border-radius:var(--x-border-radius)}.x-progress-step:not(:first-child){margin-left:.125rem}.x-progress-step-active{background-color:var(--x-primary)}.x-progress-text{margin-left:.5rem;display:inline-flex;align-items:center;white-space:nowrap}.x-progress-text x-icon{font-size:1.25rem}.x-progress-active .x-progress-bg:before{position:absolute;inset:0;background:var(--x-background-100);border-radius:var(--x-border-radius);opacity:0;animation:x-progress-active 2s cubic-bezier(.23,1,.32,1) infinite;content:\"\"}.x-progress-exception .x-progress-text{color:var(--x-danger)}.x-progress-exception .x-progress-bg,.x-progress-exception .x-progress-step-active{background-color:var(--x-danger)}.x-progress-exception .x-progress-ring-bg{border-color:var(--x-danger)}.x-progress-success .x-progress-text{color:var(--x-success)}.x-progress-success .x-progress-bg,.x-progress-success .x-progress-step-active{background-color:var(--x-success)}.x-progress-success .x-progress-ring-bg{border-color:var(--x-success)}.x-progress-warning .x-progress-text{color:var(--x-warning)}.x-progress-warning .x-progress-bg,.x-progress-warning .x-progress-step-active{background-color:var(--x-warning)}.x-progress-warning .x-progress-ring-bg{border-color:var(--x-warning)}\n"] }]
         }] });
 
 class XProgressModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: XProgressModule, imports: [XProgressComponent], exports: [XProgressComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XProgressModule, imports: [XProgressComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: XProgressModule, imports: [XProgressComponent], exports: [XProgressComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XProgressModule, imports: [XProgressComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: XProgressModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: XProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [XProgressComponent],