npm - @pepperi-addons/ngx-lib - Versions diffs - 0.2.59-query-builder.13 → 0.2.61-beta.2 - Mend

@pepperi-addons/ngx-lib 0.2.59-query-builder.13 → 0.2.61-beta.2

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

Files changed (483) hide show

package/signature/pepperi-addons-ngx-lib-signature.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepSignatureModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":27,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":35,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":36,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":37,"character":8},{"__symbolic":"reference","module":"ngx-signaturepad","name":"SignaturePadModule","line":39,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":41,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":42,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":43,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":44,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":45,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSignatureComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSignatureComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":51,"character":41}]}]}},"PepSignatureComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"pep-signature","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\r\n <ng-container>\r\n <ng-template #pepTemplate>\r\n <mat-form-field [formGroup]=\"form\" appearance=\"outline\">\r\n <div class=\"pep-file-wrapper\">\r\n <div class=\"pep-file body-sm\" [ngClass]=\"{ disable: disabled }\" [style.height]=\"fieldHeight\">\r\n <ng-container ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\r\n <ng-template #withImg>\r\n <button ngIf=\"!disabled\" mat-button (click)=\"deleteSignature($event)\"\r\n class=\"pep-button icon-button weak md delete\" tabindex=\"-1\"\r\n [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\r\n <mat-icon>\r\n <pep-icon name=\"system_bin\"></pep-icon>\r\n </mat-icon>\r\n </button>\r\n <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\r\n <img [src]=\"src\" [style.max-height]=\"fieldHeight\" class=\"pep-file-preview-img\"\r\n (error)=\"errorHandler($event)\" [alt]=\"label\"\r\n [ngClass]=\"['text-align-' + xAlignment]\" />\r\n </div>\r\n </ng-template>\r\n <ng-template #noImg>\r\n <div class=\"ellipsis pep-file-message\">\r\n <mat-icon class=\"pep-spacing-element\">\r\n <pep-icon name=\"system_signature\"></pep-icon>\r\n </mat-icon>\r\n <span class=\"body-sm ellipsis\">\r\n {{ (disabled ? 'MESSAGES.INFO_MISSING_SIGNATURE' : 'SIGNATURE.HINT') \| translate }}\r\n </span>\r\n </div>\r\n </ng-template>\r\n </div>\r\n <input [id]=\"key\" matInput [formControlName]=\"key\" class=\"hidden-input signature\" type=\"text\"\r\n [value]=\"src\" (click)=\"openSignModal()\" (keypress)=\"onKeyPress_OpenSignModal($event)\"\r\n autocomplete=\"off\" readonly />\r\n </div>\r\n\r\n <mat-error><span class=\"body-xs\"\r\n [title]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' \| translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' \| translate: { field: label })\"\r\n [innerText]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' \| translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' \| translate: { field: label })\"></span>\r\n </mat-error>\r\n </mat-form-field>\r\n </ng-template>\r\n\r\n <ng-container ngIf=\"layoutType === 'form'\">\r\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone}\">\r\n <pep-field-title ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\r\n [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\r\n </pep-field-title>\r\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container ngIf=\"layoutType === 'card'\">\r\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\r\n </ng-container>\r\n <ng-template #selectedBlock>\r\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1}\">\r\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n </div>\r\n </ng-template>\r\n <ng-template #notSelectedBlock>\r\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1 }\">\r\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: false}\">\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container ngIf=\"layoutType === 'table'\">\r\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\r\n </ng-container>\r\n <ng-template #selectedBlock>\r\n <div class=\"pep-file-container one-row\">\r\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n </div>\r\n </ng-template>\r\n <ng-template #notSelectedBlock>\r\n <div class=\"pep-file-container one-row\">\r\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: true}\">\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- <ng-container ngIf=\"inDialog === true\">\r\n <ng-container ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\r\n </ng-container> -->\r\n\r\n <!-- <div ngIf=\"inDialog === false\" class=\"signature-backdrop modal\" [ngClass]=\"{ fade: !isVisibleModal }\" tabindex=\"-1\"\r\n role=\"dialog\" aria-labelledby=\"gridModalLabel\" aria-hidden=\"true\"\r\n [ngStyle]=\"{ display: isVisibleModal ? 'block' : 'none' }\">\r\n <div class=\"signature-modal modal-dialog\" role=\"document\">\r\n <div class=\"modal-content\">\r\n <ng-container ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n <ng-template #pepReadonlyTemplate let-isTableView=\"isTableView\">\r\n <div class=\"pep-file-container\">\r\n <div class=\"pep-file-wrapper\">\r\n <div class=\"pep-file body-sm disable\">\r\n <ng-container ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\r\n <ng-template #withImg>\r\n <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\r\n <img ngIf=\"!isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\r\n class=\"pep-file-preview-img\" (error)=\"errorHandler($event)\" [alt]=\"label\"\r\n [ngClass]=\"['text-align-' + xAlignment]\" />\r\n <img ngIf=\"isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\r\n class=\"pep-report-file pep-file-preview-img\" (error)=\"errorHandler($event)\"\r\n [alt]=\"label\" [ngClass]=\"['text-align-' + xAlignment]\" />\r\n </div>\r\n </ng-template>\r\n <ng-template #noImg></ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template #signaturePopupPad>\r\n <pep-dialog [title]=\"'SIGNATURE.DIALOG_TITLE' \| translate\" [showFooter]=\"showActionBtn\">\r\n <ng-container pep-dialog-content>\r\n <signature-pad #signaturePad [options]=\"signaturePadOptions\" (onBeginEvent)=\"drawStart()\"\r\n (onEndEvent)=\"drawComplete()\">\r\n </signature-pad>\r\n </ng-container>\r\n <div pep-dialog-actions class=\"pep-spacing-element-negative\">\r\n <button mat-button class=\"pep-spacing-element pep-button md weak\" [disabled]=\"readonly \|\| disabled\"\r\n (click)=\"clearSignModal()\">\r\n {{ 'ACTIONS.CLEAR' \| translate }}\r\n </button>\r\n <button mat-button class=\"pep-spacing-element pep-button md strong\" [disabled]=\"readonly \|\| disabled\"\r\n (click)=\"saveSignModal($event)\">\r\n {{ 'ACTIONS.DONE' \| translate }}\r\n </button>\r\n </div>\r\n </pep-dialog>\r\n </ng-template>\r\n\r\n</ng-container>","styles":[":host{display:block}signature-pad{display:grid;width:inherit;height:inherit}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"signatureURL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":5}}]}],"signaturePad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":97,"character":5},"arguments":["signaturePad"]}]}],"signaturePopupPad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":98,"character":5},"arguments":["signaturePopupPad",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":98,"character":44}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":119,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":120,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":121,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":122,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":123,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":124,"character":25}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"drawComplete":[{"__symbolic":"method"}],"drawStart":[{"__symbolic":"method"}],"openSignModal":[{"__symbolic":"method"}],"openSignatoreDlg":[{"__symbolic":"method"}],"afterDialogOpened":[{"__symbolic":"method"}],"clearSignModal":[{"__symbolic":"method"}],"deleteSignature":[{"__symbolic":"method"}],"saveSignModal":[{"__symbolic":"method"}],"errorHandler":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"onKeyPress_OpenSignModal":[{"__symbolic":"method"}]}}},"origins":{"PepSignatureModule":"./signature.module","PepSignatureComponent":"./signature.component"},"importAs":"@pepperi-addons/ngx-lib/signature"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepSignatureModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":27,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":34,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":35,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":36,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":37,"character":8},{"__symbolic":"reference","module":"ngx-signaturepad","name":"SignaturePadModule","line":39,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":41,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":42,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":43,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":44,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":45,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSignatureComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSignatureComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":51,"character":41}]}]}},"PepSignatureComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"pep-signature","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":32,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n <ng-container>\n <ng-template #pepTemplate>\n <mat-form-field [formGroup]=\"form\" appearance=\"outline\">\n <div class=\"pep-file-wrapper\">\n <div class=\"pep-file body-sm\" [ngClass]=\"{ disable: disabled }\" [style.height]=\"fieldHeight\">\n <ng-container ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\n <ng-template #withImg>\n <button ngIf=\"!disabled\" mat-button (click)=\"deleteSignature($event)\"\n class=\"pep-button icon-button weak md delete\" tabindex=\"-1\"\n [ngClass]=\"{ 'right-alignment': xAlignment == 'right' }\">\n <mat-icon>\n <pep-icon name=\"system_bin\"></pep-icon>\n </mat-icon>\n </button>\n <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\n <img [src]=\"src\" [style.max-height]=\"fieldHeight\" class=\"pep-file-preview-img\"\n (error)=\"errorHandler($event)\" [alt]=\"label\"\n [ngClass]=\"['text-align-' + xAlignment]\" />\n </div>\n </ng-template>\n <ng-template #noImg>\n <div class=\"ellipsis pep-file-message\">\n <mat-icon class=\"pep-spacing-element\">\n <pep-icon name=\"system_signature\"></pep-icon>\n </mat-icon>\n <span class=\"body-sm ellipsis\">\n {{ (disabled ? 'MESSAGES.INFO_MISSING_SIGNATURE' : 'SIGNATURE.HINT') \| translate }}\n </span>\n </div>\n </ng-template>\n </div>\n <input [id]=\"key\" matInput [formControlName]=\"key\" class=\"hidden-input signature\" type=\"text\"\n [value]=\"src\" (click)=\"openSignModal()\" (keypress)=\"onKeyPress_OpenSignModal($event)\"\n autocomplete=\"off\" readonly />\n </div>\n\n <mat-error><span class=\"body-xs\"\n [title]=\"mandatory && src.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' \| translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' \| translate: { field: label })\"\n [innerText]=\"mandatory && src.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 </ng-template>\n\n <ng-container ngIf=\"layoutType === 'form'\">\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone}\">\n <pep-field-title ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\n </pep-field-title>\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'card'\">\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\n </ng-container>\n <ng-template #selectedBlock>\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1}\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #notSelectedBlock>\n <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1 }\">\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: false}\">\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n\n <ng-container ngIf=\"layoutType === 'table'\">\n <ng-container ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\">\n </ng-container>\n <ng-template #selectedBlock>\n <div class=\"pep-file-container one-row\">\n <ng-container ngTemplateOutlet=\"pepTemplate\"></ng-container>\n </div>\n </ng-template>\n <ng-template #notSelectedBlock>\n <div class=\"pep-file-container one-row\">\n <ng-container ngTemplateOutlet=\"pepReadonlyTemplate; context: { isTableView: true}\">\n </ng-container>\n </div>\n </ng-template>\n </ng-container>\n </ng-container>\n\n <!-- <ng-container ngIf=\"inDialog === true\">\n <ng-container ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\n </ng-container> -->\n\n <!-- <div ngIf=\"inDialog === false\" class=\"signature-backdrop modal\" [ngClass]=\"{ fade: !isVisibleModal }\" tabindex=\"-1\"\n role=\"dialog\" aria-labelledby=\"gridModalLabel\" aria-hidden=\"true\"\n [ngStyle]=\"{ display: isVisibleModal ? 'block' : 'none' }\">\n <div class=\"signature-modal modal-dialog\" role=\"document\">\n <div class=\"modal-content\">\n <ng-container ngTemplateOutlet=\"signaturePopupPad\"></ng-container>\n </div>\n </div>\n </div> -->\n\n <ng-template #pepReadonlyTemplate let-isTableView=\"isTableView\">\n <div class=\"pep-file-container\">\n <div class=\"pep-file-wrapper\">\n <div class=\"pep-file body-sm disable\">\n <ng-container ngIf=\"src != ''; then withImg; else noImg\"></ng-container>\n <ng-template #withImg>\n <div class=\"pep-file-preview\" (click)=\"openSignModal()\">\n <img ngIf=\"!isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\n class=\"pep-file-preview-img\" (error)=\"errorHandler($event)\" [alt]=\"label\"\n [ngClass]=\"['text-align-' + xAlignment]\" />\n <img ngIf=\"isTableView\" [src]=\"src\" [style.max-height]=\"fieldHeight\"\n class=\"pep-report-file pep-file-preview-img\" (error)=\"errorHandler($event)\"\n [alt]=\"label\" [ngClass]=\"['text-align-' + xAlignment]\" />\n </div>\n </ng-template>\n <ng-template #noImg></ng-template>\n </div>\n </div>\n </div>\n </ng-template>\n\n <ng-template #signaturePopupPad>\n <pep-dialog [title]=\"'SIGNATURE.DIALOG_TITLE' \| translate\" [showFooter]=\"showActionBtn\">\n <ng-container pep-dialog-content>\n <signature-pad #signaturePad [options]=\"signaturePadOptions\" (onBeginEvent)=\"drawStart()\"\n (onEndEvent)=\"drawComplete()\">\n </signature-pad>\n </ng-container>\n <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n <button mat-button class=\"pep-spacing-element pep-button md weak\" [disabled]=\"readonly \|\| disabled\"\n (click)=\"clearSignModal()\">\n {{ 'ACTIONS.CLEAR' \| translate }}\n </button>\n <button mat-button class=\"pep-spacing-element pep-button md strong\" [disabled]=\"readonly \|\| disabled\"\n (click)=\"saveSignModal($event)\">\n {{ 'ACTIONS.DONE' \| translate }}\n </button>\n </div>\n </pep-dialog>\n </ng-template>\n\n</ng-container>","styles":[".pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper{position:relative;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);cursor:pointer;padding:1px .25rem}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file{border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);display:grid;justify-content:center;align-items:center;width:100%;max-width:100%;height:inherit;text-align:center}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message{display:grid;align-items:center;justify-items:center}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message a,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message a,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message a,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message a{display:grid;align-items:center;justify-items:center}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message span,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message span,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message span,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message span,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message span,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message span,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message span,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message span{width:100%}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview{display:grid;align-items:center;justify-items:center;z-index:2}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview img{-o-object-fit:contain;object-fit:contain;max-height:100%;max-height:-webkit-fill-available;max-height:-moz-available;max-height:stretch;max-width:100%;max-width:-webkit-fill-available;max-width:-moz-available;max-width:stretch;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button{height:calc(2.5rem + 2px);max-height:calc(2.5rem + 2px);width:2.5rem;max-width:2.5rem;position:absolute;z-index:9;top:0;right:0;border-radius:0 .25rem 0 .25rem;border-radius:0 var(--pep-border-radius-md,.25rem) 0 var(--pep-border-radius-md,.25rem);padding:0;justify-content:center}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button mat-icon{vertical-align:middle}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.right-alignment{right:unset;left:0;border-radius:.25rem 0 .25rem 0;border-radius:var(--pep-border-radius-md,.25rem) 0 var(--pep-border-radius-md,.25rem) 0}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file input,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file input,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file input,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file input,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file input,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file input,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file input,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file input{position:absolute;height:100%;width:100%;opacity:0;cursor:pointer;z-index:5}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .hidden-input,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .hidden-input,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .hidden-input,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .hidden-input{position:absolute;top:0;opacity:0;cursor:pointer;z-index:1;width:100%;height:100%}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .hidden-input.signature,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .hidden-input.signature,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .hidden-input.signature,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .hidden-input.signature{z-index:6}.pep-file-container ::ng-deep .mat-form-field.mat-form-field-disabled .hidden-input,.pepperi-file-container ::ng-deep .mat-form-field.mat-form-field-disabled .hidden-input{cursor:auto!important}.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message{display:flex}.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message a{display:flex}.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button{border-radius:0 .25rem .25rem 0;border-radius:0 var(--pep-border-radius-md,.25rem) var(--pep-border-radius-md,.25rem) 0}.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.right-alignment{right:unset;left:.0625rem;border-radius:.25rem 0 0 .25rem;border-radius:var(--pep-border-radius-md,.25rem) 0 0 var(--pep-border-radius-md,.25rem)}.pep-report-file,.pepperi-report-file{cursor:pointer;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}.pep-file-container,.pepperi-file-container{display:grid}.pep-file-container ::ng-deep .mat-form-field .mat-form-field-flex,.pepperi-file-container ::ng-deep .mat-form-field .mat-form-field-flex{padding:0!important}.pep-file-container ::ng-deep .mat-form-field .mat-form-field-flex .mat-form-field-infix,.pepperi-file-container ::ng-deep .mat-form-field .mat-form-field-flex .mat-form-field-infix{display:block!important;width:100%}:host{display:block}signature-pad{display:grid;width:inherit;height:inherit}",".pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper{border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);cursor:pointer;padding:1px .25rem}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file{border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);display:grid;justify-content:center;align-items:center;width:100%;max-width:100%;height:inherit;text-align:center}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message{display:grid;align-items:center;justify-items:center}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message a,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message a,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message a,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message a{display:grid;align-items:center;justify-items:center}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message span,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message span,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message span,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message span,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message span,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message span,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message span,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message span,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message span{width:100%}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview{display:grid;align-items:center;justify-items:center;z-index:2}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview img,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview img,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview img{-o-object-fit:contain;object-fit:contain;max-height:100%;max-height:-webkit-fill-available;max-height:-moz-available;max-height:stretch;max-width:100%;max-width:-webkit-fill-available;max-width:-moz-available;max-width:stretch;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button{height:calc(2.5rem + 2px);max-height:calc(2.5rem + 2px);width:2.5rem;max-width:2.5rem;position:absolute;z-index:9;top:0;right:0;border-radius:0 .25rem 0 .25rem;border-radius:0 var(--pep-border-radius-md,.25rem) 0 var(--pep-border-radius-md,.25rem);padding:0;justify-content:center}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button mat-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button mat-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button mat-icon{vertical-align:middle}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.right-alignment,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.right-alignment,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.right-alignment{right:unset;left:0;border-radius:.25rem 0 .25rem 0;border-radius:var(--pep-border-radius-md,.25rem) 0 var(--pep-border-radius-md,.25rem) 0}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file input,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file input,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file input,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file input,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file input,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file input,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file input,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file input{position:absolute;height:100%;width:100%;opacity:0;cursor:pointer;z-index:5}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .hidden-input,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .hidden-input,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .hidden-input,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .hidden-input{position:absolute;top:0;opacity:0;cursor:pointer;z-index:1;width:100%;height:100%}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .hidden-input.signature,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .hidden-input.signature,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .hidden-input.signature,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .hidden-input.signature{z-index:6}.pep-file-container ::ng-deep .mat-form-field.mat-form-field-disabled .hidden-input,.pepperi-file-container ::ng-deep .mat-form-field.mat-form-field-disabled .hidden-input{cursor:auto!important}.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message{display:flex}.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message a,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-message a,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-message a{display:flex}.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button{border-radius:0 .25rem .25rem 0;border-radius:0 var(--pep-border-radius-md,.25rem) var(--pep-border-radius-md,.25rem) 0}.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.right-alignment,.pep-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.right-alignment,.pepperi-file-container.one-row ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.right-alignment{right:unset;left:.0625rem;border-radius:.25rem 0 0 .25rem;border-radius:var(--pep-border-radius-md,.25rem) 0 0 var(--pep-border-radius-md,.25rem)}.pep-report-file,.pepperi-report-file{cursor:pointer;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}.pep-file-container,.pepperi-file-container{display:grid}.pep-file-container ::ng-deep .mat-form-field .mat-form-field-flex,.pepperi-file-container ::ng-deep .mat-form-field .mat-form-field-flex{padding:0!important}.pep-file-container ::ng-deep .mat-form-field .mat-form-field-flex .mat-form-field-infix,.pepperi-file-container ::ng-deep .mat-form-field .mat-form-field-flex .mat-form-field-infix{display:block!important;width:100%}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper{color:rgba(26,26,26,.7);color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.7);position:relative}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper:after,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper:after,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper:after,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper: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 dashed hsl(0,0%,calc(10% + 30%));border:1px dashed hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),calc(var(--pep-color-system-primary-l, 10%) + 30%))}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button{color:#fff;color: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%))}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.delete,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.delete,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.delete,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.delete,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.delete,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.delete,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.delete,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.delete,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.delete,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.delete,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.delete,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.delete,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.delete,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.delete,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.delete,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.delete{background-color:rgba(26,26,26,.5);background-color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.5)}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.delete .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.delete .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.delete .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.delete .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.delete .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.delete .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.delete .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.delete .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.delete .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.delete .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.delete .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.delete .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.delete .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.delete .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.delete .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.delete .svg-icon{fill:#fff;fill: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%))}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.delete:hover,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.delete:hover,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.delete:hover,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.delete:hover,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.delete:hover,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.delete:hover,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.delete:hover,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.delete:hover,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-button.delete:hover,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-button.delete:hover,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-button.delete:hover,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-button.delete:hover,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-button.delete:hover,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-button.delete:hover,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-button.delete:hover,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-button.delete:hover{background:#e60000;background:hsl(var(--pep-color-system-caution-h,360),var(--pep-color-system-caution-s,100%),var(--pep-color-system-caution-l,45%));box-shadow:0 .125rem .25rem 0 rgba(26,26,26,.16);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%),.16)}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .svg-icon{fill:rgba(26,26,26,.7);fill:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.7)}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview a,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview a,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview a,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview a,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview a,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview a,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview a{color:#1766a6;color:hsl(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%))}.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview a .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview a .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview a .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview a .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview a .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview a .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview a .svg-icon,.pep-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview a .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pep-file-preview a .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pep-file .pepperi-file-preview a .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pep-file-preview a .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pep-file-wrapper .pepperi-file .pepperi-file-preview a .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pep-file-preview a .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pep-file .pepperi-file-preview a .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pep-file-preview a .svg-icon,.pepperi-file-container ::ng-deep .mat-form-field .pepperi-file-wrapper .pepperi-file .pepperi-file-preview a .svg-icon{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%))}.pep-file-container ::ng-deep .mat-form-field.mat-form-field-disabled .pep-file-wrapper:after,.pep-file-container ::ng-deep .mat-form-field.mat-form-field-disabled .pepperi-file-wrapper:after,.pepperi-file-container ::ng-deep .mat-form-field.mat-form-field-disabled .pep-file-wrapper:after,.pepperi-file-container ::ng-deep .mat-form-field.mat-form-field-disabled .pepperi-file-wrapper:after{border:unset}.pep-file-container .modal-dialog .modal-content,.pepperi-file-container .modal-dialog .modal-content{color:rgba(26,26,26,.7);color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.7)}.pep-signature-container .mat-form-field-flex,.pepperi-signature-container .mat-form-field-flex{padding:0!important}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"signatureURL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":5}}]}],"signaturePad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":97,"character":5},"arguments":["signaturePad"]}]}],"signaturePopupPad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":98,"character":5},"arguments":["signaturePopupPad",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":98,"character":44}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":119,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":120,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":121,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":122,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":123,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":124,"character":25}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"drawComplete":[{"__symbolic":"method"}],"drawStart":[{"__symbolic":"method"}],"openSignModal":[{"__symbolic":"method"}],"openSignatoreDlg":[{"__symbolic":"method"}],"afterDialogOpened":[{"__symbolic":"method"}],"clearSignModal":[{"__symbolic":"method"}],"deleteSignature":[{"__symbolic":"method"}],"saveSignModal":[{"__symbolic":"method"}],"errorHandler":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"onKeyPress_OpenSignModal":[{"__symbolic":"method"}]}}},"origins":{"PepSignatureModule":"./signature.module","PepSignatureComponent":"./signature.component"},"importAs":"@pepperi-addons/ngx-lib/signature"}

