@pepperi-addons/ngx-lib 0.2.61-query-builder.2 → 0.3.0

package/README.md

@@ -1,40 +1,40 @@
-# NgxLib
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project ngx-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-lib`.
-> Note: Don't forget to add `--project ngx-lib` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build ngx-lib` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build ngx-lib`, go to the dist folder `cd dist/ngx-lib` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test ngx-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
-
-
-## THEME
-1. Add 'pepperi-theme' class name on your <root> element tag.
-2. Import '~@pepperi-addons/ngx-lib/theming' on your global style file (.scss).
-3. And @include pepperi-theme() to apply pep theme on the app.
-
-## SVG's
-1. Add the following to the angular.json file.
-"assets": [
-    {
-        "glob": "**/*",
-        "input": "./node_modules/@pepperi-addons/ngx-lib/src/assets",
-        "output": "./assets"
-    }
+# NgxLib
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.1.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ngx-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-lib`.
+> Note: Don't forget to add `--project ngx-lib` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build ngx-lib` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ngx-lib`, go to the dist folder `cd dist/ngx-lib` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ngx-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
+
+## THEME
+1. Add 'pepperi-theme' class name on your <root> element tag.
+2. Import '~@pepperi-addons/ngx-lib/theming' on your global style file (.scss).
+3. And @include pepperi-theme() to apply pep theme on the app.
+
+## SVG's
+1. Add the following to the angular.json file.
+"assets": [
+    {
+        "glob": "**/*",
+        "input": "./node_modules/@pepperi-addons/ngx-lib/src/assets",
+        "output": "./assets"
+    }
 ],

package/address/address.component.theme.scss

@@ -1,5 +1,5 @@
-@use '../src/core/style/abstracts/functions';
-
-.pepperi-address-container, .pep-address-container {
-    background: functions.get-pep-color(color-weak, color-tran-10);
-}
+@use '../src/core/style/abstracts/functions';
+
+.pepperi-address-container, .pep-address-container {
+    background: functions.get-pep-color(color-weak, color-tran-10);
+}

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepAddressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":17,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":19,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":20,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox","name":"PepTextboxModule","line":23,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/select","name":"PepSelectModule","line":24,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":25,"character":8}],"exports":[{"__symbolic":"reference","name":"PepAddressComponent"}],"declarations":[{"__symbolic":"reference","name":"PepAddressComponent"}]}]}],"members":{}},"PepAddressComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"pep-address","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":24,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\r\n    <ng-container *ngIf=\"layoutType === 'form'\">\r\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\r\n        </pep-field-title>\r\n        <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\r\n            dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\r\n            <div [ngSwitch]=\"groupField.controlType\" *ngFor=\"let groupField of groupFields; let i = index\"\r\n                class=\"pep-address-field columns-{{ groupField.colSpan }}\">\r\n                <pep-textbox *ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\r\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\"\r\n                    [formattedValue]=\"groupField.formattedValue\" [label]=\"groupField.label\"\r\n                    [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\r\n                    [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\r\n                    [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\r\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\r\n                </pep-textbox>\r\n\r\n                <pep-select *ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\r\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\r\n                    [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\r\n                    [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\r\n                    [options]=\"groupField.options\" [parentFieldKey]=\"key\"\r\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\r\n                </pep-select>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'card'\">\r\n        <div class=\"pep-card-input \" title=\"{{ label }}&nbsp;{{ formattedValue }}\"\r\n            [ngClass]=\"['text-align-' + xAlignment]\">\r\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\r\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\r\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\r\n                    }},&nbsp;</span>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'table'\">\r\n        <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\r\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\r\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\r\n                    }},&nbsp;</span>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-container>","styles":[".header{grid-column:1/span 3}.pep-address-container{padding:.875rem .75rem;padding:.875rem var(--pep-spacing-md,.75rem);border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);display:-ms-grid;display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:.75rem;grid-column-gap:var(--pep-spacing-md,.75rem);grid-row-gap:.75rem;grid-row-gap:var(--pep-spacing-md,.75rem)}.pep-address-container .columns-2{grid-column:1/span 2}.pep-address-container .columns-3{grid-column:1/span 3}",".pep-address-container,.pepperi-address-container{background:rgba(26,26,26,.04);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"groupFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"addressValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":64,"character":63}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}]}}},"origins":{"PepAddressModule":"./address.module","PepAddressComponent":"./address.component"},"importAs":"@pepperi-addons/ngx-lib/address"}
+{"__symbolic":"module","version":4,"metadata":{"PepAddressModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":17,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":19,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":20,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox","name":"PepTextboxModule","line":23,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/select","name":"PepSelectModule","line":24,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":25,"character":8}],"exports":[{"__symbolic":"reference","name":"PepAddressComponent"}],"declarations":[{"__symbolic":"reference","name":"PepAddressComponent"}]}]}],"members":{}},"PepAddressComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"pep-address","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":24,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\n        </pep-field-title>\n        <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\n            dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n            <div [ngSwitch]=\"groupField.controlType\" *ngFor=\"let groupField of groupFields; let i = index\"\n                class=\"pep-address-field columns-{{ groupField.colSpan }}\">\n                <pep-textbox *ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\"\n                    [formattedValue]=\"groupField.formattedValue\" [label]=\"groupField.label\"\n                    [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\n                    [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\n                    [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-textbox>\n\n                <pep-select *ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n                    [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\n                    [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\n                    [options]=\"groupField.options\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-select>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-card-input \" title=\"{{ label }}&nbsp;{{ formattedValue }}\"\n            [ngClass]=\"['text-align-' + xAlignment]\">\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-container>","styles":[".header{grid-column:1/span 3}.pep-address-container{padding:.875rem .75rem;padding:.875rem var(--pep-spacing-md,.75rem);border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);display:-ms-grid;display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:.75rem;grid-column-gap:var(--pep-spacing-md,.75rem);grid-row-gap:.75rem;grid-row-gap:var(--pep-spacing-md,.75rem)}.pep-address-container .columns-2{grid-column:1/span 2}.pep-address-container .columns-3{grid-column:1/span 3}",".pep-address-container,.pepperi-address-container{background:rgba(26,26,26,.04);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":5}}]}],"formattedValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"groupFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":42,"character":5}}]}],"addressValueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":61,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":64,"character":33},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":64,"character":63}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onValueChange":[{"__symbolic":"method"}]}}},"origins":{"PepAddressModule":"./address.module","PepAddressComponent":"./address.component"},"importAs":"@pepperi-addons/ngx-lib/address"}

