@pepperi-addons/ngx-lib 0.2.61 → 0.3.0-beta.1

package/select/select.component.d.ts

@@ -26,6 +26,7 @@ export declare class PepSelectComponent implements OnChanges, OnInit, OnDestroy
     isActive: boolean;
     showTitle: boolean;
     emptyOption: boolean;
+    renderTitle: boolean;
     valueChange: EventEmitter<string>;
     formValidationChange: EventEmitter<boolean>;
     select: MatSelect;

package/select/select.component.theme.scss

@@ -1,2 +1,98 @@
-@mixin pep-select-component-theme($pepperi-theme) {
-}
+@use '../src/core/style/abstracts/mixins';
+@use '../src/core/style/abstracts/functions';
+
+// -----------------------------------------------------
+//  Override material style
+// -----------------------------------------------------
+mat-select {
+    outline: none;
+}
+
+::ng-deep {
+    .mat-select-disabled {
+        .mat-select-value {
+            color: functions.get-pep-color(color-text, color-dimmed);
+        }
+    }
+
+    .mat-select-arrow-wrapper {
+        transform: unset !important;
+        vertical-align: middle; // unset;
+
+        .mat-select-arrow {
+            border: 0;
+
+            &:after {
+                color: functions.get-pep-color(color-system-primary, color-base);
+            }
+        }
+    }
+
+    .mat-select-panel {
+        .mat-option {
+            background: functions.get-pep-color(color-system-primary-invert, color-base);
+
+            //&.mat-active,
+            &:hover {
+                @include mixins.state-weak-hover();
+            }
+            &:active {
+                @include mixins.state-weak-active(color-weak, false);
+                background: functions.get-pep-color(color-weak, color-tran-50) !important;
+            }
+            &:disabled {
+                @include mixins.state-weak-disable();
+            }
+        }
+        .mat-option.mat-selected {
+            @include mixins.state-weak-default();
+            // box-shadow: functions.get-pep-shadow(shadow-xs, soft);
+
+            //&.mat-active,
+            &:hover {
+                @include mixins.state-weak-hover();
+            }
+            &:active {
+                @include mixins.state-weak-active(color-weak, false);
+                background: functions.get-pep-color(color-weak, color-tran-50) !important;
+            }
+            &:disabled {
+                @include mixins.state-weak-disable();
+            }
+        }
+
+        .mat-pseudo-checkbox {
+            @include mixins.state-regular-default(true);
+
+            &:hover {
+                @include mixins.state-regular-hover(true);
+            }
+            &:active {
+                @include mixins.state-regular-active(true);
+            }
+            &:disabled {
+                @include mixins.state-regular-disable(true);
+            }
+        }
+
+        .mat-pseudo-checkbox.mat-pseudo-checkbox-checked,
+        .mat-pseudo-checkbox.mat-pseudo-checkbox-indeterminate {
+            @include mixins.state-regular-default(true);
+            @include mixins.inline(functions.get-pep-color(color-system-primary, color-flat-r-10), 1px, solid, true);
+
+            &:hover {
+                @include mixins.state-regular-hover(true);
+            }
+            &:active {
+                @include mixins.state-regular-active(true);
+            }
+            &:disabled {
+                @include mixins.state-regular-disable(true);
+            }
+        }
+
+        .mat-pseudo-checkbox::after {
+            color: functions.get-pep-color(color-text, color-main) !important;
+        }
+    }
+}