package/signature/signature.component.theme.scss CHANGED Viewed

@@ -1,28 +1,12 @@
-// -----------------------------------------------------
-//  Override material style
-// -----------------------------------------------------
-.pepperi-signature-container, .pep-signature-container {
-    .mat-form-field-flex {
-        padding: 0 !important;
-    }
-}
-@mixin pep-signature-component-theme($pepperi-theme) {
-    // .signature-backdrop {
-    //     background-color: get-pep-color($pepperi-theme, color-system-primary, color-tran-60);
-    // }
-    // .signature-modal {
-    //     &.modal-dialog {
-    //         .modal-content {
-    //             box-shadow: get-pep-shadow($pepperi-theme, shadow-md, regular);
-    //             .modal-header {
-    //                 h3 {
-    //                     color: get-pep-color($pepperi-theme, color-text, color-dimmed);
-    //                 }
-    //             }
-    //         }
-    //     }
-    // }
-}
+@use '../src/core/style/components/file';
+@include file.pep-file-theme();
+// -----------------------------------------------------
+//  Override material style
+// -----------------------------------------------------
+.pepperi-signature-container, .pep-signature-container {
+    .mat-form-field-flex {
+        padding: 0 !important;
+    }
+}

package/size-detector/pepperi-addons-ngx-lib-size-detector.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepSizeDetectorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":12,"character":8},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":13,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":15,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSizeDetectorComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSizeDetectorComponent"}]}]}],"members":{}},"PepSizeDetectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"pep-size-detector","template":"<!-- Bootstrap -->\r\n<!-- <div ngFor=\"let s of sizes\" class=\"{{s.css + ' ' + (prefix + s.id) }}\">{{s.name}}</div> -->\r\n\r\n<!-- Angular flex-layout -->\r\n<div ngFor=\"let s of sizes\" fxShow.xs=\"{{s.name == 'xs'}}\" fxShow.sm=\"{{s.name == 'sm'}}\"\r\n fxShow.md=\"{{s.name == 'md'}}\" fxShow.lg=\"{{s.name == 'lg'}}\" fxShow.xl=\"{{s.name == 'xl'}}\"\r\n class=\"{{s.css + ' ' + (prefix + s.id) }}\">\r\n <ng-container *ngIf=\"showScreenSize\"> The current screen size is - {{s.name}}</ng-container>\r\n</div>"}]}],"members":{"showScreenSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"sizeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":71,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":72,"character":31}]}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":80,"character":5},"arguments":["window:resize",["$event"]]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"detectScreenSize":[{"__symbolic":"method"}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"getCurrentSize":[{"__symbolic":"method"}]}}},"origins":{"PepSizeDetectorModule":"./size-detector.module","PepSizeDetectorComponent":"./size-detector.component"},"importAs":"@pepperi-addons/ngx-lib/size-detector"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepSizeDetectorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":11,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":12,"character":8},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":13,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":15,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSizeDetectorComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSizeDetectorComponent"}]}]}],"members":{}},"PepSizeDetectorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"pep-size-detector","template":"<!-- Bootstrap -->\n<!-- <div ngFor=\"let s of sizes\" class=\"{{s.css + ' ' + (prefix + s.id) }}\">{{s.name}}</div> -->\n\n<!-- Angular flex-layout -->\n<div ngFor=\"let s of sizes\" fxShow.xs=\"{{s.name == 'xs'}}\" fxShow.sm=\"{{s.name == 'sm'}}\"\n fxShow.md=\"{{s.name == 'md'}}\" fxShow.lg=\"{{s.name == 'lg'}}\" fxShow.xl=\"{{s.name == 'xl'}}\"\n class=\"{{s.css + ' ' + (prefix + s.id) }}\">\n <ng-container *ngIf=\"showScreenSize\"> The current screen size is - {{s.name}}</ng-container>\n</div>"}]}],"members":{"showScreenSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"sizeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":36,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":71,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":72,"character":31}]}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":80,"character":5},"arguments":["window:resize",["$event"]]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"detectScreenSize":[{"__symbolic":"method"}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"getCurrentSize":[{"__symbolic":"method"}]}}},"origins":{"PepSizeDetectorModule":"./size-detector.module","PepSizeDetectorComponent":"./size-detector.component"},"importAs":"@pepperi-addons/ngx-lib/size-detector"}

