@pepperi-addons/ngx-lib 0.3.15-beta.19 → 0.3.15-beta.21

package/bundles/pepperi-addons-ngx-lib-rich-html-textarea.umd.js

@@ -4,287 +4,287 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['pepperi-addons'] = global['pepperi-addons'] || {}, global['pepperi-addons']['ngx-lib'] = global['pepperi-addons']['ngx-lib'] || {}, global['pepperi-addons']['ngx-lib']['rich-html-textarea'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.material.core, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.material.menu, global.ng.material.icon, global.ng.material.dialog, global['pepperi-addons']['ngx-lib'], global['pepperi-addons']['ngx-lib'].icon, global['pepperi-addons']['ngx-lib']['textbox-icon'], global['pepperi-addons']['ngx-lib']['field-title'], global['pepperi-addons']['ngx-lib'].dialog, global.quill, global.ng.platformBrowser));
 }(this, (function (exports, core, common, forms, core$1, button, formField, input, menu, icon$1, dialog$1, ngxLib, icon, textboxIcon, fieldTitle, dialog, ngxQuill, platformBrowser) { 'use strict';
 
-    var PepRichHtmlTextareaComponent = /** @class */ (function () {
-        function PepRichHtmlTextareaComponent(sanitizer, dialogService, customizationService, renderer, element) {
-            this.sanitizer = sanitizer;
-            this.dialogService = dialogService;
-            this.customizationService = customizationService;
-            this.renderer = renderer;
-            this.element = element;
-            this.key = '';
-            this.value = '';
-            this.label = '';
-            this.mandatory = false;
-            this.disabled = false;
-            this.readonly = false;
-            this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
-            this._rowSpan = 1;
-            this._visible = true;
-            this.controlType = 'richhtmltextarea';
-            this.form = null;
-            this.isActive = false;
-            this.showTitle = true;
-            this.renderTitle = true;
-            this._layoutType = 'form';
-            this.inlineMode = false;
-            this.valueChange = new core.EventEmitter();
-            this.quillContent = '';
-            this.quillContentDialog = '';
-            this.fieldHeight = '';
-            this.standAlone = false;
-            this.active = false;
-            this.toolbarOptions = this.getDefaultToolbarOptions();
-        }
-        Object.defineProperty(PepRichHtmlTextareaComponent.prototype, "rowSpan", {
-            get: function () {
-                return this._rowSpan;
-            },
-            set: function (value) {
-                this._rowSpan = value;
-                this.setFieldHeight();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepRichHtmlTextareaComponent.prototype, "visible", {
-            get: function () {
-                return this._visible;
-            },
-            set: function (visible) {
-                this._visible = visible;
-                if (visible) {
-                    this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
-                }
-                else {
-                    this.renderer.addClass(this.element.nativeElement, 'hidden-element');
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepRichHtmlTextareaComponent.prototype, "layoutType", {
-            get: function () {
-                return this._layoutType;
-            },
-            set: function (value) {
-                this._layoutType = value;
-                this.setFieldHeight();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(PepRichHtmlTextareaComponent.prototype, "toolbarOptions", {
-            get: function () {
-                return this._toolbarOptions;
-            },
-            set: function (options) {
-                if (options) {
-                    this._toolbarOptions = options;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        PepRichHtmlTextareaComponent.prototype.setFieldHeight = function () {
-            this.fieldHeight = this.customizationService.calculateFieldHeight(this.layoutType, this.rowSpan, this.standAlone);
-        };
-        PepRichHtmlTextareaComponent.prototype.setDefaultForm = function () {
-            var pepField = new ngxLib.PepRichHtmlTextareaField({
-                key: this.key,
-                value: this.value,
-                mandatory: this.mandatory,
-                readonly: this.readonly,
-                disabled: this.disabled,
-                maxFieldCharacters: this.maxFieldCharacters,
-            });
-            this.form = this.customizationService.getDefaultFromGroup(pepField);
-        };
-        PepRichHtmlTextareaComponent.prototype.ngOnInit = function () {
-            if (this.form === null) {
-                this.standAlone = true;
-                this.setFieldHeight();
-                this.setDefaultForm();
-                this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
-                if (!this.renderTitle) {
-                    this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
-                }
-            }
-            this.quillContent = this.value;
-        };
-        PepRichHtmlTextareaComponent.prototype.ngOnChanges = function () {
-            if (this.standAlone) {
-                this.setDefaultForm();
-            }
-        };
-        PepRichHtmlTextareaComponent.prototype.ngOnDestroy = function () {
-            //
-        };
-        PepRichHtmlTextareaComponent.prototype.getDefaultToolbarOptions = function () {
-            return {
-                font: false,
-                size: false,
-                header: true,
-                bold: true,
-                italic: true,
-                underline: true,
-                strike: false,
-                link: true,
-                image: true,
-                ordered: true,
-                bullet: true,
-                color: true,
-                background: false,
-                align: true,
-            };
-        };
-        PepRichHtmlTextareaComponent.prototype.changeValue = function (value) {
-            if (value !== this.value) {
-                this.value = value;
-                this.quillContent = value;
-                this.customizationService.updateFormFieldValue(this.form, this.key, value);
-                this.valueChange.emit(value);
-            }
-        };
-        PepRichHtmlTextareaComponent.prototype.cardTemplateClicked = function (event) {
-            this.openDialog();
-        };
-        PepRichHtmlTextareaComponent.prototype.openDialog = function () {
-            var _this = this;
-            var config = this.dialogService.getDialogConfig({
-            // minWidth: '50vw',
-            // maxWidth: '90vw',
-            // maxHeight: '90vh',
-            }, 'large');
-            // If disabled open regular modal as html mode.
-            if (this.disabled || this.readonly) {
-                var data = new dialog.PepDialogData({
-                    title: this.label,
-                    content: this.quillContent,
-                    showFooter: false,
-                });
-                this.dialogService.openDefaultDialog(data, config);
-            }
-            else {
-                this.quillContentDialog = this.quillContent;
-                var dialogRef = this.dialogService.openDialog(this.richTextEditorDialogTemplate, {}, config);
-                dialogRef.afterClosed().subscribe(function (value) {
-                    if (value !== undefined && value !== null) {
-                        _this.changeValue(value);
-                    }
-                });
-            }
-        };
-        // Init quillContent in case that there are html tags...
-        PepRichHtmlTextareaComponent.prototype.onEditorCreated = function (quill, inDialog) {
-            if (!inDialog) {
-                this.quillContent = quill.getText();
-            }
-        };
-        PepRichHtmlTextareaComponent.prototype.onContentChanged = function (obj, inDialog) {
-            if (inDialog) {
-                this.quillContentDialog = obj.html;
-            }
-            else {
-                this.quillContent = obj.html;
-            }
-        };
-        PepRichHtmlTextareaComponent.prototype.onBlur = function (obj, inDialog) {
-            if (!inDialog) {
-                this.active = false;
-                this.changeValue(this.quillContent);
-            }
-        };
-        PepRichHtmlTextareaComponent.prototype.onFocus = function (obj, inDialog) {
-            if (!inDialog) {
-                this.active = true;
-            }
-        };
-        return PepRichHtmlTextareaComponent;
-    }());
-    PepRichHtmlTextareaComponent.decorators = [
-        { type: core.Component, args: [{
-                    selector: 'pep-rich-html-textarea',
-                    template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container pep-report-textarea\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': !isFormView && rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n                [disabled]=\"disabled\"\n                [maxFieldCharacters]=\"inlineMode && !disabled && !readonly ? maxFieldCharacters : 0\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"quillContent?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table', 'active': active, 'ignore-disabled': disabled }\">\n                <textarea [hidden]=\"true\" matInput [formControlName]=\"key\"></textarea>\n\n                <ng-container *ngIf=\"inlineMode; then inlineBlock; else notInlineBlock\"></ng-container>\n\n                <ng-template #inlineBlock>\n                    <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: false}\"></ng-container>\n                </ng-template>\n                <ng-template #notInlineBlock>\n\n                    <!-- We can use the quill-view-html\n                    <quill-view-html class=\"body-sm rich-text-cont \"\n                    [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\" [content]=\"value | pepSafeHtml\"\n                    theme=\"snow\" [style.height]=\"fieldHeight\"></quill-view-html> \n                -->\n\n                    <div class=\"body-sm rich-text-cont \"\n                        [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                        [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                    </div>\n                </ng-template>\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\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        <div class=\"pep-textarea-card-container card-flex-container\"\n            [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n            [ngStyle]=\"{ '-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\" class=\"body-sm value wrap\" [innerHtml]=\"value | pepSafeHtml\"></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-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                <div class=\"pep-textarea-card-container card-flex-container one-row\">\n                    <span [id]=\"key\" class=\"wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\n                </div>\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 #richTextEditorDialogTemplate>\n    <div class=\"rich-text-editor-container\">\n        <button mat-button [mat-dialog-close]=\"null\" class=\"pep-button icon-button md weak pull-right flip\">\n            <mat-icon>\n                <pep-icon name=\"system_close\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n        <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: true}\"></ng-container>\n        <div mat-dialog-actions class=\" pep-border-top\">\n            <div class=\"pep-spacing-element-negative\">\n                <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                    {{'ACTIONS.CANCEL' | translate}}\n                </button>\n                <button mat-button [mat-dialog-close]=\"quillContentDialog || ''\" [disabled]=\"disabled\"\n                    class=\"pep-spacing-element pep-button md strong \">\n                    {{'ACTIONS.SAVE' | translate}}\n                </button>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #quilTemplate let-inDialog=\"inDialog\">\n    <quill-editor id=\"{{inDialog ? 'quill-editor-dialog' : 'quill-editor-inline'}}\"\n        [class]=\"inDialog ? 'dialog-quill' : 'inline-quill'\" [ngClass]=\"{ 'rich-text-cont': !inDialog }\"\n        placeholder=\"{{'RICH_TEXTAREA.HINT' | translate}}\" [ngModel]=\"inDialog ? quillContentDialog : quillContent\"\n        [sanitize]=\"true\" [readOnly]=\"disabled\" [maxLength]=\"maxFieldCharacters\" [required]=\"mandatory\"\n        (onEditorCreated)=\"onEditorCreated($event, inDialog)\" (onContentChanged)=\"onContentChanged($event, inDialog)\"\n        (onBlur)=\"onBlur($event, inDialog)\" (onFocus)=\"onFocus($event, inDialog)\" theme=\"\">\n        <div *ngIf=\"!disabled\" quill-editor-toolbar>\n            <div class=\"pep-spacing-element-negative\">\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.font\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-font select-arrow\">\n                        <option selected></option>\n                        <option value=\"serif\"></option>\n                        <option value=\"monospace\"></option>\n                    </select>\n                    <select *ngIf=\"toolbarOptions?.size\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-size select-arrow\">\n                        <option value=\"small\"></option>\n                        <option selected></option>\n                        <option value=\"large\"></option>\n                        <option value=\"huge\"></option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.header\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-header select-arrow\">\n                        <option value=\"1\"></option>\n                        <option value=\"2\"></option>\n                        <option value=\"3\"></option>\n                        <!-- \n                        <option value=\"4\"></option>\n                        <option value=\"5\"></option>\n                        <option value=\"6\"></option> \n                        -->\n                        <option value=\"false\" selected></option>\n                    </select>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.bold\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-bold\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.italic\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-italic\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.underline\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-underline\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.strike\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-strike\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.link\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-link\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.image\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-image\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.ordered\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"ordered\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.bullet\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"bullet\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.color\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-color\"></select>\n                    <select *ngIf=\"toolbarOptions?.background\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-background\"></select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.align\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-align\">\n                        <option selected></option>\n                        <option value=\"center\"></option>\n                        <option value=\"right\"></option>\n                        <option value=\"justify\"></option>\n                    </select>\n                </span>\n            </div>\n        </div>\n    </quill-editor>\n</ng-template>",
-                    changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-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{display:flex}.pep-textarea-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{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-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{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-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{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-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{padding-top:.35rem}.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,.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{align-self:center!important;margin-bottom:unset}.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-prefix .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,.pep-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-prefix .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-suffix .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{width:1rem!important;height:1rem!important}.pep-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,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-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}.pep-textarea-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{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-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{padding-left:.5rem;padding-right:.5rem}.pep-textarea-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{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-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%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-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{line-height:0!important}.pep-textarea-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{padding-top:0;padding-bottom:0}.pep-textarea-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{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pep-report-textarea.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{padding:0}:host{height:inherit;display:block}.pep-textarea-container ::ng-deep.mat-form-field-infix,.pepperi-textarea-container ::ng-deep.mat-form-field-infix{margin-left:calc(.75rem * -1);margin-left:calc(var(--pep-spacing-md, .75rem) * -1)}.pep-textarea-container.right-alignment ::ng-deep.mat-form-field-infix,.pepperi-textarea-container.right-alignment ::ng-deep.mat-form-field-infix{margin-left:unset;margin-right:calc(.75rem * -1);margin-right:calc(var(--pep-spacing-md, .75rem) * -1)}.vertical-separator{display:none}", ".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-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{display:flex}.pep-textarea-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{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-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{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-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{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-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{padding-top:.35rem}.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,.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{align-self:center!important;margin-bottom:unset}.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-prefix .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,.pep-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-prefix .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-suffix .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{width:1rem!important;height:1rem!important}.pep-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,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-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}.pep-textarea-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{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-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{padding-left:.5rem;padding-right:.5rem}.pep-textarea-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{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-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%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-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{line-height:0!important}.pep-textarea-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{padding-top:0;padding-bottom:0}.pep-textarea-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{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pep-report-textarea.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{padding:0}.pep-report-textarea ::ng-deep.mat-form-field-flex,.pepperi-report-textarea ::ng-deep.mat-form-field-flex{background:transparent!important}.mat-form-field.mat-form-field-disabled ::ng-deep.mat-form-field-flex{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}.right-alignment quill-editor.inline-quill::ng-deep .ql-container .ql-editor{padding-right:unset;padding-left:calc(.5rem + 1rem);padding-left:calc(var(--pep-spacing-sm, .5rem) + 1rem)}quill-editor.inline-quill::ng-deep .ql-container .ql-editor{width:calc(100% + 1rem);padding-right:calc(.5rem + 1rem);padding-right:calc(var(--pep-spacing-sm, .5rem) + 1rem)}quill-editor ::ng-deep .ql-toolbar{display:flex;padding:0!important;border:unset}quill-editor ::ng-deep .ql-toolbar .ql-transparent{opacity:.9}quill-editor ::ng-deep .ql-toolbar .ql-formats{margin-right:0!important;margin-bottom:.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats button{height:2.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats button svg{width:1.25rem!important;float:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-stroke{stroke:rgba(26,26,26,.8);stroke:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.8)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-fill{fill:rgba(26,26,26,.8);fill:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.8)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item{outline:unset!important;width:100%;height:auto;padding:.25rem .5rem;padding:var(--pep-spacing-xs,.25rem) var(--pep-spacing-sm,.5rem);display:grid}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);background:rgba(26,26,26,.24)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.24)!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled:after{border:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker,quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-icon-picker{width:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label{outline:none;display:grid;grid-auto-flow:column;align-items:center;line-height:1rem;border:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label svg{width:1.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label:after{content:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==\");cursor:pointer;display:grid;height:inherit;justify-content:center;align-content:center}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.select-arrow .ql-picker-label:before{line-height:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.select-arrow .ql-picker-label svg{display:none}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-options{border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);box-sizing:content-box;padding:unset;box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32);border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options{padding:.25rem .5rem;padding:var(--pep-spacing-xs,.25rem) var(--pep-spacing-sm,.5rem);width:140px}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options:focus{outline:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options .ql-picker-item:focus{outline:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#1766a6;stroke:hsl(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#1766a6;fill:hsl(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label{border:unset}quill-editor ::ng-deep .ql-toolbar .vertical-separator{border-color:rgba(26,26,26,.24);border-color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)}@media (max-width:568px){quill-editor ::ng-deep .ql-toolbar .ql-list{display:none}}@media (max-width:599px){quill-editor ::ng-deep .ql-toolbar .ql-italic,quill-editor ::ng-deep .ql-toolbar .ql-underline{display:none}}@media (max-width:460px){quill-editor ::ng-deep .ql-toolbar .ql-header,quill-editor ::ng-deep .ql-toolbar .ql-image,quill-editor ::ng-deep .ql-toolbar .ql-italic,quill-editor ::ng-deep .ql-toolbar .ql-list,quill-editor ::ng-deep .ql-toolbar .ql-underline{display:none}}quill-editor ::ng-deep .ql-container{height:16rem;border:unset;border-top:1px solid rgba(26,26,26,.24)!important;border-top:1px solid hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)!important}quill-editor ::ng-deep .ql-container .ql-editor{padding:.5rem 0;padding:var(--pep-spacing-sm,.5rem) 0}quill-editor ::ng-deep .ql-container .ql-editor.ql-blank:before{right:0;left:0}quill-editor ::ng-deep .ql-container .ql-tooltip.ql-flip{left:0!important}"]
-                },] }
-    ];
-    PepRichHtmlTextareaComponent.ctorParameters = function () { return [
-        { type: platformBrowser.DomSanitizer },
-        { type: dialog.PepDialogService },
-        { type: ngxLib.PepCustomizationService },
-        { type: core.Renderer2 },
-        { type: core.ElementRef }
-    ]; };
-    PepRichHtmlTextareaComponent.propDecorators = {
-        key: [{ type: core.Input }],
-        value: [{ type: core.Input }],
-        label: [{ type: core.Input }],
-        mandatory: [{ type: core.Input }],
-        disabled: [{ type: core.Input }],
-        readonly: [{ type: core.Input }],
-        maxFieldCharacters: [{ type: core.Input }],
-        xAlignment: [{ type: core.Input }],
-        rowSpan: [{ type: core.Input }],
-        visible: [{ type: core.Input }],
-        form: [{ type: core.Input }],
-        isActive: [{ type: core.Input }],
-        showTitle: [{ type: core.Input }],
-        renderTitle: [{ type: core.Input }],
-        layoutType: [{ type: core.Input }],
-        inlineMode: [{ type: core.Input }],
-        toolbarOptions: [{ type: core.Input }],
-        valueChange: [{ type: core.Output }],
-        richTextEditorDialogTemplate: [{ type: core.ViewChild, args: ['richTextEditorDialogTemplate', { read: core.TemplateRef },] }]
+    var PepRichHtmlTextareaComponent = /** @class */ (function () {
+        function PepRichHtmlTextareaComponent(sanitizer, dialogService, customizationService, renderer, element) {
+            this.sanitizer = sanitizer;
+            this.dialogService = dialogService;
+            this.customizationService = customizationService;
+            this.renderer = renderer;
+            this.element = element;
+            this.key = '';
+            this.value = '';
+            this.label = '';
+            this.mandatory = false;
+            this.disabled = false;
+            this.readonly = false;
+            this.xAlignment = ngxLib.DEFAULT_HORIZONTAL_ALIGNMENT;
+            this._rowSpan = 1;
+            this._visible = true;
+            this.controlType = 'richhtmltextarea';
+            this.form = null;
+            this.isActive = false;
+            this.showTitle = true;
+            this.renderTitle = true;
+            this._layoutType = 'form';
+            this.inlineMode = false;
+            this.valueChange = new core.EventEmitter();
+            this.quillContent = '';
+            this.quillContentDialog = '';
+            this.fieldHeight = '';
+            this.standAlone = false;
+            this.active = false;
+            this.toolbarOptions = this.getDefaultToolbarOptions();
+        }
+        Object.defineProperty(PepRichHtmlTextareaComponent.prototype, "rowSpan", {
+            get: function () {
+                return this._rowSpan;
+            },
+            set: function (value) {
+                this._rowSpan = value;
+                this.setFieldHeight();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepRichHtmlTextareaComponent.prototype, "visible", {
+            get: function () {
+                return this._visible;
+            },
+            set: function (visible) {
+                this._visible = visible;
+                if (visible) {
+                    this.renderer.removeClass(this.element.nativeElement, 'hidden-element');
+                }
+                else {
+                    this.renderer.addClass(this.element.nativeElement, 'hidden-element');
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepRichHtmlTextareaComponent.prototype, "layoutType", {
+            get: function () {
+                return this._layoutType;
+            },
+            set: function (value) {
+                this._layoutType = value;
+                this.setFieldHeight();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(PepRichHtmlTextareaComponent.prototype, "toolbarOptions", {
+            get: function () {
+                return this._toolbarOptions;
+            },
+            set: function (options) {
+                if (options) {
+                    this._toolbarOptions = options;
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        PepRichHtmlTextareaComponent.prototype.setFieldHeight = function () {
+            this.fieldHeight = this.customizationService.calculateFieldHeight(this.layoutType, this.rowSpan, this.standAlone);
+        };
+        PepRichHtmlTextareaComponent.prototype.setDefaultForm = function () {
+            var pepField = new ngxLib.PepRichHtmlTextareaField({
+                key: this.key,
+                value: this.value,
+                mandatory: this.mandatory,
+                readonly: this.readonly,
+                disabled: this.disabled,
+                maxFieldCharacters: this.maxFieldCharacters,
+            });
+            this.form = this.customizationService.getDefaultFromGroup(pepField);
+        };
+        PepRichHtmlTextareaComponent.prototype.ngOnInit = function () {
+            if (this.form === null) {
+                this.standAlone = true;
+                this.setFieldHeight();
+                this.setDefaultForm();
+                this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME);
+                if (!this.renderTitle) {
+                    this.renderer.addClass(this.element.nativeElement, ngxLib.PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME);
+                }
+            }
+            this.quillContent = this.value;
+        };
+        PepRichHtmlTextareaComponent.prototype.ngOnChanges = function () {
+            if (this.standAlone) {
+                this.setDefaultForm();
+            }
+        };
+        PepRichHtmlTextareaComponent.prototype.ngOnDestroy = function () {
+            //
+        };
+        PepRichHtmlTextareaComponent.prototype.getDefaultToolbarOptions = function () {
+            return {
+                font: false,
+                size: false,
+                header: true,
+                bold: true,
+                italic: true,
+                underline: true,
+                strike: false,
+                link: true,
+                image: true,
+                ordered: true,
+                bullet: true,
+                color: true,
+                background: false,
+                align: true,
+            };
+        };
+        PepRichHtmlTextareaComponent.prototype.changeValue = function (value) {
+            if (value !== this.value) {
+                this.value = value;
+                this.quillContent = value;
+                this.customizationService.updateFormFieldValue(this.form, this.key, value);
+                this.valueChange.emit(value);
+            }
+        };
+        PepRichHtmlTextareaComponent.prototype.cardTemplateClicked = function (event) {
+            this.openDialog();
+        };
+        PepRichHtmlTextareaComponent.prototype.openDialog = function () {
+            var _this = this;
+            var config = this.dialogService.getDialogConfig({
+            // minWidth: '50vw',
+            // maxWidth: '90vw',
+            // maxHeight: '90vh',
+            }, 'large');
+            // If disabled open regular modal as html mode.
+            if (this.disabled || this.readonly) {
+                var data = new dialog.PepDialogData({
+                    title: this.label,
+                    content: this.quillContent,
+                    showFooter: false,
+                });
+                this.dialogService.openDefaultDialog(data, config);
+            }
+            else {
+                this.quillContentDialog = this.quillContent;
+                var dialogRef = this.dialogService.openDialog(this.richTextEditorDialogTemplate, {}, config);
+                dialogRef.afterClosed().subscribe(function (value) {
+                    if (value !== undefined && value !== null) {
+                        _this.changeValue(value);
+                    }
+                });
+            }
+        };
+        // Init quillContent in case that there are html tags...
+        PepRichHtmlTextareaComponent.prototype.onEditorCreated = function (quill, inDialog) {
+            if (!inDialog) {
+                this.quillContent = quill.getText();
+            }
+        };
+        PepRichHtmlTextareaComponent.prototype.onContentChanged = function (obj, inDialog) {
+            if (inDialog) {
+                this.quillContentDialog = obj.html;
+            }
+            else {
+                this.quillContent = obj.html;
+            }
+        };
+        PepRichHtmlTextareaComponent.prototype.onBlur = function (obj, inDialog) {
+            if (!inDialog) {
+                this.active = false;
+                this.changeValue(this.quillContent);
+            }
+        };
+        PepRichHtmlTextareaComponent.prototype.onFocus = function (obj, inDialog) {
+            if (!inDialog) {
+                this.active = true;
+            }
+        };
+        return PepRichHtmlTextareaComponent;
+    }());
+    PepRichHtmlTextareaComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'pep-rich-html-textarea',
+                    template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container pep-report-textarea\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': !isFormView && rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n                [disabled]=\"disabled\"\n                [maxFieldCharacters]=\"inlineMode && !disabled && !readonly ? maxFieldCharacters : 0\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"quillContent?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table', 'active': active, 'ignore-disabled': disabled }\">\n                <textarea [hidden]=\"true\" matInput [formControlName]=\"key\"></textarea>\n\n                <ng-container *ngIf=\"inlineMode; then inlineBlock; else notInlineBlock\"></ng-container>\n\n                <ng-template #inlineBlock>\n                    <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: false}\"></ng-container>\n                </ng-template>\n                <ng-template #notInlineBlock>\n\n                    <!-- We can use the quill-view-html\n                    <quill-view-html class=\"body-sm rich-text-cont \"\n                    [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\" [content]=\"value | pepSafeHtml\"\n                    theme=\"snow\" [style.height]=\"fieldHeight\"></quill-view-html> \n                -->\n\n                    <div class=\"body-sm rich-text-cont \"\n                        [ngStyle]=\"{ 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                        [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                    </div>\n                </ng-template>\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\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        <div class=\"pep-textarea-card-container card-flex-container\"\n            [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n            [ngStyle]=\"{ '-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\" class=\"body-sm value wrap\" [innerHtml]=\"value | pepSafeHtml\"></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-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                <div class=\"pep-textarea-card-container card-flex-container one-row\">\n                    <span [id]=\"key\" class=\"wrap\" [innerHtml]=\"value | pepSafeHtml\"></span>\n                </div>\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 #richTextEditorDialogTemplate>\n    <div class=\"rich-text-editor-container\">\n        <button mat-button [mat-dialog-close]=\"null\" class=\"pep-button icon-button md weak pull-right flip\">\n            <mat-icon>\n                <pep-icon name=\"system_close\">\n                </pep-icon>\n            </mat-icon>\n        </button>\n        <ng-container *ngTemplateOutlet=\"quilTemplate; context: {inDialog: true}\"></ng-container>\n        <div mat-dialog-actions class=\" pep-border-top\">\n            <div class=\"pep-spacing-element-negative\">\n                <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                    {{'ACTIONS.CANCEL' | translate}}\n                </button>\n                <button mat-button [mat-dialog-close]=\"quillContentDialog || ''\" [disabled]=\"disabled\"\n                    class=\"pep-spacing-element pep-button md strong \">\n                    {{'ACTIONS.SAVE' | translate}}\n                </button>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #quilTemplate let-inDialog=\"inDialog\">\n    <quill-editor id=\"{{inDialog ? 'quill-editor-dialog' : 'quill-editor-inline'}}\"\n        [class]=\"inDialog ? 'dialog-quill' : 'inline-quill'\" [ngClass]=\"{ 'rich-text-cont': !inDialog }\"\n        placeholder=\"{{'RICH_TEXTAREA.HINT' | translate}}\" [ngModel]=\"inDialog ? quillContentDialog : quillContent\"\n        [sanitize]=\"true\" [readOnly]=\"disabled\" [maxLength]=\"maxFieldCharacters\" [required]=\"mandatory\"\n        (onEditorCreated)=\"onEditorCreated($event, inDialog)\" (onContentChanged)=\"onContentChanged($event, inDialog)\"\n        (onBlur)=\"onBlur($event, inDialog)\" (onFocus)=\"onFocus($event, inDialog)\" theme=\"\">\n        <div *ngIf=\"!disabled\" quill-editor-toolbar>\n            <div class=\"pep-spacing-element-negative\">\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.font\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-font select-arrow\">\n                        <option selected></option>\n                        <option value=\"serif\"></option>\n                        <option value=\"monospace\"></option>\n                    </select>\n                    <select *ngIf=\"toolbarOptions?.size\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-size select-arrow\">\n                        <option value=\"small\"></option>\n                        <option selected></option>\n                        <option value=\"large\"></option>\n                        <option value=\"huge\"></option>\n                    </select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.header\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-header select-arrow\">\n                        <option value=\"1\"></option>\n                        <option value=\"2\"></option>\n                        <option value=\"3\"></option>\n                        <!-- \n                        <option value=\"4\"></option>\n                        <option value=\"5\"></option>\n                        <option value=\"6\"></option> \n                        -->\n                        <option value=\"false\" selected></option>\n                    </select>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.bold\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-bold\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.italic\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-italic\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.underline\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-underline\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.strike\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-strike\"></button>\n                </span>\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.link\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-link\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.image\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-image\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <button mat-button *ngIf=\"toolbarOptions?.ordered\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"ordered\"></button>\n                    <button mat-button *ngIf=\"toolbarOptions?.bullet\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-list\" value=\"bullet\"></button>\n                </span>\n                <!-- <hr class=\"vertical-separator\" /> -->\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.color\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-color\"></select>\n                    <select *ngIf=\"toolbarOptions?.background\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-background\"></select>\n                </span>\n                <span class=\"ql-formats\">\n                    <select *ngIf=\"toolbarOptions?.align\"\n                        class=\"pep-spacing-element pep-button icon-button md weak ql-align\">\n                        <option selected></option>\n                        <option value=\"center\"></option>\n                        <option value=\"right\"></option>\n                        <option value=\"justify\"></option>\n                    </select>\n                </span>\n            </div>\n        </div>\n    </quill-editor>\n</ng-template>",
+                    changeDetection: core.ChangeDetectionStrategy.OnPush,
+                    styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-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{display:flex}.pep-textarea-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{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-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{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-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{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-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{padding-top:.35rem}.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,.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{align-self:center!important;margin-bottom:unset}.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-prefix .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,.pep-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-prefix .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-suffix .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{width:1rem!important;height:1rem!important}.pep-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,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-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}.pep-textarea-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{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-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{padding-left:.5rem;padding-right:.5rem}.pep-textarea-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{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-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%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-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{line-height:0!important}.pep-textarea-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{padding-top:0;padding-bottom:0}.pep-textarea-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{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pep-report-textarea.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{padding:0}:host{height:inherit;display:block}.pep-textarea-container ::ng-deep.mat-form-field-infix,.pepperi-textarea-container ::ng-deep.mat-form-field-infix{margin-left:calc(.75rem * -1);margin-left:calc(var(--pep-spacing-md, .75rem) * -1)}.pep-textarea-container.right-alignment ::ng-deep.mat-form-field-infix,.pepperi-textarea-container.right-alignment ::ng-deep.mat-form-field-infix{margin-left:unset;margin-right:calc(.75rem * -1);margin-right:calc(var(--pep-spacing-md, .75rem) * -1)}.vertical-separator{display:none}", ".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-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{display:flex}.pep-textarea-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{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-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{margin:0;padding:.5rem 1.5rem .5rem 0;vertical-align:unset;resize:none;width:calc(100% + 3rem);max-width:unset;overflow-y:scroll;box-sizing:border-box}.pep-textarea-container .mat-form-field ::ng-deep .mat-form-field-prefix,.pep-textarea-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{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-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{padding-top:.35rem}.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,.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{align-self:center!important;margin-bottom:unset}.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-prefix .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,.pep-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-prefix .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-suffix .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{width:1rem!important;height:1rem!important}.pep-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,.pepperi-textarea-container.one-row .mat-form-field.pep-table-textarea ::ng-deep.mat-input-element,.pepperi-textarea-container.one-row .mat-form-field.pepperi-table-textarea ::ng-deep.mat-input-element{padding-top:.135rem!important}.pep-textarea-container .rich-text-cont,.pepperi-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}.pep-textarea-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{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-container.right-alignment .rich-text-cont,.pepperi-textarea-container.right-alignment .rich-text-cont{padding:.5rem 0 .5rem 1.5rem}.pep-textarea-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{padding-left:.5rem;padding-right:.5rem}.pep-textarea-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{padding:.25rem 1.5rem .5rem 0}.pep-textarea-card-container.card-flex-container,.pepperi-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%}.pep-textarea-card-container.card-flex-container.one-row .title,.pepperi-textarea-card-container.card-flex-container.one-row .title{padding-top:.25rem}.pep-textarea-card-container.card-flex-container span.value,.pepperi-textarea-card-container.card-flex-container span.value{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;white-space:unset}.pep-textarea-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{line-height:0!important}.pep-textarea-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{padding-top:0;padding-bottom:0}.pep-textarea-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{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea ::ng-deep .mat-form-field-suffix,.pepperi-report-textarea ::ng-deep .mat-form-field-suffix{right:0!important}.pep-report-textarea.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{padding:0}.pep-report-textarea ::ng-deep.mat-form-field-flex,.pepperi-report-textarea ::ng-deep.mat-form-field-flex{background:transparent!important}.mat-form-field.mat-form-field-disabled ::ng-deep.mat-form-field-flex{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}.right-alignment quill-editor.inline-quill::ng-deep .ql-container .ql-editor{padding-right:unset;padding-left:calc(.5rem + 1rem);padding-left:calc(var(--pep-spacing-sm, .5rem) + 1rem)}quill-editor.inline-quill::ng-deep .ql-container .ql-editor{width:calc(100% + 1rem);padding-right:calc(.5rem + 1rem);padding-right:calc(var(--pep-spacing-sm, .5rem) + 1rem)}quill-editor ::ng-deep .ql-toolbar{display:flex;padding:0!important;border:unset}quill-editor ::ng-deep .ql-toolbar .ql-transparent{opacity:.9}quill-editor ::ng-deep .ql-toolbar .ql-formats{margin-right:0!important;margin-bottom:.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats button{height:2.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats button svg{width:1.25rem!important;float:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button.ql-active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats button:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-stroke{stroke:rgba(26,26,26,.8);stroke:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.8)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-fill{fill:rgba(26,26,26,.8);fill:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.8)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item{outline:unset!important;width:100%;height:auto;padding:.25rem .5rem;padding:var(--pep-spacing-xs,.25rem) var(--pep-spacing-sm,.5rem);display:grid}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:hover{background:rgba(26,26,26,.16);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.16)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:active{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);background:rgba(26,26,26,.24)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.24)!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:active:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled{box-shadow:unset;border:unset;color:rgba(26,26,26,.35)!important;color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)!important;background:rgba(26,26,26,.04)!important;background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled:after{border:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled .svg-icon{fill:rgba(26,26,26,.35);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker:not(.ql-color-picker) .ql-picker-options .ql-picker-item:disabled .svg-icon.stroke{fill:unset;stroke:rgba(26,26,26,.35);stroke:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.35)}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker,quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-icon-picker{width:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label{outline:none;display:grid;grid-auto-flow:column;align-items:center;line-height:1rem;border:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label svg{width:1.5rem}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-label:after{content:url(\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==\");cursor:pointer;display:grid;height:inherit;justify-content:center;align-content:center}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.select-arrow .ql-picker-label:before{line-height:unset}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.select-arrow .ql-picker-label svg{display:none}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker .ql-picker-options{border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);box-sizing:content-box;padding:unset;box-shadow:0 .25rem .5rem 0 rgba(26,26,26,.32);box-shadow:var(--pep-shadow-sm-offset,0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.32);border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options{padding:.25rem .5rem;padding:var(--pep-spacing-xs,.25rem) var(--pep-spacing-sm,.5rem);width:140px}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options:focus{outline:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-color-picker .ql-picker-options .ql-picker-item:focus{outline:unset!important}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded{box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.08);box-shadow:var(--pep-shadow-xs-offset,0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.08);position:relative}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded:not(.keep-background-on-focus){background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid #1a1a1a;border:1px solid hsl(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#1766a6;stroke:hsl(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#1766a6;fill:hsl(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%))}quill-editor ::ng-deep .ql-toolbar .ql-formats .ql-picker.ql-expanded .ql-picker-label{border:unset}quill-editor ::ng-deep .ql-toolbar .vertical-separator{border-color:rgba(26,26,26,.24);border-color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)}@media (max-width:568px){quill-editor ::ng-deep .ql-toolbar .ql-list{display:none}}@media (max-width:599px){quill-editor ::ng-deep .ql-toolbar .ql-italic,quill-editor ::ng-deep .ql-toolbar .ql-underline{display:none}}@media (max-width:460px){quill-editor ::ng-deep .ql-toolbar .ql-header,quill-editor ::ng-deep .ql-toolbar .ql-image,quill-editor ::ng-deep .ql-toolbar .ql-italic,quill-editor ::ng-deep .ql-toolbar .ql-list,quill-editor ::ng-deep .ql-toolbar .ql-underline{display:none}}quill-editor ::ng-deep .ql-container{height:16rem;border:unset;border-top:1px solid rgba(26,26,26,.24)!important;border-top:1px solid hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)!important}quill-editor ::ng-deep .ql-container .ql-editor{padding:.5rem 0;padding:var(--pep-spacing-sm,.5rem) 0}quill-editor ::ng-deep .ql-container .ql-editor.ql-blank:before{right:0;left:0}quill-editor ::ng-deep .ql-container .ql-tooltip.ql-flip{left:0!important}"]
+                },] }
+    ];
+    PepRichHtmlTextareaComponent.ctorParameters = function () { return [
+        { type: platformBrowser.DomSanitizer },
+        { type: dialog.PepDialogService },
+        { type: ngxLib.PepCustomizationService },
+        { type: core.Renderer2 },
+        { type: core.ElementRef }
+    ]; };
+    PepRichHtmlTextareaComponent.propDecorators = {
+        key: [{ type: core.Input }],
+        value: [{ type: core.Input }],
+        label: [{ type: core.Input }],
+        mandatory: [{ type: core.Input }],
+        disabled: [{ type: core.Input }],
+        readonly: [{ type: core.Input }],
+        maxFieldCharacters: [{ type: core.Input }],
+        xAlignment: [{ type: core.Input }],
+        rowSpan: [{ type: core.Input }],
+        visible: [{ type: core.Input }],
+        form: [{ type: core.Input }],
+        isActive: [{ type: core.Input }],
+        showTitle: [{ type: core.Input }],
+        renderTitle: [{ type: core.Input }],
+        layoutType: [{ type: core.Input }],
+        inlineMode: [{ type: core.Input }],
+        toolbarOptions: [{ type: core.Input }],
+        valueChange: [{ type: core.Output }],
+        richTextEditorDialogTemplate: [{ type: core.ViewChild, args: ['richTextEditorDialogTemplate', { read: core.TemplateRef },] }]
     };
 
-    var PepRichHtmlTextareaModule = /** @class */ (function () {
-        function PepRichHtmlTextareaModule(pepIconRegistry) {
-            this.pepIconRegistry = pepIconRegistry;
-            this.pepIconRegistry.registerIcons([
-                icon.pepIconSystemEdit,
-                icon.pepIconSystemClose,
-            ]);
-        }
-        return PepRichHtmlTextareaModule;
-    }());
-    PepRichHtmlTextareaModule.decorators = [
-        { type: core.NgModule, args: [{
-                    imports: [
-                        common.CommonModule,
-                        forms.ReactiveFormsModule,
-                        forms.FormsModule,
-                        // Material modules,
-                        core$1.MatCommonModule,
-                        button.MatButtonModule,
-                        formField.MatFormFieldModule,
-                        input.MatInputModule,
-                        menu.MatMenuModule,
-                        icon$1.MatIconModule,
-                        dialog$1.MatDialogModule,
-                        // External modules
-                        ngxQuill.QuillModule.forRoot(),
-                        // ngx-lib modules
-                        ngxLib.PepNgxLibModule,
-                        icon.PepIconModule,
-                        fieldTitle.PepFieldTitleModule,
-                        textboxIcon.PepTextboxIconModule,
-                        dialog.PepDialogModule,
-                    ],
-                    exports: [PepRichHtmlTextareaComponent],
-                    declarations: [PepRichHtmlTextareaComponent],
-                },] }
-    ];
-    PepRichHtmlTextareaModule.ctorParameters = function () { return [
-        { type: icon.PepIconRegistry }
+    var PepRichHtmlTextareaModule = /** @class */ (function () {
+        function PepRichHtmlTextareaModule(pepIconRegistry) {
+            this.pepIconRegistry = pepIconRegistry;
+            this.pepIconRegistry.registerIcons([
+                icon.pepIconSystemEdit,
+                icon.pepIconSystemClose,
+            ]);
+        }
+        return PepRichHtmlTextareaModule;
+    }());
+    PepRichHtmlTextareaModule.decorators = [
+        { type: core.NgModule, args: [{
+                    imports: [
+                        common.CommonModule,
+                        forms.ReactiveFormsModule,
+                        forms.FormsModule,
+                        // Material modules,
+                        core$1.MatCommonModule,
+                        button.MatButtonModule,
+                        formField.MatFormFieldModule,
+                        input.MatInputModule,
+                        menu.MatMenuModule,
+                        icon$1.MatIconModule,
+                        dialog$1.MatDialogModule,
+                        // External modules
+                        ngxQuill.QuillModule.forRoot(),
+                        // ngx-lib modules
+                        ngxLib.PepNgxLibModule,
+                        icon.PepIconModule,
+                        fieldTitle.PepFieldTitleModule,
+                        textboxIcon.PepTextboxIconModule,
+                        dialog.PepDialogModule,
+                    ],
+                    exports: [PepRichHtmlTextareaComponent],
+                    declarations: [PepRichHtmlTextareaComponent],
+                },] }
+    ];
+    PepRichHtmlTextareaModule.ctorParameters = function () { return [
+        { type: icon.PepIconRegistry }
     ]; };
 
-    /*
-     * Public API Surface of ngx-lib/rich-html-textarea
+    /*
+     * Public API Surface of ngx-lib/rich-html-textarea
      */
 
-    /**
-     * Generated bundle index. Do not edit.
+    /**
+     * Generated bundle index. Do not edit.
      */
 
     exports.PepRichHtmlTextareaComponent = PepRichHtmlTextareaComponent;