npm - ngx-wapp-components - Versions diffs - 1.0.59 → 1.0.60 - Mend

ngx-wapp-components 1.0.59 → 1.0.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/esm2020/lib/shared/enums/enum.mjs +7 -1
package/esm2020/lib/sidebar/w-sidebar/w-sidebar.component.mjs +25 -4
package/esm2020/lib/view/w-view-text/w-view-text.component.mjs +3 -3
package/fesm2015/ngx-wapp-components.mjs +31 -6
package/fesm2015/ngx-wapp-components.mjs.map +1 -1
package/fesm2020/ngx-wapp-components.mjs +31 -6
package/fesm2020/ngx-wapp-components.mjs.map +1 -1
package/lib/shared/enums/enum.d.ts +5 -0
package/lib/sidebar/w-sidebar/w-sidebar.component.d.ts +6 -1
package/package.json +1 -1

package/esm2020/lib/shared/enums/enum.mjs CHANGED Viewed

@@ -11,4 +11,10 @@ export var ButtonType;
     ButtonType[ButtonType["tertiary"] = 2] = "tertiary";
     ButtonType[ButtonType["text"] = 3] = "text";
 })(ButtonType || (ButtonType = {}));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW51bS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3dhcHAtY29tcG9uZW50cy9zcmMvbGliL3NoYXJlZC9lbnVtcy9lbnVtLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBTixJQUFZLFFBSVg7QUFKRCxXQUFZLFFBQVE7SUFDaEIseUNBQVMsQ0FBQTtJQUNULDJDQUFVLENBQUE7SUFDVix5Q0FBUyxDQUFBO0FBQ2IsQ0FBQyxFQUpXLFFBQVEsS0FBUixRQUFRLFFBSW5CO0FBRUQsTUFBTSxDQUFOLElBQVksVUFLWDtBQUxELFdBQVksVUFBVTtJQUNwQixpREFBVyxDQUFBO0lBQ1gscURBQWEsQ0FBQTtJQUNiLG1EQUFZLENBQUE7SUFDWiwyQ0FBUSxDQUFBO0FBQ1YsQ0FBQyxFQUxXLFVBQVUsS0FBVixVQUFVLFFBS3JCIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGVudW0gU2l6ZVR5cGUge1xyXG4gICAgc21hbGwgPSAwLFxyXG4gICAgbWVkaXVtID0gMSxcclxuICAgIGxhcmdlID0gMlxyXG59XHJcblxyXG5leHBvcnQgZW51bSBCdXR0b25UeXBle1xyXG4gIHByaW1hcnkgPSAwLFxyXG4gIHNlY29uZGFyeSA9IDEsXHJcbiAgdGVydGlhcnkgPSAyLFxyXG4gIHRleHQgPSAzXHJcbn0iXX0=