package/slider/pepperi-addons-ngx-lib-slider.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"__symbolic":"module","version":4,"metadata":{"PepSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":14,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":15,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":17,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":18,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSliderComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSliderComponent"}]}]}],"members":{}},"PepSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"pep-slider","template":"<div class=\"pep-slider-container\">\r\n <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\r\n </pep-field-title>\r\n <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\r\n (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\r\n </mat-slider>\r\n</div>","styles":[""]}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"minValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"maxValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":5}}]}],"inputChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":67,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":67,"character":62},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":67,"character":100}]}],"setBackground":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}]}}},"origins":{"PepSliderModule":"./slider.module","PepSliderComponent":"./slider.component"},"importAs":"@pepperi-addons/ngx-lib/slider"}
1	+ {"__symbolic":"module","version":4,"metadata":{"PepSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":10,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":14,"character":8},{"__symbolic":"reference","module":"@angular/material/slider","name":"MatSliderModule","line":15,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":17,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":18,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSliderComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSliderComponent"}]}]}],"members":{}},"PepSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"pep-slider","template":"<div class=\"pep-slider-container\">\n <pep-field-title [label]=\"label\" [disabled]=\"disabled\" [hint]=\"hint\" [xAlignment]=\"xAlignment\">\n </pep-field-title>\n <mat-slider [min]=\"minValue\" [max]=\"maxValue\" [step]=\"step\" [value]=\"value\" [disabled]=\"disabled\" [title]=\"value\"\n (change)=\"onValueChange($event)\" (input)=\"onInputChange($event)\">\n </mat-slider>\n</div>","styles":["",".pep-slider-container ::ng-deep.mat-slider{background:rgba(26,26,26,.12);background:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.12)}.pep-slider-container ::ng-deep.mat-slider.mat-slider-horizontal{height:1rem;width:100%;padding:.5rem .25rem;border-radius:.5rem;border-radius:var(--pep-border-radius-lg,.5rem)}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper{height:.375rem;position:relative;top:calc(math.div(.375rem, 2) * -1);left:unset;right:unset;border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem)}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-track-wrapper{display:none}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-thumb-container{width:94%;left:3%}.pep-slider-container ::ng-deep.mat-slider .mat-slider-wrapper .mat-slider-thumb-container .mat-slider-thumb{width:18px;height:18px;right:calc(math.div($sliderSize, 2) * -1);bottom:calc(math.div($sliderSize, 2) * -1);transform:scale(.7)!important;border-color:#fff;border-color: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%));border-width:5px;background-color:transparent!important;box-shadow:0 0 0 .125rem rgba(23,102,166,.5);box-shadow:0 0 0 var(--pep-spacing-2xs,.125rem) hsla(var(--pep-color-text-link-h,207),var(--pep-color-text-link-s,76%),var(--pep-color-text-link-l,37%),.5)}"]}]}],"members":{"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":5}}]}],"hint":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"background":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"minValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":5}}]}],"maxValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":58,"character":5}}]}],"inputChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":67,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":67,"character":62},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":67,"character":100}]}],"setBackground":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}]}}},"origins":{"PepSliderModule":"./slider.module","PepSliderComponent":"./slider.component"},"importAs":"@pepperi-addons/ngx-lib/slider"}

