npm - @pepperi-addons/ngx-lib - Versions diffs - 0.4.2-beta.31 → 0.4.2-beta.310 - Mend

@pepperi-addons/ngx-lib 0.4.2-beta.31 → 0.4.2-beta.310

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 (408) hide show

package/fesm2020/pepperi-addons-ngx-lib-snack-bar.mjs CHANGED Viewed

@@ -14,21 +14,36 @@ import * as i1$2 from '@pepperi-addons/ngx-lib/icon';
 import { pepIconSystemClose, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
 class PepSnackBarComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.closeClick = new EventEmitter();
         //
     }
+    set snackBarRef(value) {
+        this._snackBarRef = value;
+        this.cdr.detectChanges();
+    }
+    get snackBarRef() {
+        return this._snackBarRef;
+    }
+    set title(value) {
+        this._title = value;
+        this.cdr.detectChanges();
+    }
+    get title() {
+        return this._title;
+    }
     onCloseClicked(event) {
         this.snackBarRef?.dismiss();
         this.closeClick.emit();
     }
 }
-PepSnackBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PepSnackBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSnackBarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 PepSnackBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSnackBarComponent, selector: "pep-snack-bar", inputs: { snackBarRef: "snackBarRef", title: "title" }, outputs: { closeClick: "closeClick" }, ngImport: i0, template: "<div class=\"snack-bar-container\">\n    <div mat-snack-bar-title class=\"snack-bar-header-container pep-border-bottom\">\n        <label class=\"body-md ellipsis\">{{title}}</label>\n        <pep-button sizeType=\"xs\" classNames=\"round-corners\" iconName=\"system_close\" iconPosition=\"end\" (buttonClick)=\"onCloseClicked($event)\"></pep-button>\n    </div>\n    <div mat-snack-bar-content>\n        <ng-content select=\"[pep-snack-bar-content]\"></ng-content>\n    </div>\n</div>", styles: [".snack-bar-container{width:22rem;padding:var(--pep-spacing-lg, 1rem)}.snack-bar-container .snack-bar-header-container{display:flex;flex-direction:row;justify-content:space-between;height:2rem;margin-bottom:var(--pep-spacing-sm, .5rem)}.snack-bar-container .snack-bar-header-container ::ng-deep .round-corners{border-radius:1.5rem}.snack-bar-container .snack-bar-content{max-height:50vh;overflow:auto}\n", ""], dependencies: [{ kind: "component", type: i1.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSnackBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-snack-bar', template: "<div class=\"snack-bar-container\">\n    <div mat-snack-bar-title class=\"snack-bar-header-container pep-border-bottom\">\n        <label class=\"body-md ellipsis\">{{title}}</label>\n        <pep-button sizeType=\"xs\" classNames=\"round-corners\" iconName=\"system_close\" iconPosition=\"end\" (buttonClick)=\"onCloseClicked($event)\"></pep-button>\n    </div>\n    <div mat-snack-bar-content>\n        <ng-content select=\"[pep-snack-bar-content]\"></ng-content>\n    </div>\n</div>", styles: [".snack-bar-container{width:22rem;padding:var(--pep-spacing-lg, 1rem)}.snack-bar-container .snack-bar-header-container{display:flex;flex-direction:row;justify-content:space-between;height:2rem;margin-bottom:var(--pep-spacing-sm, .5rem)}.snack-bar-container .snack-bar-header-container ::ng-deep .round-corners{border-radius:1.5rem}.snack-bar-container .snack-bar-content{max-height:50vh;overflow:auto}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { snackBarRef: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { snackBarRef: [{
                 type: Input
             }], title: [{
                 type: Input

package/fesm2020/pepperi-addons-ngx-lib-snack-bar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pepperi-addons-ngx-lib-snack-bar.mjs","sources":["../../../projects/ngx-lib/snack-bar/snack-bar.component.ts","../../../projects/ngx-lib/snack-bar/snack-bar.component.html","../../../projects/ngx-lib/snack-bar/snack-bar.model.ts","../../../projects/ngx-lib/snack-bar/default-snack-bar.component.ts","../../../projects/ngx-lib/snack-bar/default-snack-bar.component.html","../../../projects/ngx-lib/snack-bar/snack-bar.service.ts","../../../projects/ngx-lib/snack-bar/snack-bar.module.ts","../../../projects/ngx-lib/snack-bar/public-api.ts","../../../projects/ngx-lib/snack-bar/pepperi-addons-ngx-lib-snack-bar.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { MatSnackBarRef } from '@angular/material/snack-bar';\n\n@Component({\n selector: 'pep-snack-bar',\n styleUrls: ['./snack-bar.component.scss', './snack-bar.component.theme.scss'],\n templateUrl: './snack-bar.component.html',\n})\nexport class PepSnackBarComponent {\n @Input() snackBarRef: MatSnackBarRef<any>;\n @Input() title: string;\n\n @Output()\n closeClick: EventEmitter<void> = new EventEmitter<void>();\n \n constructor() {\n //\n }\n\n onCloseClicked(event: any): void {\n this.snackBarRef?.dismiss();\n this.closeClick.emit();\n }\n}\n","<div class=\"snack-bar-container\">\n <div mat-snack-bar-title class=\"snack-bar-header-container pep-border-bottom\">\n <label class=\"body-md ellipsis\">{{title}}</label>\n <pep-button sizeType=\"xs\" classNames=\"round-corners\" iconName=\"system_close\" iconPosition=\"end\" (buttonClick)=\"onCloseClicked($event)\"></pep-button>\n </div>\n <div mat-snack-bar-content>\n <ng-content select=\"[pep-snack-bar-content]\"></ng-content>\n </div>\n</div>","export class PepSnackBarData {\n title: string;\n content: any;\n\n constructor(options: {\n title?: string;\n content?: any;\n }) {\n this.title = options.title \|\| '';\n this.content = options.content \|\| '';\n }\n}\n","import { Component, EventEmitter, Inject, Output, ViewEncapsulation } from '@angular/core';\nimport { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';\nimport { PepSnackBarData } from './snack-bar.model';\n\n@Component({\n templateUrl: './default-snack-bar.component.html',\n styleUrls: ['./default-snack-bar.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class PepDefaultSnackBarComponent {\n @Output()\n closeClick: EventEmitter<void> = new EventEmitter<void>();\n \n constructor(\n @Inject(MAT_SNACK_BAR_DATA) public data: PepSnackBarData,\n public snackBarRef: MatSnackBarRef<PepDefaultSnackBarComponent>\n ) {}\n\n onCloseClicked(event): void {\n this.closeClick.emit();\n }\n\n}\n","<pep-snack-bar [snackBarRef]=\"snackBarRef\" [title]=\"data?.title\" (closeClick)=\"onCloseClicked($event)\">\n <div pep-snack-bar-content [innerHtml]=\"data?.content \| pepSafeHtml\"></div>\n</pep-snack-bar>","import { EmbeddedViewRef, Injectable, TemplateRef } from '@angular/core';\nimport { PepLayoutService } from '@pepperi-addons/ngx-lib';\nimport { ComponentType } from '@angular/cdk/portal';\nimport { PepDefaultSnackBarComponent } from './default-snack-bar.component';\nimport { MatSnackBar, MatSnackBarConfig, MatSnackBarHorizontalPosition, MatSnackBarRef, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';\nimport { PepSnackBarData } from './snack-bar.model';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class PepSnackBarService {\n constructor(\n private snackBar: MatSnackBar,\n private layoutService: PepLayoutService\n ) { }\n\n getSnackBarConfig(\n options: {\n announcementMessage?: string; \n duration?: number;\n panelClass?: string;\n horizontalPosition?: MatSnackBarHorizontalPosition;\n verticalPosition?: MatSnackBarVerticalPosition \n } = {}\n ): MatSnackBarConfig {\n const snackBarConfig = new MatSnackBarConfig();\n\n snackBarConfig.announcementMessage = options.announcementMessage;\n snackBarConfig.direction = this.layoutService.isRtl() ? 'rtl' : 'ltr';\n \n if (options.duration >= 0) {\n snackBarConfig.duration = options.duration;\n }\n\n snackBarConfig.panelClass = ['pep-snack-bar'];\n if (options.panelClass) {\n snackBarConfig.panelClass.push(options.panelClass);\n }\n\n snackBarConfig.horizontalPosition = options.horizontalPosition \|\| 'end';\n snackBarConfig.verticalPosition = options.verticalPosition \|\| 'bottom'\n\n return snackBarConfig;\n }\n\n openDefaultSnackBar(\n data: PepSnackBarData,\n config: MatSnackBarConfig = null\n ): MatSnackBarRef<PepDefaultSnackBarComponent> {\n if (!config) {\n config = this.getSnackBarConfig();\n }\n\n config.data = data;\n const snackBarRef = this.snackBar.openFromComponent(PepDefaultSnackBarComponent, config);\n return snackBarRef;\n }\n\n openSnackBarFromComponent<T>(\n component: ComponentType<T>,\n data: any = {},\n config: MatSnackBarConfig = null\n ): MatSnackBarRef<T> {\n if (!config) {\n config = this.getSnackBarConfig();\n }\n\n config.data = data;\n const snackBarRef = this.snackBar.openFromComponent(component, config);\n return snackBarRef;\n }\n\n openSnackBarFromTemplate<T>(\n template: TemplateRef<any>,\n data: any = {},\n config: MatSnackBarConfig = null\n ): MatSnackBarRef<EmbeddedViewRef<any>> {\n if (!config) {\n config = this.getSnackBarConfig();\n }\n\n config.data = data;\n const snackBarRef = this.snackBar.openFromTemplate(template, config);\n return snackBarRef;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSnackBarModule } from '@angular/material/snack-bar';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepDefaultSnackBarComponent } from './default-snack-bar.component';\nimport { PepSnackBarComponent } from './snack-bar.component';\nimport { PepSnackBarService } from './snack-bar.service';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatButtonModule,\n MatIconModule,\n MatSnackBarModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n ],\n exports: [PepSnackBarComponent],\n declarations: [PepDefaultSnackBarComponent, PepSnackBarComponent],\n entryComponents: [PepDefaultSnackBarComponent],\n providers: [PepSnackBarService]\n})\nexport class PepSnackBarModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemClose]);\n }\n}\n","/\n Public API Surface of ngx-lib/snack-bar\n /\nexport from './snack-bar.module';\nexport * from './snack-bar.model';\nexport * from './snack-bar.component';\nexport * from './snack-bar.service';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i1","i2.PepSnackBarComponent","i3"],"mappings":";;;;;;;;;;;;;;;MAQa,oBAAoB,CAAA;AAO7B,IAAA,WAAA,GAAA;AAFA,QAAA,IAAA,CAAA,UAAU,GAAuB,IAAI,YAAY,EAAQ,CAAC;;KAIzD;AAED,IAAA,cAAc,CAAC,KAAU,EAAA;AACrB,QAAA,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,CAAC;AAC5B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KAC1B;;iHAdQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,oBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,oJCRjC,ueAQM,EAAA,MAAA,EAAA,CAAA,oZAAA,EAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,OAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,UAAA,EAAA,cAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,aAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDAO,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBALhC,SAAS;+BACI,eAAe,EAAA,QAAA,EAAA,ueAAA,EAAA,MAAA,EAAA,CAAA,oZAAA,CAAA,EAAA,CAAA;0EAKhB,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBAGN,UAAU,EAAA,CAAA;sBADT,MAAM;;;MEZE,eAAe,CAAA;AAIxB,IAAA,WAAA,CAAY,OAGX,EAAA;QACG,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;QACjC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC;KACxC;AACJ;;MCFY,2BAA2B,CAAA;IAIpC,WACuC,CAAA,IAAqB,EACjD,WAAwD,EAAA;QAD5B,IAAI,CAAA,IAAA,GAAJ,IAAI,CAAiB;QACjD,IAAW,CAAA,WAAA,GAAX,WAAW,CAA6C;AAJnE,QAAA,IAAA,CAAA,UAAU,GAAuB,IAAI,YAAY,EAAQ,CAAC;KAKtD;AAEJ,IAAA,cAAc,CAAC,KAAK,EAAA;AAChB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KAC1B;;AAXQ,2BAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,2BAA2B,kBAKxB,kBAAkB,EAAA,EAAA,EAAA,KAAA,EAAAA,IAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AALrB,2BAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,2BAA2B,2FCTxC,oNAEgB,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,oBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,OAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,eAAA,EAAA,IAAA,EAAA,aAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;2FDOH,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBALvC,SAAS;AAGS,YAAA,IAAA,EAAA,CAAA,EAAA,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,oNAAA,EAAA,CAAA;;0BAOhC,MAAM;2BAAC,kBAAkB,CAAA;2EAH9B,UAAU,EAAA,CAAA;sBADT,MAAM;;;MEAE,kBAAkB,CAAA;IAC3B,WACY,CAAA,QAAqB,EACrB,aAA+B,EAAA;QAD/B,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAa;QACrB,IAAa,CAAA,aAAA,GAAb,aAAa,CAAkB;KACtC;IAEL,iBAAiB,CACb,UAMI,EAAE,EAAA;AAEN,QAAA,MAAM,cAAc,GAAG,IAAI,iBAAiB,EAAE,CAAC;AAE/C,QAAA,cAAc,CAAC,mBAAmB,GAAG,OAAO,CAAC,mBAAmB,CAAC;AACjE,QAAA,cAAc,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,KAAK,CAAC;AAEtE,QAAA,IAAI,OAAO,CAAC,QAAQ,IAAI,CAAC,EAAE;AACvB,YAAA,cAAc,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;AAC9C,SAAA;AAED,QAAA,cAAc,CAAC,UAAU,GAAG,CAAC,eAAe,CAAC,CAAC;QAC9C,IAAI,OAAO,CAAC,UAAU,EAAE;YACpB,cAAc,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AACtD,SAAA;QAED,cAAc,CAAC,kBAAkB,GAAG,OAAO,CAAC,kBAAkB,IAAI,KAAK,CAAC;QACxE,cAAc,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,IAAI,QAAQ,CAAA;AAEtE,QAAA,OAAO,cAAc,CAAC;KACzB;AAED,IAAA,mBAAmB,CACf,IAAqB,EACrB,MAAA,GAA4B,IAAI,EAAA;QAEhC,IAAI,CAAC,MAAM,EAAE;AACT,YAAA,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;AACrC,SAAA;AAED,QAAA,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;AACnB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,2BAA2B,EAAE,MAAM,CAAC,CAAC;AACzF,QAAA,OAAO,WAAW,CAAC;KACtB;AAED,IAAA,yBAAyB,CACrB,SAA2B,EAC3B,OAAY,EAAE,EACd,SAA4B,IAAI,EAAA;QAEhC,IAAI,CAAC,MAAM,EAAE;AACT,YAAA,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;AACrC,SAAA;AAED,QAAA,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;AACnB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,iBAAiB,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AACvE,QAAA,OAAO,WAAW,CAAC;KACtB;AAED,IAAA,wBAAwB,CACpB,QAA0B,EAC1B,OAAY,EAAE,EACd,SAA4B,IAAI,EAAA;QAEhC,IAAI,CAAC,MAAM,EAAE;AACT,YAAA,MAAM,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;AACrC,SAAA;AAED,QAAA,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;AACnB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;AACrE,QAAA,OAAO,WAAW,CAAC;KACtB;;+GA1EQ,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAF,IAAA,CAAA,WAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAlB,kBAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,cAFf,MAAM,EAAA,CAAA,CAAA;2FAET,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAH9B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,UAAU,EAAE,MAAM;AACrB,iBAAA,CAAA;;;MC6BY,iBAAiB,CAAA;AAC1B,IAAA,WAAA,CAAoB,eAAgC,EAAA;QAAhC,IAAe,CAAA,eAAA,GAAf,eAAe,CAAiB;QAChD,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC;KAC5D;;8GAHQ,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,IAAA,CAAA,eAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAjB,iBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,EAJX,YAAA,EAAA,CAAA,2BAA2B,EAAE,oBAAoB,aAZ5D,YAAY;;QAEZ,eAAe;QACf,eAAe;QACf,aAAa;QACb,iBAAiB;;QAEjB,eAAe;QACf,eAAe;AACf,QAAA,aAAa,aAEP,oBAAoB,CAAA,EAAA,CAAA,CAAA;AAKrB,iBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,EAFf,SAAA,EAAA,CAAC,kBAAkB,CAAC,YAd3B,YAAY;;QAEZ,eAAe;QACf,eAAe;QACf,aAAa;QACb,iBAAiB;;QAEjB,eAAe;QACf,eAAe;QACf,aAAa,CAAA,EAAA,CAAA,CAAA;2FAOR,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAlB7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL,YAAY;;wBAEZ,eAAe;wBACf,eAAe;wBACf,aAAa;wBACb,iBAAiB;;wBAEjB,eAAe;wBACf,eAAe;wBACf,aAAa;AAChB,qBAAA;oBACD,OAAO,EAAE,CAAC,oBAAoB,CAAC;AAC/B,oBAAA,YAAY,EAAE,CAAC,2BAA2B,EAAE,oBAAoB,CAAC;oBACjE,eAAe,EAAE,CAAC,2BAA2B,CAAC;oBAC9C,SAAS,EAAE,CAAC,kBAAkB,CAAC;AAClC,iBAAA,CAAA;;;ACrCD;;AAEG;;ACFH;;AAEG;;;;"}
1	+ {"version":3,"file":"pepperi-addons-ngx-lib-snack-bar.mjs","sources":["../../../projects/ngx-lib/snack-bar/snack-bar.component.ts","../../../projects/ngx-lib/snack-bar/snack-bar.component.html","../../../projects/ngx-lib/snack-bar/snack-bar.model.ts","../../../projects/ngx-lib/snack-bar/default-snack-bar.component.ts","../../../projects/ngx-lib/snack-bar/default-snack-bar.component.html","../../../projects/ngx-lib/snack-bar/snack-bar.service.ts","../../../projects/ngx-lib/snack-bar/snack-bar.module.ts","../../../projects/ngx-lib/snack-bar/public-api.ts","../../../projects/ngx-lib/snack-bar/pepperi-addons-ngx-lib-snack-bar.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output, ChangeDetectorRef } from '@angular/core';\nimport { MatSnackBarRef } from '@angular/material/snack-bar';\n\n@Component({\n selector: 'pep-snack-bar',\n styleUrls: ['./snack-bar.component.scss', './snack-bar.component.theme.scss'],\n templateUrl: './snack-bar.component.html',\n})\nexport class PepSnackBarComponent {\n private _snackBarRef: MatSnackBarRef<any>;\n @Input()\n set snackBarRef(value: MatSnackBarRef<any>) {\n this._snackBarRef = value;\n this.cdr.detectChanges();\n }\n get snackBarRef(): MatSnackBarRef<any> {\n return this._snackBarRef;\n }\n\n private _title: string;\n @Input()\n set title(value: string) {\n this._title = value;\n this.cdr.detectChanges();\n }\n get title(): string {\n return this._title;\n }\n\n @Output()\n closeClick: EventEmitter<void> = new EventEmitter<void>();\n \n constructor(private cdr: ChangeDetectorRef) {\n //\n }\n\n onCloseClicked(event: any): void {\n this.snackBarRef?.dismiss();\n this.closeClick.emit();\n }\n}\n","<div class=\"snack-bar-container\">\n <div mat-snack-bar-title class=\"snack-bar-header-container pep-border-bottom\">\n <label class=\"body-md ellipsis\">{{title}}</label>\n <pep-button sizeType=\"xs\" classNames=\"round-corners\" iconName=\"system_close\" iconPosition=\"end\" (buttonClick)=\"onCloseClicked($event)\"></pep-button>\n </div>\n <div mat-snack-bar-content>\n <ng-content select=\"[pep-snack-bar-content]\"></ng-content>\n </div>\n</div>","export class PepSnackBarData {\n title: string;\n content: any;\n\n constructor(options: {\n title?: string;\n content?: any;\n }) {\n this.title = options.title \|\| '';\n this.content = options.content \|\| '';\n }\n}\n","import { Component, EventEmitter, Inject, Output, ViewEncapsulation } from '@angular/core';\nimport { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';\nimport { PepSnackBarData } from './snack-bar.model';\n\n@Component({\n templateUrl: './default-snack-bar.component.html',\n styleUrls: ['./default-snack-bar.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class PepDefaultSnackBarComponent {\n @Output()\n closeClick: EventEmitter<void> = new EventEmitter<void>();\n \n constructor(\n @Inject(MAT_SNACK_BAR_DATA) public data: PepSnackBarData,\n public snackBarRef: MatSnackBarRef<PepDefaultSnackBarComponent>\n ) {}\n\n onCloseClicked(event): void {\n this.closeClick.emit();\n }\n\n}\n","<pep-snack-bar [snackBarRef]=\"snackBarRef\" [title]=\"data?.title\" (closeClick)=\"onCloseClicked($event)\">\n <div pep-snack-bar-content [innerHtml]=\"data?.content \| pepSafeHtml\"></div>\n</pep-snack-bar>","import { EmbeddedViewRef, Injectable, TemplateRef } from '@angular/core';\nimport { PepLayoutService } from '@pepperi-addons/ngx-lib';\nimport { ComponentType } from '@angular/cdk/portal';\nimport { PepDefaultSnackBarComponent } from './default-snack-bar.component';\nimport { MatSnackBar, MatSnackBarConfig, MatSnackBarHorizontalPosition, MatSnackBarRef, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';\nimport { PepSnackBarData } from './snack-bar.model';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class PepSnackBarService {\n constructor(\n private snackBar: MatSnackBar,\n private layoutService: PepLayoutService\n ) { }\n\n getSnackBarConfig(\n options: {\n announcementMessage?: string; \n duration?: number;\n panelClass?: string;\n horizontalPosition?: MatSnackBarHorizontalPosition;\n verticalPosition?: MatSnackBarVerticalPosition \n } = {}\n ): MatSnackBarConfig {\n const snackBarConfig = new MatSnackBarConfig();\n\n snackBarConfig.announcementMessage = options.announcementMessage;\n snackBarConfig.direction = this.layoutService.isRtl() ? 'rtl' : 'ltr';\n \n if (options.duration >= 0) {\n snackBarConfig.duration = options.duration;\n }\n\n snackBarConfig.panelClass = ['pep-snack-bar'];\n if (options.panelClass) {\n snackBarConfig.panelClass.push(options.panelClass);\n }\n\n snackBarConfig.horizontalPosition = options.horizontalPosition \|\| 'end';\n snackBarConfig.verticalPosition = options.verticalPosition \|\| 'bottom'\n\n return snackBarConfig;\n }\n\n openDefaultSnackBar(\n data: PepSnackBarData,\n config: MatSnackBarConfig = null\n ): MatSnackBarRef<PepDefaultSnackBarComponent> {\n if (!config) {\n config = this.getSnackBarConfig();\n }\n\n config.data = data;\n const snackBarRef = this.snackBar.openFromComponent(PepDefaultSnackBarComponent, config);\n return snackBarRef;\n }\n\n openSnackBarFromComponent<T>(\n component: ComponentType<T>,\n data: any = {},\n config: MatSnackBarConfig = null\n ): MatSnackBarRef<T> {\n if (!config) {\n config = this.getSnackBarConfig();\n }\n\n config.data = data;\n const snackBarRef = this.snackBar.openFromComponent(component, config);\n return snackBarRef;\n }\n\n openSnackBarFromTemplate<T>(\n template: TemplateRef<any>,\n data: any = {},\n config: MatSnackBarConfig = null\n ): MatSnackBarRef<EmbeddedViewRef<any>> {\n if (!config) {\n config = this.getSnackBarConfig();\n }\n\n config.data = data;\n const snackBarRef = this.snackBar.openFromTemplate(template, config);\n return snackBarRef;\n }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatSnackBarModule } from '@angular/material/snack-bar';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport {\n PepIconModule,\n PepIconRegistry,\n pepIconSystemClose,\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepDefaultSnackBarComponent } from './default-snack-bar.component';\nimport { PepSnackBarComponent } from './snack-bar.component';\nimport { PepSnackBarService } from './snack-bar.service';\n\n@NgModule({\n imports: [\n CommonModule,\n // Material modules,\n MatCommonModule,\n MatButtonModule,\n MatIconModule,\n MatSnackBarModule,\n // ngx-lib modules\n PepNgxLibModule,\n PepButtonModule,\n PepIconModule,\n ],\n exports: [PepSnackBarComponent],\n declarations: [PepDefaultSnackBarComponent, PepSnackBarComponent],\n entryComponents: [PepDefaultSnackBarComponent],\n providers: [PepSnackBarService]\n})\nexport class PepSnackBarModule {\n constructor(private pepIconRegistry: PepIconRegistry) {\n this.pepIconRegistry.registerIcons([pepIconSystemClose]);\n }\n}\n","/\n Public API Surface of ngx-lib/snack-bar\n /\nexport from './snack-bar.module';\nexport * from './snack-bar.model';\nexport * from './snack-bar.component';\nexport * from './snack-bar.service';\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i1","i2.PepSnackBarComponent","i3"],"mappings":"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"}

package/fesm2020/pepperi-addons-ngx-lib-textarea.mjs CHANGED Viewed

@@ -52,6 +52,7 @@ class PepTextareaComponent {
         this._layoutType = 'form';
         this.valueChange = new EventEmitter();
         this.keyup = new EventEmitter();
+        this.validationChange = new EventEmitter();
         this.fieldHeight = '';
         this.standAlone = false;
         this.isInEditMode = false;
@@ -131,6 +132,12 @@ class PepTextareaComponent {
         if (value !== this.value) {
             this.value = value;
             this.customizationService.updateFormFieldValue(this.form, this.key, value);
+            // Raise this only for stand alone fields, If false then the usage for this field is inside a form.
+            // Then the form will take care of raising the (onFormValidationChanged) event
+            if (this.standAlone) {
+                const isValid = (this.disabled || this.readonly) ? true : this.form.valid;
+                this.validationChange.emit(isValid);
+            }
             this.valueChange.emit(value);
         }
     }
@@ -154,10 +161,10 @@ class PepTextareaComponent {
     }
 }
 PepTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextareaComponent, deps: [{ token: i1.PepDialogService }, { token: i2.PepCustomizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PepTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepTextareaComponent, selector: "pep-textarea", inputs: { key: "key", value: "value", label: "label", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", maxFieldCharacters: "maxFieldCharacters", textColor: "textColor", xAlignment: "xAlignment", rowSpan: "rowSpan", visible: "visible", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", layoutType: "layoutType" }, outputs: { valueChange: "valueChange", keyup: "keyup" }, viewQueries: [{ propertyName: "textAreaDialogTemplate", first: true, predicate: ["textAreaDialogTemplate"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n                [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table' }\">\n                <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n                    title=\"{{ value }}\" [value]=\"value\"\n                    maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [formControlName]=\"key\" [style.height]=\"fieldHeight\"\n                    (keyup)=\"onKeyup($event)\">\n                </textarea>\n                <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                </div>\n                <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n                </pep-textbox-icon> -->\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-textarea-card-container card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n                [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n                <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                    [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                    class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n                    <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n                        [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                        title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n                    <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                    <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                </mat-form-field>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n    <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <!-- <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea> -->\n            <textarea #dialogTextarea [readonly]=\"disabled || readonly\" class=\"body-sm\" matInput\n                title=\"{{ value }}\" [value]=\"value\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                [formControlName]=\"key\" >\n            </textarea>\n        </ng-container>\n        <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n            <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #editableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button class=\"pep-spacing-element pep-button md strong\"\n                    (click)=\"closeDialog(dialogTextarea.value)\">\n                    {{ 'ACTIONS.SAVE' | translate }}\n                </button>\n            </ng-template>\n            <ng-template #notEditableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-template>\n        </div>\n    </pep-dialog>\n</ng-template>", styles: [".pepperi-textarea-container,.pep-textarea-container{height:inherit;display:grid;align-items:center}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:100%;max-width:unset;overflow-y:scroll;box-sizing:content-box}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button{width:1rem!important;height:1rem!important}.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element{padding-top:.135rem!important}.pepperi-textarea-container .rich-text-cont,.pep-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pepperi-textarea-container .rich-text-cont.hide-enlarge-button,.pep-textarea-container .rich-text-cont.hide-enlarge-button{padding-inline-end:3rem}.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pepperi-textarea-container.right-alignment .rich-text-cont,.pep-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pepperi-textarea-card-container.card-flex-container,.pep-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pepperi-textarea-card-container.card-flex-container.one-row .title,.pep-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pepperi-textarea-card-container.card-flex-container span.value,.pep-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pepperi-report-textarea ::ng-deep .mat-form-field-suffix,.pep-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden;white-space:pre-wrap}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}\n", ".pepperi-textarea-container,.pep-textarea-container{height:inherit;display:grid;align-items:center}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:100%;max-width:unset;overflow-y:scroll;box-sizing:content-box}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button{width:1rem!important;height:1rem!important}.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element{padding-top:.135rem!important}.pepperi-textarea-container .rich-text-cont,.pep-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pepperi-textarea-container .rich-text-cont.hide-enlarge-button,.pep-textarea-container .rich-text-cont.hide-enlarge-button{padding-inline-end:3rem}.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pepperi-textarea-container.right-alignment .rich-text-cont,.pep-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pepperi-textarea-card-container.card-flex-container,.pep-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pepperi-textarea-card-container.card-flex-container.one-row .title,.pep-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pepperi-textarea-card-container.card-flex-container span.value,.pep-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pepperi-report-textarea ::ng-deep .mat-form-field-suffix,.pep-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}.pepperi-report-textarea ::ng-deep .mat-form-field-flex,.pep-report-textarea ::ng-deep .mat-form-field-flex{background:transparent!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i11.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i12.PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: ["value", "label", "type", "disabled"], outputs: ["iconClick"] }, { kind: "component", type: i1.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "pipe", type: i2.PepSafeHtmlPipe, name: "pepSafeHtml" }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PepTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepTextareaComponent, selector: "pep-textarea", inputs: { key: "key", value: "value", label: "label", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", maxFieldCharacters: "maxFieldCharacters", textColor: "textColor", xAlignment: "xAlignment", rowSpan: "rowSpan", visible: "visible", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", layoutType: "layoutType" }, outputs: { valueChange: "valueChange", keyup: "keyup", validationChange: "validationChange" }, viewQueries: [{ propertyName: "textAreaDialogTemplate", first: true, predicate: ["textAreaDialogTemplate"], descendants: true, read: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"form\" [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n                [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table', 'icon-left': xAlignment === 'left' || xAlignment === 'center', 'icon-right': xAlignment === 'right' }\">\n                <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n                    title=\"{{ value }}\" [value]=\"value\"\n                    maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [formControlName]=\"key\" [style.height]=\"fieldHeight\"\n                    (keyup)=\"onKeyup($event)\">\n                </textarea>\n                <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                </div>\n                <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n                </pep-textbox-icon> -->\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-textarea-card-container card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n                [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n                <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                    [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                    class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n                    <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n                        [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                        title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n                    <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                    <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                </mat-form-field>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n    <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content [formGroup]=\"form\">\n            <!-- <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea> -->\n            <textarea #dialogTextarea [readonly]=\"disabled || readonly\" class=\"body-sm\" matInput\n                title=\"{{ value }}\" [value]=\"value\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                [formControlName]=\"key\" >\n            </textarea>\n        </ng-container>\n        <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n            <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #editableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button class=\"pep-spacing-element pep-button md strong\"\n                    (click)=\"closeDialog(dialogTextarea.value)\">\n                    {{ 'ACTIONS.SAVE' | translate }}\n                </button>\n            </ng-template>\n            <ng-template #notEditableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-template>\n        </div>\n    </pep-dialog>\n</ng-template>", styles: [".pepperi-json-editor-container,.pep-json-editor-container,.pepperi-textarea-container,.pep-textarea-container{height:inherit;display:grid;align-items:center}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:100%;max-width:unset;overflow-y:scroll;box-sizing:content-box}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button{width:1rem!important;height:1rem!important}.pepperi-json-editor-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element{padding-top:.135rem!important}.pepperi-json-editor-container .rich-text-cont,.pep-json-editor-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont,.pep-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pepperi-json-editor-container .rich-text-cont.hide-enlarge-button,.pep-json-editor-container .rich-text-cont.hide-enlarge-button,.pepperi-textarea-container .rich-text-cont.hide-enlarge-button,.pep-textarea-container .rich-text-cont.hide-enlarge-button{padding-inline-end:3rem}.pepperi-json-editor-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pepperi-json-editor-container.right-alignment .rich-text-cont,.pep-json-editor-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont,.pep-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pepperi-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pepperi-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pepperi-json-editor-card-container.card-flex-container,.pep-json-editor-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container,.pep-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pepperi-json-editor-card-container.card-flex-container.one-row .title,.pep-json-editor-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title,.pep-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pepperi-json-editor-card-container.card-flex-container span.value,.pep-json-editor-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value,.pep-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pepperi-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pepperi-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pepperi-json-editor-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pepperi-report-json-editor ::ng-deep .mat-form-field-suffix,.pep-report-json-editor ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix,.pep-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pepperi-report-json-editor.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-json-editor.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden;white-space:pre-wrap}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;height:13rem}.dialog-textarea-container textarea:focus{outline:none}.pep-textarea-container ::ng-deep .icon-left .mat-form-field-suffix{position:absolute;right:1rem!important;bottom:.5rem}.pep-textarea-container ::ng-deep .icon-right .mat-form-field-suffix{position:absolute;right:calc(100% - 2.5rem)!important;bottom:.5rem}\n", ".pepperi-json-editor-container,.pep-json-editor-container,.pepperi-textarea-container,.pep-textarea-container{height:inherit;display:grid;align-items:center}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:100%;max-width:unset;overflow-y:scroll;box-sizing:content-box}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button{width:1rem!important;height:1rem!important}.pepperi-json-editor-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element{padding-top:.135rem!important}.pepperi-json-editor-container .rich-text-cont,.pep-json-editor-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont,.pep-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pepperi-json-editor-container .rich-text-cont.hide-enlarge-button,.pep-json-editor-container .rich-text-cont.hide-enlarge-button,.pepperi-textarea-container .rich-text-cont.hide-enlarge-button,.pep-textarea-container .rich-text-cont.hide-enlarge-button{padding-inline-end:3rem}.pepperi-json-editor-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pepperi-json-editor-container.right-alignment .rich-text-cont,.pep-json-editor-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont,.pep-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pepperi-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pepperi-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pepperi-json-editor-card-container.card-flex-container,.pep-json-editor-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container,.pep-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pepperi-json-editor-card-container.card-flex-container.one-row .title,.pep-json-editor-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title,.pep-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pepperi-json-editor-card-container.card-flex-container span.value,.pep-json-editor-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value,.pep-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pepperi-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pepperi-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pepperi-json-editor-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pepperi-report-json-editor ::ng-deep .mat-form-field-suffix,.pep-report-json-editor ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix,.pep-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pepperi-report-json-editor.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-json-editor.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}.pepperi-report-textarea ::ng-deep .mat-form-field-flex,.pep-report-textarea ::ng-deep .mat-form-field-flex{background:transparent!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i7.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i11.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType", "multiLine"] }, { kind: "component", type: i12.PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: ["value", "label", "type", "disabled"], outputs: ["iconClick"] }, { kind: "component", type: i1.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "pipe", type: i2.PepSafeHtmlPipe, name: "pepSafeHtml" }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n                [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table' }\">\n                <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n                    title=\"{{ value }}\" [value]=\"value\"\n                    maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [formControlName]=\"key\" [style.height]=\"fieldHeight\"\n                    (keyup)=\"onKeyup($event)\">\n                </textarea>\n                <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                </div>\n                <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n                </pep-textbox-icon> -->\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-textarea-card-container card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n                [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n                <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                    [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                    class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n                    <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n                        [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                        title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n                    <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                    <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                </mat-form-field>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n    <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <!-- <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea> -->\n            <textarea #dialogTextarea [readonly]=\"disabled || readonly\" class=\"body-sm\" matInput\n                title=\"{{ value }}\" [value]=\"value\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                [formControlName]=\"key\" >\n            </textarea>\n        </ng-container>\n        <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n            <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #editableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button class=\"pep-spacing-element pep-button md strong\"\n                    (click)=\"closeDialog(dialogTextarea.value)\">\n                    {{ 'ACTIONS.SAVE' | translate }}\n                </button>\n            </ng-template>\n            <ng-template #notEditableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-template>\n        </div>\n    </pep-dialog>\n</ng-template>", styles: [".pepperi-textarea-container,.pep-textarea-container{height:inherit;display:grid;align-items:center}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:100%;max-width:unset;overflow-y:scroll;box-sizing:content-box}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button{width:1rem!important;height:1rem!important}.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element{padding-top:.135rem!important}.pepperi-textarea-container .rich-text-cont,.pep-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pepperi-textarea-container .rich-text-cont.hide-enlarge-button,.pep-textarea-container .rich-text-cont.hide-enlarge-button{padding-inline-end:3rem}.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pepperi-textarea-container.right-alignment .rich-text-cont,.pep-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pepperi-textarea-card-container.card-flex-container,.pep-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pepperi-textarea-card-container.card-flex-container.one-row .title,.pep-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pepperi-textarea-card-container.card-flex-container span.value,.pep-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pepperi-report-textarea ::ng-deep .mat-form-field-suffix,.pep-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden;white-space:pre-wrap}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}\n", ".pepperi-textarea-container,.pep-textarea-container{height:inherit;display:grid;align-items:center}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:100%;max-width:unset;overflow-y:scroll;box-sizing:content-box}.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button{width:1rem!important;height:1rem!important}.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element{padding-top:.135rem!important}.pepperi-textarea-container .rich-text-cont,.pep-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pepperi-textarea-container .rich-text-cont.hide-enlarge-button,.pep-textarea-container .rich-text-cont.hide-enlarge-button{padding-inline-end:3rem}.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pepperi-textarea-container.right-alignment .rich-text-cont,.pep-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pepperi-textarea-card-container.card-flex-container,.pep-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pepperi-textarea-card-container.card-flex-container.one-row .title,.pep-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pepperi-textarea-card-container.card-flex-container span.value,.pep-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pepperi-report-textarea ::ng-deep .mat-form-field-suffix,.pep-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}.pepperi-report-textarea ::ng-deep .mat-form-field-flex,.pep-report-textarea ::ng-deep .mat-form-field-flex{background:transparent!important}\n"] }]
+            args: [{ selector: 'pep-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"form\" [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n                [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table', 'icon-left': xAlignment === 'left' || xAlignment === 'center', 'icon-right': xAlignment === 'right' }\">\n                <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n                    title=\"{{ value }}\" [value]=\"value\"\n                    maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [formControlName]=\"key\" [style.height]=\"fieldHeight\"\n                    (keyup)=\"onKeyup($event)\">\n                </textarea>\n                <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                </div>\n                <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n                </pep-textbox-icon> -->\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-textarea-card-container card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n                [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n                <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                    [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                    class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n                    <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n                        [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                        title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n                    <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                    <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                </mat-form-field>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n    <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content [formGroup]=\"form\">\n            <!-- <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea> -->\n            <textarea #dialogTextarea [readonly]=\"disabled || readonly\" class=\"body-sm\" matInput\n                title=\"{{ value }}\" [value]=\"value\"\n                maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                [formControlName]=\"key\" >\n            </textarea>\n        </ng-container>\n        <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n            <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #editableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button class=\"pep-spacing-element pep-button md strong\"\n                    (click)=\"closeDialog(dialogTextarea.value)\">\n                    {{ 'ACTIONS.SAVE' | translate }}\n                </button>\n            </ng-template>\n            <ng-template #notEditableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-template>\n        </div>\n    </pep-dialog>\n</ng-template>", styles: [".pepperi-json-editor-container,.pep-json-editor-container,.pepperi-textarea-container,.pep-textarea-container{height:inherit;display:grid;align-items:center}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:100%;max-width:unset;overflow-y:scroll;box-sizing:content-box}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button{width:1rem!important;height:1rem!important}.pepperi-json-editor-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element{padding-top:.135rem!important}.pepperi-json-editor-container .rich-text-cont,.pep-json-editor-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont,.pep-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pepperi-json-editor-container .rich-text-cont.hide-enlarge-button,.pep-json-editor-container .rich-text-cont.hide-enlarge-button,.pepperi-textarea-container .rich-text-cont.hide-enlarge-button,.pep-textarea-container .rich-text-cont.hide-enlarge-button{padding-inline-end:3rem}.pepperi-json-editor-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pepperi-json-editor-container.right-alignment .rich-text-cont,.pep-json-editor-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont,.pep-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pepperi-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pepperi-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pepperi-json-editor-card-container.card-flex-container,.pep-json-editor-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container,.pep-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pepperi-json-editor-card-container.card-flex-container.one-row .title,.pep-json-editor-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title,.pep-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pepperi-json-editor-card-container.card-flex-container span.value,.pep-json-editor-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value,.pep-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pepperi-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pepperi-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pepperi-json-editor-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pepperi-report-json-editor ::ng-deep .mat-form-field-suffix,.pep-report-json-editor ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix,.pep-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pepperi-report-json-editor.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-json-editor.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden;white-space:pre-wrap}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;height:13rem}.dialog-textarea-container textarea:focus{outline:none}.pep-textarea-container ::ng-deep .icon-left .mat-form-field-suffix{position:absolute;right:1rem!important;bottom:.5rem}.pep-textarea-container ::ng-deep .icon-right .mat-form-field-suffix{position:absolute;right:calc(100% - 2.5rem)!important;bottom:.5rem}\n", ".pepperi-json-editor-container,.pep-json-editor-container,.pepperi-textarea-container,.pep-textarea-container{height:inherit;display:grid;align-items:center}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:100%;max-width:unset;overflow-y:scroll;box-sizing:content-box}.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-json-editor-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-json-editor-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pepperi-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-json-editor-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button{width:1rem!important;height:1rem!important}.pepperi-json-editor-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-json-editor-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-json-editor-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-json-editor ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-json-editor ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep .mat-input-element,.pep-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep .mat-input-element{padding-top:.135rem!important}.pepperi-json-editor-container .rich-text-cont,.pep-json-editor-container .rich-text-cont,.pepperi-textarea-container .rich-text-cont,.pep-textarea-container .rich-text-cont{overflow-x:hidden;display:inline-block;vertical-align:unset;margin:0;padding:.5rem 1.5rem .5rem 0;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pepperi-json-editor-container .rich-text-cont.hide-enlarge-button,.pep-json-editor-container .rich-text-cont.hide-enlarge-button,.pepperi-textarea-container .rich-text-cont.hide-enlarge-button,.pep-textarea-container .rich-text-cont.hide-enlarge-button{padding-inline-end:3rem}.pepperi-json-editor-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.5rem 0 .5rem 1.5rem}.pepperi-json-editor-container.right-alignment .rich-text-cont,.pep-json-editor-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont,.pep-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pepperi-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pepperi-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-json-editor-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pep-textarea-card-container .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-flex .mat-input-element{padding:.25rem 1.5rem .5rem 0}.pepperi-json-editor-card-container.card-flex-container,.pep-json-editor-card-container.card-flex-container,.pepperi-textarea-card-container.card-flex-container,.pep-textarea-card-container.card-flex-container{height:inherit;display:flex;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset;padding:.25rem;max-width:100%}.pepperi-json-editor-card-container.card-flex-container.one-row .title,.pep-json-editor-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title,.pep-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pepperi-json-editor-card-container.card-flex-container span.value,.pep-json-editor-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value,.pep-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pepperi-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pepperi-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-json-editor-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pep-textarea-card-container.one-row .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pepperi-json-editor-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-json-editor-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element,.pep-textarea-card-container.right-alignment .mat-form-field ::ng-deep .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pepperi-report-json-editor ::ng-deep .mat-form-field-suffix,.pep-report-json-editor ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix,.pep-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pepperi-report-json-editor.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-json-editor.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex,.pep-report-textarea.readonly ::ng-deep .mat-form-field-wrapper .mat-form-field-flex{padding:0}.pepperi-report-textarea ::ng-deep .mat-form-field-flex,.pep-report-textarea ::ng-deep .mat-form-field-flex{background:transparent!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.PepDialogService }, { type: i2.PepCustomizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { key: [{
                 type: Input
             }], value: [{
@@ -194,6 +201,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }], keyup: [{
                 type: Output
+            }], validationChange: [{
+                type: Output
             }], textAreaDialogTemplate: [{
                 type: ViewChild,
                 args: ['textAreaDialogTemplate', { read: TemplateRef }]