@pepperi-addons/ngx-lib 0.3.4 → 0.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/pepperi-addons-ngx-lib-rich-html-textarea.umd.js +1 -1
- package/bundles/pepperi-addons-ngx-lib-textarea.umd.js +1 -1
- package/esm2015/rich-html-textarea/rich-html-textarea.component.js +1 -1
- package/esm2015/textarea/textarea.component.js +1 -1
- package/fesm2015/pepperi-addons-ngx-lib-rich-html-textarea.js +1 -1
- package/fesm2015/pepperi-addons-ngx-lib-textarea.js +1 -1
- package/package.json +1 -1
- package/rich-html-textarea/pepperi-addons-ngx-lib-rich-html-textarea.metadata.json +1 -1
- package/rich-html-textarea/rich-html-textarea.component.theme.scss +4 -2
- package/src/core/style/components/textarea.scss +25 -22
- package/textarea/pepperi-addons-ngx-lib-textarea.metadata.json +1 -1
|
@@ -206,7 +206,7 @@
|
|
|
206
206
|
selector: 'pep-rich-html-textarea',
|
|
207
207
|
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 }}: </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> </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>",
|
|
208
208
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
209
|
-
styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .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 .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}"]
|
|
209
|
+
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}"]
|
|
210
210
|
},] }
|
|
211
211
|
];
|
|
212
212
|
PepRichHtmlTextareaComponent.ctorParameters = function () { return [
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
selector: 'pep-textarea',
|
|
149
149
|
template: "<ng-container [formGroup]=\"form\">\n <ng-template #pepTemplate let-isFormView=\"isFormView\">\n <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n 'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n 'pep-textarea-card-container': layoutType === 'card'}\">\n <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\"\n [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n </pep-field-title>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table' }\">\n <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n title=\"{{ value }}\" [value]=\"value\"\n maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n [formControlName]=\"key\" [style.height]=\"fieldHeight\">\n </textarea>\n <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n </div>\n <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon> -->\n <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n [disabled]=\"disabled || readonly\"\n [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n <mat-error>\n <span class=\"body-xs\"\n [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n </mat-error>\n </mat-form-field>\n </div>\n </ng-template>\n\n <ng-container *ngIf=\"layoutType === 'form'\">\n <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"layoutType === 'card'\">\n <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n <ng-template #editBlock>\n <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n </ng-template>\n <ng-template #readOnlyBlock>\n <div class=\"pep-textarea-card-container card-flex-container\"\n [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n }} </span>\n <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n <mat-icon>\n <pep-icon name=\"system_edit\">\n </pep-icon>\n </mat-icon>\n </button>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"layoutType === 'table'\">\n <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n <ng-template #selectedBlock>\n <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n </ng-template>\n <ng-template #notSelectedBlock>\n <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n <ng-template #notEmptyBlock>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n </mat-form-field>\n </ng-template>\n <ng-template #emptyBlock>\n <span> </span>\n </ng-template>\n </ng-template>\n </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\">\n <ng-container pep-dialog-content>\n <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea>\n </ng-container>\n <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\n </ng-container>\n <ng-template #editableBlock>\n <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n {{ 'ACTIONS.CANCEL' | translate }}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\"\n (click)=\"closeDialog(dialogTextarea.value)\">\n {{ 'ACTIONS.SAVE' | translate }}\n </button>\n </ng-template>\n <ng-template #notEditableBlock>\n <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n {{ 'ACTIONS.CLOSE' | translate }}\n </button>\n </ng-template>\n </div>\n </pep-dialog>\n</ng-template>",
|
|
150
150
|
changeDetection: core.ChangeDetectionStrategy.OnPush,
|
|
151
|
-
styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}", ".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .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}"]
|
|
151
|
+
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:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}", ".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}"]
|
|
152
152
|
},] }
|
|
153
153
|
];
|
|
154
154
|
PepTextareaComponent.ctorParameters = function () { return [
|
|
@@ -186,7 +186,7 @@ PepRichHtmlTextareaComponent.decorators = [
|
|
|
186
186
|
selector: 'pep-rich-html-textarea',
|
|
187
187
|
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 }}: </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> </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>",
|
|
188
188
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
189
|
-
styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .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 .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}"]
|
|
189
|
+
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}"]
|
|
190
190
|
},] }
|
|
191
191
|
];
|
|
192
192
|
PepRichHtmlTextareaComponent.ctorParameters = () => [
|
|
@@ -129,7 +129,7 @@ PepTextareaComponent.decorators = [
|
|
|
129
129
|
selector: 'pep-textarea',
|
|
130
130
|
template: "<ng-container [formGroup]=\"form\">\n <ng-template #pepTemplate let-isFormView=\"isFormView\">\n <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n 'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n 'pep-textarea-card-container': layoutType === 'card'}\">\n <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\"\n [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n </pep-field-title>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table' }\">\n <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n title=\"{{ value }}\" [value]=\"value\"\n maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n [formControlName]=\"key\" [style.height]=\"fieldHeight\">\n </textarea>\n <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n </div>\n <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon> -->\n <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n [disabled]=\"disabled || readonly\"\n [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n <mat-error>\n <span class=\"body-xs\"\n [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n </mat-error>\n </mat-form-field>\n </div>\n </ng-template>\n\n <ng-container *ngIf=\"layoutType === 'form'\">\n <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"layoutType === 'card'\">\n <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n <ng-template #editBlock>\n <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n </ng-template>\n <ng-template #readOnlyBlock>\n <div class=\"pep-textarea-card-container card-flex-container\"\n [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n }} </span>\n <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n <mat-icon>\n <pep-icon name=\"system_edit\">\n </pep-icon>\n </mat-icon>\n </button>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"layoutType === 'table'\">\n <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n <ng-template #selectedBlock>\n <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n </ng-template>\n <ng-template #notSelectedBlock>\n <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n <ng-template #notEmptyBlock>\n <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n </pep-textbox-icon>\n </mat-form-field>\n </ng-template>\n <ng-template #emptyBlock>\n <span> </span>\n </ng-template>\n </ng-template>\n </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\">\n <ng-container pep-dialog-content>\n <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea>\n </ng-container>\n <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\n </ng-container>\n <ng-template #editableBlock>\n <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n {{ 'ACTIONS.CANCEL' | translate }}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\"\n (click)=\"closeDialog(dialogTextarea.value)\">\n {{ 'ACTIONS.SAVE' | translate }}\n </button>\n </ng-template>\n <ng-template #notEditableBlock>\n <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n {{ 'ACTIONS.CLOSE' | translate }}\n </button>\n </ng-template>\n </div>\n </pep-dialog>\n</ng-template>",
|
|
131
131
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
132
|
-
styles: [".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex{padding:0}:host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}", ".pep-textarea-container,.pepperi-textarea-container{height:inherit;display:grid;align-items:center}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{display:flex}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:unset;width:100%;height:100%;overflow:hidden;display:grid!important}.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-prefix,.pep-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-prefix,.pepperi-textarea-container ::ng-deep .mat-form-field .mat-form-field-suffix{align-self:flex-end!important;margin-bottom:.5rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:.35rem}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix{align-self:center!important;margin-bottom:unset}.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pep-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .card-one-row-icon .pepperi-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .card-one-row-icon .pep-button,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pep-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pep-table-textarea .mat-input-element,.pepperi-textarea-container.one-row ::ng-deep .mat-form-field.pepperi-table-textarea .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-container.right-alignment ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex,.pepperi-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{padding-left:.5rem;padding-right:.5rem}.pep-textarea-card-container ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-input-element,.pepperi-textarea-card-container ::ng-deep .mat-form-field .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 ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix{line-height:0!important}.pep-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element,.pepperi-textarea-card-container.one-row ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-infix .mat-input-element{padding-top:0;padding-bottom:0}.pep-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element,.pepperi-textarea-card-container.right-alignment ::ng-deep .mat-form-field .mat-form-field-wrapper .mat-input-element{padding:.25rem 0 .5rem 1.5rem}.pep-report-textarea .mat-form-field-suffix,.pepperi-report-textarea .mat-form-field-suffix{right:0!important}.pep-report-textarea.readonly .mat-form-field-wrapper .mat-form-field-flex,.pepperi-report-textarea.readonly .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}"]
|
|
132
|
+
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:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}", ".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}"]
|
|
133
133
|
},] }
|
|
134
134
|
];
|
|
135
135
|
PepTextareaComponent.ctorParameters = () => [
|