@ng-nest/ui 12.0.7 → 12.1.0

package/bundles/ng-nest-ui-progress.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@ng-nest/ui/core'), require('@ng-nest/ui/icon'), require('@angular/common'), require('@angular/forms')) :
     typeof define === 'function' && define.amd ? define('@ng-nest/ui/progress', ['exports', '@angular/core', '@ng-nest/ui/core', '@ng-nest/ui/icon', '@angular/common', '@angular/forms'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-nest'] = global['ng-nest'] || {}, global['ng-nest'].ui = global['ng-nest'].ui || {}, global['ng-nest'].ui.progress = {}), global.ng.core, global['ng-nest'].ui.core, global['ng-nest'].ui.icon, global.ng.common, global.ng.forms));
-}(this, (function (exports, i0, i1, i2, i3, forms) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-nest"] = global["ng-nest"] || {}, global["ng-nest"].ui = global["ng-nest"].ui || {}, global["ng-nest"].ui.progress = {}), global.ng.core, global["ng-nest"].ui.core, global["ng-nest"].ui.icon, global.ng.common, global.ng.forms));
+})(this, (function (exports, i0, i1, i2, i3, forms) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -255,10 +253,16 @@
                 r[k] = a[j];
         return r;
     }
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2)
+            for (var i = 0, l = from.length, ar; i < l; i++) {
+                if (ar || !(i in from)) {
+                    if (!ar)
+                        ar = Array.prototype.slice.call(from, 0, i);
+                    ar[i] = from[i];
+                }
+            }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -355,6 +359,11 @@
         __extends(XProgressProperty, _super);
         function XProgressProperty() {
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            /**
+             * @zh_CN 进度条类型
+             * @en_US Progress bar type
+             */
+            _this.type = 'line';
             /**
              * @zh_CN 显示进度 0-100
              * @en_US Show progress 0-100
@@ -370,12 +379,27 @@
              * @en_US Whether to display percentage text
              */
             _this.info = true;
+            /**
+             * @zh_CN 圆环/仪表盘厚度
+             * @en_US Ring thickness
+             */
+            _this.thickness = '0.5rem';
+            /**
+             * @zh_CN 圆环/仪表盘尺寸
+             * @en_US Ring size
+             */
+            _this.size = '5rem';
+            /**
+             * @zh_CN 仪表盘缺口角度 0~300
+             * @en_US Dashboard notch angle
+             */
+            _this.notchAngle = 80;
             return _this;
         }
         return XProgressProperty;
     }(i1.XProperty));
-    /** @nocollapse */ XProgressProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XProgressProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XProgressProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XProgressProperty, selector: "ng-component", inputs: { percent: "percent", height: "height", status: "status", info: "info", inside: "inside", format: "format", color: "color" }, usesInheritance: true, ngImport: i0__namespace, template: '', isInline: true });
+    /** @nocollapse */ XProgressProperty.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XProgressProperty, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XProgressProperty.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XProgressProperty, selector: "ng-component", 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__namespace, template: '', isInline: true });
     __decorate([
         i1.XInputNumber()
     ], XProgressProperty.prototype, "percent", void 0);