package/attachment/attachment.component.theme.scss

@@ -1 +1,4 @@
-
+
+@use '../src/core/style/components/file';
+
+@include file.pep-file-theme();

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepAttachmentModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":19,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":21,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":23,"character":8}],"exports":[{"__symbolic":"reference","name":"PepAttachmentComponent"}],"declarations":[{"__symbolic":"reference","name":"PepAttachmentComponent"}]}]}],"members":{}},"PepAttachmentComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"pep-attachment","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":27,"character":21},"member":"OnPush"},"template":"<ng-template #pepTemplate>\r\n    <pep-files-uploader [key]=\"key\" [src]=\"src\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\r\n        [xAlignment]=\"xAlignment\" [rowSpan]=\"rowSpan\" [fieldHeight]=\"fieldHeight\" [controlType]=\"controlType\"\r\n        [form]=\"form\" [layoutType]=\"layoutType\" [standAlone]=\"standAlone\" (fileChange)=\"onFileChanged($event)\"\r\n        (elementClick)=\"onFileClicked($event)\" [acceptedExtensions]=\"acceptAttachmentType\">\r\n    </pep-files-uploader>\r\n</ng-template>\r\n\r\n<ng-template #pepReadonlyTemplate>\r\n    <ng-container *ngIf=\"src?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\r\n    <ng-template #notEmptyBlock>\r\n        <div class=\"pep-file-container\">\r\n            <a [id]=\"key\" class=\"color-link body-sm pep-card-input \" *ngIf=\"src != null\" title=\"{{ src }}\"\r\n                target=\"_blank\" href=\"{{ src }}\">{{ src }}</a>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template #emptyBlock>\r\n        <span>&nbsp;</span>\r\n    </ng-template>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"layoutType === 'form'\">\r\n    <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone }\">\r\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\r\n            [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\">\r\n        </pep-field-title>\r\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n    </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"layoutType === 'card'\">\r\n    <ng-container *ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\r\n    <ng-template #selectedBlock>\r\n        <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone}\">\r\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template #notSelectedBlock>\r\n        <ng-container *ngTemplateOutlet=\"pepReadonlyTemplate\"></ng-container>\r\n    </ng-template>\r\n</ng-container>\r\n\r\n\r\n<ng-container *ngIf=\"layoutType === 'table'\">\r\n    <ng-container *ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\r\n    <ng-template #selectedBlock>\r\n        <div class=\"pep-file-container one-row\">\r\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\r\n        </div>\r\n    </ng-template>\r\n    <ng-template #notSelectedBlock>\r\n        <ng-container *ngTemplateOutlet=\"pepReadonlyTemplate\"></ng-container>\r\n    </ng-template>\r\n</ng-container>","styles":[":host{display:block}",""]}]}],"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":43,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":143,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":146,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":157,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":158,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":159,"character":24},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":160,"character":29}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onFileChanged":[{"__symbolic":"method"}],"onFileClicked":[{"__symbolic":"method"}]}}},"origins":{"PepAttachmentModule":"./attachment.module","PepAttachmentComponent":"./attachment.component"},"importAs":"@pepperi-addons/ngx-lib/attachment"}
+{"__symbolic":"module","version":4,"metadata":{"PepAttachmentModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":13,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":16,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":18,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":19,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":21,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":22,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/files-uploader","name":"PepFilesUploaderModule","line":23,"character":8}],"exports":[{"__symbolic":"reference","name":"PepAttachmentComponent"}],"declarations":[{"__symbolic":"reference","name":"PepAttachmentComponent"}]}]}],"members":{}},"PepAttachmentComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"pep-attachment","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":27,"character":21},"member":"OnPush"},"template":"<ng-template #pepTemplate>\n    <pep-files-uploader [key]=\"key\" [src]=\"src\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n        [xAlignment]=\"xAlignment\" [rowSpan]=\"rowSpan\" [fieldHeight]=\"fieldHeight\" [controlType]=\"controlType\"\n        [form]=\"form\" [layoutType]=\"layoutType\" [standAlone]=\"standAlone\" (fileChange)=\"onFileChanged($event)\"\n        (elementClick)=\"onFileClicked($event)\" [acceptedExtensions]=\"acceptAttachmentType\">\n    </pep-files-uploader>\n</ng-template>\n\n<ng-template #pepReadonlyTemplate>\n    <ng-container *ngIf=\"src?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n    <ng-template #notEmptyBlock>\n        <div class=\"pep-file-container\">\n            <a [id]=\"key\" class=\"color-link body-sm pep-card-input \" *ngIf=\"src != null\" title=\"{{ src }}\"\n                target=\"_blank\" href=\"{{ src }}\">{{ src }}</a>\n        </div>\n    </ng-template>\n    <ng-template #emptyBlock>\n        <span>&nbsp;</span>\n    </ng-template>\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\"></ng-container>\n    <ng-template #selectedBlock>\n        <div class=\"pep-file-container\" [ngClass]=\"{ 'one-row': rowSpan == 1, 'stand-alone': standAlone}\">\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </div>\n    </ng-template>\n    <ng-template #notSelectedBlock>\n        <ng-container *ngTemplateOutlet=\"pepReadonlyTemplate\"></ng-container>\n    </ng-template>\n</ng-container>\n\n\n<ng-container *ngIf=\"layoutType === 'table'\">\n    <ng-container *ngIf=\"false && isActive && !disabled; then selectedBlock; else notSelectedBlock\"></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        <ng-container *ngTemplateOutlet=\"pepReadonlyTemplate\"></ng-container>\n    </ng-template>\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}",".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)}"]}]}],"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":43,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":71,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":85,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":127,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":128,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":129,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":132,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":141,"character":5}}]}],"fileChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":143,"character":5}}]}],"elementClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":146,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":157,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":158,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":159,"character":24},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepFileService","line":160,"character":29}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"onFileChanged":[{"__symbolic":"method"}],"onFileClicked":[{"__symbolic":"method"}]}}},"origins":{"PepAttachmentModule":"./attachment.module","PepAttachmentComponent":"./attachment.component"},"importAs":"@pepperi-addons/ngx-lib/attachment"}