package/slider/slider.component.theme.scss CHANGED Viewed

@@ -1,65 +1,67 @@
-@mixin pep-slider-component-theme($pepperi-theme) {
-    .pep-slider-container {
-        // .mat-slider {
-        //     .mat-slider-wrapper {
-        //         background: linear-gradient(to right,
-        //             hsl(0, 100%, 50%) 0%,
-        //             hsl(60, 100%, 50%) 17%,
-        //             hsl(120, 100%, 50%) 33%,
-        //             hsl(180, 100%, 50%) 50%,
-        //             hsl(240, 100%, 50%) 67%,
-        //             hsl(300, 100%, 50%) 83%,
-        //             hsl(360, 100%, 50%) 100%);
-        //     }
-        // }
-        .mat-slider {
-            background: get-pep-color($pepperi-theme, color-system-primary, color-tran-30);
-            &.mat-slider-horizontal {
-                height: 1rem;
-                width: 100%;
-                padding: 0.5rem 0.25rem;
-                border-radius: $border-radius-lg;
-            }
-            .mat-slider-wrapper {
-                $wrapperHeight: 0.375rem;
-                height: $wrapperHeight;
-                position: relative;
-                top: $wrapperHeight / 2 * -1;
-                left: unset;
-                right: unset;
-                border-radius: $border-radius-md;
-                .mat-slider-track-wrapper {
-                    display: none;
-                }
-                // .mat-slider-ticks-container {
-                //     // Not in use.
-                // }
-                .mat-slider-thumb-container {
-                    width: 94%;
-                    left: 3%;
-                    .mat-slider-thumb {
-                        // position: absolute;
-                        $sliderSize: 18px;
-                        width: $sliderSize;
-                        height: $sliderSize;
-                        right: $sliderSize / 2 * -1;
-                        bottom: $sliderSize / 2 * -1;
-                        transform: scale(.7) !important;
-                        border-color: get-pep-color($pepperi-theme, color-system-primary-invert, color-base); //get-pep-color($pepperi-theme, color-system-primary, color-tran-50);
-                        border-width: 5px;
-                        background-color: transparent !important;
-                        box-shadow: 0 0 0 $spacing-2xs get-pep-color($pepperi-theme, color-text, color-link-focus);
-                        // .default-theme .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb
-                    }
-                }
-            }
-        }
-    }
-}
+@use "sass:math";
+@use '../src/core/style/abstracts/variables';
+@use '../src/core/style/abstracts/functions';
+.pep-slider-container {
+    // .mat-slider {
+    //     .mat-slider-wrapper {
+    //         background: linear-gradient(to right,
+    //             hsl(0, 100%, 50%) 0%,
+    //             hsl(60, 100%, 50%) 17%,
+    //             hsl(120, 100%, 50%) 33%,
+    //             hsl(180, 100%, 50%) 50%,
+    //             hsl(240, 100%, 50%) 67%,
+    //             hsl(300, 100%, 50%) 83%,
+    //             hsl(360, 100%, 50%) 100%);
+    //     }
+    // }
+    ::ng-deep.mat-slider {
+        background: functions.get-pep-color(color-system-primary, color-tran-30);
+        &.mat-slider-horizontal {
+            height: 1rem;
+            width: 100%;
+            padding: 0.5rem 0.25rem;
+            border-radius: variables.$border-radius-lg;
+        }
+        .mat-slider-wrapper {
+            $wrapperHeight: 0.375rem;
+            height: $wrapperHeight;
+            position: relative;
+            top: calc(math.div(#{$wrapperHeight}, 2) * -1);
+            left: unset;
+            right: unset;
+            border-radius: variables.$border-radius-md;
+            .mat-slider-track-wrapper {
+                display: none;
+            }
+            // .mat-slider-ticks-container {
+            //     // Not in use.
+            // }
+            .mat-slider-thumb-container {
+                width: 94%;
+                left: 3%;
+                .mat-slider-thumb {
+                    // position: absolute;
+                    $sliderSize: 18px;
+                    width: $sliderSize;
+                    height: $sliderSize;
+                    right: calc(math.div($sliderSize, 2) * -1);
+                    bottom: calc(math.div($sliderSize, 2) * -1);
+                    transform: scale(.7) !important;
+                    border-color: functions.get-pep-color(color-system-primary-invert, color-base); //functions.get-pep-color(color-system-primary, color-tran-50);
+                    border-width: 5px;
+                    background-color: transparent !important;
+                    box-shadow: 0 0 0 variables.$spacing-2xs functions.get-pep-color(color-text, color-link-focus);
+                    // .default-theme .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb
+                }
+            }
+        }
+    }
+}