package/separator/pepperi-addons-ngx-lib-separator.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepSeparatorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":14}],"exports":[{"__symbolic":"reference","name":"PepSeparatorComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSeparatorComponent"}]}]}],"members":{}},"PepSeparatorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"pep-separator","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":20,"character":21},"member":"OnPush"},"template":"<ng-container *ngIf=\"layoutType === 'form'\">\n    <div class=\"pep-separator-field wrap pep-border-bottom align-{{ xAlignment }}\" title=\"{{ label }}\">\n        <span class=\"block-with-text body-md\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'card'\">\n    <div class=\"pep-separator-field pep-small-separator-field pep-border-bottom text-align-{{ xAlignment }}\"\n        dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" title=\"{{ label }}\">\n        <span class=\"small-block-with-text body-sm\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'table'\">\n    <label class=\"cl\" title=\"{{ label }}\">{{ label }}</label>\n</ng-container>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":54,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":54,"character":62}]}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"PepSeparatorModule":"./separator.module","PepSeparatorComponent":"./separator.component"},"importAs":"@pepperi-addons/ngx-lib/separator"}
+{"__symbolic":"module","version":4,"metadata":{"PepSeparatorModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":14}],"exports":[{"__symbolic":"reference","name":"PepSeparatorComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSeparatorComponent"}]}]}],"members":{}},"PepSeparatorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"pep-separator","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":20,"character":21},"member":"OnPush"},"template":"<ng-container *ngIf=\"layoutType === 'form'\">\n    <div class=\"pep-separator-field wrap pep-border-bottom align-{{ xAlignment }}\" title=\"{{ label }}\">\n        <span class=\"block-with-text body-md\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'card'\">\n    <div class=\"pep-separator-field pep-small-separator-field pep-border-bottom text-align-{{ xAlignment }}\"\n        dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\" title=\"{{ label }}\">\n        <span class=\"small-block-with-text body-sm\">{{ label }}</span>\n    </div>\n</ng-container>\n\n<ng-container *ngIf=\"layoutType === 'table'\">\n    <label class=\"cl\" title=\"{{ label }}\">{{ label }}</label>\n</ng-container>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}.pep-separator-field,.pepperi-separator-field{padding:0;height:3.5rem;max-height:3.5rem;margin-top:.5rem}.pep-separator-field.pep-small-separator-field,.pep-separator-field.pepperi-small-separator-field,.pepperi-separator-field.pep-small-separator-field,.pepperi-separator-field.pepperi-small-separator-field{height:1.15rem;margin-top:.25rem!important;margin-bottom:0!important}.pep-separator-field.pep-small-separator-field .small-block-with-text,.pep-separator-field.pepperi-small-separator-field .small-block-with-text,.pepperi-separator-field.pep-small-separator-field .small-block-with-text,.pepperi-separator-field.pepperi-small-separator-field .small-block-with-text{display:block;font-weight:600;font-weight:var(--pep-font-weight-bold,600);text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.pep-separator-field.wrap,.pepperi-separator-field.wrap{display:flex}.pep-separator-field.wrap .block-with-text,.pepperi-separator-field.wrap .block-with-text{width:100%;margin-bottom:.5rem;font-weight:600;font-weight:var(--pep-font-weight-bold,600);align-self:flex-end;max-height:inherit}.pep-separator-field.wrap.align-0 .block-with-text,.pep-separator-field.wrap.align-1 .block-with-text,.pep-separator-field.wrap.align-left .block-with-text,.pepperi-separator-field.wrap.align-0 .block-with-text,.pepperi-separator-field.wrap.align-1 .block-with-text,.pepperi-separator-field.wrap.align-left .block-with-text{max-width:calc(100%);overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:ltr;text-align:left;margin-right:-1em;padding-right:1em}.pep-separator-field.wrap.align-0 .block-with-text:before,.pep-separator-field.wrap.align-1 .block-with-text:before,.pep-separator-field.wrap.align-left .block-with-text:before,.pepperi-separator-field.wrap.align-0 .block-with-text:before,.pepperi-separator-field.wrap.align-1 .block-with-text:before,.pepperi-separator-field.wrap.align-left .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pep-separator-field.wrap.align-0 .block-with-text:after,.pep-separator-field.wrap.align-1 .block-with-text:after,.pep-separator-field.wrap.align-left .block-with-text:after,.pepperi-separator-field.wrap.align-0 .block-with-text:after,.pepperi-separator-field.wrap.align-1 .block-with-text:after,.pepperi-separator-field.wrap.align-left .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pep-separator-field.wrap.align-0 .block-with-text:after,.pep-separator-field.wrap.align-0 .block-with-text:before,.pep-separator-field.wrap.align-1 .block-with-text:after,.pep-separator-field.wrap.align-1 .block-with-text:before,.pep-separator-field.wrap.align-left .block-with-text:after,.pep-separator-field.wrap.align-left .block-with-text:before,.pepperi-separator-field.wrap.align-0 .block-with-text:after,.pepperi-separator-field.wrap.align-0 .block-with-text:before,.pepperi-separator-field.wrap.align-1 .block-with-text:after,.pepperi-separator-field.wrap.align-1 .block-with-text:before,.pepperi-separator-field.wrap.align-left .block-with-text:after,.pepperi-separator-field.wrap.align-left .block-with-text:before{right:3px}.pep-separator-field.wrap.align-2 .block-with-text,.pep-separator-field.wrap.align-right .block-with-text,.pepperi-separator-field.wrap.align-2 .block-with-text,.pepperi-separator-field.wrap.align-right .block-with-text{max-width:calc(100%);overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:rtl;text-align:right;padding-left:1em}.pep-separator-field.wrap.align-2 .block-with-text:before,.pep-separator-field.wrap.align-right .block-with-text:before,.pepperi-separator-field.wrap.align-2 .block-with-text:before,.pepperi-separator-field.wrap.align-right .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pep-separator-field.wrap.align-2 .block-with-text:after,.pep-separator-field.wrap.align-right .block-with-text:after,.pepperi-separator-field.wrap.align-2 .block-with-text:after,.pepperi-separator-field.wrap.align-right .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pep-separator-field.wrap.align-2 .block-with-text:after,.pep-separator-field.wrap.align-2 .block-with-text:before,.pep-separator-field.wrap.align-right .block-with-text:after,.pep-separator-field.wrap.align-right .block-with-text:before,.pepperi-separator-field.wrap.align-2 .block-with-text:after,.pepperi-separator-field.wrap.align-2 .block-with-text:before,.pepperi-separator-field.wrap.align-right .block-with-text:after,.pepperi-separator-field.wrap.align-right .block-with-text:before{left:3px}.pep-separator-field.wrap.align-3 .block-with-text,.pep-separator-field.wrap.align-center .block-with-text,.pepperi-separator-field.wrap.align-3 .block-with-text,.pepperi-separator-field.wrap.align-center .block-with-text{max-width:calc(100%);overflow:hidden;position:relative;line-height:1.5rem;max-height:3.05rem;direction:ltr;text-align:center;margin-right:-1em;padding-right:1em}.pep-separator-field.wrap.align-3 .block-with-text:before,.pep-separator-field.wrap.align-center .block-with-text:before,.pepperi-separator-field.wrap.align-3 .block-with-text:before,.pepperi-separator-field.wrap.align-center .block-with-text:before{content:\"...\";position:absolute;bottom:0}.pep-separator-field.wrap.align-3 .block-with-text:after,.pep-separator-field.wrap.align-center .block-with-text:after,.pepperi-separator-field.wrap.align-3 .block-with-text:after,.pepperi-separator-field.wrap.align-center .block-with-text:after{content:\"...\";position:absolute;height:1.5rem;margin-top:.2rem;background:#fff;color:#fff}.pep-separator-field.wrap.align-3 .block-with-text:after,.pep-separator-field.wrap.align-3 .block-with-text:before,.pep-separator-field.wrap.align-center .block-with-text:after,.pep-separator-field.wrap.align-center .block-with-text:before,.pepperi-separator-field.wrap.align-3 .block-with-text:after,.pepperi-separator-field.wrap.align-3 .block-with-text:before,.pepperi-separator-field.wrap.align-center .block-with-text:after,.pepperi-separator-field.wrap.align-center .block-with-text:before{right:3px}",""]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":55,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":55,"character":62}]}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"PepSeparatorModule":"./separator.module","PepSeparatorComponent":"./separator.component"},"importAs":"@pepperi-addons/ngx-lib/separator"}

