ps-toolkit-ui 1.12.63 → 1.12.64

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

@@ -2652,7 +2652,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]=\"(steps.getCurrent() > i || steps.isDone ? 'done ' : steps.getCurrent() === i ? 'process ' : steps.activeAll ? 'next ' : '') + (steps.getActive() === i ? 'active ' : '') + 'step-con'\">\r\n      <div [className]=\"(s.description ? 'with-description ' : '') + (steps.updateAccess ? '' : 'disable ') + 'step'\" (click)=\"changeStep(s)\">\r\n        <div *ngIf=\"s.icon != null\" [className]=\"s.icon + ' icon fa svg'\"></div>\r\n        <div class=\"title\">{{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 fa-duotone fa-dot-circle\"></i>\r\n        <i class=\"dot dot-done fa-duotone fa-circle-check green\"></i>\r\n        <i class=\"dot dot-process fa-duotone fa-circle-ellipsis\"></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  <div class=\"body\">\r\n    <span #ref><ng-content></ng-content></span>\r\n    <span *ngIf=\"!ref.innerHTML.trim()\">\r\n      Content if empty\r\n    </span>\r\n    <span *ngIf=\"!ref.children.length\">\r\n      Content if empty 2\r\n    </span>\r\n  </div>\r\n  <div class=\"footer topline p-t-20 m-t-20\" *ngIf=\"steps.viewAccess\">\r\n    <lib-form-button [inp]=\"saveNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() === steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() !== steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"previous\" *ngIf=\"steps.getActive() !== 0 && steps.updateAccess\"></lib-form-button>\r\n    <lib-form-button [inp]=\"saveDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && !steps.isDone\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && steps.isDone\"></lib-form-button>\r\n  </div>\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]=\"(steps.getCurrent() > i || steps.isDone ? 'done ' : steps.getCurrent() === i ? 'process ' : steps.activeAll ? 'next ' : '') + (steps.getActive() === i ? 'active ' : '') + 'step-con'\">\r\n      <div [className]=\"(s.description ? 'with-description ' : '') + (steps.updateAccess ? '' : 'disable ') + 'step'\" (click)=\"changeStep(s)\">\r\n        <div *ngIf=\"s.icon != null\" [className]=\"s.icon + ' icon fa svg'\"></div>\r\n        <div class=\"title\">{{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 fa-duotone fa-dot-circle\"></i>\r\n        <i class=\"dot dot-done fa-duotone fa-circle-check green\"></i>\r\n        <i class=\"dot dot-process fa-duotone fa-circle-ellipsis\"></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  <div class=\"body\">\r\n    <span #ref><ng-content></ng-content></span>\r\n    <span *ngIf=\"!ref.children.length\">\r\n      <div *ngFor=\"let s of steps.items; let i = index\" class=\"step-con\">\r\n        <span *ngIf=\"steps.getActive() === i\">\r\n          <lib-form *ngIf=\"s.form != null\" [form]=\"s.form\"></lib-form>\r\n        </span>\r\n      </div>\r\n    </span>\r\n  </div>\r\n  <div class=\"footer topline p-t-20 m-t-20\" *ngIf=\"steps.viewAccess\">\r\n    <lib-form-button [inp]=\"saveNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() === steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() !== steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"previous\" *ngIf=\"steps.getActive() !== 0 && steps.updateAccess\"></lib-form-button>\r\n    <lib-form-button [inp]=\"saveDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && !steps.isDone\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && steps.isDone\"></lib-form-button>\r\n  </div>\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;display:flex;justify-content:center}.steps>.header>.step-con{display:flex;float:right;padding:5px;position:relative;width:160px}.steps>.header>.step-con .step{align-items:center;border-radius:var(--border-radius-base);cursor:default;display:flex;flex-direction:column;float:right;justify-content:center;padding:10px 5px;pointer-events:none;position:relative;text-align:center;width:100%}.steps>.header>.step-con.done .step:not(.disable),.steps>.header>.step-con.next .step:not(.disable),.steps>.header>.step-con.process .step:not(.disable){cursor:pointer;pointer-events:unset}.steps>.header>.step-con.active .step,.steps>.header>.step-con.done .step:not(.disable):hover,.steps>.header>.step-con.next .step:not(.disable):hover,.steps>.header>.step-con.process .step:not(.disable):hover{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{align-items:center;display:flex;float:right;font-size:10px;height:100%;justify-content:center;line-height:15px;margin-bottom:15px;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;font-size:20px;height:25px;line-height:25px;width:25px}.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(--green);display:none}.steps>.header>.step-con .step .dot.dot-process{color:var(--primary);display:none}.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,0),rgba(51,51,51,.3));bottom:21px;height:2px;position:absolute;right:-5px;width:calc(50% + 5px)}.steps>.header>.step-con .step .line-l{background-image:linear-gradient(270deg,rgba(51,51,51,0),rgba(51,51,51,.3));bottom:21px;height:2px;left:-5px;position:absolute;width:calc(50% + 5px)}.steps>.header>.step-con:first-of-type .step .line-r,.steps>.header>.step-con:last-of-type .step .line-l{display:none}.steps>.body{float:right;min-height:calc(100vh - 400px);width:100%}.steps>.footer{float:right;position:relative;width:100%}@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%}}"]
                 },] }
     ];