@@ -388,10 +412,21 @@
     __decorate([
         i1.XInputBoolean()
     ], XProgressProperty.prototype, "inside", void 0);
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XProgressProperty, decorators: [{
+    __decorate([
+        i1.XWithConfig(X_CONFIG_NAME, '1rem')
+    ], XProgressProperty.prototype, "stepWidth", void 0);
+    __decorate([
+        i1.XInputBoolean()
+    ], XProgressProperty.prototype, "stepFlex", void 0);
+    __decorate([
+        i1.XInputBoolean()
+    ], XProgressProperty.prototype, "subsection", void 0);
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XProgressProperty, decorators: [{
                 type: i0.Component,
                 args: [{ template: '' }]
-            }], propDecorators: { percent: [{
+            }], propDecorators: { type: [{
+                    type: i0.Input
+                }], percent: [{
                     type: i0.Input
                 }], height: [{
                     type: i0.Input
@@ -405,6 +440,22 @@
                     type: i0.Input
                 }], color: [{
                     type: i0.Input
+                }], gradient: [{
+                    type: i0.Input
+                }], steps: [{
+                    type: i0.Input
+                }], stepWidth: [{
+                    type: i0.Input
+                }], stepFlex: [{
+                    type: i0.Input
+                }], thickness: [{
+                    type: i0.Input
+                }], size: [{
+                    type: i0.Input
+                }], notchAngle: [{
+                    type: i0.Input
+                }], subsection: [{
+                    type: i0.Input
                 }] } });
 
     var XProgressComponent = /** @class */ (function (_super) {
@@ -415,31 +466,48 @@
             _this.elementRef = elementRef;
             _this.cdr = cdr;
             _this.configService = configService;
+            _this.stepsArray = [];
             return _this;
         }
-        XProgressComponent.prototype.ngOnInit = function () { };
+        Object.defineProperty(XProgressComponent.prototype, "maskWidth", {
+            get: function () {
+                return i1.XIsNumber(this.percent) ? 100 - Number(this.percent) : 100;
+            },
+            enumerable: false,
+            configurable: true
+        });
         XProgressComponent.prototype.ngOnChanges = function (simples) {
-            i1.XIsChange(simples.status) && this.setClassMap();
-            i1.XIsChange(simples.percent) && this.setColor();
+            var status = simples.status, percent = simples.percent, gradient = simples.gradient, steps = simples.steps, type = simples.type, notchAngle = simples.notchAngle;
+            i1.XIsChange(type, status) && this.setClassMap();
+            i1.XIsChange(percent) && this.setColor();
+            i1.XIsChange(gradient) && this.setGradient();
+            i1.XIsChange(steps, percent) && this.setSteps();
+            i1.XIsChange(type, percent, notchAngle) && this.setType();
         };
         XProgressComponent.prototype.setClassMap = function () {
-            var _a;
-            this.classMap = (_a = {},
-                _a[XProgressPrefix + "-" + this.status] = true,
-                _a[XProgressPrefix + "-inside"] = Boolean(this.inside),
-                _a);
+            var _b;
+            this.classMap = (_b = {},
+                _b[XProgressPrefix + "-" + this.status] = true,
+                _b[XProgressPrefix + "-" + this.type] = true,
+                _b[XProgressPrefix + "-inside"] = Boolean(this.inside),
+                _b);
         };
         XProgressComponent.prototype.setColor = function () {
-            if (i1.XIsEmpty(this.color))
-                return;
-            if (i1.XIsString(this.color)) {
-                this.currentColor = this.color;
-            }
-            else if (i1.XIsObjectArray(this.color)) {
-                this.currentColor = this.getLevelColor(this.percent);
+            if (this.subsection) {
+                this.setSubLinearGradient();
             }
-            else if (i1.XIsFunction(this.color)) {
-                this.currentColor = this.color(this.percent);
+            else {
+                if (i1.XIsEmpty(this.color))
+                    return;
+                if (i1.XIsString(this.color)) {
+                    this.currentColor = this.color;
+                }
+                else if (i1.XIsObjectArray(this.color)) {
+                    this.currentColor = this.getLevelColor(this.percent);
+                }
+                else if (i1.XIsFunction(this.color)) {
+                    this.currentColor = this.color(this.percent);
+                }
             }
         };
         XProgressComponent.prototype.getLevelColor = function (percent) {
@@ -451,14 +519,166 @@
             }
             return colors[colors.length - 1].color;
         };
+        XProgressComponent.prototype.setGradient = function () {
+            if (this.subsection)
+                return;
+            if (i1.XIsEmpty(this.gradient)) {
+                this.linearGradient = '';
+            }
+            else {
+                var _a = this.gradient || {}, from = _a.from, to = _a.to, _b = _a.direction, direction = _b === void 0 ? 'to right' : _b, percents = __rest(_a, ["from", "to", "direction"]);
+                if (Object.keys(percents).length !== 0) {
+                    this.linearGradient = "linear-gradient(" + direction + ", " + this.sortGradient(percents).map(function (_b) {
+                        var key = _b.key, value = _b.value;
+                        return value + " " + key + "%";
+                    }) + ")";
+                    return;
+                }
+                this.linearGradient = "linear-gradient(" + direction + ", " + from + ", " + to + ")";
+            }
+        };
+        XProgressComponent.prototype.sortGradient = function (percents) {
+            var arr = [];
+            Object.keys(percents).forEach(function (key) {
+                var value = percents[key];
+                var numKey = +key.replace('%', '');
+                if (!isNaN(numKey)) {
+                    arr.push({ key: numKey, value: value });
+                }
+            });
+            return arr.sort(function (a, b) { return a.key - b.key; });
+        };
+        XProgressComponent.prototype.setSubLinearGradient = function () {
+            var 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(function (a, b) { return a.percent - b.percent; });
+            var lgs = [];
+            colors.reduce(function (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(',') + ")";
+        };
+        XProgressComponent.prototype.setSteps = function () {
+            if (i1.XIsEmpty(this.steps)) {
+                this.stepsArray = [];
+            }
+            else {
+                var critical_1 = Math.ceil((Number(this.percent) / 100) * this.steps);
+                this.stepsArray = Array.from({ length: this.steps }).map(function (_, index) { return index + 1 <= critical_1; });
+            }
+        };
+        XProgressComponent.prototype.setType = function () {
+            if (this.type === 'circle') {
+                this.setCircleClipPath();
+            }
+            else if (this.type === 'dashboard') {
+                this.setDashboardClipPath();
+            }
+        };
+        /**
+         * circle �е� 100% ���� clip-path �е� 400%
+         */
+        XProgressComponent.prototype.setCircleClipPath = function () {
+            var value = Number(this.percent) * 4;
+            var k1 = 'polygon(50% 50%,50% 0%,';
+            var k2 = k1 + '100% 0%,';
+            var k3 = k2 + '100% 100%,';
+            var k4 = k3 + '0% 100%,';
+            var 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%);
+         */
+        XProgressComponent.prototype.setDashboardClipPath = function () {
+            var railValue = (Number(this.notchAngle) / 360) * 50 * 4;
+            var k1 = "polygon(50% 50%,";
+            var start = '';
+            var 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);
+        };
+        XProgressComponent.prototype.setCircleClipPathValue = function (start, railValue) {
+            var value = ((400 - railValue * 2) / 100) * Number(this.percent);
+            var val = value + railValue;
+            if (val <= 50) {
+                val = 50 - val;
+                this.dashboardClipPath = start + ", " + val + "% 100%)";
+            }
+            else if (val > 50 && val <= 150) {
+                val = 150 - val;
+                this.dashboardClipPath = start + ", 0% 100%, 0% " + val + "%)";
+            }
+            else if (val > 150 && val <= 250) {
+                val = val - 150;
+                this.dashboardClipPath = 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 + "%)";
+            }
+            else if (val > 350 && val <= 400) {
+                val = 100 - (val - 350);
+                this.dashboardClipPath = start + ", 0% 100%, 0% 0%, 100% 0%, 100% 100%, " + val + "% 100%)";
+            }
+        };
         XProgressComponent.prototype.onFormat = function (percent) {
             return this.format && this.format(percent);
         };
         return XProgressComponent;
     }(XProgressProperty));
-    /** @nocollapse */ XProgressComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XProgressComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.XConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    /** @nocollapse */ XProgressComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.3", type: XProgressComponent, selector: "x-progress", usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"x-progress\" [ngClass]=\"classMap\">\r\n  <div class=\"x-progress-track\">\r\n    <div class=\"x-progress-rail\">\r\n      <div\r\n        class=\"x-progress-bg\"\r\n        [style.width.%]=\"percent\"\r\n        [style.background-color]=\"currentColor\"\r\n        [style.height]=\"height\"\r\n        [style.line-height]=\"height\"\r\n      >\r\n        <span *ngIf=\"inside\">{{ percent }}%</span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span class=\"x-progress-text\" *ngIf=\"info && !inside\" [ngSwitch]=\"status\">\r\n    <ng-container *ngSwitchCase=\"'success'\">\r\n      <x-icon type=\"fto-check-circle\"></x-icon>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'exception'\">\r\n      <x-icon type=\"fto-x-circle\"></x-icon>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'warning'\">\r\n      <x-icon type=\"fto-help-circle\"></x-icon>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngIf=\"format; else defaultTemp\">{{ onFormat(percent) }}</ng-container>\r\n      <ng-template #defaultTemp>{{ percent }}%</ng-template>\r\n    </ng-container>\r\n  </span>\r\n</div>\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:flex;align-items:center}.x-progress{margin:0;padding:0}.x-progress,.x-progress-track{display:inline-flex;align-items:center;width:100%}.x-progress-rail{display:inline-block;width:100%;overflow:hidden;vertical-align:middle;background-color:var(--x-border-100)}.x-progress-bg,.x-progress-rail{position:relative;border-radius:var(--x-border-radius)}.x-progress-bg{background-color:var(--x-primary);transition:all .3s cubic-bezier(.08,.82,.17,1) 0s;text-align:right;color:#fff}.x-progress-bg>span{margin:0 .325rem}.x-progress-text{margin-left:.5rem;display:inline-flex;align-items:center;white-space:nowrap}.x-progress-active .x-progress-bg:before{position:absolute;top:0;right:0;bottom:0;left: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{background-color:var(--x-danger)}.x-progress-success .x-progress-text{color:var(--x-success)}.x-progress-success .x-progress-bg{background-color:var(--x-success)}.x-progress-warning .x-progress-text{color:var(--x-warning)}.x-progress-warning .x-progress-bg{background-color:var(--x-warning)}"], components: [{ type: i2__namespace.XIconComponent, selector: "x-icon" }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XProgressComponent, decorators: [{
+    /** @nocollapse */ XProgressComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XProgressComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.XConfigService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    /** @nocollapse */ XProgressComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: XProgressComponent, selector: "x-progress", usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, 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  [ngSwitch]=\"type\"\r\n>\r\n  <ng-container *ngSwitchCase=\"'circle'\">\r\n    <ng-container *ngTemplateOutlet=\"circleTpl\"> </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngSwitchCase=\"'dashboard'\">\r\n    <ng-container *ngTemplateOutlet=\"dashboardTpl\"> </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngSwitchDefault>\r\n    <ng-container *ngTemplateOutlet=\"lineTpl\"> </ng-container>\r\n  </ng-container>\r\n</div>\r\n\r\n<ng-template #lineTpl>\r\n  <ng-container *ngIf=\"stepsArray.length === 0\">\r\n    <ng-container *ngTemplateOutlet=\"trackTpl\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"stepsArray.length > 0\">\r\n    <ng-container *ngTemplateOutlet=\"stepsTpl\"></ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"info && !inside\">\r\n    <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n  </ng-container>\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 class=\"x-progress-rail\" [class.x-progress-mask]=\"subsection\" [style.background-image]=\"subsection ? subLinearGradient : 'none'\">\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        <ng-container *ngIf=\"info && inside\">\r\n          <ng-container *ngTemplateOutlet=\"textTpl\"></ng-container>\r\n        </ng-container>\r\n      </div>\r\n      <div\r\n        *ngIf=\"subsection\"\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    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #stepsTpl>\r\n  <div\r\n    *ngFor=\"let step of stepsArray\"\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</ng-template>\r\n\r\n<ng-template #textTpl>\r\n  <span class=\"x-progress-text\" [ngSwitch]=\"status\">\r\n    <ng-container *ngSwitchCase=\"'success'\">\r\n      <x-icon type=\"fto-check-circle\"></x-icon>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'exception'\">\r\n      <x-icon type=\"fto-x-circle\"></x-icon>\r\n    </ng-container>\r\n    <ng-container *ngSwitchCase=\"'warning'\">\r\n      <x-icon type=\"fto-help-circle\"></x-icon>\r\n    </ng-container>\r\n    <ng-container *ngSwitchDefault>\r\n      <ng-container *ngIf=\"format; else defaultTemp\">{{ onFormat(percent) }}</ng-container>\r\n      <ng-template #defaultTemp>{{ percent }}%</ng-template>\r\n    </ng-container>\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:-webkit-clip-path .3s cubic-bezier(.08,.82,.17,1) 0s;transition:clip-path .3s cubic-bezier(.08,.82,.17,1) 0s;transition:clip-path .3s cubic-bezier(.08,.82,.17,1) 0s,-webkit-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;top:0;right:0;bottom:0;left: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"], components: [{ type: i2__namespace.XIconComponent, selector: "x-icon" }], directives: [{ type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XProgressComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: "" + XProgressPrefix,
@@ -474,10 +694,10 @@
         }
         return XProgressModule;
     }());
-    /** @nocollapse */ XProgressModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XProgressModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    /** @nocollapse */ XProgressModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XProgressModule, declarations: [XProgressComponent, XProgressProperty], imports: [i3.CommonModule, forms.FormsModule, i2.XIconModule], exports: [XProgressComponent] });
-    /** @nocollapse */ XProgressModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XProgressModule, imports: [[i3.CommonModule, forms.FormsModule, i2.XIconModule]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.3", ngImport: i0__namespace, type: XProgressModule, decorators: [{
+    /** @nocollapse */ XProgressModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XProgressModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    /** @nocollapse */ XProgressModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XProgressModule, declarations: [XProgressComponent, XProgressProperty], imports: [i3.CommonModule, forms.FormsModule, i2.XIconModule], exports: [XProgressComponent] });
+    /** @nocollapse */ XProgressModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XProgressModule, imports: [[i3.CommonModule, forms.FormsModule, i2.XIconModule]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: XProgressModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [XProgressComponent, XProgressProperty],
@@ -497,5 +717,5 @@
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=ng-nest-ui-progress.umd.js.map