package/separator/separator.component.theme.scss

@@ -1,2 +1,2 @@
-@mixin pep-separator-component-theme($pepperi-theme) {
+@mixin pep-separator-component-theme() {
 }

package/side-bar/pepperi-addons-ngx-lib-side-bar.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepSideBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":24,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":25,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSideBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSideBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":31,"character":41}]}]}},"PepSideBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"pep-side-bar","template":"<div class=\"pep-side-bar-container\">\n    <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n    </ng-container>\n    <ng-template #largeScreensBlock>\n        <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'is-open-state': state === 'open'}\">\n            <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            <div class=\"toggle-button-border\"></div>\n            <button mat-button class=\"toggle-button pep-button xs regular icon-button \" (click)=\"toggleSideWrapper()\">\n                <mat-icon>\n                    <pep-icon [name]=\"toggleButtonArrowName\">\n                    </pep-icon>\n                </mat-icon>\n            </button>\n        </div>\n    </ng-template>\n    <ng-template #notLargeScreensBlock>\n        <mat-sidenav-container [hasBackdrop]=\"true\">\n            <mat-sidenav #sidenav mode=\"over\" autoFocus=\"false\" fixedInViewport=\"false\"\n                (openedChange)=\"toggleSidenav($event)\">\n                <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            </mat-sidenav>\n        </mat-sidenav-container>\n    </ng-template>\n</div>\n\n<ng-template #sideLayoutTemplate>\n    <div class=\"side-layout\">\n        <div *ngIf=\"showHeader\" class=\"header-content\">\n            <div class=\"content pep-border-bottom body-lg ellipsis\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n        </div>\n        <div class=\"main-content\">\n            <div class=\"content\">\n                <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n            </div>\n        </div>\n        <div *ngIf=\"showFooter\" class=\"footer-content\">\n            <div class=\"content pep-border-top body-lg ellipsis\">\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n    <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n    <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n    <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n    <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n    <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>","styles":[".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform .35s ease-out,width .35s ease-out;transform:translateX(calc(var(--pep-one-multi-by-dir) * 16rem));transform:translateX(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((1rem * 2) + 1px);width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform .35s ease-out,width .35s ease-out;transform:unset;width:16rem;width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline .35s ease-out,transform .35s ease-out;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline .35s ease-out;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(1.5rem + .5rem + 2.5rem) - .75rem);margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline .35s ease-out,transform .35s ease-out;transform:rotate(0deg);margin-inline:calc(-1 * .75rem) .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) calc(.35s / 3) ease-out,margin-inline .35s ease-out;opacity:1;margin-inline:unset;width:1px;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-start:var(--pep-spacing-lg,1rem);padding-inline-start:var(--pep-spacing-lg,1rem);margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - 4rem);height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(16rem + 2rem) + calc(1rem * 2));max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:1rem;padding-inline:var(--pep-spacing-lg,1rem)}@media (max-width:599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(16rem + 2rem);max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(16rem + 2rem);width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:16rem;max-width:var(--pep-side-bar-width,16rem);width:16rem;width:var(--pep-side-bar-width,16rem);padding:0 1rem;padding:0 var(--pep-spacing-lg,1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:1.5rem;padding-top:var(--pep-top-bar-spacing-top,1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:16rem;max-width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":32,"character":1}}],"members":{"ignoreResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"showFooter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"stateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":5}}]}],"sidenav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":5},"arguments":["sidenav"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":69,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":70,"character":26},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":71,"character":30}]}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"toggleState":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"setSideBarHeight":[{"__symbolic":"method"}],"mouseLeaveSideBar":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"toggleSideWrapper":[{"__symbolic":"method"}],"toggleSidenav":[{"__symbolic":"method"}]},"statics":{"ONE_MULTI_BY_DIR_KEY":"--pep-one-multi-by-dir"}},"PepSideBarStateType":{"__symbolic":"interface"},"IPepSideBarStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepSideBarModule":"./side-bar.module","PepSideBarComponent":"./side-bar.component","PepSideBarStateType":"./side-bar.model","IPepSideBarStateChangeEvent":"./side-bar.model"},"importAs":"@pepperi-addons/ngx-lib/side-bar"}
+{"__symbolic":"module","version":4,"metadata":{"PepSideBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":16,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/sidenav","name":"MatSidenavModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":24,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":25,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSideBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSideBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":31,"character":41}]}]}},"PepSideBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":27,"character":1},"arguments":[{"selector":"pep-side-bar","template":"<div class=\"pep-side-bar-container\">\n    <ng-container *ngIf=\"isLargeScreen || ignoreResize; then largeScreensBlock; else notLargeScreensBlock\">\n    </ng-container>\n    <ng-template #largeScreensBlock>\n        <div class=\"toggle-side-bar-container\" [ngClass]=\"{ 'is-open-state': state === 'open'}\">\n            <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            <div class=\"toggle-button-border\"></div>\n            <button mat-button class=\"toggle-button pep-button xs regular icon-button \" (click)=\"toggleSideWrapper()\">\n                <mat-icon>\n                    <pep-icon [name]=\"toggleButtonArrowName\">\n                    </pep-icon>\n                </mat-icon>\n            </button>\n        </div>\n    </ng-template>\n    <ng-template #notLargeScreensBlock>\n        <mat-sidenav-container [hasBackdrop]=\"true\">\n            <mat-sidenav #sidenav mode=\"over\" autoFocus=\"false\" fixedInViewport=\"false\"\n                (openedChange)=\"toggleSidenav($event)\">\n                <ng-container *ngTemplateOutlet=\"sideLayoutTemplate\"></ng-container>\n            </mat-sidenav>\n        </mat-sidenav-container>\n    </ng-template>\n</div>\n\n<ng-template #sideLayoutTemplate>\n    <div class=\"side-layout\">\n        <div *ngIf=\"showHeader\" class=\"header-content\">\n            <div class=\"content pep-border-bottom body-lg ellipsis\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n        </div>\n        <div class=\"main-content\">\n            <div class=\"content\">\n                <ng-container *ngTemplateOutlet=\"startContentTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"filtersTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"smartFiltersTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n                <ng-container *ngTemplateOutlet=\"endContentTemplate\"></ng-container>\n            </div>\n        </div>\n        <div *ngIf=\"showFooter\" class=\"footer-content\">\n            <div class=\"content pep-border-top body-lg ellipsis\">\n                <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n<ng-template #headerTemplate>\n    <ng-content select=\"[header-content]\"></ng-content>\n</ng-template>\n\n<ng-template #startContentTemplate>\n    <ng-content select=\"[start-content]\"></ng-content>\n</ng-template>\n\n<ng-template #contentTemplate>\n    <ng-content></ng-content>\n</ng-template>\n\n<ng-template #endContentTemplate>\n    <ng-content select=\"[end-content]\"></ng-content>\n</ng-template>\n\n<ng-template #filtersTemplate>\n\n</ng-template>\n\n<ng-template #smartFiltersTemplate>\n    <ng-content select=\"pep-smart-filters\"></ng-content>\n</ng-template>\n\n<ng-template #footerTemplate>\n    <ng-content select=\"[footer-content]\"></ng-content>\n</ng-template>","styles":[".pep-side-bar-container{height:100%}.pep-side-bar-container .toggle-side-bar-container{height:inherit;display:grid;grid-auto-flow:column;transition:transform .35s ease-out,width .35s ease-out;transform:translateX(calc(var(--pep-one-multi-by-dir) * 16rem));transform:translateX(calc(var(--pep-one-multi-by-dir) * var(--pep-side-bar-width, 16rem)));width:calc((1rem * 2) + 1px);width:calc((var(--pep-spacing-lg, 1rem) * 2) + 1px)}.pep-side-bar-container .toggle-side-bar-container.is-open-state{transition:transform .35s ease-out,width .35s ease-out;transform:unset;width:16rem;width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button{transition:margin-inline .35s ease-out,transform .35s ease-out;transform:rotate(180deg);margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container.is-open-state .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) ease-out,margin-inline .35s ease-out;opacity:0;margin-inline:-3rem .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button{z-index:2;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:calc(calc(1.5rem + .5rem + 2.5rem) - .75rem);margin-top:calc(calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem)) - .75rem);transition:margin-inline .35s ease-out,transform .35s ease-out;transform:rotate(0deg);margin-inline:calc(-1 * .75rem) .25rem}.pep-side-bar-container .toggle-side-bar-container .toggle-button-border{transition:opacity calc(calc(.35s / 3) * 2) calc(.35s / 3) ease-out,margin-inline .35s ease-out;opacity:1;margin-inline:unset;width:1px;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-start:var(--pep-spacing-lg,1rem);padding-inline-start:var(--pep-spacing-lg,1rem);margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-side-bar-container .mat-sidenav-container{position:absolute;bottom:0;left:0;right:0;z-index:999;height:calc(100vh - 4rem);height:calc(100vh - var(--pep-header-height, 4rem));visibility:hidden}.pep-side-bar-container .mat-sidenav-container.mat-drawer-opened{visibility:unset}.pep-side-bar-container .mat-sidenav-container .mat-sidenav{max-width:calc(calc(16rem + 2rem) + calc(1rem * 2));max-width:calc(calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem)) + calc(var(--pep-spacing-lg, 1rem) * 2));padding-inline:1rem;padding-inline:var(--pep-spacing-lg,1rem)}@media (max-width:599px){.pep-side-bar-container .mat-sidenav-container .mat-sidenav{padding-inline:0}}.pep-side-bar-container .mat-sidenav-container .mat-sidenav .side-layout{max-width:calc(16rem + 2rem);max-width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem));width:calc(16rem + 2rem);width:calc(var(--pep-side-bar-width, 16rem) + var(--pep-spacing-2xl, 2rem))}.pep-side-bar-container .side-layout{display:block;max-width:16rem;max-width:var(--pep-side-bar-width,16rem);width:16rem;width:var(--pep-side-bar-width,16rem);padding:0 1rem;padding:0 var(--pep-spacing-lg,1rem);overflow:auto}.pep-side-bar-container .side-layout .header-content{height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));padding-top:1.5rem;padding-top:var(--pep-top-bar-spacing-top,1.5rem);z-index:2;position:sticky;top:0}.pep-side-bar-container .side-layout .header-content .content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;overflow:unset}.pep-side-bar-container .side-layout .footer-content{height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem))}.pep-side-bar-container .side-layout .main-content{display:block;height:inherit;max-width:16rem;max-width:var(--pep-side-bar-width,16rem)}.pep-side-bar-container .side-layout .main-content .content{height:inherit}",".pep-side-bar-container .toggle-side-bar-container .toggle-button-border{-webkit-border-end:1px solid rgba(26,26,26,.24);border-inline-end:1px solid rgba(26,26,26,.24);-webkit-border-end:1px solid hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24);border-inline-end:1px solid hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)}.pep-side-bar-container .mat-sidenav-container .mat-drawer-backdrop.mat-drawer-shown{background-color:rgba(26,26,26,.24);background-color:hsla(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%),.24)}.pep-side-bar-container .side-layout,.pep-side-bar-container .side-layout .header-content{background:#fff;background:hsl(var(--pep-color-system-primary-invert-h,255),var(--pep-color-system-primary-invert-s,100%),var(--pep-color-system-primary-invert-l,100%))}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":32,"character":1}}],"members":{"ignoreResize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"showFooter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"stateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":57,"character":5}}]}],"sidenav":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":60,"character":5},"arguments":["sidenav"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":69,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":70,"character":26},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":71,"character":30}]}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"setState":[{"__symbolic":"method"}],"toggleState":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"setSideBarHeight":[{"__symbolic":"method"}],"mouseLeaveSideBar":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"toggle":[{"__symbolic":"method"}],"toggleSideWrapper":[{"__symbolic":"method"}],"toggleSidenav":[{"__symbolic":"method"}]},"statics":{"ONE_MULTI_BY_DIR_KEY":"--pep-one-multi-by-dir"}},"PepSideBarStateType":{"__symbolic":"interface"},"IPepSideBarStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepSideBarModule":"./side-bar.module","PepSideBarComponent":"./side-bar.component","PepSideBarStateType":"./side-bar.model","IPepSideBarStateChangeEvent":"./side-bar.model"},"importAs":"@pepperi-addons/ngx-lib/side-bar"}