package/bread-crumbs/bread-crumbs.component.theme.scss

@@ -1,9 +1,9 @@
-@use '../src/core/style/abstracts/functions';
-
-.bread-crumbs-label {
-    color: functions.get-pep-color(color-text, color-dimmed);
-
-    .current {
-        color: functions.get-pep-color(color-text, color-main);
-    }
-}
+@use '../src/core/style/abstracts/functions';
+
+.bread-crumbs-label {
+    color: functions.get-pep-color(color-text, color-dimmed);
+
+    .current {
+        color: functions.get-pep-color(color-text, color-main);
+    }
+}

package/bread-crumbs/pepperi-addons-ngx-lib-bread-crumbs.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepBreadCrumbsModule":{"__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/icon","name":"MatIconModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":21,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":23,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":24,"character":8}],"exports":[{"__symbolic":"reference","name":"PepBreadCrumbsComponent"}],"declarations":[{"__symbolic":"reference","name":"PepBreadCrumbsComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":30,"character":41}]}]}},"PepBreadCrumbsDisplayType":{"__symbolic":"interface"},"PepBreadCrumbItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":8,"character":22,"context":{"typeName":"Partial"},"module":"./bread-crumbs.model"}]}]}},"IPepBreadCrumbItemClickEvent":{"__symbolic":"interface"},"PepBreadCrumbsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"pep-bread-crumbs","template":"<ng-container *ngIf=\"displayType === 'label'; then labelTemplate; else itemsTemplate\">\r\n</ng-container>\r\n<ng-template #labelTemplate>\r\n    <div *ngIf=\"items?.length > 0\" class=\"bread-crumbs-label ellipsis\" [ngClass]=\"{ 'pep-spacing-element': addSpacing }\"\r\n        [title]=\"getLabelTitle()\">\r\n        <div class=\"body-xs ellipsis\">\r\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\r\n                <span *ngIf=\"!isFirst && !isLast\">&nbsp;{{ charSeparator }}&nbsp;</span>\r\n                <span *ngIf=\"!isLast\">{{ item.text }}</span>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\" title-md ellipsis current\" title=\"{{ items[items.length - 1]?.text }}\">\r\n            <span>{{ items[items.length - 1]?.text }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template #itemsTemplate>\r\n    <ul *ngIf=\"items?.length > 0\" class=\"bread-crumbs-items body-sm ellipsis\">\r\n        <ng-container *ngIf=\"shrinkItems; then shrinkTemplate; else regularTemplate\">\r\n        </ng-container>\r\n\r\n        <ng-template #shrinkTemplate>\r\n            <li>\r\n                <a class=\"color-link\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\">...</a>\r\n                <mat-menu #menu=\"matMenu\">\r\n                    <ng-container *ngFor=\"let menuItem of items; let isLast = last\">\r\n                        <button mat-menu-item *ngIf=\"!isLast\" (click)=\"onBreadCrumbItemClick(menuItem)\"\r\n                            [title]=\"menuItem.title || menuItem.text\" [disabled]=\"menuItem.disabled\"\r\n                            [ngClass]=\"{ disabled: menuItem.disabled }\">\r\n                            <span>\r\n                                {{ menuItem.text }}\r\n                            </span>\r\n                        </button>\r\n                    </ng-container>\r\n                </mat-menu>\r\n            </li>\r\n            <li>\r\n                <mat-icon class=\"seperator pep-spacing-element\">\r\n                    <pep-icon [name]=\"iconSeparator\">\r\n                    </pep-icon>\r\n                </mat-icon>\r\n            </li>\r\n            <li>\r\n                <span [title]=\"items[items.length - 1]?.title || items[items.length - 1]?.text\">\r\n                    {{ items[items.length - 1]?.text }}\r\n                </span>\r\n            </li>\r\n        </ng-template>\r\n        <ng-template #regularTemplate>\r\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\r\n                <li>\r\n                    <a *ngIf=\"!item.disabled\" [title]=\"item.title || item.text\" href=\"javascript:void(0)\"\r\n                        class=\" color-link\" (click)=\"onBreadCrumbItemClick(item)\">{{ item.text }}</a>\r\n                    <span *ngIf=\"item.disabled\" [title]=\"item.title || item.text\">{{ item.text }}</span>\r\n                </li>\r\n                <li *ngIf=\"!isLast\">\r\n                    <mat-icon class=\"seperator pep-spacing-element\">\r\n                        <pep-icon [name]=\"iconSeparator\">\r\n                        </pep-icon>\r\n                    </mat-icon>\r\n                </li>\r\n            </ng-container>\r\n        </ng-template>\r\n    </ul>\r\n</ng-template>","styles":[":host{display:grid}.bread-crumbs-label{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center}ul.bread-crumbs-items{padding:0;margin:0;list-style-type:none;display:flex;align-items:center}ul.bread-crumbs-items li{display:inline-flex}ul.bread-crumbs-items li .seperator{height:1rem;width:1rem}ul.bread-crumbs-items li a{text-decoration:unset}",".bread-crumbs-label{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)}.bread-crumbs-label .current{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":23,"character":1}}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"displayType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"addSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"itemClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":55,"character":39}]}],"ngOnInit":[{"__symbolic":"method"}],"setupShrinkItems":[{"__symbolic":"method"}],"getLabelTitle":[{"__symbolic":"method"}],"onBreadCrumbItemClick":[{"__symbolic":"method"}]}}},"origins":{"PepBreadCrumbsModule":"./bread-crumbs.module","PepBreadCrumbsDisplayType":"./bread-crumbs.model","PepBreadCrumbItem":"./bread-crumbs.model","IPepBreadCrumbItemClickEvent":"./bread-crumbs.model","PepBreadCrumbsComponent":"./bread-crumbs.component"},"importAs":"@pepperi-addons/ngx-lib/bread-crumbs"}
+{"__symbolic":"module","version":4,"metadata":{"PepBreadCrumbsModule":{"__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/icon","name":"MatIconModule","line":20,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":21,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":23,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":24,"character":8}],"exports":[{"__symbolic":"reference","name":"PepBreadCrumbsComponent"}],"declarations":[{"__symbolic":"reference","name":"PepBreadCrumbsComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":30,"character":41}]}]}},"PepBreadCrumbsDisplayType":{"__symbolic":"interface"},"PepBreadCrumbItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":8,"character":22,"context":{"typeName":"Partial"},"module":"./bread-crumbs.model"}]}]}},"IPepBreadCrumbItemClickEvent":{"__symbolic":"interface"},"PepBreadCrumbsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"pep-bread-crumbs","template":"<ng-container *ngIf=\"displayType === 'label'; then labelTemplate; else itemsTemplate\">\n</ng-container>\n<ng-template #labelTemplate>\n    <div *ngIf=\"items?.length > 0\" class=\"bread-crumbs-label ellipsis\" [ngClass]=\"{ 'pep-spacing-element': addSpacing }\"\n        [title]=\"getLabelTitle()\">\n        <div class=\"body-xs ellipsis\">\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <span *ngIf=\"!isFirst && !isLast\">&nbsp;{{ charSeparator }}&nbsp;</span>\n                <span *ngIf=\"!isLast\">{{ item.text }}</span>\n            </ng-container>\n        </div>\n        <div class=\" title-md ellipsis current\" title=\"{{ items[items.length - 1]?.text }}\">\n            <span>{{ items[items.length - 1]?.text }}</span>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #itemsTemplate>\n    <ul *ngIf=\"items?.length > 0\" class=\"bread-crumbs-items body-sm ellipsis\">\n        <ng-container *ngIf=\"shrinkItems; then shrinkTemplate; else regularTemplate\">\n        </ng-container>\n\n        <ng-template #shrinkTemplate>\n            <li>\n                <a class=\"color-link\" [matMenuTriggerFor]=\"menu\" href=\"javascript:void(0)\">...</a>\n                <mat-menu #menu=\"matMenu\">\n                    <ng-container *ngFor=\"let menuItem of items; let isLast = last\">\n                        <button mat-menu-item *ngIf=\"!isLast\" (click)=\"onBreadCrumbItemClick(menuItem)\"\n                            [title]=\"menuItem.title || menuItem.text\" [disabled]=\"menuItem.disabled\"\n                            [ngClass]=\"{ disabled: menuItem.disabled }\">\n                            <span>\n                                {{ menuItem.text }}\n                            </span>\n                        </button>\n                    </ng-container>\n                </mat-menu>\n            </li>\n            <li>\n                <mat-icon class=\"seperator pep-spacing-element\">\n                    <pep-icon [name]=\"iconSeparator\">\n                    </pep-icon>\n                </mat-icon>\n            </li>\n            <li>\n                <span [title]=\"items[items.length - 1]?.title || items[items.length - 1]?.text\">\n                    {{ items[items.length - 1]?.text }}\n                </span>\n            </li>\n        </ng-template>\n        <ng-template #regularTemplate>\n            <ng-container *ngFor=\"let item of items; let isFirst = first; let isLast = last\">\n                <li>\n                    <a *ngIf=\"!item.disabled\" [title]=\"item.title || item.text\" href=\"javascript:void(0)\"\n                        class=\" color-link\" (click)=\"onBreadCrumbItemClick(item)\">{{ item.text }}</a>\n                    <span *ngIf=\"item.disabled\" [title]=\"item.title || item.text\">{{ item.text }}</span>\n                </li>\n                <li *ngIf=\"!isLast\">\n                    <mat-icon class=\"seperator pep-spacing-element\">\n                        <pep-icon [name]=\"iconSeparator\">\n                        </pep-icon>\n                    </mat-icon>\n                </li>\n            </ng-container>\n        </ng-template>\n    </ul>\n</ng-template>","styles":[":host{display:grid}.bread-crumbs-label{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center}ul.bread-crumbs-items{padding:0;margin:0;list-style-type:none;display:flex;align-items:center}ul.bread-crumbs-items li{display:inline-flex}ul.bread-crumbs-items li .seperator{height:1rem;width:1rem}ul.bread-crumbs-items li a{text-decoration:unset}",".bread-crumbs-label{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)}.bread-crumbs-label .current{color:#1a1a1a;color:hsl(var(--pep-color-system-primary-h,0),var(--pep-color-system-primary-s,0%),var(--pep-color-system-primary-l,10%))}"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":23,"character":1}}],"members":{"items":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"displayType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"addSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"itemClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":55,"character":39}]}],"ngOnInit":[{"__symbolic":"method"}],"setupShrinkItems":[{"__symbolic":"method"}],"getLabelTitle":[{"__symbolic":"method"}],"onBreadCrumbItemClick":[{"__symbolic":"method"}]}}},"origins":{"PepBreadCrumbsModule":"./bread-crumbs.module","PepBreadCrumbsDisplayType":"./bread-crumbs.model","PepBreadCrumbItem":"./bread-crumbs.model","IPepBreadCrumbItemClickEvent":"./bread-crumbs.model","PepBreadCrumbsComponent":"./bread-crumbs.component"},"importAs":"@pepperi-addons/ngx-lib/bread-crumbs"}

package/bundles/pepperi-addons-ngx-lib-address.umd.js

@@ -79,7 +79,7 @@
     PepAddressComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'pep-address',
-                    template: "<ng-container [formGroup]=\"form\">\r\n    <ng-container *ngIf=\"layoutType === 'form'\">\r\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\r\n        </pep-field-title>\r\n        <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\r\n            dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\r\n            <div [ngSwitch]=\"groupField.controlType\" *ngFor=\"let groupField of groupFields; let i = index\"\r\n                class=\"pep-address-field columns-{{ groupField.colSpan }}\">\r\n                <pep-textbox *ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\r\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\"\r\n                    [formattedValue]=\"groupField.formattedValue\" [label]=\"groupField.label\"\r\n                    [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\r\n                    [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\r\n                    [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\r\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\r\n                </pep-textbox>\r\n\r\n                <pep-select *ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\r\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\r\n                    [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\r\n                    [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\r\n                    [options]=\"groupField.options\" [parentFieldKey]=\"key\"\r\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\r\n                </pep-select>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'card'\">\r\n        <div class=\"pep-card-input \" title=\"{{ label }}&nbsp;{{ formattedValue }}\"\r\n            [ngClass]=\"['text-align-' + xAlignment]\">\r\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\r\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\r\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\r\n                    }},&nbsp;</span>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"layoutType === 'table'\">\r\n        <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\r\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\r\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\r\n                    }},&nbsp;</span>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</ng-container>",
+                    template: "<ng-container [formGroup]=\"form\">\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\n        </pep-field-title>\n        <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\n            dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n            <div [ngSwitch]=\"groupField.controlType\" *ngFor=\"let groupField of groupFields; let i = index\"\n                class=\"pep-address-field columns-{{ groupField.colSpan }}\">\n                <pep-textbox *ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\"\n                    [formattedValue]=\"groupField.formattedValue\" [label]=\"groupField.label\"\n                    [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\n                    [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\n                    [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-textbox>\n\n                <pep-select *ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n                    [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\n                    [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\n                    [options]=\"groupField.options\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-select>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-card-input \" title=\"{{ label }}&nbsp;{{ formattedValue }}\"\n            [ngClass]=\"['text-align-' + xAlignment]\">\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".header{grid-column:1/span 3}.pep-address-container{padding:.875rem .75rem;padding:.875rem var(--pep-spacing-md,.75rem);border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);display:-ms-grid;display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:.75rem;grid-column-gap:var(--pep-spacing-md,.75rem);grid-row-gap:.75rem;grid-row-gap:var(--pep-spacing-md,.75rem)}.pep-address-container .columns-2{grid-column:1/span 2}.pep-address-container .columns-3{grid-column:1/span 3}", ".pep-address-container,.pepperi-address-container{background:rgba(26,26,26,.04);background:hsla(var(--pep-color-weak-h,0),var(--pep-color-weak-s,0%),var(--pep-color-weak-l,10%),.04)}"]
                 },] }

