ps-toolkit-ui 1.11.42 → 1.11.48

package/bundles/ps-toolkit-ui.umd.js

@@ -2498,7 +2498,7 @@
     StepsComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'lib-steps',
-                    template: "<div class=\"steps\">\r\n  <div class=\"header\">\r\n    <div *ngFor=\"let s of steps.items; let i = index\" [className]=\"(getActive() === i ? 'process ' : getActive() > i ? 'done ' : steps.activeAll ? 'next ' : '') + 'step-con'\">\r\n      <div [className]=\"(s.description ? 'with-description ' : '') + 'step'\" (click)=\"changeStep(i, s)\">\r\n        <div [className]=\"s.icon + ' icon fa svg'\"></div>\r\n        <div class=\"title o-h-d\">{{steps.l(s.title)}}</div>\r\n        <div *ngIf=\"s.description\" class=\"description o-h-d\">({{steps.l(s.description)}})</div>\r\n        <i *ngIf=\"s.onDelete\" (click)=\"onDelete(s)\" class=\"delete fas fa-times\"></i>\r\n        <i class=\"dot fas fa-dot-circle\"></i>\r\n        <i class=\"dot dot-done fas fa-circle\"></i>\r\n        <i class=\"dot dot-process fas fa-spinner\"></i>\r\n        <div class=\"line-r\"></div>\r\n        <div class=\"line-l\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</div>\r\n",
+                    template: "<div class=\"steps\">\r\n  <div class=\"header\">\r\n    <div *ngFor=\"let s of steps.items; let i = index\" [className]=\"(getActive() === i ? 'process ' : getActive() > i ? 'done ' : steps.activeAll ? 'next ' : '') + 'step-con'\">\r\n      <div [className]=\"(s.description ? 'with-description ' : '') + 'step'\" (click)=\"changeStep(i, s)\">\r\n        <div [className]=\"s.icon + ' icon fa svg'\"></div>\r\n        <div class=\"title o-h-d\">{{s.title}}</div>\r\n        <div *ngIf=\"s.description\" class=\"description o-h-d\">({{s.description}})</div>\r\n        <i *ngIf=\"s.onDelete\" (click)=\"onDelete(s)\" class=\"delete fas fa-times\"></i>\r\n        <i class=\"dot fas fa-dot-circle\"></i>\r\n        <i class=\"dot dot-done fas fa-circle\"></i>\r\n        <i class=\"dot dot-process fas fa-spinner\"></i>\r\n        <div class=\"line-r\"></div>\r\n        <div class=\"line-l\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <ng-content></ng-content>\r\n</div>\r\n",
                     styles: [".steps{background-color:#fff;border-radius:var(--border-radius-base);padding:20px}.steps,.steps>.header{float:right;width:100%}.steps>.header{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;align-items:center;display:flex;justify-content:center}.steps>.header>.step-con{float:right;padding:10px;position:relative;width:160px}.steps>.header>.step-con .step{border-radius:var(--border-radius-base);cursor:default;float:right;padding:10px;pointer-events:none;position:relative;width:100%}.steps>.header>.step-con.done .step,.steps>.header>.step-con.next .step,.steps>.header>.step-con.process .step{cursor:pointer;pointer-events:unset}.steps>.header>.step-con.done .step:hover,.steps>.header>.step-con.next .step:hover,.steps>.header>.step-con.process .step{background-color:var(--base-white)}.steps>.header>.step-con .step .icon{float:right;font-size:25px;height:40px;line-height:40px;margin-right:calc(50% - 20px);text-align:center;width:40px}.steps>.header>.step-con .step .icon i{line-height:35px}.steps>.header>.step-con .step .title{float:right;font-size:13px;height:50px;line-height:50px;text-align:center;width:100%}.steps>.header>.step-con .step.with-description .title{float:right;font-size:13px;height:25px;line-height:32px;text-align:center;width:100%}.steps>.header>.step-con .step .description{float:right;font-size:11px;height:25px;line-height:20px;text-align:center;width:100%}.steps>.header>.step-con .step .dot{border-radius:50%;float:right;height:15px;line-height:15px;margin-right:calc(50% - 7.5px);width:15px}.steps>.header>.step-con .step .delete{color:var(--red);cursor:pointer;display:none;font-size:25px;height:20px;line-height:20px;position:absolute;right:-10px;text-align:center;top:-10px;width:20px}.steps>.header>.step-con .step .delete:hover{color:var(--red-dark)}.steps>.header>.step-con.process .step .delete{display:block}.steps>.header>.step-con .step .dot.dot-done{color:var(--primary);display:none}.steps>.header>.step-con .step .dot.dot-process{color:var(--primary);display:none;font-size:20px}.steps>.header>.step-con.done .step .dot,.steps>.header>.step-con.process .step .dot{display:none}.steps>.header>.step-con.done .step .dot.dot-done,.steps>.header>.step-con.process .step .dot.dot-process{display:block}.steps>.header>.step-con .step .line-r{background-image:linear-gradient(90deg,rgba(51,51,51,.1),rgba(51,51,51,.4));bottom:16px;height:2px;position:absolute;right:-10px;width:calc(50% - 2.5px)}.steps>.header>.step-con .step .line-l{background-image:linear-gradient(270deg,rgba(51,51,51,.1),rgba(51,51,51,.4));bottom:16px;height:2px;left:-10px;position:absolute;width:calc(50% - 2.5px)}.steps>.header>.step-con:first-of-type .step .line-r,.steps>.header>.step-con:last-of-type .step .line-l{display:none}@media (max-width:399.99px){.steps{margin:20px 2%;margin:0;padding:10px;width:96%;width:100%}.steps .steps{margin-right:0;width:100%}.steps>.header>.step-con .step .icon{font-size:18px;height:30px;margin-right:calc(50% - 15px);width:30px}.steps>.header>.step-con .step .icon i{line-height:25px}.steps>.header>.step-con .step .title{align-items:center;display:flex;font-size:10px;justify-content:center;line-height:13px}}@media (min-width:400px) and (max-width:499.99px){.steps{margin:20px 2%;margin:0;padding:10px;width:96%;width:100%}.steps .steps{margin-right:0;width:100%}.steps>.header>.step-con .step .icon{font-size:18px;height:30px;margin-right:calc(50% - 15px);width:30px}.steps>.header>.step-con .step .icon i{line-height:25px}.steps>.header>.step-con .step .title{align-items:center;display:flex;font-size:10px;justify-content:center;line-height:13px}}@media (min-width:500px) and (max-width:599.99px){.steps{margin:20px 2%;margin:0;width:96%;width:100%}.steps .steps{margin-right:0;width:100%}.steps>.header>.step-con .step .icon{font-size:20px;height:35px;margin-right:calc(50% - 17.5px);width:35px}.steps>.header>.step-con .step .icon i{line-height:30px}.steps>.header>.step-con .step .title{align-items:center;display:flex;font-size:11px;justify-content:center;line-height:13px}}@media (min-width:600px) and (max-width:699.99px){.steps{margin:20px 2%;margin:0;width:96%;width:100%}.steps .steps{margin-right:0;width:100%}.steps>.header>.step-con .step .icon{font-size:20px;height:35px;margin-right:calc(50% - 17.5px);width:35px}.steps>.header>.step-con .step .icon i{line-height:30px}.steps>.header>.step-con .step .title{font-size:11px}}@media (min-width:700px) and (max-width:799.99px){.steps{margin:20px 2%;margin:0;width:96%;width:100%}}@media (min-width:800px) and (max-width:899.99px){.steps{margin:0;width:100%}}@media (min-width:900px) and (max-width:999.99px){.steps{margin:0 5%;width:90%}}@media (min-width:1000px) and (max-width:1099.99px){.steps{margin:0 10%;width:80%}}@media (min-width:1100px) and (max-width:1199.99px){.steps{margin:0 15%;width:70%}}@media (min-width:1200px) and (max-width:1299.99px){.steps{margin:0 15%;width:70%}}"]
                 },] }
     ];
@@ -8079,15 +8079,15 @@
     }());
 
     var StepsClass = /** @class */ (function () {
-        function StepsClass(l) {
+        function StepsClass() {
             this.items = [];
             this.activeAll = false;
-            this.l = l;
         }
         return StepsClass;
     }());
     var StepsItemClass = /** @class */ (function () {
         function StepsItemClass(name, icon, url, active) {
+            if (icon === void 0) { icon = null; }
             if (url === void 0) { url = null; }
             if (active === void 0) { active = false; }
             this.name = name;
@@ -8095,6 +8095,7 @@
             this.url = url;
             this.active = active;
             this.description = null;
+            this.form = null;
             this.onClick = null;
             this.onDelete = null;
             this.title = name;