package/side-bar/side-bar.component.theme.scss

@@ -1,25 +1,26 @@
-@mixin pep-side-bar-component-theme($pepperi-theme) {
-    .pep-side-bar-container {
-        .toggle-side-bar-container {
-            .toggle-button-border {
-                @include pep-border(border-inline-end, $pepperi-theme);
-            }
+@use '../src/core/style/abstracts/mixins';
+@use '../src/core/style/abstracts/functions';
+
+.pep-side-bar-container {
+    .toggle-side-bar-container {
+        .toggle-button-border {
+            @include mixins.pep-border(border-inline-end);
         }
+    }
 
-        .mat-sidenav-container {
-            // background-color: transparent;
+    .mat-sidenav-container {
+        // background-color: transparent;
 
-            .mat-drawer-backdrop.mat-drawer-shown {
-                background-color: get-pep-color($pepperi-theme, color-system-primary, color-tran-50);
-            }
+        .mat-drawer-backdrop.mat-drawer-shown {
+            background-color: functions.get-pep-color(color-system-primary, color-tran-50);
         }
+    }
 
-        .side-layout {
-            background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
+    .side-layout {
+        background: functions.get-pep-color(color-system-primary-invert, color-base);
 
-            .header-content {
-                background: get-pep-color($pepperi-theme, color-system-primary-invert, color-base);
-            }
+        .header-content {
+            background: functions.get-pep-color(color-system-primary-invert, color-base);
         }
     }
 }

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

@@ -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\">\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 [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" [xAlignment]=\"xAlignment\"\n                    [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":[":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}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":91,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":93,"character":5}}]}],"signaturePad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":96,"character":5},"arguments":["signaturePad"]}]}],"signaturePopupPad":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":97,"character":5},"arguments":["signaturePopupPad",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":97,"character":44}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":118,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":119,"character":38},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":120,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":121,"character":20},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":122,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":123,"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"}
+{"__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.d.ts

@@ -28,6 +28,7 @@ export declare class PepSignatureComponent implements OnInit, OnChanges, OnDestr
     controlType: string;
     form: FormGroup;
     showTitle: boolean;
+    renderTitle: boolean;
     private _layoutType;
     set layoutType(value: PepLayoutType);
     get layoutType(): PepLayoutType;

package/signature/signature.component.theme.scss

@@ -1,3 +1,7 @@
+@use '../src/core/style/components/file';
+
+@include file.pep-file-theme();
+
 // -----------------------------------------------------
 //  Override material style
 // -----------------------------------------------------
@@ -5,24 +9,4 @@
     .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);
-    //                 }
-    //             }
-    //         }
-    //     }
-    // }
-}
+}