package/bundles/pepperi-addons-ngx-lib-address.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-address.umd.js","sources":["../../../projects/ngx-lib/address/address.component.ts","../../../projects/ngx-lib/address/address.module.ts","../../../projects/ngx-lib/address/public-api.ts","../../../projects/ngx-lib/address/pepperi-addons-ngx-lib-address.ts"],"sourcesContent":["import {\r\n    Component,\r\n    OnInit,\r\n    OnChanges,\r\n    Input,\r\n    Output,\r\n    EventEmitter,\r\n    ChangeDetectionStrategy,\r\n    OnDestroy,\r\n    Renderer2,\r\n    ElementRef,\r\n} from '@angular/core';\r\nimport { FormGroup } from '@angular/forms';\r\nimport {\r\n    PepLayoutType,\r\n    PepHorizontalAlignment,\r\n    DEFAULT_HORIZONTAL_ALIGNMENT,\r\n    IPepFieldValueChangeEvent,\r\n} from '@pepperi-addons/ngx-lib';\r\n\r\n@Component({\r\n    selector: 'pep-address',\r\n    templateUrl: './address.component.html',\r\n    styleUrls: ['./address.component.scss', './address.component.theme.scss'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class PepAddressComponent implements OnChanges, OnInit, OnDestroy {\r\n    @Input() key = '';\r\n    // @Input() value = '';\r\n    @Input() formattedValue = '';\r\n    @Input() label = '';\r\n    @Input() mandatory = false;\r\n    @Input() disabled = false;\r\n    @Input() readonly = false;\r\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\r\n    @Input() rowSpan = 1;\r\n    @Input() groupFields: Array<any>;\r\n\r\n    @Input() form: FormGroup = null;\r\n    @Input() layoutType: PepLayoutType = 'form';\r\n\r\n    private _visible = true;\r\n    @Input()\r\n    set visible(visible: boolean) {\r\n        this._visible = visible;\r\n        if (visible) {\r\n            this.renderer.removeClass(\r\n                this.element.nativeElement,\r\n                'hidden-element'\r\n            );\r\n        } else {\r\n            this.renderer.addClass(\r\n                this.element.nativeElement,\r\n                'hidden-element'\r\n            );\r\n        }\r\n    }\r\n    get visible(): boolean {\r\n        return this._visible;\r\n    }\r\n\r\n    @Output()\r\n    addressValueChange: EventEmitter<IPepFieldValueChangeEvent> = new EventEmitter<IPepFieldValueChangeEvent>();\r\n\r\n    constructor(private element: ElementRef, private renderer: Renderer2) { }\r\n\r\n    ngOnInit(): void {\r\n        this.renderer.addClass(this.element.nativeElement, 'pep-grouped-field');\r\n    }\r\n\r\n    ngOnChanges(changes): void {\r\n        //\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        //\r\n    }\r\n\r\n    // Not in use anymore comment in 16.55.\r\n    // onBlur(e: any, key: string): void {\r\n    //     const value = e.target ? e.target.value : e;\r\n    //     this.changeValue({ key, value }, e.relatedTarget);\r\n    // }\r\n\r\n    onValueChange(value: string, key: string): void {\r\n        // if (e.target) {\r\n        //     const input = e.target ? e.target.value : e;\r\n        //     this.changeValue({ key, value: input.value });\r\n        // } else {\r\n        //     this.changeValue(e);\r\n        // }\r\n\r\n        const currentGroupField = this.groupFields.find((gf) => gf.key === key);\r\n\r\n        if (currentGroupField && currentGroupField.value !== value) {\r\n            // Set the value in the form controls\r\n            if (this.form) {\r\n                const formCtrl = this.form.get(this.key);\r\n\r\n                if (formCtrl) {\r\n                    formCtrl.get(key).setValue(value);\r\n                }\r\n            }\r\n\r\n            this.addressValueChange.emit({\r\n                key: key,\r\n                value: value,\r\n            });\r\n        }\r\n    }\r\n\r\n    // changeValue(field: any): void {\r\n    //     const currentGroupField = this.groupFields.filter(\r\n    //         (groupField) => groupField.key === field.key\r\n    //     )[0];\r\n\r\n    //     if (currentGroupField.value !== field.value) {\r\n    //         // Set the value in the form controls\r\n    //         if (this.form) {\r\n    //             const formCtrl = this.form.get(this.key);\r\n\r\n    //             if (formCtrl) {\r\n    //                 formCtrl.get(field.key).setValue(field.value);\r\n    //             }\r\n    //         }\r\n\r\n    //         this.valueChange.emit({\r\n    //             key: field.key,\r\n    //             value: field.value,\r\n    //         });\r\n    //     }\r\n    // }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { MatCommonModule } from '@angular/material/core';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\n\r\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\r\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\r\nimport { PepSelectModule } from '@pepperi-addons/ngx-lib/select';\r\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\r\n\r\nimport { PepAddressComponent } from './address.component';\r\n\r\n@NgModule({\r\n    imports: [\r\n        CommonModule,\r\n        ReactiveFormsModule,\r\n        // Material modules\r\n        MatCommonModule,\r\n        MatFormFieldModule,\r\n        // ngx-lib modules\r\n        PepNgxLibModule,\r\n        PepTextboxModule,\r\n        PepSelectModule,\r\n        PepFieldTitleModule,\r\n    ],\r\n    exports: [PepAddressComponent],\r\n    declarations: [PepAddressComponent],\r\n})\r\nexport class PepAddressModule {}\r\n","/*\r\n * Public API Surface of ngx-lib/address\r\n */\r\nexport * from './address.module';\r\nexport * from './address.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","Component","ChangeDetectionStrategy","ElementRef","Renderer2","Input","Output","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatFormFieldModule","PepNgxLibModule","PepTextboxModule","PepSelectModule","PepFieldTitleModule"],"mappings":";;;;;;;QAgEI,6BAAoB,OAAmB,EAAU,QAAmB;YAAhD,YAAO,GAAP,OAAO,CAAY;YAAU,aAAQ,GAAR,QAAQ,CAAW;YArC3D,QAAG,GAAG,EAAE,CAAC;;YAET,mBAAc,GAAG,EAAE,CAAC;YACpB,UAAK,GAAG,EAAE,CAAC;YACX,cAAS,GAAG,KAAK,CAAC;YAClB,aAAQ,GAAG,KAAK,CAAC;YACjB,aAAQ,GAAG,KAAK,CAAC;YACjB,eAAU,GAA2BA,mCAA4B,CAAC;YAClE,YAAO,GAAG,CAAC,CAAC;YAGZ,SAAI,GAAc,IAAI,CAAC;YACvB,eAAU,GAAkB,MAAM,CAAC;YAEpC,aAAQ,GAAG,IAAI,CAAC;YAqBxB,uBAAkB,GAA4C,IAAIC,iBAAY,EAA6B,CAAC;SAEnC;QAtBzE,sBACI,wCAAO;iBAcX;gBACI,OAAO,IAAI,CAAC,QAAQ,CAAC;aACxB;iBAjBD,UACY,OAAgB;gBACxB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;gBACxB,IAAI,OAAO,EAAE;oBACT,IAAI,CAAC,QAAQ,CAAC,WAAW,CACrB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;iBACL;qBAAM;oBACH,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;iBACL;aACJ;;;WAAA;QAUD,sCAAQ,GAAR;YACI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC;SAC3E;QAED,yCAAW,GAAX,UAAY,OAAO;;SAElB;QAED,yCAAW,GAAX;;SAEC;;;;;;QAQD,2CAAa,GAAb,UAAc,KAAa,EAAE,GAAW;;;;;;;YAQpC,IAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAC,EAAE,IAAK,OAAA,EAAE,CAAC,GAAG,KAAK,GAAG,GAAA,CAAC,CAAC;YAExE,IAAI,iBAAiB,IAAI,iBAAiB,CAAC,KAAK,KAAK,KAAK,EAAE;;gBAExD,IAAI,IAAI,CAAC,IAAI,EAAE;oBACX,IAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;oBAEzC,IAAI,QAAQ,EAAE;wBACV,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;qBACrC;iBACJ;gBAED,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;oBACzB,GAAG,EAAE,GAAG;oBACR,KAAK,EAAE,KAAK;iBACf,CAAC,CAAC;aACN;SACJ;;;;gBAzFJC,cAAS,SAAC;oBACP,QAAQ,EAAE,aAAa;oBACvB,srGAAuC;oBAEvC,eAAe,EAAEC,4BAAuB,CAAC,MAAM;;iBAClD;;;gBAfGC,eAAU;gBADVC,cAAS;;;sBAkBRC,UAAK;iCAELA,UAAK;wBACLA,UAAK;4BACLA,UAAK;2BACLA,UAAK;2BACLA,UAAK;6BACLA,UAAK;0BACLA,UAAK;8BACLA,UAAK;uBAELA,UAAK;6BACLA,UAAK;0BAGLA,UAAK;qCAmBLC,WAAM;;;;QC/BX;;;;;gBAhBCC,aAAQ,SAAC;oBACN,OAAO,EAAE;wBACLC,mBAAY;wBACZC,yBAAmB;;wBAEnBC,sBAAe;wBACfC,4BAAkB;;wBAElBC,sBAAe;wBACfC,wBAAgB;wBAChBC,sBAAe;wBACfC,8BAAmB;qBACtB;oBACD,OAAO,EAAE,CAAC,mBAAmB,CAAC;oBAC9B,YAAY,EAAE,CAAC,mBAAmB,CAAC;iBACtC;;;IC7BD;;;;ICAA;;;;;;;;;;;;;"}
+{"version":3,"file":"pepperi-addons-ngx-lib-address.umd.js","sources":["../../../projects/ngx-lib/address/address.component.ts","../../../projects/ngx-lib/address/address.module.ts","../../../projects/ngx-lib/address/public-api.ts","../../../projects/ngx-lib/address/pepperi-addons-ngx-lib-address.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    OnChanges,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectionStrategy,\n    OnDestroy,\n    Renderer2,\n    ElementRef,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport {\n    PepLayoutType,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    IPepFieldValueChangeEvent,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n    selector: 'pep-address',\n    templateUrl: './address.component.html',\n    styleUrls: ['./address.component.scss', './address.component.theme.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepAddressComponent implements OnChanges, OnInit, OnDestroy {\n    @Input() key = '';\n    // @Input() value = '';\n    @Input() formattedValue = '';\n    @Input() label = '';\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() readonly = false;\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() rowSpan = 1;\n    @Input() groupFields: Array<any>;\n\n    @Input() form: FormGroup = null;\n    @Input() layoutType: PepLayoutType = 'form';\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    @Output()\n    addressValueChange: EventEmitter<IPepFieldValueChangeEvent> = new EventEmitter<IPepFieldValueChangeEvent>();\n\n    constructor(private element: ElementRef, private renderer: Renderer2) { }\n\n    ngOnInit(): void {\n        this.renderer.addClass(this.element.nativeElement, 'pep-grouped-field');\n    }\n\n    ngOnChanges(changes): void {\n        //\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    // Not in use anymore comment in 16.55.\n    // onBlur(e: any, key: string): void {\n    //     const value = e.target ? e.target.value : e;\n    //     this.changeValue({ key, value }, e.relatedTarget);\n    // }\n\n    onValueChange(value: string, key: string): void {\n        // if (e.target) {\n        //     const input = e.target ? e.target.value : e;\n        //     this.changeValue({ key, value: input.value });\n        // } else {\n        //     this.changeValue(e);\n        // }\n\n        const currentGroupField = this.groupFields.find((gf) => gf.key === key);\n\n        if (currentGroupField && currentGroupField.value !== value) {\n            // Set the value in the form controls\n            if (this.form) {\n                const formCtrl = this.form.get(this.key);\n\n                if (formCtrl) {\n                    formCtrl.get(key).setValue(value);\n                }\n            }\n\n            this.addressValueChange.emit({\n                key: key,\n                value: value,\n            });\n        }\n    }\n\n    // changeValue(field: any): void {\n    //     const currentGroupField = this.groupFields.filter(\n    //         (groupField) => groupField.key === field.key\n    //     )[0];\n\n    //     if (currentGroupField.value !== field.value) {\n    //         // Set the value in the form controls\n    //         if (this.form) {\n    //             const formCtrl = this.form.get(this.key);\n\n    //             if (formCtrl) {\n    //                 formCtrl.get(field.key).setValue(field.value);\n    //             }\n    //         }\n\n    //         this.valueChange.emit({\n    //             key: field.key,\n    //             value: field.value,\n    //         });\n    //     }\n    // }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\nimport { PepSelectModule } from '@pepperi-addons/ngx-lib/select';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepAddressComponent } from './address.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules\n        MatCommonModule,\n        MatFormFieldModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepTextboxModule,\n        PepSelectModule,\n        PepFieldTitleModule,\n    ],\n    exports: [PepAddressComponent],\n    declarations: [PepAddressComponent],\n})\nexport class PepAddressModule {}\n","/*\n * Public API Surface of ngx-lib/address\n */\nexport * from './address.module';\nexport * from './address.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["DEFAULT_HORIZONTAL_ALIGNMENT","EventEmitter","Component","ChangeDetectionStrategy","ElementRef","Renderer2","Input","Output","NgModule","CommonModule","ReactiveFormsModule","MatCommonModule","MatFormFieldModule","PepNgxLibModule","PepTextboxModule","PepSelectModule","PepFieldTitleModule"],"mappings":";;;;;;;QAgEI,6BAAoB,OAAmB,EAAU,QAAmB;YAAhD,YAAO,GAAP,OAAO,CAAY;YAAU,aAAQ,GAAR,QAAQ,CAAW;YArC3D,QAAG,GAAG,EAAE,CAAC;;YAET,mBAAc,GAAG,EAAE,CAAC;YACpB,UAAK,GAAG,EAAE,CAAC;YACX,cAAS,GAAG,KAAK,CAAC;YAClB,aAAQ,GAAG,KAAK,CAAC;YACjB,aAAQ,GAAG,KAAK,CAAC;YACjB,eAAU,GAA2BA,mCAA4B,CAAC;YAClE,YAAO,GAAG,CAAC,CAAC;YAGZ,SAAI,GAAc,IAAI,CAAC;YACvB,eAAU,GAAkB,MAAM,CAAC;YAEpC,aAAQ,GAAG,IAAI,CAAC;YAqBxB,uBAAkB,GAA4C,IAAIC,iBAAY,EAA6B,CAAC;SAEnC;QAtBzE,sBACI,wCAAO;iBAcX;gBACI,OAAO,IAAI,CAAC,QAAQ,CAAC;aACxB;iBAjBD,UACY,OAAgB;gBACxB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;gBACxB,IAAI,OAAO,EAAE;oBACT,IAAI,CAAC,QAAQ,CAAC,WAAW,CACrB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;iBACL;qBAAM;oBACH,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAClB,IAAI,CAAC,OAAO,CAAC,aAAa,EAC1B,gBAAgB,CACnB,CAAC;iBACL;aACJ;;;WAAA;QAUD,sCAAQ,GAAR;YACI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,mBAAmB,CAAC,CAAC;SAC3E;QAED,yCAAW,GAAX,UAAY,OAAO;;SAElB;QAED,yCAAW,GAAX;;SAEC;;;;;;QAQD,2CAAa,GAAb,UAAc,KAAa,EAAE,GAAW;;;;;;;YAQpC,IAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAC,EAAE,IAAK,OAAA,EAAE,CAAC,GAAG,KAAK,GAAG,GAAA,CAAC,CAAC;YAExE,IAAI,iBAAiB,IAAI,iBAAiB,CAAC,KAAK,KAAK,KAAK,EAAE;;gBAExD,IAAI,IAAI,CAAC,IAAI,EAAE;oBACX,IAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;oBAEzC,IAAI,QAAQ,EAAE;wBACV,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;qBACrC;iBACJ;gBAED,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;oBACzB,GAAG,EAAE,GAAG;oBACR,KAAK,EAAE,KAAK;iBACf,CAAC,CAAC;aACN;SACJ;;;;gBAzFJC,cAAS,SAAC;oBACP,QAAQ,EAAE,aAAa;oBACvB,wlGAAuC;oBAEvC,eAAe,EAAEC,4BAAuB,CAAC,MAAM;;iBAClD;;;gBAfGC,eAAU;gBADVC,cAAS;;;sBAkBRC,UAAK;iCAELA,UAAK;wBACLA,UAAK;4BACLA,UAAK;2BACLA,UAAK;2BACLA,UAAK;6BACLA,UAAK;0BACLA,UAAK;8BACLA,UAAK;uBAELA,UAAK;6BACLA,UAAK;0BAGLA,UAAK;qCAmBLC,WAAM;;;;QC/BX;;;;;gBAhBCC,aAAQ,SAAC;oBACN,OAAO,EAAE;wBACLC,mBAAY;wBACZC,yBAAmB;;wBAEnBC,sBAAe;wBACfC,4BAAkB;;wBAElBC,sBAAe;wBACfC,wBAAgB;wBAChBC,sBAAe;wBACfC,8BAAmB;qBACtB;oBACD,OAAO,EAAE,CAAC,mBAAmB,CAAC;oBAC9B,YAAY,EAAE,CAAC,mBAAmB,CAAC;iBACtC;;;IC7BD;;;;ICAA;;;;;;;;;;;;;"}