+export var IconType;
+(function (IconType) {
+    IconType[IconType["pIcon"] = 0] = "pIcon";
+    IconType[IconType["urlIcon"] = 1] = "urlIcon";
+    IconType[IconType["wIcon"] = 2] = "wIcon";
+})(IconType || (IconType = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW51bS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3dhcHAtY29tcG9uZW50cy9zcmMvbGliL3NoYXJlZC9lbnVtcy9lbnVtLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBTixJQUFZLFFBSVg7QUFKRCxXQUFZLFFBQVE7SUFDaEIseUNBQVMsQ0FBQTtJQUNULDJDQUFVLENBQUE7SUFDVix5Q0FBUyxDQUFBO0FBQ2IsQ0FBQyxFQUpXLFFBQVEsS0FBUixRQUFRLFFBSW5CO0FBRUQsTUFBTSxDQUFOLElBQVksVUFLWDtBQUxELFdBQVksVUFBVTtJQUNwQixpREFBVyxDQUFBO0lBQ1gscURBQWEsQ0FBQTtJQUNiLG1EQUFZLENBQUE7SUFDWiwyQ0FBUSxDQUFBO0FBQ1YsQ0FBQyxFQUxXLFVBQVUsS0FBVixVQUFVLFFBS3JCO0FBRUQsTUFBTSxDQUFOLElBQVksUUFJWDtBQUpELFdBQVksUUFBUTtJQUNsQix5Q0FBUyxDQUFBO0lBQ1QsNkNBQVcsQ0FBQTtJQUNYLHlDQUFTLENBQUE7QUFDWCxDQUFDLEVBSlcsUUFBUSxLQUFSLFFBQVEsUUFJbkIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZW51bSBTaXplVHlwZSB7XHJcbiAgICBzbWFsbCA9IDAsXHJcbiAgICBtZWRpdW0gPSAxLFxyXG4gICAgbGFyZ2UgPSAyXHJcbn1cclxuXHJcbmV4cG9ydCBlbnVtIEJ1dHRvblR5cGV7XHJcbiAgcHJpbWFyeSA9IDAsXHJcbiAgc2Vjb25kYXJ5ID0gMSxcclxuICB0ZXJ0aWFyeSA9IDIsXHJcbiAgdGV4dCA9IDNcclxufVxyXG5cclxuZXhwb3J0IGVudW0gSWNvblR5cGV7XHJcbiAgcEljb24gPSAwLCBcclxuICB1cmxJY29uID0gMSwgXHJcbiAgd0ljb24gPSAyXHJcbn1cclxuIl19

package/esm2020/lib/sidebar/w-sidebar/w-sidebar.component.mjs CHANGED Viewed

@@ -1,13 +1,16 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { IconType } from '../../shared/enums/enum';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "primeng/api";
 import * as i3 from "primeng/sidebar";
+import * as i4 from "../../icons/wapping-icons/w-icons.component";
 export class WSidebarComponent {
     constructor() {
         this.activeGrid = false;
         this.closeOnOverlay = false;
-        this.styleClass = "w-full md:w-7";
+        this.styleClass = "w-full md:w-6 lg:w-5";
+        this.iconType = IconType;
         this.visibleChange = new EventEmitter();
         this._visible = false;
     }
@@ -24,12 +27,27 @@ export class WSidebarComponent {
     onClose() {
         this.visible = false;
     }
+    getIconType() {
+        if (this.icon.includes("pi pi-")) {
+            return IconType.pIcon;
+        }
+        else if (this.isURL(this.icon)) {
+            return IconType.urlIcon;
+        }
+        else {
+            return IconType.wIcon;
+        }
+    }
+    isURL(url) {
+        const patronURL = /^(ftp|http|https):\/\/[^ "]+$/;
+        return patronURL.test(url);
+    }
 }
 WSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WSidebarComponent, selector: "w-sidebar", inputs: { headerTitle: "headerTitle", activeGrid: "activeGrid", closeOnOverlay: "closeOnOverlay", styleClass: "styleClass", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" [dismissible]=\"closeOnOverlay\" [styleClass]=\"styleClass\" class=\"wapp-sidebar\">\r\n    <ng-template pTemplate=\"header\"><span class=\"subtitle1 m-0\">{{headerTitle}}</span></ng-template>\r\n    \r\n    <ng-template pTemplate=\"content\">\r\n        <div [ngClass]=\"{'w-sidebar-content grid' : activeGrid}\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>\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{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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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}:host ::ng-deep .wapp-sidebar .p-sidebar-header{padding:40px}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 40px}:host ::ng-deep .p-sidebar-footer{padding:60px!important}:host ::ng-deep .w-sidebar-content .col-1{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-2{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-3{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-4{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-5{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-6{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-7{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-8{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-9{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-10{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-11{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-12{padding:4px 20px}:host ::ng-deep .w-sidebar-content.grid{display:flex;flex-wrap:wrap;margin-right:-20px;margin-left:-20px;margin-top:-4px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }] });
+WSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WSidebarComponent, selector: "w-sidebar", inputs: { headerTitle: "headerTitle", activeGrid: "activeGrid", closeOnOverlay: "closeOnOverlay", styleClass: "styleClass", icon: "icon", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" [dismissible]=\"closeOnOverlay\" [styleClass]=\"styleClass\" class=\"wapp-sidebar\">\r\n    <ng-template pTemplate=\"header\">\r\n        <span *ngIf=\"icon && getIconType() == iconType.pIcon\" class=\"w-sidebar-icon icon-large-size\" [ngClass]=\"icon\"></span>\r\n        <img *ngIf=\"icon && getIconType() == iconType.urlIcon\" class=\"w-sidebar-icon\" [src]=\"icon\" width=\"24\" height=\"24\">\r\n        <w-icons *ngIf=\"icon && getIconType() == iconType.wIcon\" class=\"w-sidebar-icon\" [name]=\"icon\" [width]=\"24\" [height]=\"24\"></w-icons>\r\n\r\n        <span class=\"subtitle1 m-0\">{{headerTitle}}</span>\r\n    </ng-template>\r\n    \r\n    <ng-template pTemplate=\"content\">\r\n        <div [ngClass]=\"{'w-sidebar-content grid' : activeGrid}\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>\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{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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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}:host ::ng-deep .wapp-sidebar .p-sidebar-header{padding:40px}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 40px}:host ::ng-deep .p-sidebar-footer{padding:60px!important}:host ::ng-deep .w-sidebar-content .col-1{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-2{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-3{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-4{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-5{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-6{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-7{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-8{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-9{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-10{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-11{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-12{padding:4px 20px}:host ::ng-deep .w-sidebar-content.grid{display:flex;flex-wrap:wrap;margin-right:-20px;margin-left:-20px;margin-top:-4px}.w-sidebar-icon{margin-right:12px}\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: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: i4.WIconsComponent, selector: "w-icons", inputs: ["name", "width", "height", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-sidebar', template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" [dismissible]=\"closeOnOverlay\" [styleClass]=\"styleClass\" class=\"wapp-sidebar\">\r\n    <ng-template pTemplate=\"header\"><span class=\"subtitle1 m-0\">{{headerTitle}}</span></ng-template>\r\n    \r\n    <ng-template pTemplate=\"content\">\r\n        <div [ngClass]=\"{'w-sidebar-content grid' : activeGrid}\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>\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{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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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}:host ::ng-deep .wapp-sidebar .p-sidebar-header{padding:40px}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 40px}:host ::ng-deep .p-sidebar-footer{padding:60px!important}:host ::ng-deep .w-sidebar-content .col-1{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-2{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-3{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-4{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-5{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-6{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-7{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-8{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-9{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-10{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-11{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-12{padding:4px 20px}:host ::ng-deep .w-sidebar-content.grid{display:flex;flex-wrap:wrap;margin-right:-20px;margin-left:-20px;margin-top:-4px}\n"] }]
+            args: [{ selector: 'w-sidebar', template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" [dismissible]=\"closeOnOverlay\" [styleClass]=\"styleClass\" class=\"wapp-sidebar\">\r\n    <ng-template pTemplate=\"header\">\r\n        <span *ngIf=\"icon && getIconType() == iconType.pIcon\" class=\"w-sidebar-icon icon-large-size\" [ngClass]=\"icon\"></span>\r\n        <img *ngIf=\"icon && getIconType() == iconType.urlIcon\" class=\"w-sidebar-icon\" [src]=\"icon\" width=\"24\" height=\"24\">\r\n        <w-icons *ngIf=\"icon && getIconType() == iconType.wIcon\" class=\"w-sidebar-icon\" [name]=\"icon\" [width]=\"24\" [height]=\"24\"></w-icons>\r\n\r\n        <span class=\"subtitle1 m-0\">{{headerTitle}}</span>\r\n    </ng-template>\r\n    \r\n    <ng-template pTemplate=\"content\">\r\n        <div [ngClass]=\"{'w-sidebar-content grid' : activeGrid}\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>\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{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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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}:host ::ng-deep .wapp-sidebar .p-sidebar-header{padding:40px}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 40px}:host ::ng-deep .p-sidebar-footer{padding:60px!important}:host ::ng-deep .w-sidebar-content .col-1{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-2{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-3{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-4{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-5{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-6{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-7{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-8{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-9{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-10{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-11{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-12{padding:4px 20px}:host ::ng-deep .w-sidebar-content.grid{display:flex;flex-wrap:wrap;margin-right:-20px;margin-left:-20px;margin-top:-4px}.w-sidebar-icon{margin-right:12px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { headerTitle: [{
                 type: Input,
                 args: ['headerTitle']
@@ -42,9 +60,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }], styleClass: [{
                 type: Input,
                 args: ['styleClass']
+            }], icon: [{
+                type: Input,
+                args: ['icon']
             }], visibleChange: [{
                 type: Output
             }], visible: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidy1zaWRlYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3dhcHAtY29tcG9uZW50cy9zcmMvbGliL3NpZGViYXIvdy1zaWRlYmFyL3ctc2lkZWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93YXBwLWNvbXBvbmVudHMvc3JjL2xpYi9zaWRlYmFyL3ctc2lkZWJhci93LXNpZGViYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFPL0UsTUFBTSxPQUFPLGlCQUFpQjtJQXFCNUI7UUFuQnFCLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFDeEIsbUJBQWMsR0FBWSxLQUFLLENBQUM7UUFDcEMsZUFBVSxHQUFXLGVBQWUsQ0FBQztRQUVoRCxrQkFBYSxHQUEwQixJQUFJLFlBQVksRUFBVyxDQUFDO1FBRXJFLGFBQVEsR0FBWSxLQUFLLENBQUM7SUFhcEIsQ0FBQztJQVpmLElBQ0ksT0FBTztRQUNULE9BQU8sSUFBSSxDQUFDLFFBQVEsQ0FBQztJQUN2QixDQUFDO0lBRUQsSUFBSSxPQUFPLENBQUMsS0FBYztRQUN4QixJQUFJLEtBQUssS0FBSyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQzNCLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1lBQ3RCLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztTQUN4QztJQUNILENBQUM7SUFJRCxRQUFRLEtBQVUsQ0FBQztJQUVuQixPQUFPO1FBQ0wsSUFBSSxDQUFDLE9BQU8sR0FBRyxLQUFLLENBQUM7SUFDdkIsQ0FBQzs7OEdBM0JVLGlCQUFpQjtrR0FBakIsaUJBQWlCLGdQQ1A5QiwyakJBV0E7MkZESmEsaUJBQWlCO2tCQUw3QixTQUFTOytCQUNFLFdBQVc7MEVBS0MsV0FBVztzQkFBaEMsS0FBSzt1QkFBQyxhQUFhO2dCQUNDLFVBQVU7c0JBQTlCLEtBQUs7dUJBQUMsWUFBWTtnQkFDTSxjQUFjO3NCQUF0QyxLQUFLO3VCQUFDLGdCQUFnQjtnQkFDRixVQUFVO3NCQUE5QixLQUFLO3VCQUFDLFlBQVk7Z0JBRVQsYUFBYTtzQkFBdEIsTUFBTTtnQkFJSCxPQUFPO3NCQURWLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3ctc2lkZWJhcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3ctc2lkZWJhci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdy1zaWRlYmFyLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFdTaWRlYmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoJ2hlYWRlclRpdGxlJykgaGVhZGVyVGl0bGUhOiBzdHJpbmc7XHJcbiAgQElucHV0KCdhY3RpdmVHcmlkJykgYWN0aXZlR3JpZDogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgnY2xvc2VPbk92ZXJsYXknKSBjbG9zZU9uT3ZlcmxheTogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgnc3R5bGVDbGFzcycpIHN0eWxlQ2xhc3M6IHN0cmluZyA9IFwidy1mdWxsIG1kOnctN1wiO1xyXG4gIFxyXG4gIEBPdXRwdXQoKSB2aXNpYmxlQ2hhbmdlOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcblxyXG4gIHByaXZhdGUgX3Zpc2libGU6IGJvb2xlYW4gPSBmYWxzZTtcclxuICBASW5wdXQoKVxyXG4gIGdldCB2aXNpYmxlKCk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuIHRoaXMuX3Zpc2libGU7XHJcbiAgfVxyXG5cclxuICBzZXQgdmlzaWJsZSh2YWx1ZTogYm9vbGVhbikge1xyXG4gICAgaWYgKHZhbHVlICE9PSB0aGlzLl92aXNpYmxlKSB7XHJcbiAgICAgIHRoaXMuX3Zpc2libGUgPSB2YWx1ZTtcclxuICAgICAgdGhpcy52aXNpYmxlQ2hhbmdlLmVtaXQodGhpcy5fdmlzaWJsZSk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBjb25zdHJ1Y3Rvcigpe31cclxuICBcclxuICBuZ09uSW5pdCgpOiB2b2lkIHt9XHJcblxyXG4gIG9uQ2xvc2UoKXtcclxuICAgIHRoaXMudmlzaWJsZSA9IGZhbHNlO1xyXG4gIH1cclxufVxyXG4iLCI8cC1zaWRlYmFyIFsodmlzaWJsZSldPVwidmlzaWJsZVwiIHBvc2l0aW9uPVwicmlnaHRcIiBbbW9kYWxdPVwidHJ1ZVwiIFtibG9ja1Njcm9sbF09XCJ0cnVlXCIgW2Rpc21pc3NpYmxlXT1cImNsb3NlT25PdmVybGF5XCIgW3N0eWxlQ2xhc3NdPVwic3R5bGVDbGFzc1wiIGNsYXNzPVwid2FwcC1zaWRlYmFyXCI+XHJcbiAgICA8bmctdGVtcGxhdGUgcFRlbXBsYXRlPVwiaGVhZGVyXCI+PHNwYW4gY2xhc3M9XCJzdWJ0aXRsZTEgbS0wXCI+e3toZWFkZXJUaXRsZX19PC9zcGFuPjwvbmctdGVtcGxhdGU+XHJcbiAgICBcclxuICAgIDxuZy10ZW1wbGF0ZSBwVGVtcGxhdGU9XCJjb250ZW50XCI+XHJcbiAgICAgICAgPGRpdiBbbmdDbGFzc109XCJ7J3ctc2lkZWJhci1jb250ZW50IGdyaWQnIDogYWN0aXZlR3JpZH1cIj5cclxuICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9uZy10ZW1wbGF0ZT5cclxuXHJcbiAgICA8bmctdGVtcGxhdGUgcFRlbXBsYXRlPVwiZm9vdGVyXCI+PC9uZy10ZW1wbGF0ZT5cclxuPC9wLXNpZGViYXI+XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidy1zaWRlYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3dhcHAtY29tcG9uZW50cy9zcmMvbGliL3NpZGViYXIvdy1zaWRlYmFyL3ctc2lkZWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93YXBwLWNvbXBvbmVudHMvc3JjL2xpYi9zaWRlYmFyL3ctc2lkZWJhci93LXNpZGViYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMvRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0seUJBQXlCLENBQUM7Ozs7OztBQU9uRCxNQUFNLE9BQU8saUJBQWlCO0lBd0I1QjtRQXRCcUIsZUFBVSxHQUFZLEtBQUssQ0FBQztRQUN4QixtQkFBYyxHQUFZLEtBQUssQ0FBQztRQUNwQyxlQUFVLEdBQVcsc0JBQXNCLENBQUM7UUFHakUsYUFBUSxHQUFvQixRQUFRLENBQUM7UUFFM0Isa0JBQWEsR0FBMEIsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUVyRSxhQUFRLEdBQVksS0FBSyxDQUFDO0lBYXBCLENBQUM7SUFaZixJQUNJLE9BQU87UUFDVCxPQUFPLElBQUksQ0FBQyxRQUFRLENBQUM7SUFDdkIsQ0FBQztJQUVELElBQUksT0FBTyxDQUFDLEtBQWM7UUFDeEIsSUFBSSxLQUFLLEtBQUssSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUMzQixJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztZQUN0QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7U0FDeEM7SUFDSCxDQUFDO0lBSUQsUUFBUSxLQUFVLENBQUM7SUFFbkIsT0FBTztRQUNMLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBRyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsRUFBQztZQUM5QixPQUFPLFFBQVEsQ0FBQyxLQUFLLENBQUM7U0FDdkI7YUFBSyxJQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFDO1lBQzdCLE9BQU8sUUFBUSxDQUFDLE9BQU8sQ0FBQztTQUN6QjthQUFLO1lBQ0osT0FBTyxRQUFRLENBQUMsS0FBSyxDQUFDO1NBQ3ZCO0lBQ0gsQ0FBQztJQUVPLEtBQUssQ0FBQyxHQUFXO1FBQ3ZCLE1BQU0sU0FBUyxHQUFHLCtCQUErQixDQUFDO1FBQ2xELE9BQU8sU0FBUyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUM3QixDQUFDOzs4R0E3Q1UsaUJBQWlCO2tHQUFqQixpQkFBaUIsOFBDUjlCLDIvQkFpQkE7MkZEVGEsaUJBQWlCO2tCQUw3QixTQUFTOytCQUNFLFdBQVc7MEVBS0MsV0FBVztzQkFBaEMsS0FBSzt1QkFBQyxhQUFhO2dCQUNDLFVBQVU7c0JBQTlCLEtBQUs7dUJBQUMsWUFBWTtnQkFDTSxjQUFjO3NCQUF0QyxLQUFLO3VCQUFDLGdCQUFnQjtnQkFDRixVQUFVO3NCQUE5QixLQUFLO3VCQUFDLFlBQVk7Z0JBQ0osSUFBSTtzQkFBbEIsS0FBSzt1QkFBQyxNQUFNO2dCQUlILGFBQWE7c0JBQXRCLE1BQU07Z0JBSUgsT0FBTztzQkFEVixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJY29uVHlwZSB9IGZyb20gJy4uLy4uL3NoYXJlZC9lbnVtcy9lbnVtJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAndy1zaWRlYmFyJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdy1zaWRlYmFyLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi93LXNpZGViYXIuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgV1NpZGViYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCgnaGVhZGVyVGl0bGUnKSBoZWFkZXJUaXRsZSE6IHN0cmluZztcclxuICBASW5wdXQoJ2FjdGl2ZUdyaWQnKSBhY3RpdmVHcmlkOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCdjbG9zZU9uT3ZlcmxheScpIGNsb3NlT25PdmVybGF5OiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCdzdHlsZUNsYXNzJykgc3R5bGVDbGFzczogc3RyaW5nID0gXCJ3LWZ1bGwgbWQ6dy02IGxnOnctNVwiO1xyXG4gIEBJbnB1dCgnaWNvbicpIGljb24hOiBzdHJpbmcgO1xyXG5cclxuICBpY29uVHlwZTogdHlwZW9mIEljb25UeXBlID0gSWNvblR5cGU7XHJcbiAgXHJcbiAgQE91dHB1dCgpIHZpc2libGVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcclxuXHJcbiAgcHJpdmF0ZSBfdmlzaWJsZTogYm9vbGVhbiA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpXHJcbiAgZ2V0IHZpc2libGUoKTogYm9vbGVhbiB7XHJcbiAgICByZXR1cm4gdGhpcy5fdmlzaWJsZTtcclxuICB9XHJcblxyXG4gIHNldCB2aXNpYmxlKHZhbHVlOiBib29sZWFuKSB7XHJcbiAgICBpZiAodmFsdWUgIT09IHRoaXMuX3Zpc2libGUpIHtcclxuICAgICAgdGhpcy5fdmlzaWJsZSA9IHZhbHVlO1xyXG4gICAgICB0aGlzLnZpc2libGVDaGFuZ2UuZW1pdCh0aGlzLl92aXNpYmxlKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGNvbnN0cnVjdG9yKCl7fVxyXG4gIFxyXG4gIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgb25DbG9zZSgpe1xyXG4gICAgdGhpcy52aXNpYmxlID0gZmFsc2U7XHJcbiAgfVxyXG5cclxuICBnZXRJY29uVHlwZSgpe1xyXG4gICAgaWYodGhpcy5pY29uLmluY2x1ZGVzKFwicGkgcGktXCIpKXtcclxuICAgICAgcmV0dXJuIEljb25UeXBlLnBJY29uO1xyXG4gICAgfWVsc2UgaWYodGhpcy5pc1VSTCh0aGlzLmljb24pKXtcclxuICAgICAgcmV0dXJuIEljb25UeXBlLnVybEljb247XHJcbiAgICB9ZWxzZSB7XHJcbiAgICAgIHJldHVybiBJY29uVHlwZS53SWNvbjtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgaXNVUkwodXJsOiBzdHJpbmcpIHtcclxuICAgIGNvbnN0IHBhdHJvblVSTCA9IC9eKGZ0cHxodHRwfGh0dHBzKTpcXC9cXC9bXiBcIl0rJC87XHJcbiAgICByZXR1cm4gcGF0cm9uVVJMLnRlc3QodXJsKTtcclxuICB9XHJcbn1cclxuIiwiPHAtc2lkZWJhciBbKHZpc2libGUpXT1cInZpc2libGVcIiBwb3NpdGlvbj1cInJpZ2h0XCIgW21vZGFsXT1cInRydWVcIiBbYmxvY2tTY3JvbGxdPVwidHJ1ZVwiIFtkaXNtaXNzaWJsZV09XCJjbG9zZU9uT3ZlcmxheVwiIFtzdHlsZUNsYXNzXT1cInN0eWxlQ2xhc3NcIiBjbGFzcz1cIndhcHAtc2lkZWJhclwiPlxyXG4gICAgPG5nLXRlbXBsYXRlIHBUZW1wbGF0ZT1cImhlYWRlclwiPlxyXG4gICAgICAgIDxzcGFuICpuZ0lmPVwiaWNvbiAmJiBnZXRJY29uVHlwZSgpID09IGljb25UeXBlLnBJY29uXCIgY2xhc3M9XCJ3LXNpZGViYXItaWNvbiBpY29uLWxhcmdlLXNpemVcIiBbbmdDbGFzc109XCJpY29uXCI+PC9zcGFuPlxyXG4gICAgICAgIDxpbWcgKm5nSWY9XCJpY29uICYmIGdldEljb25UeXBlKCkgPT0gaWNvblR5cGUudXJsSWNvblwiIGNsYXNzPVwidy1zaWRlYmFyLWljb25cIiBbc3JjXT1cImljb25cIiB3aWR0aD1cIjI0XCIgaGVpZ2h0PVwiMjRcIj5cclxuICAgICAgICA8dy1pY29ucyAqbmdJZj1cImljb24gJiYgZ2V0SWNvblR5cGUoKSA9PSBpY29uVHlwZS53SWNvblwiIGNsYXNzPVwidy1zaWRlYmFyLWljb25cIiBbbmFtZV09XCJpY29uXCIgW3dpZHRoXT1cIjI0XCIgW2hlaWdodF09XCIyNFwiPjwvdy1pY29ucz5cclxuXHJcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJzdWJ0aXRsZTEgbS0wXCI+e3toZWFkZXJUaXRsZX19PC9zcGFuPlxyXG4gICAgPC9uZy10ZW1wbGF0ZT5cclxuICAgIFxyXG4gICAgPG5nLXRlbXBsYXRlIHBUZW1wbGF0ZT1cImNvbnRlbnRcIj5cclxuICAgICAgICA8ZGl2IFtuZ0NsYXNzXT1cInsndy1zaWRlYmFyLWNvbnRlbnQgZ3JpZCcgOiBhY3RpdmVHcmlkfVwiPlxyXG4gICAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L25nLXRlbXBsYXRlPlxyXG5cclxuICAgIDxuZy10ZW1wbGF0ZSBwVGVtcGxhdGU9XCJmb290ZXJcIj48L25nLXRlbXBsYXRlPlxyXG48L3Atc2lkZWJhcj5cclxuIl19

package/esm2020/lib/view/w-view-text/w-view-text.component.mjs CHANGED Viewed

@@ -7,10 +7,10 @@ export class WViewTextComponent {
     }
 }
 WViewTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WViewTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WViewTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WViewTextComponent, selector: "w-view-text", inputs: { label: "label", value: "value", layout: "layout" }, ngImport: i0, template: "<div *ngIf=\"layout == 'horizontal'; else vertical\" class=\"w-view-text-content grid flex align-content-center\">\n    <div class=\"col-4 body\">\n        <p class=\"w-view-text-label-color\"> {{label}} </p>\n    </div>\n    <div class=\"col-8 body\">\n        <p> {{value}} </p>\n    </div>\n</div>\n<ng-template #vertical>\n    <div class=\"p-fluid field\">\n        <div class=\"w-view-text-label\">\n            <p class=\"caption w-view-text-label-color\"> {{label}} </p>\n        </div>\n        <div class=\"w-view-text-value\">\n            <p class=\"body\"> {{value}} </p>\n        </div>\n    </div>\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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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-view-text-label{height:36px;padding:4px 0}.w-view-text-label-color{color:#bdc1c6}.w-view-text-value{height:40px;padding:4px 0}.w-view-text-content{height:40px}:host ::ng-deep .w-view-text-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-view-text-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-view-text-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+WViewTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WViewTextComponent, selector: "w-view-text", inputs: { label: "label", value: "value", layout: "layout" }, ngImport: i0, template: "<div *ngIf=\"layout == 'horizontal'; else vertical\" class=\"w-view-text-content grid flex align-content-center\">\r\n    <div class=\"col-4 body\">\r\n        <p class=\"w-view-text-label-color\"> {{label}} </p>\r\n    </div>\r\n    <div class=\"col-8 body\">\r\n        <p> {{value}} </p>\r\n    </div>\r\n</div>\r\n<ng-template #vertical>\r\n    <div class=\"p-fluid field\">\r\n        <div class=\"w-view-text-label\">\r\n            <p class=\"caption w-view-text-label-color\"> {{label}} </p>\r\n        </div>\r\n        <div class=\"w-view-text-value\">\r\n            <p class=\"body\"> {{value}} </p>\r\n        </div>\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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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-view-text-label{height:36px;padding:4px 0}.w-view-text-label-color{color:#bdc1c6}.w-view-text-value{height:40px;padding:4px 0}.w-view-text-content{height:40px}:host ::ng-deep .w-view-text-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-view-text-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-view-text-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WViewTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-view-text', template: "<div *ngIf=\"layout == 'horizontal'; else vertical\" class=\"w-view-text-content grid flex align-content-center\">\n    <div class=\"col-4 body\">\n        <p class=\"w-view-text-label-color\"> {{label}} </p>\n    </div>\n    <div class=\"col-8 body\">\n        <p> {{value}} </p>\n    </div>\n</div>\n<ng-template #vertical>\n    <div class=\"p-fluid field\">\n        <div class=\"w-view-text-label\">\n            <p class=\"caption w-view-text-label-color\"> {{label}} </p>\n        </div>\n        <div class=\"w-view-text-value\">\n            <p class=\"body\"> {{value}} </p>\n        </div>\n    </div>\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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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-view-text-label{height:36px;padding:4px 0}.w-view-text-label-color{color:#bdc1c6}.w-view-text-value{height:40px;padding:4px 0}.w-view-text-content{height:40px}:host ::ng-deep .w-view-text-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-view-text-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-view-text-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}\n"] }]
