ngx-sumax-erp-components 1.0.35 → 1.0.36

package/esm2022/lib/sc-wizard/sc-wizard.component.mjs

@@ -45,11 +45,11 @@ export class ScWizardComponent extends CdkStepper {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ScWizardComponent, deps: [{ token: i1.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ScWizardComponent, selector: "sc-wizard", inputs: { hasAutoFillSteps: "hasAutoFillSteps", hasSkeleton: "hasSkeleton", showArrows: "showArrows", subWizard: "subWizard", baseSubWizard: "baseSubWizard", showExpanded: "showExpanded", stepNavigationHandler: "stepNavigationHandler" }, outputs: { clickStepEmit: "clickStepEmit" }, providers: [{ provide: CdkStepper, useExisting: ScWizardComponent }], viewQueries: [{ propertyName: "_scWizardContainer", first: true, predicate: ["scWizardContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div \r\n  [class.sc-wizard-horizontal]=\"this.orientation === 'horizontal'\"\r\n  [class.sc-wizard-vertical]=\"this.orientation === 'vertical'\" \r\n  [class.sc-wizard-vertical-nav]=\"this.orientation === 'vertical' && isExpanded\">\r\n  <div \r\n    [class]=\"'sc-wizard-' + orientation + (isExpanded ? '-nav' : '') + '-steps-container'\"\r\n    [ngStyle]=\"{ display: 'grid', 'margin-right':  '0px' }\">\r\n    <!--PREVIOUS STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.selectedIndex === 0\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button prev'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperPrevious>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"chevron_left\" : \"expand_less\" }}</mat-icon>\r\n    </button>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'horizontal'\">\r\n      <ng-container *ngIf=\"hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps sc-wizard-horizontal-steps-fill\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps\">\r\n          <div class=\"sc-wizard-horizontal-steps-wrapper\" [style.width]=\"24 * steps.length + 'rem'\">\r\n            <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'vertical'\">\r\n      <div style=\"display: flex; justify-content: space-between;\">\r\n        <div class=\"sc-wizard-steps sc-wizard-vertical-steps\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n          <div class=\"sc-wizard-expand-icon-container\">\r\n            <ng-container *ngIf=\"showExpanded\">\r\n              <em class=\"z-3 fa\" [ngClass]=\"{ 'fa-chevron-right': isExpanded, 'fa-chevron-left': !isExpanded }\" style=\"cursor: pointer; font-size: 18px\" (click)=\"this.isExpanded = !this.isExpanded\"> </em>\r\n            </ng-container>\r\n          </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!--NEXT STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.steps.length - 1 === this.selectedIndex\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button next'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperNext>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"navigate_next\" : \"expand_more\" }}</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div #scWizardContainer [class.sc-wizard-skeleton]=\"hasSkeleton\" [class]=\"'sc-wizard-' + orientation + '-content'\">\r\n    <ng-container [ngTemplateOutlet]=\"selected ? selected.content : null\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #templateSteps>\r\n\t<div\r\n\t\t*ngFor=\"let step of steps; let i = index\"\r\n\t\t[class.invisible]=\"step.content.elementRef.nativeElement.parentNode.className === 'invisible'\"\r\n\t\t[tabIndex]=\"selectedIndex === i ? 1 : -1\"\r\n\t\t[attr.data-position]=\"i\"\r\n\t\t[class.sc-wizard-steps-item-active]=\"selectedIndex === i && !step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-error]=\"selectedIndex === i && step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-disable]=\"!step.editable || convertLabelToType(step.label)!.disabled\"\r\n\t\tclass=\"sc-wizard-steps-item\"\r\n\t\t[class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n\t\t(click)=\"goTo(i); clickStepEmit.emit(i)\">\r\n\t\t<span\r\n      [matTooltipClass]=\"showExpanded && isExpanded && step.hasError ? 'custom-mat-tooltip-error' : 'custom-mat-tooltip-active'\"\r\n      [matTooltip]=\"isExpanded ? convertLabelToType(step.label)!.title : ''\"\r\n\t\t\tclass=\"sc-wizard-steps-item-number d-flex justify-content-center align-items-center\"\r\n\t\t\t[class.sc-wizard-steps-item-number-active]=\"selectedIndex === i\"\r\n\t\t\t[class.sc-wizard-steps-item-number-error]=\"step.hasError\">\r\n      <ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label).icon\">\r\n\t\t\t\t<em [class]=\"convertLabelToType(step.label).icon\"></em>\r\n\t\t\t</ng-container>\r\n      <ng-container *ngIf=\"!step.hasError && !convertLabelToType(step.label).icon\">\r\n\t\t\t\t{{ subWizard ? baseSubWizard + '.' + (i + 1) : i + 1 }}\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t<em class=\"fa fa-exclamation-triangle\"></em>\r\n\t\t\t</ng-container>\r\n\t\t</span>\r\n\r\n\t\t<div\r\n      *ngIf=\"!isExpanded\"\r\n\t\t\tclass=\"sc-wizard-steps-item-label\"\r\n\t\t\t[class.sc-wizard-steps-item-label-error]=\"step.hasError\">\r\n\t\t\t<p\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-title\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-active]=\"selectedIndex === i\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-error]=\"step.hasError\">\r\n\t\t\t\t{{ convertLabelToType(step.label).title }}\r\n\t\t\t</p>\r\n\t\t\t<span\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-subtitle\"\r\n\t\t\t\t[ngStyle]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleStyleActive! : null\"\r\n\t\t\t\t[ngClass]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleClassActive! : []\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-subtitle-error]=\"step.hasError\">\r\n\t\t\t\t<ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label)?.subtitle\">\r\n\t\t\t\t\t{{ convertLabelToType(step.label).subtitle }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t\t{{ step.errorMessage }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t</span>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>", styles: [":host{font-family:Soho Gothic Pro,Arial,Helvetica,sans-serif;background-color:#fff;overflow:hidden;height:100%;width:100%;display:block}.sc-wizard-horizontal{display:grid;height:100%;grid-template-rows:auto 1fr}.sc-wizard-horizontal-steps{width:100%;overflow:auto hidden}.sc-wizard-horizontal-steps-fill,.sc-wizard-horizontal-steps-wrapper{display:flex;gap:.5rem}.sc-wizard-horizontal-steps-fill{overflow:hidden}.sc-wizard-horizontal-steps-fill .sc-wizard-steps-item{flex:1}.sc-wizard-horizontal-steps .sc-wizard-steps-item{width:24rem;margin-bottom:0}.sc-wizard-vertical{height:100%;display:flex}.sc-wizard-vertical-steps{overflow:hidden auto;margin-right:1rem;width:100%}.sc-wizard-vertical-steps-container{min-width:280px;width:20%}.sc-wizard-vertical-nav{height:100%;display:flex}.sc-wizard-vertical-nav-steps{overflow:hidden auto;margin-right:1rem}.sc-wizard-vertical-nav-steps-container{min-width:125px;width:6%;transition:.1s all;align-content:start}::ng-deep .custom-mat-tooltip-error{--mdc-plain-tooltip-container-color: #fd397a}::ng-deep .custom-mat-tooltip-active{--mdc-plain-tooltip-container-color: #646c9a}.sc-wizard-expand-icon-container{display:flex;align-items:center;height:100%;justify-content:flex-end;padding-right:1rem}.sc-wizard-steps,.sc-wizard-horizontal-content,.sc-wizard-vertical-content{height:100%;scroll-behavior:smooth}.sc-wizard-horizontal-steps-container,.sc-wizard-vertical-steps-container{height:100%;display:grid;border-radius:.8rem}.sc-wizard-horizontal-steps-container{grid-template-columns:auto 1fr auto}.sc-wizard-vertical-steps-container{grid-template-rows:auto 1fr auto}.sc-wizard-steps-item{display:flex;align-items:center;cursor:pointer;padding:.8rem 1rem;border-radius:.8rem;margin-bottom:.4em;transition:.3s all}.sc-wizard-steps-item:last-child{margin-bottom:0}.sc-wizard-steps-item-disable{pointer-events:none;opacity:.5}.sc-wizard-steps-item-active{position:relative;background-color:#646c9a21}.sc-wizard-steps-item-error{background-color:#fd397a21}.sc-wizard-steps-item-number{border-radius:8px;background-color:#f3f3f7;color:#646c9a;font-size:1.3rem;font-weight:700;margin-right:1rem;height:3.2rem;width:3rem;text-align:center;position:relative}.sc-wizard-steps-item-number em,.sc-wizard-steps-item-number span{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%)}.sc-wizard-steps-item-number-active{color:#fff;background-color:#646c9a}.sc-wizard-steps-item-number-error{color:#fff;background-color:#fd397a}.sc-wizard-steps-item-label-title{margin:0;font-weight:100;color:#646c9a;font-size:16px}.sc-wizard-steps-item-label-title-active{font-weight:700}.sc-wizard-steps-item-label-title-error{color:#fd397a}.sc-wizard-steps-item-label-subtitle{color:gray;font-size:11px}.sc-wizard-steps-item-label-subtitle-error{color:#fd397a}.sc-wizard-horizontal-content,.sc-wizard-vertical-content{background-color:#fff;overflow:hidden auto}.sc-wizard-horizontal-content{padding:1rem 0;width:100%;margin-top:.4rem}.sc-wizard-vertical-content{overflow:hidden auto;padding:1rem;width:80%}.sc-wizard-content{padding:1rem}@media screen and (min-height: 750px){.sc-wizard-content{height:calc(100vh - 333px)}}.sc-wizard-horizontal-button,.sc-wizard-vertical-button{margin:auto;transition:all .3s;height:3rem;width:3.1rem}.sc-wizard-vertical-button.prev{margin-bottom:1rem}.sc-wizard-vertical-button.next{margin-top:1rem}.sc-wizard-horizontal-button.prev{margin-right:1rem}.sc-wizard-horizontal-button.next{margin-left:1rem}.sc-wizard-skeleton{overflow:hidden;position:relative}.sc-wizard-skeleton:after{content:\"\";width:100%;height:100%;background:#dedfe1;background:#e6e6e6;background-image:linear-gradient(to right,#e6e6e6,#f2f3f5 20%,#e6e6e6 40% 100%);background-repeat:no-repeat;position:absolute;left:0;top:0;z-index:5;border-radius:.8rem;animation:loading 1.1s infinite linear}@keyframes loading{0%{background-position:-100px}to{background-position:200px}}.visible{visibility:visible}.invisible{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.CdkStepperNext, selector: "button[cdkStepperNext]", inputs: ["type"] }, { kind: "directive", type: i3.CdkStepperPrevious, selector: "button[cdkStepperPrevious]", inputs: ["type"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ScWizardComponent, selector: "sc-wizard", inputs: { hasAutoFillSteps: "hasAutoFillSteps", hasSkeleton: "hasSkeleton", showArrows: "showArrows", subWizard: "subWizard", baseSubWizard: "baseSubWizard", showExpanded: "showExpanded", stepNavigationHandler: "stepNavigationHandler" }, outputs: { clickStepEmit: "clickStepEmit" }, providers: [{ provide: CdkStepper, useExisting: ScWizardComponent }], viewQueries: [{ propertyName: "_scWizardContainer", first: true, predicate: ["scWizardContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div \r\n  [class.sc-wizard-horizontal]=\"this.orientation === 'horizontal'\"\r\n  [class.sc-wizard-vertical]=\"this.orientation === 'vertical'\" \r\n  [class.sc-wizard-vertical-nav]=\"this.orientation === 'vertical' && isExpanded\">\r\n  <div \r\n    [class]=\"'sc-wizard-' + orientation + (isExpanded ? '-nav' : '') + '-steps-container'\"\r\n    [ngStyle]=\"{ display: 'grid', 'margin-right':  '0px' }\">\r\n    <!--PREVIOUS STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.selectedIndex === 0\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button prev'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperPrevious>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"chevron_left\" : \"expand_less\" }}</mat-icon>\r\n    </button>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'horizontal'\">\r\n      <ng-container *ngIf=\"hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps sc-wizard-horizontal-steps-fill\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps\">\r\n          <div class=\"sc-wizard-horizontal-steps-wrapper\" [style.width]=\"24 * steps.length + 'rem'\">\r\n            <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'vertical'\">\r\n      <div style=\"display: flex; justify-content: space-between;\">\r\n        <div class=\"sc-wizard-steps sc-wizard-vertical-steps\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n          <div class=\"sc-wizard-expand-icon-container\">\r\n            <ng-container *ngIf=\"showExpanded\">\r\n              <em class=\"z-3 fa\" [ngClass]=\"{ 'fa-chevron-right': isExpanded, 'fa-chevron-left': !isExpanded }\" style=\"cursor: pointer; font-size: 18px\" (click)=\"this.isExpanded = !this.isExpanded\"> </em>\r\n            </ng-container>\r\n          </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!--NEXT STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.steps.length - 1 === this.selectedIndex\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button next'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperNext>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"navigate_next\" : \"expand_more\" }}</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div #scWizardContainer [class.sc-wizard-skeleton]=\"hasSkeleton\" [class]=\"'sc-wizard-' + orientation + '-content'\">\r\n    <ng-container [ngTemplateOutlet]=\"selected ? selected.content : null\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #templateSteps>\r\n\t<div\r\n\t\t*ngFor=\"let step of steps; let i = index\"\r\n\t\t[class.invisible]=\"step.content.elementRef.nativeElement.parentNode.className === 'invisible'\"\r\n\t\t[tabIndex]=\"selectedIndex === i ? 1 : -1\"\r\n\t\t[attr.data-position]=\"i\"\r\n\t\t[class.sc-wizard-steps-item-active]=\"selectedIndex === i && !step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-error]=\"selectedIndex === i && step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-disable]=\"!step.editable || convertLabelToType(step.label)!.disabled\"\r\n\t\tclass=\"sc-wizard-steps-item\"\r\n\t\t[class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n\t\t(click)=\"goTo(i); clickStepEmit.emit(i)\">\r\n\t\t<span\r\n      [matTooltipClass]=\"showExpanded && isExpanded && step.hasError ? 'custom-mat-tooltip-error' : 'custom-mat-tooltip-active'\"\r\n      [matTooltip]=\"isExpanded ? convertLabelToType(step.label)!.title : ''\"\r\n\t\t\tclass=\"sc-wizard-steps-item-number d-flex justify-content-center align-items-center\"\r\n\t\t\t[class.sc-wizard-steps-item-number-active]=\"selectedIndex === i\"\r\n\t\t\t[class.sc-wizard-steps-item-number-error]=\"step.hasError\">\r\n      <ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label).icon\">\r\n\t\t\t\t<em [class]=\"convertLabelToType(step.label).icon\"></em>\r\n\t\t\t</ng-container>\r\n      <ng-container *ngIf=\"!step.hasError && !convertLabelToType(step.label).icon\">\r\n\t\t\t\t{{ subWizard ? baseSubWizard + '.' + (i + 1) : i + 1 }}\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t<em class=\"fa fa-exclamation-triangle\"></em>\r\n\t\t\t</ng-container>\r\n\t\t</span>\r\n\r\n\t\t<div\r\n      *ngIf=\"!isExpanded\"\r\n\t\t\tclass=\"sc-wizard-steps-item-label\"\r\n\t\t\t[class.sc-wizard-steps-item-label-error]=\"step.hasError\">\r\n\t\t\t<p\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-title\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-active]=\"selectedIndex === i\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-error]=\"step.hasError\">\r\n\t\t\t\t{{ convertLabelToType(step.label).title }}\r\n\t\t\t</p>\r\n\t\t\t<span\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-subtitle\"\r\n\t\t\t\t[ngStyle]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleStyleActive! : null\"\r\n\t\t\t\t[ngClass]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleClassActive! : []\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-subtitle-error]=\"step.hasError\">\r\n\t\t\t\t<ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label)?.subtitle\">\r\n\t\t\t\t\t{{ convertLabelToType(step.label).subtitle }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t\t{{ step.errorMessage }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t</span>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>", styles: [":host{font-family:Soho Gothic Pro,Arial,Helvetica,sans-serif;background-color:#fff;overflow:hidden;height:100%;width:100%;display:block}.sc-wizard-horizontal{display:grid;height:100%;grid-template-rows:auto 1fr}.sc-wizard-horizontal-steps{width:100%;overflow:auto hidden}.sc-wizard-horizontal-steps-fill,.sc-wizard-horizontal-steps-wrapper{display:flex;gap:.5rem}.sc-wizard-horizontal-steps-fill{overflow:hidden}.sc-wizard-horizontal-steps-fill .sc-wizard-steps-item{flex:1}.sc-wizard-horizontal-steps .sc-wizard-steps-item{width:24rem;margin-bottom:0}.sc-wizard-vertical{height:100%;display:flex}.sc-wizard-vertical-steps{overflow:hidden auto;margin-right:1rem;width:100%}.sc-wizard-vertical-steps-container{min-width:280px;width:20%}.sc-wizard-vertical-nav{height:100%;display:flex}.sc-wizard-vertical-nav-steps{overflow:hidden auto;margin-right:1rem}.sc-wizard-vertical-nav-steps-container{min-width:125px;width:6%;transition:.1s all;align-content:start}::ng-deep .custom-mat-tooltip-error{--mdc-plain-tooltip-container-color: #fd397a}::ng-deep .custom-mat-tooltip-active{--mdc-plain-tooltip-container-color: #646c9a}.sc-wizard-expand-icon-container{display:flex;align-items:center;height:100%;justify-content:flex-end;padding-right:1rem}.sc-wizard-steps,.sc-wizard-horizontal-content,.sc-wizard-vertical-content{height:100%;scroll-behavior:smooth}.sc-wizard-horizontal-steps-container,.sc-wizard-vertical-steps-container{height:100%;display:grid;border-radius:.8rem}.sc-wizard-horizontal-steps-container{grid-template-columns:auto 1fr auto}.sc-wizard-vertical-steps-container{grid-template-rows:auto 1fr auto}.sc-wizard-steps-item{display:flex;align-items:center;cursor:pointer;padding:.8rem 1rem;border-radius:.8rem;margin-bottom:.4em;transition:.3s all}.sc-wizard-steps-item:last-child{margin-bottom:0}.sc-wizard-steps-item-disable{pointer-events:none;opacity:.5}.sc-wizard-steps-item-active{position:relative;background-color:#646c9a21}.sc-wizard-steps-item-error{background-color:#fd397a21}.sc-wizard-steps-item-number{border-radius:8px;background-color:#f3f3f7;color:#646c9a;font-size:1.3rem;font-weight:700;margin-right:1rem;height:3.2rem;width:3rem;text-align:center;position:relative}.sc-wizard-steps-item-number em,.sc-wizard-steps-item-number span{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%)}.sc-wizard-steps-item-number-active{color:#fff;background-color:#646c9a}.sc-wizard-steps-item-number-error{color:#fff;background-color:#fd397a}.sc-wizard-steps-item-label-title{margin:0;font-weight:100;color:#646c9a;font-size:16px}.sc-wizard-steps-item-label-title-active{font-weight:700}.sc-wizard-steps-item-label-title-error{color:#fd397a}.sc-wizard-steps-item-label-subtitle{color:gray;font-size:11px}.sc-wizard-steps-item-label-subtitle-error{color:#fd397a}.sc-wizard-horizontal-content,.sc-wizard-vertical-content{background-color:#fff;overflow:hidden auto}.sc-wizard-horizontal-content{padding:1rem 0;width:100%;margin-top:.4rem}.sc-wizard-vertical-content{overflow:hidden auto;padding:1rem;width:100%}.sc-wizard-content{padding:1rem}@media screen and (min-height: 750px){.sc-wizard-content{height:calc(100vh - 333px)}}.sc-wizard-horizontal-button,.sc-wizard-vertical-button{margin:auto;transition:all .3s;height:3rem;width:3.1rem}.sc-wizard-vertical-button.prev{margin-bottom:1rem}.sc-wizard-vertical-button.next{margin-top:1rem}.sc-wizard-horizontal-button.prev{margin-right:1rem}.sc-wizard-horizontal-button.next{margin-left:1rem}.sc-wizard-skeleton{overflow:hidden;position:relative}.sc-wizard-skeleton:after{content:\"\";width:100%;height:100%;background:#dedfe1;background:#e6e6e6;background-image:linear-gradient(to right,#e6e6e6,#f2f3f5 20%,#e6e6e6 40% 100%);background-repeat:no-repeat;position:absolute;left:0;top:0;z-index:5;border-radius:.8rem;animation:loading 1.1s infinite linear}@keyframes loading{0%{background-position:-100px}to{background-position:200px}}.visible{visibility:visible}.invisible{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.CdkStepperNext, selector: "button[cdkStepperNext]", inputs: ["type"] }, { kind: "directive", type: i3.CdkStepperPrevious, selector: "button[cdkStepperPrevious]", inputs: ["type"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ScWizardComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sc-wizard", providers: [{ provide: CdkStepper, useExisting: ScWizardComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  [class.sc-wizard-horizontal]=\"this.orientation === 'horizontal'\"\r\n  [class.sc-wizard-vertical]=\"this.orientation === 'vertical'\" \r\n  [class.sc-wizard-vertical-nav]=\"this.orientation === 'vertical' && isExpanded\">\r\n  <div \r\n    [class]=\"'sc-wizard-' + orientation + (isExpanded ? '-nav' : '') + '-steps-container'\"\r\n    [ngStyle]=\"{ display: 'grid', 'margin-right':  '0px' }\">\r\n    <!--PREVIOUS STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.selectedIndex === 0\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button prev'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperPrevious>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"chevron_left\" : \"expand_less\" }}</mat-icon>\r\n    </button>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'horizontal'\">\r\n      <ng-container *ngIf=\"hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps sc-wizard-horizontal-steps-fill\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps\">\r\n          <div class=\"sc-wizard-horizontal-steps-wrapper\" [style.width]=\"24 * steps.length + 'rem'\">\r\n            <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'vertical'\">\r\n      <div style=\"display: flex; justify-content: space-between;\">\r\n        <div class=\"sc-wizard-steps sc-wizard-vertical-steps\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n          <div class=\"sc-wizard-expand-icon-container\">\r\n            <ng-container *ngIf=\"showExpanded\">\r\n              <em class=\"z-3 fa\" [ngClass]=\"{ 'fa-chevron-right': isExpanded, 'fa-chevron-left': !isExpanded }\" style=\"cursor: pointer; font-size: 18px\" (click)=\"this.isExpanded = !this.isExpanded\"> </em>\r\n            </ng-container>\r\n          </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!--NEXT STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.steps.length - 1 === this.selectedIndex\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button next'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperNext>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"navigate_next\" : \"expand_more\" }}</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div #scWizardContainer [class.sc-wizard-skeleton]=\"hasSkeleton\" [class]=\"'sc-wizard-' + orientation + '-content'\">\r\n    <ng-container [ngTemplateOutlet]=\"selected ? selected.content : null\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #templateSteps>\r\n\t<div\r\n\t\t*ngFor=\"let step of steps; let i = index\"\r\n\t\t[class.invisible]=\"step.content.elementRef.nativeElement.parentNode.className === 'invisible'\"\r\n\t\t[tabIndex]=\"selectedIndex === i ? 1 : -1\"\r\n\t\t[attr.data-position]=\"i\"\r\n\t\t[class.sc-wizard-steps-item-active]=\"selectedIndex === i && !step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-error]=\"selectedIndex === i && step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-disable]=\"!step.editable || convertLabelToType(step.label)!.disabled\"\r\n\t\tclass=\"sc-wizard-steps-item\"\r\n\t\t[class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n\t\t(click)=\"goTo(i); clickStepEmit.emit(i)\">\r\n\t\t<span\r\n      [matTooltipClass]=\"showExpanded && isExpanded && step.hasError ? 'custom-mat-tooltip-error' : 'custom-mat-tooltip-active'\"\r\n      [matTooltip]=\"isExpanded ? convertLabelToType(step.label)!.title : ''\"\r\n\t\t\tclass=\"sc-wizard-steps-item-number d-flex justify-content-center align-items-center\"\r\n\t\t\t[class.sc-wizard-steps-item-number-active]=\"selectedIndex === i\"\r\n\t\t\t[class.sc-wizard-steps-item-number-error]=\"step.hasError\">\r\n      <ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label).icon\">\r\n\t\t\t\t<em [class]=\"convertLabelToType(step.label).icon\"></em>\r\n\t\t\t</ng-container>\r\n      <ng-container *ngIf=\"!step.hasError && !convertLabelToType(step.label).icon\">\r\n\t\t\t\t{{ subWizard ? baseSubWizard + '.' + (i + 1) : i + 1 }}\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t<em class=\"fa fa-exclamation-triangle\"></em>\r\n\t\t\t</ng-container>\r\n\t\t</span>\r\n\r\n\t\t<div\r\n      *ngIf=\"!isExpanded\"\r\n\t\t\tclass=\"sc-wizard-steps-item-label\"\r\n\t\t\t[class.sc-wizard-steps-item-label-error]=\"step.hasError\">\r\n\t\t\t<p\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-title\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-active]=\"selectedIndex === i\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-error]=\"step.hasError\">\r\n\t\t\t\t{{ convertLabelToType(step.label).title }}\r\n\t\t\t</p>\r\n\t\t\t<span\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-subtitle\"\r\n\t\t\t\t[ngStyle]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleStyleActive! : null\"\r\n\t\t\t\t[ngClass]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleClassActive! : []\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-subtitle-error]=\"step.hasError\">\r\n\t\t\t\t<ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label)?.subtitle\">\r\n\t\t\t\t\t{{ convertLabelToType(step.label).subtitle }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t\t{{ step.errorMessage }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t</span>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>", styles: [":host{font-family:Soho Gothic Pro,Arial,Helvetica,sans-serif;background-color:#fff;overflow:hidden;height:100%;width:100%;display:block}.sc-wizard-horizontal{display:grid;height:100%;grid-template-rows:auto 1fr}.sc-wizard-horizontal-steps{width:100%;overflow:auto hidden}.sc-wizard-horizontal-steps-fill,.sc-wizard-horizontal-steps-wrapper{display:flex;gap:.5rem}.sc-wizard-horizontal-steps-fill{overflow:hidden}.sc-wizard-horizontal-steps-fill .sc-wizard-steps-item{flex:1}.sc-wizard-horizontal-steps .sc-wizard-steps-item{width:24rem;margin-bottom:0}.sc-wizard-vertical{height:100%;display:flex}.sc-wizard-vertical-steps{overflow:hidden auto;margin-right:1rem;width:100%}.sc-wizard-vertical-steps-container{min-width:280px;width:20%}.sc-wizard-vertical-nav{height:100%;display:flex}.sc-wizard-vertical-nav-steps{overflow:hidden auto;margin-right:1rem}.sc-wizard-vertical-nav-steps-container{min-width:125px;width:6%;transition:.1s all;align-content:start}::ng-deep .custom-mat-tooltip-error{--mdc-plain-tooltip-container-color: #fd397a}::ng-deep .custom-mat-tooltip-active{--mdc-plain-tooltip-container-color: #646c9a}.sc-wizard-expand-icon-container{display:flex;align-items:center;height:100%;justify-content:flex-end;padding-right:1rem}.sc-wizard-steps,.sc-wizard-horizontal-content,.sc-wizard-vertical-content{height:100%;scroll-behavior:smooth}.sc-wizard-horizontal-steps-container,.sc-wizard-vertical-steps-container{height:100%;display:grid;border-radius:.8rem}.sc-wizard-horizontal-steps-container{grid-template-columns:auto 1fr auto}.sc-wizard-vertical-steps-container{grid-template-rows:auto 1fr auto}.sc-wizard-steps-item{display:flex;align-items:center;cursor:pointer;padding:.8rem 1rem;border-radius:.8rem;margin-bottom:.4em;transition:.3s all}.sc-wizard-steps-item:last-child{margin-bottom:0}.sc-wizard-steps-item-disable{pointer-events:none;opacity:.5}.sc-wizard-steps-item-active{position:relative;background-color:#646c9a21}.sc-wizard-steps-item-error{background-color:#fd397a21}.sc-wizard-steps-item-number{border-radius:8px;background-color:#f3f3f7;color:#646c9a;font-size:1.3rem;font-weight:700;margin-right:1rem;height:3.2rem;width:3rem;text-align:center;position:relative}.sc-wizard-steps-item-number em,.sc-wizard-steps-item-number span{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%)}.sc-wizard-steps-item-number-active{color:#fff;background-color:#646c9a}.sc-wizard-steps-item-number-error{color:#fff;background-color:#fd397a}.sc-wizard-steps-item-label-title{margin:0;font-weight:100;color:#646c9a;font-size:16px}.sc-wizard-steps-item-label-title-active{font-weight:700}.sc-wizard-steps-item-label-title-error{color:#fd397a}.sc-wizard-steps-item-label-subtitle{color:gray;font-size:11px}.sc-wizard-steps-item-label-subtitle-error{color:#fd397a}.sc-wizard-horizontal-content,.sc-wizard-vertical-content{background-color:#fff;overflow:hidden auto}.sc-wizard-horizontal-content{padding:1rem 0;width:100%;margin-top:.4rem}.sc-wizard-vertical-content{overflow:hidden auto;padding:1rem;width:80%}.sc-wizard-content{padding:1rem}@media screen and (min-height: 750px){.sc-wizard-content{height:calc(100vh - 333px)}}.sc-wizard-horizontal-button,.sc-wizard-vertical-button{margin:auto;transition:all .3s;height:3rem;width:3.1rem}.sc-wizard-vertical-button.prev{margin-bottom:1rem}.sc-wizard-vertical-button.next{margin-top:1rem}.sc-wizard-horizontal-button.prev{margin-right:1rem}.sc-wizard-horizontal-button.next{margin-left:1rem}.sc-wizard-skeleton{overflow:hidden;position:relative}.sc-wizard-skeleton:after{content:\"\";width:100%;height:100%;background:#dedfe1;background:#e6e6e6;background-image:linear-gradient(to right,#e6e6e6,#f2f3f5 20%,#e6e6e6 40% 100%);background-repeat:no-repeat;position:absolute;left:0;top:0;z-index:5;border-radius:.8rem;animation:loading 1.1s infinite linear}@keyframes loading{0%{background-position:-100px}to{background-position:200px}}.visible{visibility:visible}.invisible{visibility:hidden}\n"] }]
+            args: [{ selector: "sc-wizard", providers: [{ provide: CdkStepper, useExisting: ScWizardComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  [class.sc-wizard-horizontal]=\"this.orientation === 'horizontal'\"\r\n  [class.sc-wizard-vertical]=\"this.orientation === 'vertical'\" \r\n  [class.sc-wizard-vertical-nav]=\"this.orientation === 'vertical' && isExpanded\">\r\n  <div \r\n    [class]=\"'sc-wizard-' + orientation + (isExpanded ? '-nav' : '') + '-steps-container'\"\r\n    [ngStyle]=\"{ display: 'grid', 'margin-right':  '0px' }\">\r\n    <!--PREVIOUS STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.selectedIndex === 0\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button prev'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperPrevious>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"chevron_left\" : \"expand_less\" }}</mat-icon>\r\n    </button>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'horizontal'\">\r\n      <ng-container *ngIf=\"hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps sc-wizard-horizontal-steps-fill\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps\">\r\n          <div class=\"sc-wizard-horizontal-steps-wrapper\" [style.width]=\"24 * steps.length + 'rem'\">\r\n            <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'vertical'\">\r\n      <div style=\"display: flex; justify-content: space-between;\">\r\n        <div class=\"sc-wizard-steps sc-wizard-vertical-steps\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n          <div class=\"sc-wizard-expand-icon-container\">\r\n            <ng-container *ngIf=\"showExpanded\">\r\n              <em class=\"z-3 fa\" [ngClass]=\"{ 'fa-chevron-right': isExpanded, 'fa-chevron-left': !isExpanded }\" style=\"cursor: pointer; font-size: 18px\" (click)=\"this.isExpanded = !this.isExpanded\"> </em>\r\n            </ng-container>\r\n          </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!--NEXT STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.steps.length - 1 === this.selectedIndex\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button next'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperNext>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"navigate_next\" : \"expand_more\" }}</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div #scWizardContainer [class.sc-wizard-skeleton]=\"hasSkeleton\" [class]=\"'sc-wizard-' + orientation + '-content'\">\r\n    <ng-container [ngTemplateOutlet]=\"selected ? selected.content : null\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #templateSteps>\r\n\t<div\r\n\t\t*ngFor=\"let step of steps; let i = index\"\r\n\t\t[class.invisible]=\"step.content.elementRef.nativeElement.parentNode.className === 'invisible'\"\r\n\t\t[tabIndex]=\"selectedIndex === i ? 1 : -1\"\r\n\t\t[attr.data-position]=\"i\"\r\n\t\t[class.sc-wizard-steps-item-active]=\"selectedIndex === i && !step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-error]=\"selectedIndex === i && step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-disable]=\"!step.editable || convertLabelToType(step.label)!.disabled\"\r\n\t\tclass=\"sc-wizard-steps-item\"\r\n\t\t[class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n\t\t(click)=\"goTo(i); clickStepEmit.emit(i)\">\r\n\t\t<span\r\n      [matTooltipClass]=\"showExpanded && isExpanded && step.hasError ? 'custom-mat-tooltip-error' : 'custom-mat-tooltip-active'\"\r\n      [matTooltip]=\"isExpanded ? convertLabelToType(step.label)!.title : ''\"\r\n\t\t\tclass=\"sc-wizard-steps-item-number d-flex justify-content-center align-items-center\"\r\n\t\t\t[class.sc-wizard-steps-item-number-active]=\"selectedIndex === i\"\r\n\t\t\t[class.sc-wizard-steps-item-number-error]=\"step.hasError\">\r\n      <ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label).icon\">\r\n\t\t\t\t<em [class]=\"convertLabelToType(step.label).icon\"></em>\r\n\t\t\t</ng-container>\r\n      <ng-container *ngIf=\"!step.hasError && !convertLabelToType(step.label).icon\">\r\n\t\t\t\t{{ subWizard ? baseSubWizard + '.' + (i + 1) : i + 1 }}\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t<em class=\"fa fa-exclamation-triangle\"></em>\r\n\t\t\t</ng-container>\r\n\t\t</span>\r\n\r\n\t\t<div\r\n      *ngIf=\"!isExpanded\"\r\n\t\t\tclass=\"sc-wizard-steps-item-label\"\r\n\t\t\t[class.sc-wizard-steps-item-label-error]=\"step.hasError\">\r\n\t\t\t<p\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-title\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-active]=\"selectedIndex === i\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-error]=\"step.hasError\">\r\n\t\t\t\t{{ convertLabelToType(step.label).title }}\r\n\t\t\t</p>\r\n\t\t\t<span\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-subtitle\"\r\n\t\t\t\t[ngStyle]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleStyleActive! : null\"\r\n\t\t\t\t[ngClass]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleClassActive! : []\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-subtitle-error]=\"step.hasError\">\r\n\t\t\t\t<ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label)?.subtitle\">\r\n\t\t\t\t\t{{ convertLabelToType(step.label).subtitle }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t\t{{ step.errorMessage }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t</span>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>", styles: [":host{font-family:Soho Gothic Pro,Arial,Helvetica,sans-serif;background-color:#fff;overflow:hidden;height:100%;width:100%;display:block}.sc-wizard-horizontal{display:grid;height:100%;grid-template-rows:auto 1fr}.sc-wizard-horizontal-steps{width:100%;overflow:auto hidden}.sc-wizard-horizontal-steps-fill,.sc-wizard-horizontal-steps-wrapper{display:flex;gap:.5rem}.sc-wizard-horizontal-steps-fill{overflow:hidden}.sc-wizard-horizontal-steps-fill .sc-wizard-steps-item{flex:1}.sc-wizard-horizontal-steps .sc-wizard-steps-item{width:24rem;margin-bottom:0}.sc-wizard-vertical{height:100%;display:flex}.sc-wizard-vertical-steps{overflow:hidden auto;margin-right:1rem;width:100%}.sc-wizard-vertical-steps-container{min-width:280px;width:20%}.sc-wizard-vertical-nav{height:100%;display:flex}.sc-wizard-vertical-nav-steps{overflow:hidden auto;margin-right:1rem}.sc-wizard-vertical-nav-steps-container{min-width:125px;width:6%;transition:.1s all;align-content:start}::ng-deep .custom-mat-tooltip-error{--mdc-plain-tooltip-container-color: #fd397a}::ng-deep .custom-mat-tooltip-active{--mdc-plain-tooltip-container-color: #646c9a}.sc-wizard-expand-icon-container{display:flex;align-items:center;height:100%;justify-content:flex-end;padding-right:1rem}.sc-wizard-steps,.sc-wizard-horizontal-content,.sc-wizard-vertical-content{height:100%;scroll-behavior:smooth}.sc-wizard-horizontal-steps-container,.sc-wizard-vertical-steps-container{height:100%;display:grid;border-radius:.8rem}.sc-wizard-horizontal-steps-container{grid-template-columns:auto 1fr auto}.sc-wizard-vertical-steps-container{grid-template-rows:auto 1fr auto}.sc-wizard-steps-item{display:flex;align-items:center;cursor:pointer;padding:.8rem 1rem;border-radius:.8rem;margin-bottom:.4em;transition:.3s all}.sc-wizard-steps-item:last-child{margin-bottom:0}.sc-wizard-steps-item-disable{pointer-events:none;opacity:.5}.sc-wizard-steps-item-active{position:relative;background-color:#646c9a21}.sc-wizard-steps-item-error{background-color:#fd397a21}.sc-wizard-steps-item-number{border-radius:8px;background-color:#f3f3f7;color:#646c9a;font-size:1.3rem;font-weight:700;margin-right:1rem;height:3.2rem;width:3rem;text-align:center;position:relative}.sc-wizard-steps-item-number em,.sc-wizard-steps-item-number span{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%)}.sc-wizard-steps-item-number-active{color:#fff;background-color:#646c9a}.sc-wizard-steps-item-number-error{color:#fff;background-color:#fd397a}.sc-wizard-steps-item-label-title{margin:0;font-weight:100;color:#646c9a;font-size:16px}.sc-wizard-steps-item-label-title-active{font-weight:700}.sc-wizard-steps-item-label-title-error{color:#fd397a}.sc-wizard-steps-item-label-subtitle{color:gray;font-size:11px}.sc-wizard-steps-item-label-subtitle-error{color:#fd397a}.sc-wizard-horizontal-content,.sc-wizard-vertical-content{background-color:#fff;overflow:hidden auto}.sc-wizard-horizontal-content{padding:1rem 0;width:100%;margin-top:.4rem}.sc-wizard-vertical-content{overflow:hidden auto;padding:1rem;width:100%}.sc-wizard-content{padding:1rem}@media screen and (min-height: 750px){.sc-wizard-content{height:calc(100vh - 333px)}}.sc-wizard-horizontal-button,.sc-wizard-vertical-button{margin:auto;transition:all .3s;height:3rem;width:3.1rem}.sc-wizard-vertical-button.prev{margin-bottom:1rem}.sc-wizard-vertical-button.next{margin-top:1rem}.sc-wizard-horizontal-button.prev{margin-right:1rem}.sc-wizard-horizontal-button.next{margin-left:1rem}.sc-wizard-skeleton{overflow:hidden;position:relative}.sc-wizard-skeleton:after{content:\"\";width:100%;height:100%;background:#dedfe1;background:#e6e6e6;background-image:linear-gradient(to right,#e6e6e6,#f2f3f5 20%,#e6e6e6 40% 100%);background-repeat:no-repeat;position:absolute;left:0;top:0;z-index:5;border-radius:.8rem;animation:loading 1.1s infinite linear}@keyframes loading{0%{background-position:-100px}to{background-position:200px}}.visible{visibility:visible}.invisible{visibility:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i1.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { _scWizardContainer: [{

package/fesm2022/ngx-sumax-erp-components.mjs

@@ -6575,11 +6575,11 @@ class ScWizardComponent extends CdkStepper {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ScWizardComponent, deps: [{ token: i1$4.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ScWizardComponent, selector: "sc-wizard", inputs: { hasAutoFillSteps: "hasAutoFillSteps", hasSkeleton: "hasSkeleton", showArrows: "showArrows", subWizard: "subWizard", baseSubWizard: "baseSubWizard", showExpanded: "showExpanded", stepNavigationHandler: "stepNavigationHandler" }, outputs: { clickStepEmit: "clickStepEmit" }, providers: [{ provide: CdkStepper, useExisting: ScWizardComponent }], viewQueries: [{ propertyName: "_scWizardContainer", first: true, predicate: ["scWizardContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div \r\n  [class.sc-wizard-horizontal]=\"this.orientation === 'horizontal'\"\r\n  [class.sc-wizard-vertical]=\"this.orientation === 'vertical'\" \r\n  [class.sc-wizard-vertical-nav]=\"this.orientation === 'vertical' && isExpanded\">\r\n  <div \r\n    [class]=\"'sc-wizard-' + orientation + (isExpanded ? '-nav' : '') + '-steps-container'\"\r\n    [ngStyle]=\"{ display: 'grid', 'margin-right':  '0px' }\">\r\n    <!--PREVIOUS STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.selectedIndex === 0\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button prev'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperPrevious>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"chevron_left\" : \"expand_less\" }}</mat-icon>\r\n    </button>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'horizontal'\">\r\n      <ng-container *ngIf=\"hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps sc-wizard-horizontal-steps-fill\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps\">\r\n          <div class=\"sc-wizard-horizontal-steps-wrapper\" [style.width]=\"24 * steps.length + 'rem'\">\r\n            <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'vertical'\">\r\n      <div style=\"display: flex; justify-content: space-between;\">\r\n        <div class=\"sc-wizard-steps sc-wizard-vertical-steps\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n          <div class=\"sc-wizard-expand-icon-container\">\r\n            <ng-container *ngIf=\"showExpanded\">\r\n              <em class=\"z-3 fa\" [ngClass]=\"{ 'fa-chevron-right': isExpanded, 'fa-chevron-left': !isExpanded }\" style=\"cursor: pointer; font-size: 18px\" (click)=\"this.isExpanded = !this.isExpanded\"> </em>\r\n            </ng-container>\r\n          </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!--NEXT STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.steps.length - 1 === this.selectedIndex\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button next'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperNext>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"navigate_next\" : \"expand_more\" }}</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div #scWizardContainer [class.sc-wizard-skeleton]=\"hasSkeleton\" [class]=\"'sc-wizard-' + orientation + '-content'\">\r\n    <ng-container [ngTemplateOutlet]=\"selected ? selected.content : null\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #templateSteps>\r\n\t<div\r\n\t\t*ngFor=\"let step of steps; let i = index\"\r\n\t\t[class.invisible]=\"step.content.elementRef.nativeElement.parentNode.className === 'invisible'\"\r\n\t\t[tabIndex]=\"selectedIndex === i ? 1 : -1\"\r\n\t\t[attr.data-position]=\"i\"\r\n\t\t[class.sc-wizard-steps-item-active]=\"selectedIndex === i && !step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-error]=\"selectedIndex === i && step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-disable]=\"!step.editable || convertLabelToType(step.label)!.disabled\"\r\n\t\tclass=\"sc-wizard-steps-item\"\r\n\t\t[class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n\t\t(click)=\"goTo(i); clickStepEmit.emit(i)\">\r\n\t\t<span\r\n      [matTooltipClass]=\"showExpanded && isExpanded && step.hasError ? 'custom-mat-tooltip-error' : 'custom-mat-tooltip-active'\"\r\n      [matTooltip]=\"isExpanded ? convertLabelToType(step.label)!.title : ''\"\r\n\t\t\tclass=\"sc-wizard-steps-item-number d-flex justify-content-center align-items-center\"\r\n\t\t\t[class.sc-wizard-steps-item-number-active]=\"selectedIndex === i\"\r\n\t\t\t[class.sc-wizard-steps-item-number-error]=\"step.hasError\">\r\n      <ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label).icon\">\r\n\t\t\t\t<em [class]=\"convertLabelToType(step.label).icon\"></em>\r\n\t\t\t</ng-container>\r\n      <ng-container *ngIf=\"!step.hasError && !convertLabelToType(step.label).icon\">\r\n\t\t\t\t{{ subWizard ? baseSubWizard + '.' + (i + 1) : i + 1 }}\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t<em class=\"fa fa-exclamation-triangle\"></em>\r\n\t\t\t</ng-container>\r\n\t\t</span>\r\n\r\n\t\t<div\r\n      *ngIf=\"!isExpanded\"\r\n\t\t\tclass=\"sc-wizard-steps-item-label\"\r\n\t\t\t[class.sc-wizard-steps-item-label-error]=\"step.hasError\">\r\n\t\t\t<p\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-title\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-active]=\"selectedIndex === i\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-error]=\"step.hasError\">\r\n\t\t\t\t{{ convertLabelToType(step.label).title }}\r\n\t\t\t</p>\r\n\t\t\t<span\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-subtitle\"\r\n\t\t\t\t[ngStyle]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleStyleActive! : null\"\r\n\t\t\t\t[ngClass]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleClassActive! : []\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-subtitle-error]=\"step.hasError\">\r\n\t\t\t\t<ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label)?.subtitle\">\r\n\t\t\t\t\t{{ convertLabelToType(step.label).subtitle }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t\t{{ step.errorMessage }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t</span>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>", styles: [":host{font-family:Soho Gothic Pro,Arial,Helvetica,sans-serif;background-color:#fff;overflow:hidden;height:100%;width:100%;display:block}.sc-wizard-horizontal{display:grid;height:100%;grid-template-rows:auto 1fr}.sc-wizard-horizontal-steps{width:100%;overflow:auto hidden}.sc-wizard-horizontal-steps-fill,.sc-wizard-horizontal-steps-wrapper{display:flex;gap:.5rem}.sc-wizard-horizontal-steps-fill{overflow:hidden}.sc-wizard-horizontal-steps-fill .sc-wizard-steps-item{flex:1}.sc-wizard-horizontal-steps .sc-wizard-steps-item{width:24rem;margin-bottom:0}.sc-wizard-vertical{height:100%;display:flex}.sc-wizard-vertical-steps{overflow:hidden auto;margin-right:1rem;width:100%}.sc-wizard-vertical-steps-container{min-width:280px;width:20%}.sc-wizard-vertical-nav{height:100%;display:flex}.sc-wizard-vertical-nav-steps{overflow:hidden auto;margin-right:1rem}.sc-wizard-vertical-nav-steps-container{min-width:125px;width:6%;transition:.1s all;align-content:start}::ng-deep .custom-mat-tooltip-error{--mdc-plain-tooltip-container-color: #fd397a}::ng-deep .custom-mat-tooltip-active{--mdc-plain-tooltip-container-color: #646c9a}.sc-wizard-expand-icon-container{display:flex;align-items:center;height:100%;justify-content:flex-end;padding-right:1rem}.sc-wizard-steps,.sc-wizard-horizontal-content,.sc-wizard-vertical-content{height:100%;scroll-behavior:smooth}.sc-wizard-horizontal-steps-container,.sc-wizard-vertical-steps-container{height:100%;display:grid;border-radius:.8rem}.sc-wizard-horizontal-steps-container{grid-template-columns:auto 1fr auto}.sc-wizard-vertical-steps-container{grid-template-rows:auto 1fr auto}.sc-wizard-steps-item{display:flex;align-items:center;cursor:pointer;padding:.8rem 1rem;border-radius:.8rem;margin-bottom:.4em;transition:.3s all}.sc-wizard-steps-item:last-child{margin-bottom:0}.sc-wizard-steps-item-disable{pointer-events:none;opacity:.5}.sc-wizard-steps-item-active{position:relative;background-color:#646c9a21}.sc-wizard-steps-item-error{background-color:#fd397a21}.sc-wizard-steps-item-number{border-radius:8px;background-color:#f3f3f7;color:#646c9a;font-size:1.3rem;font-weight:700;margin-right:1rem;height:3.2rem;width:3rem;text-align:center;position:relative}.sc-wizard-steps-item-number em,.sc-wizard-steps-item-number span{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%)}.sc-wizard-steps-item-number-active{color:#fff;background-color:#646c9a}.sc-wizard-steps-item-number-error{color:#fff;background-color:#fd397a}.sc-wizard-steps-item-label-title{margin:0;font-weight:100;color:#646c9a;font-size:16px}.sc-wizard-steps-item-label-title-active{font-weight:700}.sc-wizard-steps-item-label-title-error{color:#fd397a}.sc-wizard-steps-item-label-subtitle{color:gray;font-size:11px}.sc-wizard-steps-item-label-subtitle-error{color:#fd397a}.sc-wizard-horizontal-content,.sc-wizard-vertical-content{background-color:#fff;overflow:hidden auto}.sc-wizard-horizontal-content{padding:1rem 0;width:100%;margin-top:.4rem}.sc-wizard-vertical-content{overflow:hidden auto;padding:1rem;width:80%}.sc-wizard-content{padding:1rem}@media screen and (min-height: 750px){.sc-wizard-content{height:calc(100vh - 333px)}}.sc-wizard-horizontal-button,.sc-wizard-vertical-button{margin:auto;transition:all .3s;height:3rem;width:3.1rem}.sc-wizard-vertical-button.prev{margin-bottom:1rem}.sc-wizard-vertical-button.next{margin-top:1rem}.sc-wizard-horizontal-button.prev{margin-right:1rem}.sc-wizard-horizontal-button.next{margin-left:1rem}.sc-wizard-skeleton{overflow:hidden;position:relative}.sc-wizard-skeleton:after{content:\"\";width:100%;height:100%;background:#dedfe1;background:#e6e6e6;background-image:linear-gradient(to right,#e6e6e6,#f2f3f5 20%,#e6e6e6 40% 100%);background-repeat:no-repeat;position:absolute;left:0;top:0;z-index:5;border-radius:.8rem;animation:loading 1.1s infinite linear}@keyframes loading{0%{background-position:-100px}to{background-position:200px}}.visible{visibility:visible}.invisible{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.CdkStepperNext, selector: "button[cdkStepperNext]", inputs: ["type"] }, { kind: "directive", type: i3$1.CdkStepperPrevious, selector: "button[cdkStepperPrevious]", inputs: ["type"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ScWizardComponent, selector: "sc-wizard", inputs: { hasAutoFillSteps: "hasAutoFillSteps", hasSkeleton: "hasSkeleton", showArrows: "showArrows", subWizard: "subWizard", baseSubWizard: "baseSubWizard", showExpanded: "showExpanded", stepNavigationHandler: "stepNavigationHandler" }, outputs: { clickStepEmit: "clickStepEmit" }, providers: [{ provide: CdkStepper, useExisting: ScWizardComponent }], viewQueries: [{ propertyName: "_scWizardContainer", first: true, predicate: ["scWizardContainer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div \r\n  [class.sc-wizard-horizontal]=\"this.orientation === 'horizontal'\"\r\n  [class.sc-wizard-vertical]=\"this.orientation === 'vertical'\" \r\n  [class.sc-wizard-vertical-nav]=\"this.orientation === 'vertical' && isExpanded\">\r\n  <div \r\n    [class]=\"'sc-wizard-' + orientation + (isExpanded ? '-nav' : '') + '-steps-container'\"\r\n    [ngStyle]=\"{ display: 'grid', 'margin-right':  '0px' }\">\r\n    <!--PREVIOUS STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.selectedIndex === 0\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button prev'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperPrevious>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"chevron_left\" : \"expand_less\" }}</mat-icon>\r\n    </button>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'horizontal'\">\r\n      <ng-container *ngIf=\"hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps sc-wizard-horizontal-steps-fill\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps\">\r\n          <div class=\"sc-wizard-horizontal-steps-wrapper\" [style.width]=\"24 * steps.length + 'rem'\">\r\n            <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'vertical'\">\r\n      <div style=\"display: flex; justify-content: space-between;\">\r\n        <div class=\"sc-wizard-steps sc-wizard-vertical-steps\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n          <div class=\"sc-wizard-expand-icon-container\">\r\n            <ng-container *ngIf=\"showExpanded\">\r\n              <em class=\"z-3 fa\" [ngClass]=\"{ 'fa-chevron-right': isExpanded, 'fa-chevron-left': !isExpanded }\" style=\"cursor: pointer; font-size: 18px\" (click)=\"this.isExpanded = !this.isExpanded\"> </em>\r\n            </ng-container>\r\n          </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!--NEXT STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.steps.length - 1 === this.selectedIndex\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button next'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperNext>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"navigate_next\" : \"expand_more\" }}</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div #scWizardContainer [class.sc-wizard-skeleton]=\"hasSkeleton\" [class]=\"'sc-wizard-' + orientation + '-content'\">\r\n    <ng-container [ngTemplateOutlet]=\"selected ? selected.content : null\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #templateSteps>\r\n\t<div\r\n\t\t*ngFor=\"let step of steps; let i = index\"\r\n\t\t[class.invisible]=\"step.content.elementRef.nativeElement.parentNode.className === 'invisible'\"\r\n\t\t[tabIndex]=\"selectedIndex === i ? 1 : -1\"\r\n\t\t[attr.data-position]=\"i\"\r\n\t\t[class.sc-wizard-steps-item-active]=\"selectedIndex === i && !step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-error]=\"selectedIndex === i && step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-disable]=\"!step.editable || convertLabelToType(step.label)!.disabled\"\r\n\t\tclass=\"sc-wizard-steps-item\"\r\n\t\t[class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n\t\t(click)=\"goTo(i); clickStepEmit.emit(i)\">\r\n\t\t<span\r\n      [matTooltipClass]=\"showExpanded && isExpanded && step.hasError ? 'custom-mat-tooltip-error' : 'custom-mat-tooltip-active'\"\r\n      [matTooltip]=\"isExpanded ? convertLabelToType(step.label)!.title : ''\"\r\n\t\t\tclass=\"sc-wizard-steps-item-number d-flex justify-content-center align-items-center\"\r\n\t\t\t[class.sc-wizard-steps-item-number-active]=\"selectedIndex === i\"\r\n\t\t\t[class.sc-wizard-steps-item-number-error]=\"step.hasError\">\r\n      <ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label).icon\">\r\n\t\t\t\t<em [class]=\"convertLabelToType(step.label).icon\"></em>\r\n\t\t\t</ng-container>\r\n      <ng-container *ngIf=\"!step.hasError && !convertLabelToType(step.label).icon\">\r\n\t\t\t\t{{ subWizard ? baseSubWizard + '.' + (i + 1) : i + 1 }}\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t<em class=\"fa fa-exclamation-triangle\"></em>\r\n\t\t\t</ng-container>\r\n\t\t</span>\r\n\r\n\t\t<div\r\n      *ngIf=\"!isExpanded\"\r\n\t\t\tclass=\"sc-wizard-steps-item-label\"\r\n\t\t\t[class.sc-wizard-steps-item-label-error]=\"step.hasError\">\r\n\t\t\t<p\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-title\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-active]=\"selectedIndex === i\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-error]=\"step.hasError\">\r\n\t\t\t\t{{ convertLabelToType(step.label).title }}\r\n\t\t\t</p>\r\n\t\t\t<span\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-subtitle\"\r\n\t\t\t\t[ngStyle]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleStyleActive! : null\"\r\n\t\t\t\t[ngClass]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleClassActive! : []\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-subtitle-error]=\"step.hasError\">\r\n\t\t\t\t<ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label)?.subtitle\">\r\n\t\t\t\t\t{{ convertLabelToType(step.label).subtitle }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t\t{{ step.errorMessage }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t</span>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>", styles: [":host{font-family:Soho Gothic Pro,Arial,Helvetica,sans-serif;background-color:#fff;overflow:hidden;height:100%;width:100%;display:block}.sc-wizard-horizontal{display:grid;height:100%;grid-template-rows:auto 1fr}.sc-wizard-horizontal-steps{width:100%;overflow:auto hidden}.sc-wizard-horizontal-steps-fill,.sc-wizard-horizontal-steps-wrapper{display:flex;gap:.5rem}.sc-wizard-horizontal-steps-fill{overflow:hidden}.sc-wizard-horizontal-steps-fill .sc-wizard-steps-item{flex:1}.sc-wizard-horizontal-steps .sc-wizard-steps-item{width:24rem;margin-bottom:0}.sc-wizard-vertical{height:100%;display:flex}.sc-wizard-vertical-steps{overflow:hidden auto;margin-right:1rem;width:100%}.sc-wizard-vertical-steps-container{min-width:280px;width:20%}.sc-wizard-vertical-nav{height:100%;display:flex}.sc-wizard-vertical-nav-steps{overflow:hidden auto;margin-right:1rem}.sc-wizard-vertical-nav-steps-container{min-width:125px;width:6%;transition:.1s all;align-content:start}::ng-deep .custom-mat-tooltip-error{--mdc-plain-tooltip-container-color: #fd397a}::ng-deep .custom-mat-tooltip-active{--mdc-plain-tooltip-container-color: #646c9a}.sc-wizard-expand-icon-container{display:flex;align-items:center;height:100%;justify-content:flex-end;padding-right:1rem}.sc-wizard-steps,.sc-wizard-horizontal-content,.sc-wizard-vertical-content{height:100%;scroll-behavior:smooth}.sc-wizard-horizontal-steps-container,.sc-wizard-vertical-steps-container{height:100%;display:grid;border-radius:.8rem}.sc-wizard-horizontal-steps-container{grid-template-columns:auto 1fr auto}.sc-wizard-vertical-steps-container{grid-template-rows:auto 1fr auto}.sc-wizard-steps-item{display:flex;align-items:center;cursor:pointer;padding:.8rem 1rem;border-radius:.8rem;margin-bottom:.4em;transition:.3s all}.sc-wizard-steps-item:last-child{margin-bottom:0}.sc-wizard-steps-item-disable{pointer-events:none;opacity:.5}.sc-wizard-steps-item-active{position:relative;background-color:#646c9a21}.sc-wizard-steps-item-error{background-color:#fd397a21}.sc-wizard-steps-item-number{border-radius:8px;background-color:#f3f3f7;color:#646c9a;font-size:1.3rem;font-weight:700;margin-right:1rem;height:3.2rem;width:3rem;text-align:center;position:relative}.sc-wizard-steps-item-number em,.sc-wizard-steps-item-number span{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%)}.sc-wizard-steps-item-number-active{color:#fff;background-color:#646c9a}.sc-wizard-steps-item-number-error{color:#fff;background-color:#fd397a}.sc-wizard-steps-item-label-title{margin:0;font-weight:100;color:#646c9a;font-size:16px}.sc-wizard-steps-item-label-title-active{font-weight:700}.sc-wizard-steps-item-label-title-error{color:#fd397a}.sc-wizard-steps-item-label-subtitle{color:gray;font-size:11px}.sc-wizard-steps-item-label-subtitle-error{color:#fd397a}.sc-wizard-horizontal-content,.sc-wizard-vertical-content{background-color:#fff;overflow:hidden auto}.sc-wizard-horizontal-content{padding:1rem 0;width:100%;margin-top:.4rem}.sc-wizard-vertical-content{overflow:hidden auto;padding:1rem;width:100%}.sc-wizard-content{padding:1rem}@media screen and (min-height: 750px){.sc-wizard-content{height:calc(100vh - 333px)}}.sc-wizard-horizontal-button,.sc-wizard-vertical-button{margin:auto;transition:all .3s;height:3rem;width:3.1rem}.sc-wizard-vertical-button.prev{margin-bottom:1rem}.sc-wizard-vertical-button.next{margin-top:1rem}.sc-wizard-horizontal-button.prev{margin-right:1rem}.sc-wizard-horizontal-button.next{margin-left:1rem}.sc-wizard-skeleton{overflow:hidden;position:relative}.sc-wizard-skeleton:after{content:\"\";width:100%;height:100%;background:#dedfe1;background:#e6e6e6;background-image:linear-gradient(to right,#e6e6e6,#f2f3f5 20%,#e6e6e6 40% 100%);background-repeat:no-repeat;position:absolute;left:0;top:0;z-index:5;border-radius:.8rem;animation:loading 1.1s infinite linear}@keyframes loading{0%{background-position:-100px}to{background-position:200px}}.visible{visibility:visible}.invisible{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.CdkStepperNext, selector: "button[cdkStepperNext]", inputs: ["type"] }, { kind: "directive", type: i3$1.CdkStepperPrevious, selector: "button[cdkStepperPrevious]", inputs: ["type"] }, { kind: "component", type: i4$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ScWizardComponent, decorators: [{
             type: Component,
-            args: [{ selector: "sc-wizard", providers: [{ provide: CdkStepper, useExisting: ScWizardComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  [class.sc-wizard-horizontal]=\"this.orientation === 'horizontal'\"\r\n  [class.sc-wizard-vertical]=\"this.orientation === 'vertical'\" \r\n  [class.sc-wizard-vertical-nav]=\"this.orientation === 'vertical' && isExpanded\">\r\n  <div \r\n    [class]=\"'sc-wizard-' + orientation + (isExpanded ? '-nav' : '') + '-steps-container'\"\r\n    [ngStyle]=\"{ display: 'grid', 'margin-right':  '0px' }\">\r\n    <!--PREVIOUS STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.selectedIndex === 0\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button prev'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperPrevious>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"chevron_left\" : \"expand_less\" }}</mat-icon>\r\n    </button>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'horizontal'\">\r\n      <ng-container *ngIf=\"hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps sc-wizard-horizontal-steps-fill\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps\">\r\n          <div class=\"sc-wizard-horizontal-steps-wrapper\" [style.width]=\"24 * steps.length + 'rem'\">\r\n            <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'vertical'\">\r\n      <div style=\"display: flex; justify-content: space-between;\">\r\n        <div class=\"sc-wizard-steps sc-wizard-vertical-steps\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n          <div class=\"sc-wizard-expand-icon-container\">\r\n            <ng-container *ngIf=\"showExpanded\">\r\n              <em class=\"z-3 fa\" [ngClass]=\"{ 'fa-chevron-right': isExpanded, 'fa-chevron-left': !isExpanded }\" style=\"cursor: pointer; font-size: 18px\" (click)=\"this.isExpanded = !this.isExpanded\"> </em>\r\n            </ng-container>\r\n          </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!--NEXT STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.steps.length - 1 === this.selectedIndex\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button next'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperNext>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"navigate_next\" : \"expand_more\" }}</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div #scWizardContainer [class.sc-wizard-skeleton]=\"hasSkeleton\" [class]=\"'sc-wizard-' + orientation + '-content'\">\r\n    <ng-container [ngTemplateOutlet]=\"selected ? selected.content : null\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #templateSteps>\r\n\t<div\r\n\t\t*ngFor=\"let step of steps; let i = index\"\r\n\t\t[class.invisible]=\"step.content.elementRef.nativeElement.parentNode.className === 'invisible'\"\r\n\t\t[tabIndex]=\"selectedIndex === i ? 1 : -1\"\r\n\t\t[attr.data-position]=\"i\"\r\n\t\t[class.sc-wizard-steps-item-active]=\"selectedIndex === i && !step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-error]=\"selectedIndex === i && step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-disable]=\"!step.editable || convertLabelToType(step.label)!.disabled\"\r\n\t\tclass=\"sc-wizard-steps-item\"\r\n\t\t[class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n\t\t(click)=\"goTo(i); clickStepEmit.emit(i)\">\r\n\t\t<span\r\n      [matTooltipClass]=\"showExpanded && isExpanded && step.hasError ? 'custom-mat-tooltip-error' : 'custom-mat-tooltip-active'\"\r\n      [matTooltip]=\"isExpanded ? convertLabelToType(step.label)!.title : ''\"\r\n\t\t\tclass=\"sc-wizard-steps-item-number d-flex justify-content-center align-items-center\"\r\n\t\t\t[class.sc-wizard-steps-item-number-active]=\"selectedIndex === i\"\r\n\t\t\t[class.sc-wizard-steps-item-number-error]=\"step.hasError\">\r\n      <ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label).icon\">\r\n\t\t\t\t<em [class]=\"convertLabelToType(step.label).icon\"></em>\r\n\t\t\t</ng-container>\r\n      <ng-container *ngIf=\"!step.hasError && !convertLabelToType(step.label).icon\">\r\n\t\t\t\t{{ subWizard ? baseSubWizard + '.' + (i + 1) : i + 1 }}\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t<em class=\"fa fa-exclamation-triangle\"></em>\r\n\t\t\t</ng-container>\r\n\t\t</span>\r\n\r\n\t\t<div\r\n      *ngIf=\"!isExpanded\"\r\n\t\t\tclass=\"sc-wizard-steps-item-label\"\r\n\t\t\t[class.sc-wizard-steps-item-label-error]=\"step.hasError\">\r\n\t\t\t<p\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-title\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-active]=\"selectedIndex === i\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-error]=\"step.hasError\">\r\n\t\t\t\t{{ convertLabelToType(step.label).title }}\r\n\t\t\t</p>\r\n\t\t\t<span\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-subtitle\"\r\n\t\t\t\t[ngStyle]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleStyleActive! : null\"\r\n\t\t\t\t[ngClass]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleClassActive! : []\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-subtitle-error]=\"step.hasError\">\r\n\t\t\t\t<ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label)?.subtitle\">\r\n\t\t\t\t\t{{ convertLabelToType(step.label).subtitle }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t\t{{ step.errorMessage }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t</span>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>", styles: [":host{font-family:Soho Gothic Pro,Arial,Helvetica,sans-serif;background-color:#fff;overflow:hidden;height:100%;width:100%;display:block}.sc-wizard-horizontal{display:grid;height:100%;grid-template-rows:auto 1fr}.sc-wizard-horizontal-steps{width:100%;overflow:auto hidden}.sc-wizard-horizontal-steps-fill,.sc-wizard-horizontal-steps-wrapper{display:flex;gap:.5rem}.sc-wizard-horizontal-steps-fill{overflow:hidden}.sc-wizard-horizontal-steps-fill .sc-wizard-steps-item{flex:1}.sc-wizard-horizontal-steps .sc-wizard-steps-item{width:24rem;margin-bottom:0}.sc-wizard-vertical{height:100%;display:flex}.sc-wizard-vertical-steps{overflow:hidden auto;margin-right:1rem;width:100%}.sc-wizard-vertical-steps-container{min-width:280px;width:20%}.sc-wizard-vertical-nav{height:100%;display:flex}.sc-wizard-vertical-nav-steps{overflow:hidden auto;margin-right:1rem}.sc-wizard-vertical-nav-steps-container{min-width:125px;width:6%;transition:.1s all;align-content:start}::ng-deep .custom-mat-tooltip-error{--mdc-plain-tooltip-container-color: #fd397a}::ng-deep .custom-mat-tooltip-active{--mdc-plain-tooltip-container-color: #646c9a}.sc-wizard-expand-icon-container{display:flex;align-items:center;height:100%;justify-content:flex-end;padding-right:1rem}.sc-wizard-steps,.sc-wizard-horizontal-content,.sc-wizard-vertical-content{height:100%;scroll-behavior:smooth}.sc-wizard-horizontal-steps-container,.sc-wizard-vertical-steps-container{height:100%;display:grid;border-radius:.8rem}.sc-wizard-horizontal-steps-container{grid-template-columns:auto 1fr auto}.sc-wizard-vertical-steps-container{grid-template-rows:auto 1fr auto}.sc-wizard-steps-item{display:flex;align-items:center;cursor:pointer;padding:.8rem 1rem;border-radius:.8rem;margin-bottom:.4em;transition:.3s all}.sc-wizard-steps-item:last-child{margin-bottom:0}.sc-wizard-steps-item-disable{pointer-events:none;opacity:.5}.sc-wizard-steps-item-active{position:relative;background-color:#646c9a21}.sc-wizard-steps-item-error{background-color:#fd397a21}.sc-wizard-steps-item-number{border-radius:8px;background-color:#f3f3f7;color:#646c9a;font-size:1.3rem;font-weight:700;margin-right:1rem;height:3.2rem;width:3rem;text-align:center;position:relative}.sc-wizard-steps-item-number em,.sc-wizard-steps-item-number span{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%)}.sc-wizard-steps-item-number-active{color:#fff;background-color:#646c9a}.sc-wizard-steps-item-number-error{color:#fff;background-color:#fd397a}.sc-wizard-steps-item-label-title{margin:0;font-weight:100;color:#646c9a;font-size:16px}.sc-wizard-steps-item-label-title-active{font-weight:700}.sc-wizard-steps-item-label-title-error{color:#fd397a}.sc-wizard-steps-item-label-subtitle{color:gray;font-size:11px}.sc-wizard-steps-item-label-subtitle-error{color:#fd397a}.sc-wizard-horizontal-content,.sc-wizard-vertical-content{background-color:#fff;overflow:hidden auto}.sc-wizard-horizontal-content{padding:1rem 0;width:100%;margin-top:.4rem}.sc-wizard-vertical-content{overflow:hidden auto;padding:1rem;width:80%}.sc-wizard-content{padding:1rem}@media screen and (min-height: 750px){.sc-wizard-content{height:calc(100vh - 333px)}}.sc-wizard-horizontal-button,.sc-wizard-vertical-button{margin:auto;transition:all .3s;height:3rem;width:3.1rem}.sc-wizard-vertical-button.prev{margin-bottom:1rem}.sc-wizard-vertical-button.next{margin-top:1rem}.sc-wizard-horizontal-button.prev{margin-right:1rem}.sc-wizard-horizontal-button.next{margin-left:1rem}.sc-wizard-skeleton{overflow:hidden;position:relative}.sc-wizard-skeleton:after{content:\"\";width:100%;height:100%;background:#dedfe1;background:#e6e6e6;background-image:linear-gradient(to right,#e6e6e6,#f2f3f5 20%,#e6e6e6 40% 100%);background-repeat:no-repeat;position:absolute;left:0;top:0;z-index:5;border-radius:.8rem;animation:loading 1.1s infinite linear}@keyframes loading{0%{background-position:-100px}to{background-position:200px}}.visible{visibility:visible}.invisible{visibility:hidden}\n"] }]
+            args: [{ selector: "sc-wizard", providers: [{ provide: CdkStepper, useExisting: ScWizardComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \r\n  [class.sc-wizard-horizontal]=\"this.orientation === 'horizontal'\"\r\n  [class.sc-wizard-vertical]=\"this.orientation === 'vertical'\" \r\n  [class.sc-wizard-vertical-nav]=\"this.orientation === 'vertical' && isExpanded\">\r\n  <div \r\n    [class]=\"'sc-wizard-' + orientation + (isExpanded ? '-nav' : '') + '-steps-container'\"\r\n    [ngStyle]=\"{ display: 'grid', 'margin-right':  '0px' }\">\r\n    <!--PREVIOUS STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.selectedIndex === 0\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button prev'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperPrevious>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"chevron_left\" : \"expand_less\" }}</mat-icon>\r\n    </button>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'horizontal'\">\r\n      <ng-container *ngIf=\"hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps sc-wizard-horizontal-steps-fill\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!hasAutoFillSteps\">\r\n        <div class=\"sc-wizard-horizontal-steps\">\r\n          <div class=\"sc-wizard-horizontal-steps-wrapper\" [style.width]=\"24 * steps.length + 'rem'\">\r\n            <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"this.orientation === 'vertical'\">\r\n      <div style=\"display: flex; justify-content: space-between;\">\r\n        <div class=\"sc-wizard-steps sc-wizard-vertical-steps\">\r\n          <ng-container [ngTemplateOutlet]=\"templateSteps\"></ng-container>\r\n        </div>\r\n          <div class=\"sc-wizard-expand-icon-container\">\r\n            <ng-container *ngIf=\"showExpanded\">\r\n              <em class=\"z-3 fa\" [ngClass]=\"{ 'fa-chevron-right': isExpanded, 'fa-chevron-left': !isExpanded }\" style=\"cursor: pointer; font-size: 18px\" (click)=\"this.isExpanded = !this.isExpanded\"> </em>\r\n            </ng-container>\r\n          </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <!--NEXT STEP BUTTON-->\r\n    <button\r\n      *ngIf=\"showArrows\"\r\n      [disabled]=\"this.steps.length - 1 === this.selectedIndex\"\r\n      [class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n      [class]=\"'sc-wizard-' + orientation + '-button next'\"\r\n      type=\"button\"\r\n      mat-icon-button\r\n      cdkStepperNext>\r\n      <mat-icon>{{ orientation === \"horizontal\" ? \"navigate_next\" : \"expand_more\" }}</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div #scWizardContainer [class.sc-wizard-skeleton]=\"hasSkeleton\" [class]=\"'sc-wizard-' + orientation + '-content'\">\r\n    <ng-container [ngTemplateOutlet]=\"selected ? selected.content : null\"></ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #templateSteps>\r\n\t<div\r\n\t\t*ngFor=\"let step of steps; let i = index\"\r\n\t\t[class.invisible]=\"step.content.elementRef.nativeElement.parentNode.className === 'invisible'\"\r\n\t\t[tabIndex]=\"selectedIndex === i ? 1 : -1\"\r\n\t\t[attr.data-position]=\"i\"\r\n\t\t[class.sc-wizard-steps-item-active]=\"selectedIndex === i && !step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-error]=\"selectedIndex === i && step.hasError\"\r\n\t\t[class.sc-wizard-steps-item-disable]=\"!step.editable || convertLabelToType(step.label)!.disabled\"\r\n\t\tclass=\"sc-wizard-steps-item\"\r\n\t\t[class.sc-wizard-skeleton]=\"hasSkeleton\"\r\n\t\t(click)=\"goTo(i); clickStepEmit.emit(i)\">\r\n\t\t<span\r\n      [matTooltipClass]=\"showExpanded && isExpanded && step.hasError ? 'custom-mat-tooltip-error' : 'custom-mat-tooltip-active'\"\r\n      [matTooltip]=\"isExpanded ? convertLabelToType(step.label)!.title : ''\"\r\n\t\t\tclass=\"sc-wizard-steps-item-number d-flex justify-content-center align-items-center\"\r\n\t\t\t[class.sc-wizard-steps-item-number-active]=\"selectedIndex === i\"\r\n\t\t\t[class.sc-wizard-steps-item-number-error]=\"step.hasError\">\r\n      <ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label).icon\">\r\n\t\t\t\t<em [class]=\"convertLabelToType(step.label).icon\"></em>\r\n\t\t\t</ng-container>\r\n      <ng-container *ngIf=\"!step.hasError && !convertLabelToType(step.label).icon\">\r\n\t\t\t\t{{ subWizard ? baseSubWizard + '.' + (i + 1) : i + 1 }}\r\n\t\t\t</ng-container>\r\n\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t<em class=\"fa fa-exclamation-triangle\"></em>\r\n\t\t\t</ng-container>\r\n\t\t</span>\r\n\r\n\t\t<div\r\n      *ngIf=\"!isExpanded\"\r\n\t\t\tclass=\"sc-wizard-steps-item-label\"\r\n\t\t\t[class.sc-wizard-steps-item-label-error]=\"step.hasError\">\r\n\t\t\t<p\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-title\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-active]=\"selectedIndex === i\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-title-error]=\"step.hasError\">\r\n\t\t\t\t{{ convertLabelToType(step.label).title }}\r\n\t\t\t</p>\r\n\t\t\t<span\r\n\t\t\t\tclass=\"sc-wizard-steps-item-label-subtitle\"\r\n\t\t\t\t[ngStyle]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleStyleActive! : null\"\r\n\t\t\t\t[ngClass]=\"selectedIndex === i ? convertLabelToType(step.label).subtitleClassActive! : []\"\r\n\t\t\t\t[class.sc-wizard-steps-item-label-subtitle-error]=\"step.hasError\">\r\n\t\t\t\t<ng-container *ngIf=\"!step.hasError && convertLabelToType(step.label)?.subtitle\">\r\n\t\t\t\t\t{{ convertLabelToType(step.label).subtitle }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t\t<ng-container *ngIf=\"step.hasError\">\r\n\t\t\t\t\t{{ step.errorMessage }}\r\n\t\t\t\t</ng-container>\r\n\t\t\t</span>\r\n\t\t</div>\r\n\t</div>\r\n</ng-template>", styles: [":host{font-family:Soho Gothic Pro,Arial,Helvetica,sans-serif;background-color:#fff;overflow:hidden;height:100%;width:100%;display:block}.sc-wizard-horizontal{display:grid;height:100%;grid-template-rows:auto 1fr}.sc-wizard-horizontal-steps{width:100%;overflow:auto hidden}.sc-wizard-horizontal-steps-fill,.sc-wizard-horizontal-steps-wrapper{display:flex;gap:.5rem}.sc-wizard-horizontal-steps-fill{overflow:hidden}.sc-wizard-horizontal-steps-fill .sc-wizard-steps-item{flex:1}.sc-wizard-horizontal-steps .sc-wizard-steps-item{width:24rem;margin-bottom:0}.sc-wizard-vertical{height:100%;display:flex}.sc-wizard-vertical-steps{overflow:hidden auto;margin-right:1rem;width:100%}.sc-wizard-vertical-steps-container{min-width:280px;width:20%}.sc-wizard-vertical-nav{height:100%;display:flex}.sc-wizard-vertical-nav-steps{overflow:hidden auto;margin-right:1rem}.sc-wizard-vertical-nav-steps-container{min-width:125px;width:6%;transition:.1s all;align-content:start}::ng-deep .custom-mat-tooltip-error{--mdc-plain-tooltip-container-color: #fd397a}::ng-deep .custom-mat-tooltip-active{--mdc-plain-tooltip-container-color: #646c9a}.sc-wizard-expand-icon-container{display:flex;align-items:center;height:100%;justify-content:flex-end;padding-right:1rem}.sc-wizard-steps,.sc-wizard-horizontal-content,.sc-wizard-vertical-content{height:100%;scroll-behavior:smooth}.sc-wizard-horizontal-steps-container,.sc-wizard-vertical-steps-container{height:100%;display:grid;border-radius:.8rem}.sc-wizard-horizontal-steps-container{grid-template-columns:auto 1fr auto}.sc-wizard-vertical-steps-container{grid-template-rows:auto 1fr auto}.sc-wizard-steps-item{display:flex;align-items:center;cursor:pointer;padding:.8rem 1rem;border-radius:.8rem;margin-bottom:.4em;transition:.3s all}.sc-wizard-steps-item:last-child{margin-bottom:0}.sc-wizard-steps-item-disable{pointer-events:none;opacity:.5}.sc-wizard-steps-item-active{position:relative;background-color:#646c9a21}.sc-wizard-steps-item-error{background-color:#fd397a21}.sc-wizard-steps-item-number{border-radius:8px;background-color:#f3f3f7;color:#646c9a;font-size:1.3rem;font-weight:700;margin-right:1rem;height:3.2rem;width:3rem;text-align:center;position:relative}.sc-wizard-steps-item-number em,.sc-wizard-steps-item-number span{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%)}.sc-wizard-steps-item-number-active{color:#fff;background-color:#646c9a}.sc-wizard-steps-item-number-error{color:#fff;background-color:#fd397a}.sc-wizard-steps-item-label-title{margin:0;font-weight:100;color:#646c9a;font-size:16px}.sc-wizard-steps-item-label-title-active{font-weight:700}.sc-wizard-steps-item-label-title-error{color:#fd397a}.sc-wizard-steps-item-label-subtitle{color:gray;font-size:11px}.sc-wizard-steps-item-label-subtitle-error{color:#fd397a}.sc-wizard-horizontal-content,.sc-wizard-vertical-content{background-color:#fff;overflow:hidden auto}.sc-wizard-horizontal-content{padding:1rem 0;width:100%;margin-top:.4rem}.sc-wizard-vertical-content{overflow:hidden auto;padding:1rem;width:100%}.sc-wizard-content{padding:1rem}@media screen and (min-height: 750px){.sc-wizard-content{height:calc(100vh - 333px)}}.sc-wizard-horizontal-button,.sc-wizard-vertical-button{margin:auto;transition:all .3s;height:3rem;width:3.1rem}.sc-wizard-vertical-button.prev{margin-bottom:1rem}.sc-wizard-vertical-button.next{margin-top:1rem}.sc-wizard-horizontal-button.prev{margin-right:1rem}.sc-wizard-horizontal-button.next{margin-left:1rem}.sc-wizard-skeleton{overflow:hidden;position:relative}.sc-wizard-skeleton:after{content:\"\";width:100%;height:100%;background:#dedfe1;background:#e6e6e6;background-image:linear-gradient(to right,#e6e6e6,#f2f3f5 20%,#e6e6e6 40% 100%);background-repeat:no-repeat;position:absolute;left:0;top:0;z-index:5;border-radius:.8rem;animation:loading 1.1s infinite linear}@keyframes loading{0%{background-position:-100px}to{background-position:200px}}.visible{visibility:visible}.invisible{visibility:hidden}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { _scWizardContainer: [{