ngx-wapp-components 1.0.73 → 1.0.74

package/esm2020/lib/layout/w-panel/w-panel.component.mjs

@@ -25,10 +25,10 @@ export class WPanelComponent {
     }
 }
 WPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WPanelComponent, selector: "w-panel", inputs: { width: "width", title: "title", subtitle: "subtitle", activeGrid: "activeGrid", reduced: "reduced", justifyContent: "justifyContent", activeOverflow: "activeOverflow", maxHeightOverflow: "maxHeightOverflow" }, ngImport: i0, template: "<div [ngClass]=\"{ 'w-panel': !reduced, 'w-reduced-panel': reduced}\" class=\"w-full h-full\">\r\n    <w-panel-title *ngIf=\"title\" [title]=\"title\"></w-panel-title>\r\n    <w-panel-subtitle *ngIf=\"subtitle\" [subtitle]=\"subtitle\"></w-panel-subtitle>\r\n    <div [ngClass]=\"getCombinedClasses()\" [style.max-height]=\"maxHeightOverflow\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}.w-panel{padding:12px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}.w-reduced-panel{padding:16px 20px 20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}.w-panel-justify-gap{gap:8px}:host ::ng-deep .w-panel-content .col-1{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-2{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-3{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-5{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-6{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-7{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-9{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-10{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-11{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-12{padding:4px 20px!important}:host ::ng-deep .w-panel-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}.w-panel-overflow{overflow:auto;box-sizing:border-box}.w-panel-overflow.w-panel-content.grid{margin-top:0!important;margin-bottom:0!important;margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.WPanelTitleComponent, selector: "w-panel-title", inputs: ["title"] }, { kind: "component", type: i3.WPanelSubtitleComponent, selector: "w-panel-subtitle", inputs: ["subtitle"] }] });
+WPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WPanelComponent, selector: "w-panel", inputs: { width: "width", title: "title", subtitle: "subtitle", activeGrid: "activeGrid", reduced: "reduced", justifyContent: "justifyContent", activeOverflow: "activeOverflow", heightOverflow: "heightOverflow", maxHeightOverflow: "maxHeightOverflow" }, ngImport: i0, template: "<div [ngClass]=\"{ 'w-panel': !reduced, 'w-reduced-panel': reduced}\" class=\"w-full h-full\">\r\n    <w-panel-title *ngIf=\"title\" [title]=\"title\"></w-panel-title>\r\n    <w-panel-subtitle *ngIf=\"subtitle\" [subtitle]=\"subtitle\"></w-panel-subtitle>\r\n    <div [ngClass]=\"getCombinedClasses()\" [style.height]=\"heightOverflow\" [style.max-height]=\"maxHeightOverflow\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}.w-panel{padding:12px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}.w-reduced-panel{padding:16px 20px 20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}.w-panel-justify-gap{gap:8px}:host ::ng-deep .w-panel-content .col-1{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-2{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-3{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-5{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-6{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-7{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-9{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-10{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-11{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-12{padding:4px 20px!important}:host ::ng-deep .w-panel-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}.w-panel-overflow{overflow:auto;box-sizing:border-box}.w-panel-overflow.w-panel-content.grid{margin-top:0!important;margin-bottom:0!important;margin-right:0!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.WPanelTitleComponent, selector: "w-panel-title", inputs: ["title"] }, { kind: "component", type: i3.WPanelSubtitleComponent, selector: "w-panel-subtitle", inputs: ["subtitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-panel', template: "<div [ngClass]=\"{ 'w-panel': !reduced, 'w-reduced-panel': reduced}\" class=\"w-full h-full\">\r\n    <w-panel-title *ngIf=\"title\" [title]=\"title\"></w-panel-title>\r\n    <w-panel-subtitle *ngIf=\"subtitle\" [subtitle]=\"subtitle\"></w-panel-subtitle>\r\n    <div [ngClass]=\"getCombinedClasses()\" [style.max-height]=\"maxHeightOverflow\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}.w-panel{padding:12px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}.w-reduced-panel{padding:16px 20px 20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}.w-panel-justify-gap{gap:8px}:host ::ng-deep .w-panel-content .col-1{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-2{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-3{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-5{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-6{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-7{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-9{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-10{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-11{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-12{padding:4px 20px!important}:host ::ng-deep .w-panel-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}.w-panel-overflow{overflow:auto;box-sizing:border-box}.w-panel-overflow.w-panel-content.grid{margin-top:0!important;margin-bottom:0!important;margin-right:0!important}\n"] }]
+            args: [{ selector: 'w-panel', template: "<div [ngClass]=\"{ 'w-panel': !reduced, 'w-reduced-panel': reduced}\" class=\"w-full h-full\">\r\n    <w-panel-title *ngIf=\"title\" [title]=\"title\"></w-panel-title>\r\n    <w-panel-subtitle *ngIf=\"subtitle\" [subtitle]=\"subtitle\"></w-panel-subtitle>\r\n    <div [ngClass]=\"getCombinedClasses()\" [style.height]=\"heightOverflow\" [style.max-height]=\"maxHeightOverflow\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}.w-panel{padding:12px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}.w-reduced-panel{padding:16px 20px 20px;background-color:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a}.w-panel-justify-gap{gap:8px}:host ::ng-deep .w-panel-content .col-1{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-2{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-3{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-5{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-6{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-7{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-9{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-10{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-11{padding:4px 20px!important}:host ::ng-deep .w-panel-content .col-12{padding:4px 20px!important}:host ::ng-deep .w-panel-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}.w-panel-overflow{overflow:auto;box-sizing:border-box}.w-panel-overflow.w-panel-content.grid{margin-top:0!important;margin-bottom:0!important;margin-right:0!important}\n"] }]
         }], propDecorators: { width: [{
                 type: Input,
                 args: ['width']
@@ -50,8 +50,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }], activeOverflow: [{
                 type: Input,
                 args: ['activeOverflow']
+            }], heightOverflow: [{
+                type: Input,
+                args: ['heightOverflow']
             }], maxHeightOverflow: [{
                 type: Input,
                 args: ['maxHeightOverflow']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidy1wYW5lbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93YXBwLWNvbXBvbmVudHMvc3JjL2xpYi9sYXlvdXQvdy1wYW5lbC93LXBhbmVsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3dhcHAtY29tcG9uZW50cy9zcmMvbGliL2xheW91dC93LXBhbmVsL3ctcGFuZWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBT2pELE1BQU0sT0FBTyxlQUFlO0lBTDVCO1FBU3VCLGVBQVUsR0FBWSxJQUFJLENBQUM7UUFDOUIsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUNsQixtQkFBYyxHQUFXLEVBQUUsQ0FBQztRQUM1QixtQkFBYyxHQUFZLEtBQUssQ0FBQztLQW9CMUQ7SUFqQkMsa0JBQWtCO1FBQ2hCLElBQUksT0FBTyxHQUFHLEVBQUUsQ0FBQztRQUVqQixJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDbkIsT0FBTyxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO1NBQ3RDO1FBRUQsSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDbEMsT0FBTyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsR0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7U0FDckQ7UUFFRCxJQUFHLElBQUksQ0FBQyxjQUFjLEVBQUM7WUFDckIsT0FBTyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1NBQ2xDO1FBRUQsT0FBTyxPQUFPLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQzNCLENBQUM7OzRHQTFCVSxlQUFlO2dHQUFmLGVBQWUsMlFDUDVCLHVaQU1NOzJGRENPLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsU0FBUzs4QkFLSCxLQUFLO3NCQUFwQixLQUFLO3VCQUFDLE9BQU87Z0JBQ0UsS0FBSztzQkFBcEIsS0FBSzt1QkFBQyxPQUFPO2dCQUNLLFFBQVE7c0JBQTFCLEtBQUs7dUJBQUMsVUFBVTtnQkFDSSxVQUFVO3NCQUE5QixLQUFLO3VCQUFDLFlBQVk7Z0JBQ0QsT0FBTztzQkFBeEIsS0FBSzt1QkFBQyxTQUFTO2dCQUNTLGNBQWM7c0JBQXRDLEtBQUs7dUJBQUMsZ0JBQWdCO2dCQUNFLGNBQWM7c0JBQXRDLEtBQUs7dUJBQUMsZ0JBQWdCO2dCQUNLLGlCQUFpQjtzQkFBNUMsS0FBSzt1QkFBQyxtQkFBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3ctcGFuZWwnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi93LXBhbmVsLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi93LXBhbmVsLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFdQYW5lbENvbXBvbmVudCB7XHJcbiAgQElucHV0KCd3aWR0aCcpIHdpZHRoOiBhbnk7XHJcbiAgQElucHV0KCd0aXRsZScpIHRpdGxlITogc3RyaW5nO1xyXG4gIEBJbnB1dCgnc3VidGl0bGUnKSBzdWJ0aXRsZSE6IHN0cmluZztcclxuICBASW5wdXQoJ2FjdGl2ZUdyaWQnKSBhY3RpdmVHcmlkOiBib29sZWFuID0gdHJ1ZTtcclxuICBASW5wdXQoJ3JlZHVjZWQnKSByZWR1Y2VkOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCdqdXN0aWZ5Q29udGVudCcpIGp1c3RpZnlDb250ZW50OiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoJ2FjdGl2ZU92ZXJmbG93JykgYWN0aXZlT3ZlcmZsb3c6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoJ21heEhlaWdodE92ZXJmbG93JykgbWF4SGVpZ2h0T3ZlcmZsb3chOiBzdHJpbmc7XHJcbiAgXHJcbiAgZ2V0Q29tYmluZWRDbGFzc2VzKCkge1xyXG4gICAgbGV0IGNsYXNzZXMgPSBbXTtcclxuICBcclxuICAgIGlmICh0aGlzLmFjdGl2ZUdyaWQpIHtcclxuICAgICAgY2xhc3Nlcy5wdXNoKCd3LXBhbmVsLWNvbnRlbnQgZ3JpZCcpO1xyXG4gICAgfVxyXG4gIFxyXG4gICAgaWYgKHRoaXMuanVzdGlmeUNvbnRlbnQubGVuZ3RoID4gMCkge1xyXG4gICAgICBjbGFzc2VzLnB1c2goJ2ZsZXggZmxleC13cmFwICcrdGhpcy5qdXN0aWZ5Q29udGVudCk7XHJcbiAgICB9XHJcblxyXG4gICAgaWYodGhpcy5hY3RpdmVPdmVyZmxvdyl7XHJcbiAgICAgIGNsYXNzZXMucHVzaCgndy1wYW5lbC1vdmVyZmxvdycpO1xyXG4gICAgfVxyXG4gIFxyXG4gICAgcmV0dXJuIGNsYXNzZXMuam9pbignICcpO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IFtuZ0NsYXNzXT1cInsgJ3ctcGFuZWwnOiAhcmVkdWNlZCwgJ3ctcmVkdWNlZC1wYW5lbCc6IHJlZHVjZWR9XCIgY2xhc3M9XCJ3LWZ1bGwgaC1mdWxsXCI+XHJcbiAgICA8dy1wYW5lbC10aXRsZSAqbmdJZj1cInRpdGxlXCIgW3RpdGxlXT1cInRpdGxlXCI+PC93LXBhbmVsLXRpdGxlPlxyXG4gICAgPHctcGFuZWwtc3VidGl0bGUgKm5nSWY9XCJzdWJ0aXRsZVwiIFtzdWJ0aXRsZV09XCJzdWJ0aXRsZVwiPjwvdy1wYW5lbC1zdWJ0aXRsZT5cclxuICAgIDxkaXYgW25nQ2xhc3NdPVwiZ2V0Q29tYmluZWRDbGFzc2VzKClcIiBbc3R5bGUubWF4LWhlaWdodF09XCJtYXhIZWlnaHRPdmVyZmxvd1wiPlxyXG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidy1wYW5lbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93YXBwLWNvbXBvbmVudHMvc3JjL2xpYi9sYXlvdXQvdy1wYW5lbC93LXBhbmVsLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3dhcHAtY29tcG9uZW50cy9zcmMvbGliL2xheW91dC93LXBhbmVsL3ctcGFuZWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBT2pELE1BQU0sT0FBTyxlQUFlO0lBTDVCO1FBU3VCLGVBQVUsR0FBWSxJQUFJLENBQUM7UUFDOUIsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUNsQixtQkFBYyxHQUFXLEVBQUUsQ0FBQztRQUM1QixtQkFBYyxHQUFZLEtBQUssQ0FBQztLQXFCMUQ7SUFqQkMsa0JBQWtCO1FBQ2hCLElBQUksT0FBTyxHQUFHLEVBQUUsQ0FBQztRQUVqQixJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7WUFDbkIsT0FBTyxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO1NBQ3RDO1FBRUQsSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDbEMsT0FBTyxDQUFDLElBQUksQ0FBQyxpQkFBaUIsR0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLENBQUM7U0FDckQ7UUFFRCxJQUFHLElBQUksQ0FBQyxjQUFjLEVBQUM7WUFDckIsT0FBTyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO1NBQ2xDO1FBRUQsT0FBTyxPQUFPLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQzNCLENBQUM7OzRHQTNCVSxlQUFlO2dHQUFmLGVBQWUsNlNDUDVCLHliQU1NOzJGRENPLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsU0FBUzs4QkFLSCxLQUFLO3NCQUFwQixLQUFLO3VCQUFDLE9BQU87Z0JBQ0UsS0FBSztzQkFBcEIsS0FBSzt1QkFBQyxPQUFPO2dCQUNLLFFBQVE7c0JBQTFCLEtBQUs7dUJBQUMsVUFBVTtnQkFDSSxVQUFVO3NCQUE5QixLQUFLO3VCQUFDLFlBQVk7Z0JBQ0QsT0FBTztzQkFBeEIsS0FBSzt1QkFBQyxTQUFTO2dCQUNTLGNBQWM7c0JBQXRDLEtBQUs7dUJBQUMsZ0JBQWdCO2dCQUNFLGNBQWM7c0JBQXRDLEtBQUs7dUJBQUMsZ0JBQWdCO2dCQUNFLGNBQWM7c0JBQXRDLEtBQUs7dUJBQUMsZ0JBQWdCO2dCQUNLLGlCQUFpQjtzQkFBNUMsS0FBSzt1QkFBQyxtQkFBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3ctcGFuZWwnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi93LXBhbmVsLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi93LXBhbmVsLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFdQYW5lbENvbXBvbmVudCB7XHJcbiAgQElucHV0KCd3aWR0aCcpIHdpZHRoOiBhbnk7XHJcbiAgQElucHV0KCd0aXRsZScpIHRpdGxlITogc3RyaW5nO1xyXG4gIEBJbnB1dCgnc3VidGl0bGUnKSBzdWJ0aXRsZSE6IHN0cmluZztcclxuICBASW5wdXQoJ2FjdGl2ZUdyaWQnKSBhY3RpdmVHcmlkOiBib29sZWFuID0gdHJ1ZTtcclxuICBASW5wdXQoJ3JlZHVjZWQnKSByZWR1Y2VkOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCdqdXN0aWZ5Q29udGVudCcpIGp1c3RpZnlDb250ZW50OiBzdHJpbmcgPSAnJztcclxuICBASW5wdXQoJ2FjdGl2ZU92ZXJmbG93JykgYWN0aXZlT3ZlcmZsb3c6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoJ2hlaWdodE92ZXJmbG93JykgaGVpZ2h0T3ZlcmZsb3chOiBzdHJpbmc7XHJcbiAgQElucHV0KCdtYXhIZWlnaHRPdmVyZmxvdycpIG1heEhlaWdodE92ZXJmbG93ITogc3RyaW5nO1xyXG4gIFxyXG4gIGdldENvbWJpbmVkQ2xhc3NlcygpIHtcclxuICAgIGxldCBjbGFzc2VzID0gW107XHJcbiAgXHJcbiAgICBpZiAodGhpcy5hY3RpdmVHcmlkKSB7XHJcbiAgICAgIGNsYXNzZXMucHVzaCgndy1wYW5lbC1jb250ZW50IGdyaWQnKTtcclxuICAgIH1cclxuICBcclxuICAgIGlmICh0aGlzLmp1c3RpZnlDb250ZW50Lmxlbmd0aCA+IDApIHtcclxuICAgICAgY2xhc3Nlcy5wdXNoKCdmbGV4IGZsZXgtd3JhcCAnK3RoaXMuanVzdGlmeUNvbnRlbnQpO1xyXG4gICAgfVxyXG5cclxuICAgIGlmKHRoaXMuYWN0aXZlT3ZlcmZsb3cpe1xyXG4gICAgICBjbGFzc2VzLnB1c2goJ3ctcGFuZWwtb3ZlcmZsb3cnKTtcclxuICAgIH1cclxuICBcclxuICAgIHJldHVybiBjbGFzc2VzLmpvaW4oJyAnKTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBbbmdDbGFzc109XCJ7ICd3LXBhbmVsJzogIXJlZHVjZWQsICd3LXJlZHVjZWQtcGFuZWwnOiByZWR1Y2VkfVwiIGNsYXNzPVwidy1mdWxsIGgtZnVsbFwiPlxyXG4gICAgPHctcGFuZWwtdGl0bGUgKm5nSWY9XCJ0aXRsZVwiIFt0aXRsZV09XCJ0aXRsZVwiPjwvdy1wYW5lbC10aXRsZT5cclxuICAgIDx3LXBhbmVsLXN1YnRpdGxlICpuZ0lmPVwic3VidGl0bGVcIiBbc3VidGl0bGVdPVwic3VidGl0bGVcIj48L3ctcGFuZWwtc3VidGl0bGU+XHJcbiAgICA8ZGl2IFtuZ0NsYXNzXT1cImdldENvbWJpbmVkQ2xhc3NlcygpXCIgW3N0eWxlLmhlaWdodF09XCJoZWlnaHRPdmVyZmxvd1wiIFtzdHlsZS5tYXgtaGVpZ2h0XT1cIm1heEhlaWdodE92ZXJmbG93XCI+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==

package/esm2020/lib/misc/w-timeline/w-timeline.component.mjs

@@ -19,7 +19,7 @@ export class WTimelineComponent {
     }
 }
 WTimelineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WTimelineComponent, selector: "w-timeline", inputs: { events: "events", header: "header", panel: "panel", align: "align", reducedPanelMargin: "reducedPanelMargin", reducedEventPanelMargin: "reducedEventPanelMargin" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div *ngIf=\"panel; else timeline\">\r\n    <w-panel [title]=\"header\" [reduced]=\"reducedPanelMargin\">\r\n        <ng-container *ngTemplateOutlet=\"timeline\"></ng-container>\r\n    </w-panel>\r\n</div>\r\n\r\n<ng-template #timeline>\r\n    <div class=\"col-12\">\r\n        <p-timeline [value]=\"events\" [align]=\"align\" styleClass=\"customized-timeline\" \r\n                    [class.w-timeline-non-alternate]=\"align != 'alternate'\">\r\n            <ng-template pTemplate=\"marker\" let-event>\r\n                <span *ngIf=\"event.color.includes('#'); else wappingColors\"\r\n                    class=\"flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1 shadow-2\"\r\n                    [style.backgroundColor]=\"event.color\">\r\n                    <i [ngClass]=\"'pi '+event.icon\"></i>\r\n                </span>\r\n                <ng-template #wappingColors>\r\n                    <span\r\n                        class=\"flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1 shadow-2\"\r\n                        [class]=\"'w-timeline-event color-'+event.color\">\r\n                        <i [ngClass]=\"'pi '+event.icon\" [class]=\"'w-timeline-event color-'+event.color\"></i>\r\n                    </span>\r\n                </ng-template>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"content\" let-event>\r\n                <w-panel [title]=\"event.status\" [subtitle]=\"event.date\" [reduced]=\"reducedEventPanelMargin\">\r\n                    <div class=\"col-12\">\r\n                        <img *ngIf=\"event.image\"\r\n                            [src]=\"event.image\"\r\n                            [alt]=\"event.name\" width=\"200\" class=\"shadow-2\" />\r\n                        <p> {{event.content}} </p>\r\n                        <div class=\"flex w-timeline-button\" [ngClass]=\"{'w-timeline-button-end':align == 'left', 'w-timeline-button-start':align == 'right'}\">\r\n                            <w-button *ngIf=\"event.button\" type=\"text\" \r\n                                    [label]=\"event.button.label\" \r\n                                    [icon]=\"event.button.icon!\"\r\n                                    (onClick)=\"onButtonClick(event)\">\r\n                            </w-button>\r\n                        </div>\r\n                    </div>\r\n                </w-panel>\r\n            </ng-template>\r\n        </p-timeline>\r\n    </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n+1) .p-timeline-event-opposite{text-align:right;padding:0}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n+1) .p-timeline-event-content{text-align:left;padding:0 0 0 16px}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n+1) .p-timeline-event-content .w-timeline-button{justify-content:end}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:right;padding:0 16px 0 0}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-content .w-timeline-button{justify-content:start}::ng-deep .w-timeline-non-alternate .p-timeline-event-content{padding:0 1rem;margin-bottom:16px!important}.w-timeline-button-end{justify-content:end}.w-timeline-button-start{justify-content:start}.w-timeline-event.color-success{background-color:#46ff9b;color:#00db5d}.w-timeline-event.color-warn{background-color:#ffcd46;color:#eeae00}.w-timeline-event.color-info{background-color:#62c3ff;color:#009dfd}.w-timeline-event.color-error{background-color:#f55;color:#e50000}.w-timeline-event-icon-white{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "component", type: i4.WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "tooltipPosition", "tooltip", "disabled", "loading"], outputs: ["onClick"] }, { kind: "component", type: i5.WPanelComponent, selector: "w-panel", inputs: ["width", "title", "subtitle", "activeGrid", "reduced", "justifyContent", "activeOverflow", "maxHeightOverflow"] }] });
+WTimelineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WTimelineComponent, selector: "w-timeline", inputs: { events: "events", header: "header", panel: "panel", align: "align", reducedPanelMargin: "reducedPanelMargin", reducedEventPanelMargin: "reducedEventPanelMargin" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div *ngIf=\"panel; else timeline\">\r\n    <w-panel [title]=\"header\" [reduced]=\"reducedPanelMargin\">\r\n        <ng-container *ngTemplateOutlet=\"timeline\"></ng-container>\r\n    </w-panel>\r\n</div>\r\n\r\n<ng-template #timeline>\r\n    <div class=\"col-12\">\r\n        <p-timeline [value]=\"events\" [align]=\"align\" styleClass=\"customized-timeline\" \r\n                    [class.w-timeline-non-alternate]=\"align != 'alternate'\">\r\n            <ng-template pTemplate=\"marker\" let-event>\r\n                <span *ngIf=\"event.color.includes('#'); else wappingColors\"\r\n                    class=\"flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1 shadow-2\"\r\n                    [style.backgroundColor]=\"event.color\">\r\n                    <i [ngClass]=\"'pi '+event.icon\"></i>\r\n                </span>\r\n                <ng-template #wappingColors>\r\n                    <span\r\n                        class=\"flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1 shadow-2\"\r\n                        [class]=\"'w-timeline-event color-'+event.color\">\r\n                        <i [ngClass]=\"'pi '+event.icon\" [class]=\"'w-timeline-event color-'+event.color\"></i>\r\n                    </span>\r\n                </ng-template>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"content\" let-event>\r\n                <w-panel [title]=\"event.status\" [subtitle]=\"event.date\" [reduced]=\"reducedEventPanelMargin\">\r\n                    <div class=\"col-12\">\r\n                        <img *ngIf=\"event.image\"\r\n                            [src]=\"event.image\"\r\n                            [alt]=\"event.name\" width=\"200\" class=\"shadow-2\" />\r\n                        <p> {{event.content}} </p>\r\n                        <div class=\"flex w-timeline-button\" [ngClass]=\"{'w-timeline-button-end':align == 'left', 'w-timeline-button-start':align == 'right'}\">\r\n                            <w-button *ngIf=\"event.button\" type=\"text\" \r\n                                    [label]=\"event.button.label\" \r\n                                    [icon]=\"event.button.icon!\"\r\n                                    (onClick)=\"onButtonClick(event)\">\r\n                            </w-button>\r\n                        </div>\r\n                    </div>\r\n                </w-panel>\r\n            </ng-template>\r\n        </p-timeline>\r\n    </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n+1) .p-timeline-event-opposite{text-align:right;padding:0}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n+1) .p-timeline-event-content{text-align:left;padding:0 0 0 16px}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n+1) .p-timeline-event-content .w-timeline-button{justify-content:end}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:right;padding:0 16px 0 0}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-content .w-timeline-button{justify-content:start}::ng-deep .w-timeline-non-alternate .p-timeline-event-content{padding:0 1rem;margin-bottom:16px!important}.w-timeline-button-end{justify-content:end}.w-timeline-button-start{justify-content:start}.w-timeline-event.color-success{background-color:#46ff9b;color:#00db5d}.w-timeline-event.color-warn{background-color:#ffcd46;color:#eeae00}.w-timeline-event.color-info{background-color:#62c3ff;color:#009dfd}.w-timeline-event.color-error{background-color:#f55;color:#e50000}.w-timeline-event-icon-white{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "component", type: i4.WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "tooltipPosition", "tooltip", "disabled", "loading"], outputs: ["onClick"] }, { kind: "component", type: i5.WPanelComponent, selector: "w-panel", inputs: ["width", "title", "subtitle", "activeGrid", "reduced", "justifyContent", "activeOverflow", "heightOverflow", "maxHeightOverflow"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WTimelineComponent, decorators: [{
             type: Component,
             args: [{ selector: 'w-timeline', template: "<div *ngIf=\"panel; else timeline\">\r\n    <w-panel [title]=\"header\" [reduced]=\"reducedPanelMargin\">\r\n        <ng-container *ngTemplateOutlet=\"timeline\"></ng-container>\r\n    </w-panel>\r\n</div>\r\n\r\n<ng-template #timeline>\r\n    <div class=\"col-12\">\r\n        <p-timeline [value]=\"events\" [align]=\"align\" styleClass=\"customized-timeline\" \r\n                    [class.w-timeline-non-alternate]=\"align != 'alternate'\">\r\n            <ng-template pTemplate=\"marker\" let-event>\r\n                <span *ngIf=\"event.color.includes('#'); else wappingColors\"\r\n                    class=\"flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1 shadow-2\"\r\n                    [style.backgroundColor]=\"event.color\">\r\n                    <i [ngClass]=\"'pi '+event.icon\"></i>\r\n                </span>\r\n                <ng-template #wappingColors>\r\n                    <span\r\n                        class=\"flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1 shadow-2\"\r\n                        [class]=\"'w-timeline-event color-'+event.color\">\r\n                        <i [ngClass]=\"'pi '+event.icon\" [class]=\"'w-timeline-event color-'+event.color\"></i>\r\n                    </span>\r\n                </ng-template>\r\n            </ng-template>\r\n            <ng-template pTemplate=\"content\" let-event>\r\n                <w-panel [title]=\"event.status\" [subtitle]=\"event.date\" [reduced]=\"reducedEventPanelMargin\">\r\n                    <div class=\"col-12\">\r\n                        <img *ngIf=\"event.image\"\r\n                            [src]=\"event.image\"\r\n                            [alt]=\"event.name\" width=\"200\" class=\"shadow-2\" />\r\n                        <p> {{event.content}} </p>\r\n                        <div class=\"flex w-timeline-button\" [ngClass]=\"{'w-timeline-button-end':align == 'left', 'w-timeline-button-start':align == 'right'}\">\r\n                            <w-button *ngIf=\"event.button\" type=\"text\" \r\n                                    [label]=\"event.button.label\" \r\n                                    [icon]=\"event.button.icon!\"\r\n                                    (onClick)=\"onButtonClick(event)\">\r\n                            </w-button>\r\n                        </div>\r\n                    </div>\r\n                </w-panel>\r\n            </ng-template>\r\n        </p-timeline>\r\n    </div>\r\n</ng-template>", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n+1) .p-timeline-event-opposite{text-align:right;padding:0}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n+1) .p-timeline-event-content{text-align:left;padding:0 0 0 16px}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n+1) .p-timeline-event-content .w-timeline-button{justify-content:end}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-content{text-align:right;padding:0 16px 0 0}::ng-deep .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(2n) .p-timeline-event-content .w-timeline-button{justify-content:start}::ng-deep .w-timeline-non-alternate .p-timeline-event-content{padding:0 1rem;margin-bottom:16px!important}.w-timeline-button-end{justify-content:end}.w-timeline-button-start{justify-content:start}.w-timeline-event.color-success{background-color:#46ff9b;color:#00db5d}.w-timeline-event.color-warn{background-color:#ffcd46;color:#eeae00}.w-timeline-event.color-info{background-color:#62c3ff;color:#009dfd}.w-timeline-event.color-error{background-color:#f55;color:#e50000}.w-timeline-event-icon-white{color:#fff}\n"] }]

package/esm2020/lib/misc/w-wizard/w-wizard.component.mjs

@@ -37,7 +37,7 @@ export class WWizardComponent {
     }
 }
 WWizardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WWizardComponent, deps: [{ token: i1.MessageService }], target: i0.ɵɵFactoryTarget.Component });
-WWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WWizardComponent, selector: "w-wizard", inputs: { stepsItems: "stepsItems", stepsHeadings: "stepsHeadings", stepsSubheadings: "stepsSubheadings", nextBtnLabel: "nextBtnLabel", previousBtnLabel: "previousBtnLabel", confirmButtonLabel: "confirmButtonLabel", confirmButtonIcon: "confirmButtonIcon", secondaryConfirmButtonLabel: "secondaryConfirmButtonLabel", secondaryConfirmButtonIcon: "secondaryConfirmButtonIcon", isReadOnly: "isReadOnly", formGroup: "formGroup" }, outputs: { confirmButtonActivated: "confirmButtonActivated", secondaryConfirmButtonActivated: "secondaryConfirmButtonActivated", activeIndexParent: "activeIndexParent" }, providers: [MessageService], ngImport: i0, template: "<w-panel class=\"col-12\" [activeGrid]=\"false\">\r\n    <p-steps [model]=\"stepsItems\" [activeIndex]=\"activeIndex\" (activeIndexChange)=\"onActiveIndexChange($event)\" [readonly]=\"isReadOnly\"></p-steps>\r\n</w-panel>\r\n\r\n<w-panel class=\"col-12\" [activeGrid]=\"false\">\r\n    \r\n    <div class=\"flex flex-column align-items-center sm:align-items-start w-wizard-headings\">\r\n        <span *ngIf=\"stepsHeadings && stepsHeadings[activeIndex]\" class=\"w-wizard-heading\">\r\n            {{stepsHeadings[activeIndex]}}\r\n        </span>\r\n        <span *ngIf=\"stepsSubheadings && stepsSubheadings[activeIndex]\" class=\"w-wizard-subheading\">\r\n            {{stepsSubheadings[activeIndex]}}\r\n        </span>\r\n    </div>\r\n\r\n    <ng-content *ngIf=\"activeIndex == 0\" select=\".step-1\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 1\" select=\".step-2\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 2\" select=\".step-3\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 3\" select=\".step-4\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 4\" select=\".step-5\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 5\" select=\".step-6\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 6\" select=\".step-7\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 7\" select=\".step-8\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 8\" select=\".step-9\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 9\" select=\".step-10\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 10\" select=\".step-11\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 11\" select=\".step-12\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 12\" select=\".step-13\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 13\" select=\".step-14\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 14\" select=\".step-15\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 15\" select=\".step-16\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 16\" select=\".step-17\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 17\" select=\".step-18\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 18\" select=\".step-19\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 19\" select=\".step-20\" class=\"w-wizard-body\"></ng-content>\r\n\r\n    <div class=\"flex justify-content-between flex-wrap m-auto\">\r\n        <div class=\"flex align-items-center justify-content-center\">\r\n            <w-button *ngIf=\"activeIndex != 0\" \r\n                      [icon]=\"'pi-arrow-left'\" \r\n                      type=\"secondary\" \r\n                      [label]=\"previousBtnLabel\" \r\n                      (onClick)=\"previousPage()\">\r\n            </w-button>\r\n        </div>\r\n        <div *ngIf=\"!(stepsItems.length -1 == activeIndex); else confirmButtons\" class=\"flex align-items-center justify-content-center\">\r\n            <w-button type=\"primary\"\r\n                      [icon]=\"'pi-arrow-right'\" \r\n                      [label]=\"nextBtnLabel\" \r\n                      (onClick)=\"nextPage()\">\r\n            </w-button>\r\n        </div>\r\n        <ng-template #confirmButtons >\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n                <w-button *ngIf=\"secondaryConfirmButtonLabel\"\r\n                          type=\"secondary\"\r\n                          class=\"w-wizard-button-gap\"\r\n                          [icon]=\"'pi '+secondaryConfirmButtonIcon\"\r\n                          [label]=\"secondaryConfirmButtonLabel\" \r\n                          [disabled]=\"formGroup && !formGroup.valid\" \r\n                          (onClick)=\"secondaryConfirm()\">\r\n                </w-button>\r\n                <w-button type=\"primary\"\r\n                           [icon]=\"'pi '+confirmButtonIcon\"\r\n                           [label]=\"confirmButtonLabel\" \r\n                           [disabled]=\"formGroup && !formGroup.valid\" \r\n                           (onClick)=\"confirm()\">\r\n                </w-button>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</w-panel>\r\n", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4,.w-wizard-heading{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2,.w-wizard-subheading{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-title,.w-wizard-body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}.w-wizard-button-gap{margin-right:16px}.w-wizard-subheading{margin-top:16px}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-number{background:#e0f5fc;color:#003345}.w-wizard-headings{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass"], outputs: ["activeIndexChange"] }, { kind: "component", type: i4.WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "tooltipPosition", "tooltip", "disabled", "loading"], outputs: ["onClick"] }, { kind: "component", type: i5.WPanelComponent, selector: "w-panel", inputs: ["width", "title", "subtitle", "activeGrid", "reduced", "justifyContent", "activeOverflow", "maxHeightOverflow"] }] });
+WWizardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WWizardComponent, selector: "w-wizard", inputs: { stepsItems: "stepsItems", stepsHeadings: "stepsHeadings", stepsSubheadings: "stepsSubheadings", nextBtnLabel: "nextBtnLabel", previousBtnLabel: "previousBtnLabel", confirmButtonLabel: "confirmButtonLabel", confirmButtonIcon: "confirmButtonIcon", secondaryConfirmButtonLabel: "secondaryConfirmButtonLabel", secondaryConfirmButtonIcon: "secondaryConfirmButtonIcon", isReadOnly: "isReadOnly", formGroup: "formGroup" }, outputs: { confirmButtonActivated: "confirmButtonActivated", secondaryConfirmButtonActivated: "secondaryConfirmButtonActivated", activeIndexParent: "activeIndexParent" }, providers: [MessageService], ngImport: i0, template: "<w-panel class=\"col-12\" [activeGrid]=\"false\">\r\n    <p-steps [model]=\"stepsItems\" [activeIndex]=\"activeIndex\" (activeIndexChange)=\"onActiveIndexChange($event)\" [readonly]=\"isReadOnly\"></p-steps>\r\n</w-panel>\r\n\r\n<w-panel class=\"col-12\" [activeGrid]=\"false\">\r\n    \r\n    <div class=\"flex flex-column align-items-center sm:align-items-start w-wizard-headings\">\r\n        <span *ngIf=\"stepsHeadings && stepsHeadings[activeIndex]\" class=\"w-wizard-heading\">\r\n            {{stepsHeadings[activeIndex]}}\r\n        </span>\r\n        <span *ngIf=\"stepsSubheadings && stepsSubheadings[activeIndex]\" class=\"w-wizard-subheading\">\r\n            {{stepsSubheadings[activeIndex]}}\r\n        </span>\r\n    </div>\r\n\r\n    <ng-content *ngIf=\"activeIndex == 0\" select=\".step-1\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 1\" select=\".step-2\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 2\" select=\".step-3\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 3\" select=\".step-4\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 4\" select=\".step-5\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 5\" select=\".step-6\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 6\" select=\".step-7\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 7\" select=\".step-8\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 8\" select=\".step-9\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 9\" select=\".step-10\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 10\" select=\".step-11\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 11\" select=\".step-12\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 12\" select=\".step-13\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 13\" select=\".step-14\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 14\" select=\".step-15\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 15\" select=\".step-16\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 16\" select=\".step-17\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 17\" select=\".step-18\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 18\" select=\".step-19\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 19\" select=\".step-20\" class=\"w-wizard-body\"></ng-content>\r\n\r\n    <div class=\"flex justify-content-between flex-wrap m-auto\">\r\n        <div class=\"flex align-items-center justify-content-center\">\r\n            <w-button *ngIf=\"activeIndex != 0\" \r\n                      [icon]=\"'pi-arrow-left'\" \r\n                      type=\"secondary\" \r\n                      [label]=\"previousBtnLabel\" \r\n                      (onClick)=\"previousPage()\">\r\n            </w-button>\r\n        </div>\r\n        <div *ngIf=\"!(stepsItems.length -1 == activeIndex); else confirmButtons\" class=\"flex align-items-center justify-content-center\">\r\n            <w-button type=\"primary\"\r\n                      [icon]=\"'pi-arrow-right'\" \r\n                      [label]=\"nextBtnLabel\" \r\n                      (onClick)=\"nextPage()\">\r\n            </w-button>\r\n        </div>\r\n        <ng-template #confirmButtons >\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n                <w-button *ngIf=\"secondaryConfirmButtonLabel\"\r\n                          type=\"secondary\"\r\n                          class=\"w-wizard-button-gap\"\r\n                          [icon]=\"'pi '+secondaryConfirmButtonIcon\"\r\n                          [label]=\"secondaryConfirmButtonLabel\" \r\n                          [disabled]=\"formGroup && !formGroup.valid\" \r\n                          (onClick)=\"secondaryConfirm()\">\r\n                </w-button>\r\n                <w-button type=\"primary\"\r\n                           [icon]=\"'pi '+confirmButtonIcon\"\r\n                           [label]=\"confirmButtonLabel\" \r\n                           [disabled]=\"formGroup && !formGroup.valid\" \r\n                           (onClick)=\"confirm()\">\r\n                </w-button>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</w-panel>\r\n", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4,.w-wizard-heading{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2,.w-wizard-subheading{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-title,.w-wizard-body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}.w-wizard-button-gap{margin-right:16px}.w-wizard-subheading{margin-top:16px}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-number{background:#e0f5fc;color:#003345}.w-wizard-headings{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.Steps, selector: "p-steps", inputs: ["activeIndex", "model", "readonly", "style", "styleClass"], outputs: ["activeIndexChange"] }, { kind: "component", type: i4.WButtonComponent, selector: "w-button", inputs: ["type", "label", "size", "icon", "tooltipPosition", "tooltip", "disabled", "loading"], outputs: ["onClick"] }, { kind: "component", type: i5.WPanelComponent, selector: "w-panel", inputs: ["width", "title", "subtitle", "activeGrid", "reduced", "justifyContent", "activeOverflow", "heightOverflow", "maxHeightOverflow"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WWizardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'w-wizard', providers: [MessageService], template: "<w-panel class=\"col-12\" [activeGrid]=\"false\">\r\n    <p-steps [model]=\"stepsItems\" [activeIndex]=\"activeIndex\" (activeIndexChange)=\"onActiveIndexChange($event)\" [readonly]=\"isReadOnly\"></p-steps>\r\n</w-panel>\r\n\r\n<w-panel class=\"col-12\" [activeGrid]=\"false\">\r\n    \r\n    <div class=\"flex flex-column align-items-center sm:align-items-start w-wizard-headings\">\r\n        <span *ngIf=\"stepsHeadings && stepsHeadings[activeIndex]\" class=\"w-wizard-heading\">\r\n            {{stepsHeadings[activeIndex]}}\r\n        </span>\r\n        <span *ngIf=\"stepsSubheadings && stepsSubheadings[activeIndex]\" class=\"w-wizard-subheading\">\r\n            {{stepsSubheadings[activeIndex]}}\r\n        </span>\r\n    </div>\r\n\r\n    <ng-content *ngIf=\"activeIndex == 0\" select=\".step-1\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 1\" select=\".step-2\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 2\" select=\".step-3\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 3\" select=\".step-4\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 4\" select=\".step-5\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 5\" select=\".step-6\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 6\" select=\".step-7\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 7\" select=\".step-8\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 8\" select=\".step-9\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 9\" select=\".step-10\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 10\" select=\".step-11\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 11\" select=\".step-12\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 12\" select=\".step-13\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 13\" select=\".step-14\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 14\" select=\".step-15\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 15\" select=\".step-16\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 16\" select=\".step-17\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 17\" select=\".step-18\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 18\" select=\".step-19\" class=\"w-wizard-body\"></ng-content>\r\n    <ng-content *ngIf=\"activeIndex == 19\" select=\".step-20\" class=\"w-wizard-body\"></ng-content>\r\n\r\n    <div class=\"flex justify-content-between flex-wrap m-auto\">\r\n        <div class=\"flex align-items-center justify-content-center\">\r\n            <w-button *ngIf=\"activeIndex != 0\" \r\n                      [icon]=\"'pi-arrow-left'\" \r\n                      type=\"secondary\" \r\n                      [label]=\"previousBtnLabel\" \r\n                      (onClick)=\"previousPage()\">\r\n            </w-button>\r\n        </div>\r\n        <div *ngIf=\"!(stepsItems.length -1 == activeIndex); else confirmButtons\" class=\"flex align-items-center justify-content-center\">\r\n            <w-button type=\"primary\"\r\n                      [icon]=\"'pi-arrow-right'\" \r\n                      [label]=\"nextBtnLabel\" \r\n                      (onClick)=\"nextPage()\">\r\n            </w-button>\r\n        </div>\r\n        <ng-template #confirmButtons >\r\n            <div class=\"flex align-items-center justify-content-center\">\r\n                <w-button *ngIf=\"secondaryConfirmButtonLabel\"\r\n                          type=\"secondary\"\r\n                          class=\"w-wizard-button-gap\"\r\n                          [icon]=\"'pi '+secondaryConfirmButtonIcon\"\r\n                          [label]=\"secondaryConfirmButtonLabel\" \r\n                          [disabled]=\"formGroup && !formGroup.valid\" \r\n                          (onClick)=\"secondaryConfirm()\">\r\n                </w-button>\r\n                <w-button type=\"primary\"\r\n                           [icon]=\"'pi '+confirmButtonIcon\"\r\n                           [label]=\"confirmButtonLabel\" \r\n                           [disabled]=\"formGroup && !formGroup.valid\" \r\n                           (onClick)=\"confirm()\">\r\n                </w-button>\r\n            </div>\r\n        </ng-template>\r\n    </div>\r\n</w-panel>\r\n", styles: [".heading1{font-size:3.1428571429rem;line-height:3.4285714286rem;font-weight:700}.heading2{font-size:2.8571428571rem;line-height:3.1428571429rem;font-weight:700}.heading3{font-size:2.5714285714rem;line-height:2.8571428571rem;font-weight:700}.heading4,.w-wizard-heading{font-size:2.2857142857rem;line-height:2.5714285714rem;font-weight:700}.heading5{font-size:2rem;line-height:2.2857142857rem;font-weight:700}.heading6{font-size:1.7142857143rem;line-height:2rem;font-weight:700}.subtitle1{font-size:1.4285714286rem;line-height:1.7142857143rem;font-weight:700}.subtitle2,.w-wizard-subheading{font-size:1.1428571429rem;line-height:1.4285714286rem;font-weight:700}.body,::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-title,.w-wizard-body,.input-generic-placeholder-small,.input-generic-small{font-size:1rem;line-height:1.1428571429rem;font-weight:600}.caption{font-size:.8571428571rem;line-height:1.1428571429rem;font-weight:600}.select-option-text{font-size:16;line-height:24px;font-weight:600}.icon-small-size{font-size:8px}.icon-small-x-size{font-size:12px}.icon-medium-size{font-size:16px}.icon-large-size{font-size:24px}.spacingXXS{padding:4px}.spacingXSM{padding:6px}.spacingXS{padding:8px}.spacingS{padding:12px}.spacingM{padding:16px}.spacingL{padding:20px}.spacingXL{padding:24px}.spacingXXL{padding:28px}.spacingXXXL{padding:32px}.focus{box-shadow:0 0 8px #00a6e980}.hover{border-radius:8px;border:1px solid #00b2eb}.button-large-typography{font-size:20px;line-height:24px;font-weight:700}.button-medium-typography{font-size:16px;line-height:16px;font-weight:700}.button-small-typography{font-size:12px;line-height:16px;font-weight:700}.button-text-typography,.input-generic-label{font-size:14px;line-height:16px;font-weight:700}.input-generic-placeholder{font-size:16px;line-height:24px;font-weight:600;color:#9aa0a6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#9aa0a6!important}.input-generic-valid{border-radius:8px;border:1px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:1px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:1px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:1px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:1px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:1px solid #FFBDBD}.tag-generic{font-size:14px;line-height:16px;font-weight:700}.tag-generic-small{font-size:12px;line-height:16px;font-weight:700}.toggle-small-typography{font-size:12px;line-height:16px;font-weight:600}.w-generic-input-no-label-height{height:36px}.w-wizard-button-gap{margin-right:16px}.w-wizard-subheading{margin-top:16px}::ng-deep .p-steps .p-steps-item.p-highlight .p-steps-number{background:#e0f5fc;color:#003345}.w-wizard-headings{margin-bottom:16px}\n"] }]