+            args: [{ selector: 'w-view-text', template: "<div *ngIf=\"layout == 'horizontal'; else vertical\" class=\"w-view-text-content grid flex align-content-center\">\r\n    <div class=\"col-4 body\">\r\n        <p class=\"w-view-text-label-color\"> {{label}} </p>\r\n    </div>\r\n    <div class=\"col-8 body\">\r\n        <p> {{value}} </p>\r\n    </div>\r\n</div>\r\n<ng-template #vertical>\r\n    <div class=\"p-fluid field\">\r\n        <div class=\"w-view-text-label\">\r\n            <p class=\"caption w-view-text-label-color\"> {{label}} </p>\r\n        </div>\r\n        <div class=\"w-view-text-value\">\r\n            <p class=\"body\"> {{value}} </p>\r\n        </div>\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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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-view-text-label{height:36px;padding:4px 0}.w-view-text-label-color{color:#bdc1c6}.w-view-text-value{height:40px;padding:4px 0}.w-view-text-content{height:40px}:host ::ng-deep .w-view-text-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-view-text-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-view-text-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']
@@ -21,4 +21,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input,
                 args: ['layout']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidy12aWV3LXRleHQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2FwcC1jb21wb25lbnRzL3NyYy9saWIvdmlldy93LXZpZXctdGV4dC93LXZpZXctdGV4dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93YXBwLWNvbXBvbmVudHMvc3JjL2xpYi92aWV3L3ctdmlldy10ZXh0L3ctdmlldy10ZXh0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFPakQsTUFBTSxPQUFPLGtCQUFrQjtJQUwvQjtRQVFtQixXQUFNLEdBQVcsWUFBWSxDQUFDO0tBQ2hEOzsrR0FKWSxrQkFBa0I7bUdBQWxCLGtCQUFrQixpSENQL0IscW5CQWlCYzsyRkRWRCxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsYUFBYTs4QkFLUCxLQUFLO3NCQUFwQixLQUFLO3VCQUFDLE9BQU87Z0JBQ0UsS0FBSztzQkFBcEIsS0FBSzt1QkFBQyxPQUFPO2dCQUNHLE1BQU07c0JBQXRCLEtBQUs7dUJBQUMsUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndy12aWV3LXRleHQnLFxuICB0ZW1wbGF0ZVVybDogJy4vdy12aWV3LXRleHQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi93LXZpZXctdGV4dC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFdWaWV3VGV4dENvbXBvbmVudCB7XG4gIEBJbnB1dCgnbGFiZWwnKSBsYWJlbCE6IHN0cmluZztcbiAgQElucHV0KCd2YWx1ZScpIHZhbHVlITogYW55O1xuICBASW5wdXQoJ2xheW91dCcpIGxheW91dDogc3RyaW5nID0gJ2hvcml6b250YWwnO1xufVxuIiwiPGRpdiAqbmdJZj1cImxheW91dCA9PSAnaG9yaXpvbnRhbCc7IGVsc2UgdmVydGljYWxcIiBjbGFzcz1cInctdmlldy10ZXh0LWNvbnRlbnQgZ3JpZCBmbGV4IGFsaWduLWNvbnRlbnQtY2VudGVyXCI+XG4gICAgPGRpdiBjbGFzcz1cImNvbC00IGJvZHlcIj5cbiAgICAgICAgPHAgY2xhc3M9XCJ3LXZpZXctdGV4dC1sYWJlbC1jb2xvclwiPiB7e2xhYmVsfX0gPC9wPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJjb2wtOCBib2R5XCI+XG4gICAgICAgIDxwPiB7e3ZhbHVlfX0gPC9wPlxuICAgIDwvZGl2PlxuPC9kaXY+XG48bmctdGVtcGxhdGUgI3ZlcnRpY2FsPlxuICAgIDxkaXYgY2xhc3M9XCJwLWZsdWlkIGZpZWxkXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ3LXZpZXctdGV4dC1sYWJlbFwiPlxuICAgICAgICAgICAgPHAgY2xhc3M9XCJjYXB0aW9uIHctdmlldy10ZXh0LWxhYmVsLWNvbG9yXCI+IHt7bGFiZWx9fSA8L3A+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwidy12aWV3LXRleHQtdmFsdWVcIj5cbiAgICAgICAgICAgIDxwIGNsYXNzPVwiYm9keVwiPiB7e3ZhbHVlfX0gPC9wPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidy12aWV3LXRleHQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvd2FwcC1jb21wb25lbnRzL3NyYy9saWIvdmlldy93LXZpZXctdGV4dC93LXZpZXctdGV4dC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy93YXBwLWNvbXBvbmVudHMvc3JjL2xpYi92aWV3L3ctdmlldy10ZXh0L3ctdmlldy10ZXh0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFPakQsTUFBTSxPQUFPLGtCQUFrQjtJQUwvQjtRQVFtQixXQUFNLEdBQVcsWUFBWSxDQUFDO0tBQ2hEOzsrR0FKWSxrQkFBa0I7bUdBQWxCLGtCQUFrQixpSENQL0IsdXBCQWlCYzsyRkRWRCxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0UsYUFBYTs4QkFLUCxLQUFLO3NCQUFwQixLQUFLO3VCQUFDLE9BQU87Z0JBQ0UsS0FBSztzQkFBcEIsS0FBSzt1QkFBQyxPQUFPO2dCQUNHLE1BQU07c0JBQXRCLEtBQUs7dUJBQUMsUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAndy12aWV3LXRleHQnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi93LXZpZXctdGV4dC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdy12aWV3LXRleHQuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgV1ZpZXdUZXh0Q29tcG9uZW50IHtcclxuICBASW5wdXQoJ2xhYmVsJykgbGFiZWwhOiBzdHJpbmc7XHJcbiAgQElucHV0KCd2YWx1ZScpIHZhbHVlITogYW55O1xyXG4gIEBJbnB1dCgnbGF5b3V0JykgbGF5b3V0OiBzdHJpbmcgPSAnaG9yaXpvbnRhbCc7XHJcbn1cclxuIiwiPGRpdiAqbmdJZj1cImxheW91dCA9PSAnaG9yaXpvbnRhbCc7IGVsc2UgdmVydGljYWxcIiBjbGFzcz1cInctdmlldy10ZXh0LWNvbnRlbnQgZ3JpZCBmbGV4IGFsaWduLWNvbnRlbnQtY2VudGVyXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwiY29sLTQgYm9keVwiPlxyXG4gICAgICAgIDxwIGNsYXNzPVwidy12aWV3LXRleHQtbGFiZWwtY29sb3JcIj4ge3tsYWJlbH19IDwvcD5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cImNvbC04IGJvZHlcIj5cclxuICAgICAgICA8cD4ge3t2YWx1ZX19IDwvcD5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj5cclxuPG5nLXRlbXBsYXRlICN2ZXJ0aWNhbD5cclxuICAgIDxkaXYgY2xhc3M9XCJwLWZsdWlkIGZpZWxkXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInctdmlldy10ZXh0LWxhYmVsXCI+XHJcbiAgICAgICAgICAgIDxwIGNsYXNzPVwiY2FwdGlvbiB3LXZpZXctdGV4dC1sYWJlbC1jb2xvclwiPiB7e2xhYmVsfX0gPC9wPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJ3LXZpZXctdGV4dC12YWx1ZVwiPlxyXG4gICAgICAgICAgICA8cCBjbGFzcz1cImJvZHlcIj4ge3t2YWx1ZX19IDwvcD5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG48L25nLXRlbXBsYXRlPiJdfQ==

package/fesm2015/ngx-wapp-components.mjs CHANGED Viewed

@@ -135,7 +135,13 @@ var ButtonType;
     ButtonType[ButtonType["secondary"] = 1] = "secondary";
     ButtonType[ButtonType["tertiary"] = 2] = "tertiary";
     ButtonType[ButtonType["text"] = 3] = "text";
-})(ButtonType || (ButtonType = {}));
+})(ButtonType || (ButtonType = {}));
+var IconType;
+(function (IconType) {
+    IconType[IconType["pIcon"] = 0] = "pIcon";
+    IconType[IconType["urlIcon"] = 1] = "urlIcon";
+    IconType[IconType["wIcon"] = 2] = "wIcon";
+})(IconType || (IconType = {}));
 class WEditInputTextComponent {
     constructor() {
@@ -3451,7 +3457,8 @@ class WSidebarComponent {
     constructor() {
         this.activeGrid = false;
         this.closeOnOverlay = false;
-        this.styleClass = "w-full md:w-7";
+        this.styleClass = "w-full md:w-6 lg:w-5";
+        this.iconType = IconType;
         this.visibleChange = new EventEmitter();
         this._visible = false;
     }
@@ -3468,12 +3475,27 @@ class WSidebarComponent {
     onClose() {
         this.visible = false;
     }
+    getIconType() {
+        if (this.icon.includes("pi pi-")) {
+            return IconType.pIcon;
+        }
+        else if (this.isURL(this.icon)) {
+            return IconType.urlIcon;
+        }
+        else {
+            return IconType.wIcon;
+        }
+    }
+    isURL(url) {
+        const patronURL = /^(ftp|http|https):\/\/[^ "]+$/;
+        return patronURL.test(url);
+    }
 }
 WSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WSidebarComponent, selector: "w-sidebar", inputs: { headerTitle: "headerTitle", activeGrid: "activeGrid", closeOnOverlay: "closeOnOverlay", styleClass: "styleClass", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" [dismissible]=\"closeOnOverlay\" [styleClass]=\"styleClass\" class=\"wapp-sidebar\">\r\n    <ng-template pTemplate=\"header\"><span class=\"subtitle1 m-0\">{{headerTitle}}</span></ng-template>\r\n    \r\n    <ng-template pTemplate=\"content\">\r\n        <div [ngClass]=\"{'w-sidebar-content grid' : activeGrid}\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>\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{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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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}:host ::ng-deep .wapp-sidebar .p-sidebar-header{padding:40px}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 40px}:host ::ng-deep .p-sidebar-footer{padding:60px!important}:host ::ng-deep .w-sidebar-content .col-1{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-2{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-3{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-4{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-5{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-6{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-7{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-8{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-9{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-10{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-11{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-12{padding:4px 20px}:host ::ng-deep .w-sidebar-content.grid{display:flex;flex-wrap:wrap;margin-right:-20px;margin-left:-20px;margin-top:-4px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$6.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }] });
+WSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WSidebarComponent, selector: "w-sidebar", inputs: { headerTitle: "headerTitle", activeGrid: "activeGrid", closeOnOverlay: "closeOnOverlay", styleClass: "styleClass", icon: "icon", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" [dismissible]=\"closeOnOverlay\" [styleClass]=\"styleClass\" class=\"wapp-sidebar\">\r\n    <ng-template pTemplate=\"header\">\r\n        <span *ngIf=\"icon && getIconType() == iconType.pIcon\" class=\"w-sidebar-icon icon-large-size\" [ngClass]=\"icon\"></span>\r\n        <img *ngIf=\"icon && getIconType() == iconType.urlIcon\" class=\"w-sidebar-icon\" [src]=\"icon\" width=\"24\" height=\"24\">\r\n        <w-icons *ngIf=\"icon && getIconType() == iconType.wIcon\" class=\"w-sidebar-icon\" [name]=\"icon\" [width]=\"24\" [height]=\"24\"></w-icons>\r\n\r\n        <span class=\"subtitle1 m-0\">{{headerTitle}}</span>\r\n    </ng-template>\r\n    \r\n    <ng-template pTemplate=\"content\">\r\n        <div [ngClass]=\"{'w-sidebar-content grid' : activeGrid}\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>\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{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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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}:host ::ng-deep .wapp-sidebar .p-sidebar-header{padding:40px}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 40px}:host ::ng-deep .p-sidebar-footer{padding:60px!important}:host ::ng-deep .w-sidebar-content .col-1{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-2{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-3{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-4{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-5{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-6{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-7{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-8{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-9{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-10{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-11{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-12{padding:4px 20px}:host ::ng-deep .w-sidebar-content.grid{display:flex;flex-wrap:wrap;margin-right:-20px;margin-left:-20px;margin-top:-4px}.w-sidebar-icon{margin-right:12px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$6.Sidebar, selector: "p-sidebar", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: WIconsComponent, selector: "w-icons", inputs: ["name", "width", "height", "color"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-sidebar', template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" [dismissible]=\"closeOnOverlay\" [styleClass]=\"styleClass\" class=\"wapp-sidebar\">\r\n    <ng-template pTemplate=\"header\"><span class=\"subtitle1 m-0\">{{headerTitle}}</span></ng-template>\r\n    \r\n    <ng-template pTemplate=\"content\">\r\n        <div [ngClass]=\"{'w-sidebar-content grid' : activeGrid}\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>\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{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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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}:host ::ng-deep .wapp-sidebar .p-sidebar-header{padding:40px}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 40px}:host ::ng-deep .p-sidebar-footer{padding:60px!important}:host ::ng-deep .w-sidebar-content .col-1{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-2{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-3{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-4{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-5{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-6{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-7{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-8{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-9{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-10{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-11{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-12{padding:4px 20px}:host ::ng-deep .w-sidebar-content.grid{display:flex;flex-wrap:wrap;margin-right:-20px;margin-left:-20px;margin-top:-4px}\n"] }]
+            args: [{ selector: 'w-sidebar', template: "<p-sidebar [(visible)]=\"visible\" position=\"right\" [modal]=\"true\" [blockScroll]=\"true\" [dismissible]=\"closeOnOverlay\" [styleClass]=\"styleClass\" class=\"wapp-sidebar\">\r\n    <ng-template pTemplate=\"header\">\r\n        <span *ngIf=\"icon && getIconType() == iconType.pIcon\" class=\"w-sidebar-icon icon-large-size\" [ngClass]=\"icon\"></span>\r\n        <img *ngIf=\"icon && getIconType() == iconType.urlIcon\" class=\"w-sidebar-icon\" [src]=\"icon\" width=\"24\" height=\"24\">\r\n        <w-icons *ngIf=\"icon && getIconType() == iconType.wIcon\" class=\"w-sidebar-icon\" [name]=\"icon\" [width]=\"24\" [height]=\"24\"></w-icons>\r\n\r\n        <span class=\"subtitle1 m-0\">{{headerTitle}}</span>\r\n    </ng-template>\r\n    \r\n    <ng-template pTemplate=\"content\">\r\n        <div [ngClass]=\"{'w-sidebar-content grid' : activeGrid}\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </ng-template>\r\n\r\n    <ng-template pTemplate=\"footer\"></ng-template>\r\n</p-sidebar>\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{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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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}:host ::ng-deep .wapp-sidebar .p-sidebar-header{padding:40px}:host ::ng-deep .wapp-sidebar .p-sidebar-content{padding:0 40px}:host ::ng-deep .p-sidebar-footer{padding:60px!important}:host ::ng-deep .w-sidebar-content .col-1{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-2{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-3{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-4{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-5{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-6{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-7{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-8{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-9{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-10{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-11{padding:4px 20px}:host ::ng-deep .w-sidebar-content .col-12{padding:4px 20px}:host ::ng-deep .w-sidebar-content.grid{display:flex;flex-wrap:wrap;margin-right:-20px;margin-left:-20px;margin-top:-4px}.w-sidebar-icon{margin-right:12px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { headerTitle: [{
                 type: Input,
                 args: ['headerTitle']
@@ -3486,6 +3508,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
             }], styleClass: [{
                 type: Input,
                 args: ['styleClass']
+            }], icon: [{
+                type: Input,
+                args: ['icon']
             }], visibleChange: [{
                 type: Output
             }], visible: [{
@@ -4524,10 +4549,10 @@ class WViewTextComponent {
     }
 }
 WViewTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WViewTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WViewTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WViewTextComponent, selector: "w-view-text", inputs: { label: "label", value: "value", layout: "layout" }, ngImport: i0, template: "<div *ngIf=\"layout == 'horizontal'; else vertical\" class=\"w-view-text-content grid flex align-content-center\">\n    <div class=\"col-4 body\">\n        <p class=\"w-view-text-label-color\"> {{label}} </p>\n    </div>\n    <div class=\"col-8 body\">\n        <p> {{value}} </p>\n    </div>\n</div>\n<ng-template #vertical>\n    <div class=\"p-fluid field\">\n        <div class=\"w-view-text-label\">\n            <p class=\"caption w-view-text-label-color\"> {{label}} </p>\n        </div>\n        <div class=\"w-view-text-value\">\n            <p class=\"body\"> {{value}} </p>\n        </div>\n    </div>\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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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-view-text-label{height:36px;padding:4px 0}.w-view-text-label-color{color:#bdc1c6}.w-view-text-value{height:40px;padding:4px 0}.w-view-text-content{height:40px}:host ::ng-deep .w-view-text-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-view-text-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-view-text-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+WViewTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: WViewTextComponent, selector: "w-view-text", inputs: { label: "label", value: "value", layout: "layout" }, ngImport: i0, template: "<div *ngIf=\"layout == 'horizontal'; else vertical\" class=\"w-view-text-content grid flex align-content-center\">\r\n    <div class=\"col-4 body\">\r\n        <p class=\"w-view-text-label-color\"> {{label}} </p>\r\n    </div>\r\n    <div class=\"col-8 body\">\r\n        <p> {{value}} </p>\r\n    </div>\r\n</div>\r\n<ng-template #vertical>\r\n    <div class=\"p-fluid field\">\r\n        <div class=\"w-view-text-label\">\r\n            <p class=\"caption w-view-text-label-color\"> {{label}} </p>\r\n        </div>\r\n        <div class=\"w-view-text-value\">\r\n            <p class=\"body\"> {{value}} </p>\r\n        </div>\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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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-view-text-label{height:36px;padding:4px 0}.w-view-text-label-color{color:#bdc1c6}.w-view-text-value{height:40px;padding:4px 0}.w-view-text-content{height:40px}:host ::ng-deep .w-view-text-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-view-text-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-view-text-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: WViewTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'w-view-text', template: "<div *ngIf=\"layout == 'horizontal'; else vertical\" class=\"w-view-text-content grid flex align-content-center\">\n    <div class=\"col-4 body\">\n        <p class=\"w-view-text-label-color\"> {{label}} </p>\n    </div>\n    <div class=\"col-8 body\">\n        <p> {{value}} </p>\n    </div>\n</div>\n<ng-template #vertical>\n    <div class=\"p-fluid field\">\n        <div class=\"w-view-text-label\">\n            <p class=\"caption w-view-text-label-color\"> {{label}} </p>\n        </div>\n        <div class=\"w-view-text-value\">\n            <p class=\"body\"> {{value}} </p>\n        </div>\n    </div>\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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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-view-text-label{height:36px;padding:4px 0}.w-view-text-label-color{color:#bdc1c6}.w-view-text-value{height:40px;padding:4px 0}.w-view-text-content{height:40px}:host ::ng-deep .w-view-text-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-view-text-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-view-text-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}\n"] }]
+            args: [{ selector: 'w-view-text', template: "<div *ngIf=\"layout == 'horizontal'; else vertical\" class=\"w-view-text-content grid flex align-content-center\">\r\n    <div class=\"col-4 body\">\r\n        <p class=\"w-view-text-label-color\"> {{label}} </p>\r\n    </div>\r\n    <div class=\"col-8 body\">\r\n        <p> {{value}} </p>\r\n    </div>\r\n</div>\r\n<ng-template #vertical>\r\n    <div class=\"p-fluid field\">\r\n        <div class=\"w-view-text-label\">\r\n            <p class=\"caption w-view-text-label-color\"> {{label}} </p>\r\n        </div>\r\n        <div class=\"w-view-text-value\">\r\n            <p class=\"body\"> {{value}} </p>\r\n        </div>\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:2px 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:#bdc1c6!important;opacity:unset!important}.input-generic{font-size:16px;line-height:24px;font-weight:600}.input-generic-placeholder-small{padding:8px 12px 12px;color:#bdc1c6!important}.input-generic-valid{border-radius:8px;border:2px solid #B3FFD3}.input-generic-valid-focus{border-radius:8px;border:2px solid #B3FFD3!important;box-shadow:0 0 8px #46ff9b80!important;padding-left:16px}.input-generic-warning{border-radius:8px;border:2px solid #FFECB8!important}.input-generic-warning-focus{border-radius:8px;border:2px solid #FFECB8!important;box-shadow:0 0 8px #ffcd4680!important;padding-left:16px}.input-generic-error-focus{border-radius:8px;border:2px solid #FFBDBD!important;box-shadow:0 0 8px #ff555580!important;padding-left:16px}.input-generic-error{border-radius:8px;border:2px 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-view-text-label{height:36px;padding:4px 0}.w-view-text-label-color{color:#bdc1c6}.w-view-text-value{height:40px;padding:4px 0}.w-view-text-content{height:40px}:host ::ng-deep .w-view-text-content .col-4{padding:4px 20px!important}:host ::ng-deep .w-view-text-content .col-8{padding:4px 20px!important}:host ::ng-deep .w-view-text-content.grid{display:flex;flex-wrap:wrap;margin:-4px -20px!important}\n"] }]
         }], propDecorators: { label: [{
                 type: Input,
                 args: ['label']