@pepperi-addons/ngx-lib 0.4.1-beta.13 → 0.4.1-beta.14

package/esm2020/checkbox/checkbox.component.mjs

@@ -126,7 +126,7 @@ export class PepCheckboxComponent {
     }
 }
 PepCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCheckboxComponent, deps: [{ token: i0.Renderer2 }, { token: i1.PepCustomizationService }, { token: i0.ElementRef }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-PepCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepCheckboxComponent, selector: "pep-checkbox", inputs: { key: "key", value: "value", label: "label", type: "type", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", xAlignment: "xAlignment", rowSpan: "rowSpan", additionalValue: "additionalValue", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", layoutType: "layoutType", visible: "visible" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n                'disable': disabled,\n                'pep-report-checkbox': layoutType === 'table' && !isActive,\n                'pep-card-checkbox': layoutType === 'card',\n                'one-row': rowSpan === 1,\n                'no-title': label.length == 0,\n                'right-alignment pull-right flip': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n            <!--\n                This is cause a bug that when click on the pep-input area and after on the checkbox\n                the value is updated only for the second time.\n                (click)=\"toggleChecked($event)\" \n            -->\n            <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n            <ng-template #booleanTextTemplate>\n                <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\">\n                    <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\n                        {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </button>\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n                        label }}</span>\n                </div>\n            </ng-template>\n            <ng-template #regularTemplate>\n                <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\"\n                    [checked]=\"value\" [disabled]=\"disabled\">\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n                </mat-checkbox>\n            </ng-template>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n        </ng-container>\n        <ng-template #itemCampaignBlock>\n            <ng-container *ngIf=\"value; then trueTemplate; else falseTemplate\">\n            </ng-container>\n            <ng-template #trueTemplate>\n                <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' | translate }}\">\n                    <pep-icon name=\"system_bolt\">\n                    </pep-icon>\n                </mat-icon>\n            </ng-template>\n            <ng-template #falseTemplate>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n        <ng-template #checkboxBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}\n", ""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i9.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PepCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepCheckboxComponent, selector: "pep-checkbox", inputs: { key: "key", value: "value", label: "label", type: "type", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", xAlignment: "xAlignment", rowSpan: "rowSpan", additionalValue: "additionalValue", form: "form", isActive: "isActive", showTitle: "showTitle", renderTitle: "renderTitle", layoutType: "layoutType", visible: "visible" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n                'disable': disabled,\n                'pep-report-checkbox': layoutType === 'table' && !isActive,\n                'pep-card-checkbox': layoutType === 'card',\n                'one-row': rowSpan === 1,\n                'no-title': label.length == 0,\n                'right-alignment pull-right flip': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n            <!--\n                This is cause a bug that when click on the pep-input area and after on the checkbox\n                the value is updated only for the second time.\n                (click)=\"toggleChecked($event)\" \n            -->\n            <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n            <ng-template #booleanTextTemplate>\n                <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\">\n                    <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\n                        {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </button>\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n                        label }}</span>\n                </div>\n            </ng-template>\n            <ng-template #regularTemplate>\n                <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\"\n                    [checked]=\"value\" [disabled]=\"disabled\">\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n                </mat-checkbox>\n            </ng-template>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n        </ng-container>\n        <ng-template #itemCampaignBlock>\n            <ng-container *ngIf=\"value; then trueTemplate; else falseTemplate\">\n            </ng-container>\n            <ng-template #trueTemplate>\n                <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' | translate }}\">\n                    <pep-icon name=\"system_bolt\">\n                    </pep-icon>\n                </mat-icon>\n            </ng-template>\n            <ng-template #falseTemplate>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n        <ng-template #checkboxBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}\n", ""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i9.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate>\n        <div class=\"pep-checkbox-container pep-input\" [ngClass]=\"{\n                'disable': disabled,\n                'pep-report-checkbox': layoutType === 'table' && !isActive,\n                'pep-card-checkbox': layoutType === 'card',\n                'one-row': rowSpan === 1,\n                'no-title': label.length == 0,\n                'right-alignment pull-right flip': xAlignment == 'right',\n                'center-alignment': xAlignment == 'center'\n            }\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\">\n            <!--\n                This is cause a bug that when click on the pep-input area and after on the checkbox\n                the value is updated only for the second time.\n                (click)=\"toggleChecked($event)\" \n            -->\n            <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n            <ng-template #booleanTextTemplate>\n                <div class=\"mat-checkbox-layout body-sm\" (click)=\"toggleChecked($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\">\n                    <button [id]=\"key\" class=\"emoji-icon ellipsis pull-left flip\">\n                        {{ value ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </button>\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\" class=\"mat-checkbox-label emoji-title\">{{\n                        label }}</span>\n                </div>\n            </ng-template>\n            <ng-template #regularTemplate>\n                <mat-checkbox [name]=\"key\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\n                    [title]=\"(label.length > 0 ? label + ': ' : '') + (value ? ('CHECKBOX.TRUE' | translate) : ('CHECKBOX.FALSE' | translate))\"\n                    [checked]=\"value\" [disabled]=\"disabled\">\n                    <span *ngIf=\"label.length > 0 && layoutType !== 'table'\">{{ label }}</span>\n                </mat-checkbox>\n            </ng-template>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title *ngIf=\"renderTitle\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n            [xAlignment]=\"xAlignment\" [showTitle]=\"false\">\n        </pep-field-title>\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"key === 'ItemHasActiveCampaign'; then itemCampaignBlock; else checkboxBlock\">\n        </ng-container>\n        <ng-template #itemCampaignBlock>\n            <ng-container *ngIf=\"value; then trueTemplate; else falseTemplate\">\n            </ng-container>\n            <ng-template #trueTemplate>\n                <mat-icon class=\"has-active-campaign\" title=\"{{ 'CHECKBOX.TRUE' | translate }}\">\n                    <pep-icon name=\"system_bolt\">\n                    </pep-icon>\n                </mat-icon>\n            </ng-template>\n            <ng-template #falseTemplate>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n        <ng-template #checkboxBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n        </ng-template>\n    </ng-container>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}\n"] }]

package/esm2020/chips/chips.component.mjs

@@ -134,7 +134,7 @@ export class PepChipsComponent {
     }
 }
 PepChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepChipsComponent, deps: [{ token: i1.PepChipsService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-PepChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepChipsComponent, selector: "pep-chips", inputs: { chips: "chips", type: "type", orientation: "orientation", styleType: "styleType", multiSelect: "multiSelect", placeholder: "placeholder" }, outputs: { fieldClick: "fieldClick", selectionChange: "selectionChange" }, providers: [PepChipsService], ngImport: i0, template: "<mat-form-field class=\"pep-chips-container\" appearance=\"outline\">\n  <mat-chip-list #chipList aria-label=\"Fruit selection\"\n    [ngClass]=\"{'mat-chip-list-stacked': orientation === 'vertical'}\" [multiple]=\"multiSelect\">\n    <mat-chip *ngFor=\"let chip of chips\" class=\"pep-chips {{ styleType }}\" [disabled]=\"chip.disabled\"\n      [selected]=\"chip.selected\" [removable]=\"chip.removable\" [selectable]=\"chip.selectable\"\n      (removed)=\"onChipRemoved(chip)\" (selectionChange)=\"onSelectionChanged($event.selected, chip)\">\n      <span class=\"ellipsis pull-left flip\" title=\"{{chip.value}}\">{{chip.value}}</span>     \n      <pep-button *ngIf=\"chip.removable\" matChipRemove sizeType=\"xs\" iconName=\"system_close\"></pep-button>\n    </mat-chip>\n    <input *ngIf=\"type === 'input'\" matInput [placeholder]=\"placeholder\" [matChipInputFor]=\"chipList\"\n      [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"onChipAdded($event)\">\n    <div *ngIf=\"type === 'select'\" class=\"chips-select\" (click)=\"onChipsSelectClicked()\">{{ 'CHIPS.ADD_CHIP' | translate\n      }}</div>\n  </mat-chip-list>\n</mat-form-field>", styles: [".pep-chips-container ::ng-deep .mat-chip-list{width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper{gap:var(--pep-spacing-sm, .5rem);margin:var(--pep-spacing-sm, .5rem)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-xs, 1rem);margin:0;padding-top:0;padding-bottom:0;height:var(--pep-line-height-md, 1.5rem);min-height:unset;z-index:1;gap:var(--pep-spacing-xs, .25rem);max-width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove{height:unset;width:unset;margin:0}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove .pep-button{flex-shrink:0;border-radius:50%;min-width:unset;height:var(--pep-spacing-lg, 1rem);width:var(--pep-spacing-lg, 1rem)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove .pep-button .mat-icon{height:var(--pep-spacing-md, .75rem);width:var(--pep-spacing-md, .75rem);font-size:var(--pep-font-size-md, 1rem);margin:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .mat-chip-input{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-md, 1.5rem);margin:0}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .chips-select{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-md, 1.5rem);z-index:1}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .pep-chips{justify-content:space-between;width:-moz-fit-content!important;width:fit-content!important}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .mat-chip-input{flex:unset;width:100%}\n", ".pep-chips-container ::ng-deep .mat-chip-list .mat-chip.mat-standard-chip:after{background:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip.mat-standard-chip:focus:after{opacity:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular.mat-chip-selected{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);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%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);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);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:hover{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);cursor:pointer}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert.mat-chip-selected{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));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);color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:focus{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .svg-icon{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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .svg-icon.stroke{fill:unset;stroke: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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong.mat-chip-selected{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong:focus{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button .svg-icon{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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button .svg-icon.stroke{fill:unset;stroke: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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:focus{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:active{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%))!important;opacity:.5!important;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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled):after{border:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon{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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke: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%))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputSeparatorKeyCodes", "placeholder", "id", "matChipInputFor", "matChipInputAddOnBlur", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+PepChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepChipsComponent, selector: "pep-chips", inputs: { chips: "chips", type: "type", orientation: "orientation", styleType: "styleType", multiSelect: "multiSelect", placeholder: "placeholder" }, outputs: { fieldClick: "fieldClick", selectionChange: "selectionChange" }, providers: [PepChipsService], ngImport: i0, template: "<mat-form-field class=\"pep-chips-container\" appearance=\"outline\">\n  <mat-chip-list #chipList aria-label=\"Fruit selection\"\n    [ngClass]=\"{'mat-chip-list-stacked': orientation === 'vertical'}\" [multiple]=\"multiSelect\">\n    <mat-chip *ngFor=\"let chip of chips\" class=\"pep-chips {{ styleType }}\" [disabled]=\"chip.disabled\"\n      [selected]=\"chip.selected\" [removable]=\"chip.removable\" [selectable]=\"chip.selectable\"\n      (removed)=\"onChipRemoved(chip)\" (selectionChange)=\"onSelectionChanged($event.selected, chip)\">\n      <span class=\"ellipsis pull-left flip\" title=\"{{chip.value}}\">{{chip.value}}</span>     \n      <pep-button *ngIf=\"chip.removable\" matChipRemove sizeType=\"xs\" iconName=\"system_close\"></pep-button>\n    </mat-chip>\n    <input *ngIf=\"type === 'input'\" matInput [placeholder]=\"placeholder\" [matChipInputFor]=\"chipList\"\n      [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"onChipAdded($event)\">\n    <div *ngIf=\"type === 'select'\" class=\"chips-select\" (click)=\"onChipsSelectClicked()\">{{ 'CHIPS.ADD_CHIP' | translate\n      }}</div>\n  </mat-chip-list>\n</mat-form-field>", styles: [".pep-chips-container ::ng-deep .mat-chip-list{width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper{gap:var(--pep-spacing-sm, .5rem);margin:var(--pep-spacing-sm, .5rem)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-xs, 1rem);margin:0;padding-top:0;padding-bottom:0;height:var(--pep-line-height-md, 1.5rem);min-height:unset;z-index:1;gap:var(--pep-spacing-xs, .25rem);max-width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove{height:unset;width:unset;margin:0}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove .pep-button{flex-shrink:0;border-radius:50%;min-width:unset;height:var(--pep-spacing-lg, 1rem);width:var(--pep-spacing-lg, 1rem)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove .pep-button .mat-icon{height:var(--pep-spacing-md, .75rem);width:var(--pep-spacing-md, .75rem);font-size:var(--pep-font-size-md, 1rem);margin:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .mat-chip-input{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-md, 1.5rem);margin:0}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .chips-select{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-md, 1.5rem);z-index:1}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .pep-chips{justify-content:space-between;width:-moz-fit-content!important;width:fit-content!important}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .mat-chip-input{flex:unset;width:100%}\n", ".pep-chips-container ::ng-deep .mat-chip-list .mat-chip.mat-standard-chip:after{background:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip.mat-standard-chip:focus:after{opacity:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular.mat-chip-selected{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);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%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);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);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:hover{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);cursor:pointer}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert.mat-chip-selected{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));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);color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:focus{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .svg-icon{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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .svg-icon.stroke{fill:unset;stroke: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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong.mat-chip-selected{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong:focus{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button .svg-icon{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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button .svg-icon.stroke{fill:unset;stroke: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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:focus{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:active{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%))!important;opacity:.5!important;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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled):after{border:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon{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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke: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%))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-chips', providers: [PepChipsService], template: "<mat-form-field class=\"pep-chips-container\" appearance=\"outline\">\n  <mat-chip-list #chipList aria-label=\"Fruit selection\"\n    [ngClass]=\"{'mat-chip-list-stacked': orientation === 'vertical'}\" [multiple]=\"multiSelect\">\n    <mat-chip *ngFor=\"let chip of chips\" class=\"pep-chips {{ styleType }}\" [disabled]=\"chip.disabled\"\n      [selected]=\"chip.selected\" [removable]=\"chip.removable\" [selectable]=\"chip.selectable\"\n      (removed)=\"onChipRemoved(chip)\" (selectionChange)=\"onSelectionChanged($event.selected, chip)\">\n      <span class=\"ellipsis pull-left flip\" title=\"{{chip.value}}\">{{chip.value}}</span>     \n      <pep-button *ngIf=\"chip.removable\" matChipRemove sizeType=\"xs\" iconName=\"system_close\"></pep-button>\n    </mat-chip>\n    <input *ngIf=\"type === 'input'\" matInput [placeholder]=\"placeholder\" [matChipInputFor]=\"chipList\"\n      [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"onChipAdded($event)\">\n    <div *ngIf=\"type === 'select'\" class=\"chips-select\" (click)=\"onChipsSelectClicked()\">{{ 'CHIPS.ADD_CHIP' | translate\n      }}</div>\n  </mat-chip-list>\n</mat-form-field>", styles: [".pep-chips-container ::ng-deep .mat-chip-list{width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper{gap:var(--pep-spacing-sm, .5rem);margin:var(--pep-spacing-sm, .5rem)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-xs, 1rem);margin:0;padding-top:0;padding-bottom:0;height:var(--pep-line-height-md, 1.5rem);min-height:unset;z-index:1;gap:var(--pep-spacing-xs, .25rem);max-width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove{height:unset;width:unset;margin:0}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove .pep-button{flex-shrink:0;border-radius:50%;min-width:unset;height:var(--pep-spacing-lg, 1rem);width:var(--pep-spacing-lg, 1rem)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove .pep-button .mat-icon{height:var(--pep-spacing-md, .75rem);width:var(--pep-spacing-md, .75rem);font-size:var(--pep-font-size-md, 1rem);margin:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .mat-chip-input{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-md, 1.5rem);margin:0}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .chips-select{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-md, 1.5rem);z-index:1}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .pep-chips{justify-content:space-between;width:-moz-fit-content!important;width:fit-content!important}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .mat-chip-input{flex:unset;width:100%}\n", ".pep-chips-container ::ng-deep .mat-chip-list .mat-chip.mat-standard-chip:after{background:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip.mat-standard-chip:focus:after{opacity:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular.mat-chip-selected{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);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%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);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);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:hover{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);cursor:pointer}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert.mat-chip-selected{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));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);color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:focus{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .svg-icon{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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .svg-icon.stroke{fill:unset;stroke: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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong.mat-chip-selected{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong:focus{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button .svg-icon{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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button .svg-icon.stroke{fill:unset;stroke: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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:focus{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:active{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%))!important;opacity:.5!important;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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled):after{border:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon{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-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke: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%))}\n"] }]

package/esm2020/color/color-picker.component.mjs

@@ -213,7 +213,7 @@ export class PepColorPickerComponent {
 }
 PepColorPickerComponent.CURRENT_HUE = '--pep-color-picker-current-hue';
 PepColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorPickerComponent, deps: [{ token: i1.PepColorService }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-PepColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepColorPickerComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n                    (valueChange)=\"onHueChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n                </pep-slider>\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>", styles: [".mat-slider-track-background,.mat-slider-horizontal .mat-slider-track-fill{display:none}.pepperi-color-picker-container ::ng-deep .mat-dialog-content,.pep-color-picker-container ::ng-deep .mat-dialog-content{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-sm, .5rem) 0}.pepperi-color-picker-container .color-chooser-content,.pep-color-picker-container .color-chooser-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:var(--pep-spacing-sm, .5rem)}.pepperi-color-picker-container .color-chooser-content .current-color,.pep-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:var(--pep-border-radius-md, .25rem);width:9.25rem;height:9.25rem}.pepperi-color-picker-container .color-chooser-content .slider-box,.pep-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content,.pep-color-picker-container .color-value-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:1.5rem}.pepperi-color-picker-container .color-value-content .color-value,.pep-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pepperi-color-picker-container .color-value-content .color-value.with-complient,.pep-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content .color-complient-container,.pep-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient,.pep-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-form-field-height, 2.5rem);width:9.25rem}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions{display:block}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions .color-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}\n", ".pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon,.pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon{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%))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "component", type: i8.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i9.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "background", "step", "minValue", "maxValue", "value"], outputs: ["valueChange", "inputChange"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i11.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError"], outputs: ["valueChange", "formValidationChange"] }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }] });
+PepColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepColorPickerComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n                    (valueChange)=\"onHueChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n                </pep-slider>\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>", styles: [".mat-slider-track-background,.mat-slider-horizontal .mat-slider-track-fill{display:none}.pepperi-color-picker-container ::ng-deep .mat-dialog-content,.pep-color-picker-container ::ng-deep .mat-dialog-content{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-sm, .5rem) 0}.pepperi-color-picker-container .color-chooser-content,.pep-color-picker-container .color-chooser-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:var(--pep-spacing-sm, .5rem)}.pepperi-color-picker-container .color-chooser-content .current-color,.pep-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:var(--pep-border-radius-md, .25rem);width:9.25rem;height:9.25rem}.pepperi-color-picker-container .color-chooser-content .slider-box,.pep-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content,.pep-color-picker-container .color-value-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:1.5rem}.pepperi-color-picker-container .color-value-content .color-value,.pep-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pepperi-color-picker-container .color-value-content .color-value.with-complient,.pep-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content .color-complient-container,.pep-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient,.pep-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-form-field-height, 2.5rem);width:9.25rem}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions{display:block}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions .color-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}\n", ".pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon,.pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon{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%))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.PepDialogComponent, selector: "pep-dialog", inputs: ["title", "showClose", "showHeader", "showFooter"], outputs: ["close"] }, { kind: "component", type: i8.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i9.PepSliderComponent, selector: "pep-slider", inputs: ["label", "disabled", "hint", "background", "step", "minValue", "maxValue", "value"], outputs: ["valueChange", "inputChange"] }, { kind: "component", type: i10.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i11.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError"], outputs: ["valueChange", "formValidationChange"] }, { kind: "pipe", type: i12.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepColorPickerComponent, decorators: [{
             type: Component,
             args: [{ template: "<div class=\"pep-color-picker-container\">\n    <pep-dialog [title]=\"'COLOR.DIALOG_TITLE' | translate\" (close)=\"closeDialog($event)\">\n        <ng-container pep-dialog-content>\n            <div class=\"color-chooser-content\">\n                <div class=\"current-color\" [ngStyle]=\"{ 'background': data?.value ? data.value : 'transparent' }\"></div>\n\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_HUE' | translate\" [minValue]=\"currentHueMin\"\n                    [maxValue]=\"currentHueMax\" [value]=\"currentHue\" [background]=\"currentHueBackground\"\n                    (valueChange)=\"onHueChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_SATURATION' | translate\"\n                    [minValue]=\"currentSaturationMin\" [maxValue]=\"currentSaturationMax\" [value]=\"currentSaturation\"\n                    [background]=\"currentSaturationBackground\" (valueChange)=\"onSaturationChange($event)\">\n                </pep-slider>\n                <pep-slider class=\"slider-box\" [label]=\"'COLOR.CHANGE_LIGHTNESS' | translate\"\n                    [minValue]=\"currentLightnessMin\" [maxValue]=\"currentLightnessMax\"\n                    [value]=\"currentLightnessMax - currentLightness + currentLightnessMin\"\n                    [background]=\"currentLightnessBackground\" (valueChange)=\"onLightnessChange($event)\">\n                </pep-slider>\n            </div>\n            <div class=\"color-value-content\">\n                <div class=\"color-value\" [ngClass]=\"{ 'with-complient': checkAAComplient }\">\n                    <pep-textbox [key]=\"'colorValue'\" [label]=\"'COLOR.ADD_VALUE_HERE' | translate \"\n                        [formattedValue]=\"data?.value\" [value]=\"data?.value\" (valueChange)=\"onColorValueChange($event)\">\n                    </pep-textbox>\n                </div>\n                <div *ngIf=\"checkAAComplient\" class=\"color-complient-container\">\n                    <pep-field-title [label]=\"'COLOR.AA_COMPLIENT' | translate \">\n                    </pep-field-title>\n                    <div class=\"color-complient\" [ngStyle]=\"{ 'background': complientColor }\">\n                        <mat-icon *ngIf=\"isUserChooseAAComplientColor\">\n                            <pep-icon name=\"system_ok\">\n                            </pep-icon>\n                        </mat-icon>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container pep-dialog-actions>\n            <div class=\"color-actions pep-spacing-element-negative\">\n                <mat-checkbox *ngIf=\"data.showAAComplient\" class=\"pep-spacing-element\" type=\"checkbox\"\n                    id=\"checkAAComplient\" (change)=\"checkAAComplient = !checkAAComplient\" [checked]=\"checkAAComplient\">\n                    <span class=\"body-xs ellipsis\">{{ 'COLOR.AA_COMPLIENT' | translate }}</span>\n                </mat-checkbox>\n                <div>\n                    <button mat-button [mat-dialog-close]=\"null\" class=\"pep-spacing-element pep-button md weak\">\n                        {{'ACTIONS.CANCEL' | translate}}\n                    </button>\n                    <button mat-button class=\"pep-spacing-element pep-button md strong\" (click)=\"onSave($event)\">\n                        {{'ACTIONS.OK' | translate}}\n                    </button>\n                </div>\n            </div>\n        </ng-container>\n    </pep-dialog>\n</div>", styles: [".mat-slider-track-background,.mat-slider-horizontal .mat-slider-track-fill{display:none}.pepperi-color-picker-container ::ng-deep .mat-dialog-content,.pep-color-picker-container ::ng-deep .mat-dialog-content{padding:var(--pep-spacing-sm, .5rem) var(--pep-spacing-sm, .5rem) 0}.pepperi-color-picker-container .color-chooser-content,.pep-color-picker-container .color-chooser-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(3,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:var(--pep-spacing-sm, .5rem)}.pepperi-color-picker-container .color-chooser-content .current-color,.pep-color-picker-container .color-chooser-content .current-color{grid-row:1/span 3;grid-column:6/span 4;border-radius:var(--pep-border-radius-md, .25rem);width:9.25rem;height:9.25rem}.pepperi-color-picker-container .color-chooser-content .slider-box,.pep-color-picker-container .color-chooser-content .slider-box{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content,.pep-color-picker-container .color-value-content{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(1,1fr);grid-column-gap:var(--pep-spacing-xl, 1.5rem);grid-row-gap:var(--pep-spacing-sm, .5rem);margin-top:1.5rem}.pepperi-color-picker-container .color-value-content .color-value,.pep-color-picker-container .color-value-content .color-value{grid-row:1/span 1;grid-column:1/span 9}.pepperi-color-picker-container .color-value-content .color-value.with-complient,.pep-color-picker-container .color-value-content .color-value.with-complient{grid-column:1/span 5}.pepperi-color-picker-container .color-value-content .color-complient-container,.pep-color-picker-container .color-value-content .color-complient-container{grid-column:6/span 4}.pepperi-color-picker-container .color-value-content .color-complient-container .color-complient,.pep-color-picker-container .color-value-content .color-complient-container .color-complient{display:flex;justify-content:center;align-items:center;border-radius:var(--pep-border-radius-md, .25rem);height:var(--pep-form-field-height, 2.5rem);width:9.25rem}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions{display:block}.pepperi-color-picker-container ::ng-deep .mat-dialog-actions .color-actions,.pep-color-picker-container ::ng-deep .mat-dialog-actions .color-actions{display:flex;justify-content:space-between;align-items:center}\n", ".pepperi-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon,.pep-color-picker-container .color-value-content .color-complient-container .color-complient ::ng-deep .mat-icon .svg-icon{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%))}\n"] }]

package/esm2020/date/date.component.mjs

@@ -217,7 +217,7 @@ PepDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
         { provide: DatetimeAdapter, useClass: MomentUtcDateTimeAdapter },
         //{ provide: MAT_DATETIME_FORMATS, useValue: MAT_NATIVE_DATETIME_FORMATS }
         { provide: MAT_DATETIME_FORMATS, useValue: MY_DATE_FORMATS },
-    ], viewQueries: [{ propertyName: "datetimePicker", first: true, predicate: ["datetimePicker"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-showIcon=\"showIcon\">\n        <mat-form-field appearance=\"outline\">\n            <input #input [id]=\"key\" title=\"{{ formattedValue }}\" matInput class=\"body-sm\" autocomplete=\"false\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left'}\"\n                [(ngModel)]=\"dateModel\" [ngModelOptions]=\"{standalone: true}\" [matDatetimepicker]=\"datetimePicker\"\n                [min]=\"minDate\" [max]=\"maxDate\" [required]=\"mandatory\" [disabled]=\"disabled\"\n                (dateChange)=\"onDateChange($event)\" (click)=\"openDatetimePicker(datetimePicker)\"\n                (blur)=\"onBlur($event)\" />\n            <mat-error *ngIf=\"renderError\"><span class=\"body-xs\"\n                    [title]=\"mandatory && formattedValue.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: {field: label})\"\n                    [innerText]=\"mandatory && formattedValue.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: {field: label})\"></span>\n            </mat-error>\n            <pep-textbox-icon *ngIf=\"renderSymbol && showIcon && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\" (iconClick)=\"openDatetimePicker(datetimePicker)\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && showIcon && xAlignment == 'left'\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\" (iconClick)=\"openDatetimePicker(datetimePicker)\">\n            </pep-textbox-icon>\n            <mat-datetimepicker #datetimePicker [type]=\"showTime ? 'datetime' : 'date'\" [openOnFocus]=\"false\"\n                [touchUi]=\"true\" [timeInterval]=\"1\"></mat-datetimepicker>\n        </mat-form-field>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\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; context: {showIcon: true}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: {showIcon: false}\"></ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled }\"\n                [ngStyle]=\"{ color: textColor }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\">{{ formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: {showIcon: true}\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngStyle]=\"{ color: textColor }\"\n                            [ngClass]=\"{readonly: disabled}\" title=\"{{ formattedValue }}\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .mat-datetimepicker-toggle.mat-button,::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .mat-datetimepicker-toggle.mat-button{padding:0}\n", "::ng-deep .mat-datetimepicker-dialog{max-width:90vw!important}::ng-deep .mat-datetimepicker-content{border-radius:inherit}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-header{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-header .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-header .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls{color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button{content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==);transform:rotate(90deg)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:hover{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:hover.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:active{fill:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:active.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:disabled{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:disabled.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button{content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==);transform:rotate(-90deg)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:hover{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:hover.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:active{fill:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:active.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:disabled{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:disabled.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-table-header,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-table-header{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body{color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-label,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-label{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:hover .mat-datetimepicker-calendar-body-cell-content,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:hover .mat-datetimepicker-calendar-body-cell-content{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content:not(.keep-background-on-focus),::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:active,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:active{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);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);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon.stroke,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:active,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:active{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-center{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-center .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-center .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand:before{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand:before .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand:before .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell{color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon.stroke,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:active,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:active{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i7.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i11.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i12.PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: ["value", "label", "type", "disabled"], outputs: ["iconClick"] }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "datetimePicker", first: true, predicate: ["datetimePicker"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-showIcon=\"showIcon\">\n        <mat-form-field appearance=\"outline\">\n            <input #input [id]=\"key\" title=\"{{ formattedValue }}\" matInput class=\"body-sm\" autocomplete=\"false\"\n                [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left'}\"\n                [(ngModel)]=\"dateModel\" [ngModelOptions]=\"{standalone: true}\" [matDatetimepicker]=\"datetimePicker\"\n                [min]=\"minDate\" [max]=\"maxDate\" [required]=\"mandatory\" [disabled]=\"disabled\"\n                (dateChange)=\"onDateChange($event)\" (click)=\"openDatetimePicker(datetimePicker)\"\n                (blur)=\"onBlur($event)\" />\n            <mat-error *ngIf=\"renderError\"><span class=\"body-xs\"\n                    [title]=\"mandatory && formattedValue.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: {field: label})\"\n                    [innerText]=\"mandatory && formattedValue.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: {field: label}) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: {field: label})\"></span>\n            </mat-error>\n            <pep-textbox-icon *ngIf=\"renderSymbol && showIcon && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\" (iconClick)=\"openDatetimePicker(datetimePicker)\">\n            </pep-textbox-icon>\n            <pep-textbox-icon *ngIf=\"renderSymbol && showIcon && xAlignment == 'left'\" matSuffix [value]=\"value\"\n                [label]=\"label\" [type]=\"type\" [disabled]=\"disabled\" (iconClick)=\"openDatetimePicker(datetimePicker)\">\n            </pep-textbox-icon>\n            <mat-datetimepicker #datetimePicker [type]=\"showTime ? 'datetime' : 'date'\" [openOnFocus]=\"false\"\n                [touchUi]=\"true\" [timeInterval]=\"1\"></mat-datetimepicker>\n        </mat-form-field>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\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; context: {showIcon: true}\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <div [ngClass]=\"{'one-row': rowSpan === 1}\">\n                <ng-container *ngTemplateOutlet=\"pepTemplate; context: {showIcon: false}\"></ng-container>\n            </div>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-card-input card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled }\"\n                [ngStyle]=\"{ color: textColor }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\">\n                <span *ngIf=\"showTitle && label != ''\" class=\"body-xs title\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ formattedValue }}\" class=\"body-sm value\">{{ formattedValue }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: {showIcon: true}\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"formattedValue?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <ng-container [ngSwitch]=\"type\">\n                    <ng-container *ngSwitchDefault>\n                        <span [id]=\"key\" class=\"body-sm pep-report-input\" [ngStyle]=\"{ color: textColor }\"\n                            [ngClass]=\"{readonly: disabled}\" title=\"{{ formattedValue }}\">{{ formattedValue }}</span>\n                    </ng-container>\n                </ng-container>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span [id]=\"key\">&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>", styles: [":host{height:inherit;display:grid}:host>*{align-self:center}::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-prefix .mat-datetimepicker-toggle.mat-button,::ng-deep .mat-form-field .mat-form-field-wrapper .mat-form-field-suffix .mat-datetimepicker-toggle.mat-button{padding:0}\n", "::ng-deep .mat-datetimepicker-dialog{max-width:90vw!important}::ng-deep .mat-datetimepicker-content{border-radius:inherit}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-header{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-header .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-header .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls{color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button{content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==);transform:rotate(90deg)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:hover{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:hover.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:active{fill:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:active.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:disabled{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-previous-button svg:disabled.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button{content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDI0IDI0IgogICBoZWlnaHQ9IjE2IgogICB3aWR0aD0iMTYiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTEwIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzOCIgLz4KICA8cGF0aAogICAgIGlkPSJwYXRoMiIKICAgICBkPSJNNS44MDAzMjE0OCw5LjI4Njc0MzU0IEwxMS4yNTQyODI0LDEzLjIwMjc1ODMgQzExLjY2NjEzMDksMTMuNTg1MDgzIDEyLjMzMzg2OTEsMTMuNTg1MDgzIDEyLjc0NTcxNzYsMTMuMjAyNzU4MyBMMTguMTk5Njc4NSw5LjI4Njc0MzU0IEMxOC42MTE1MjcsOC45MDQ0MTg4MiAxOS4yNzkyNjUyLDguOTA0NDE4ODIgMTkuNjkxMTEzNyw5LjI4Njc0MzU0IEMyMC4xMDI5NjIxLDkuNjY5MDY4MjYgMjAuMTAyOTYyMSwxMC4yODg5MzkxIDE5LjY5MTExMzcsMTAuNjcxMjYzOCBMMTMuNDkxNDM1MSwxNi40MjY1MTI5IEMxMi42Njc3MzgzLDE3LjE5MTE2MjQgMTEuMzMyMjYxNywxNy4xOTExNjI0IDEwLjUwODU2NDksMTYuNDI2NTEyOSBMNC4zMDg4ODYzMywxMC42NzEyNjM4IEMzLjg5NzAzNzg5LDEwLjI4ODkzOTEgMy44OTcwMzc4OSw5LjY2OTA2ODI2IDQuMzA4ODg2MzMsOS4yODY3NDM1NCBDNC43MjA3MzQ3OCw4LjkwNDQxODgyIDUuMzg4NDczMDMsOC45MDQ0MTg4MiA1LjgwMDMyMTQ4LDkuMjg2NzQzNTQgWiIKICAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICAgZmlsbC1vcGFjaXR5PSIuNSIgLz4KPC9zdmc+Cg==);transform:rotate(-90deg)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.8)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:hover{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:hover.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.97)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:active{fill:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:active.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:disabled{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content .mat-month-content .mat-datetimepicker-calendar-controls .mat-datetimepicker-calendar-next-button svg:disabled.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-table-header,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-table-header{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body{color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-label,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-label{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:hover .mat-datetimepicker-calendar-body-cell-content,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:hover .mat-datetimepicker-calendar-body-cell-content{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content:not(.keep-background-on-focus),::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell:active .mat-datetimepicker-calendar-body-cell-content:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);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);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:active,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-today:active{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);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);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon.stroke,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-year-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:active,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-month-view .mat-datetimepicker-calendar-table .mat-datetimepicker-calendar-body .mat-datetimepicker-calendar-body-cell .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected:active{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-center{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-center .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-center .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand:before{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand:before .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hand:before .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell{color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon{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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon.stroke,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected .svg-icon.stroke{fill:unset;stroke: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%))}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:hover,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-hours .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:active,::ng-deep .mat-datetimepicker-content .mat-datetimepicker-calendar-content mat-datetimepicker-clock .mat-datetimepicker-clock .mat-datetimepicker-clock-minutes .mat-datetimepicker-clock-cell.mat-datetimepicker-clock-cell-selected:active{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatDatetimepickerComponent, selector: "mat-datetimepicker", inputs: ["multiYearSelector", "twelvehour", "startView", "mode", "timeInterval", "ariaNextMonthLabel", "ariaPrevMonthLabel", "ariaNextYearLabel", "ariaPrevYearLabel", "preventSameDateTimeSelection", "panelClass", "startAt", "openOnFocus", "type", "touchUi", "disabled"], outputs: ["selectedChanged", "opened", "closed", "viewChanged"], exportAs: ["matDatetimepicker"] }, { kind: "directive", type: i6.MatDatetimepickerInputDirective, selector: "input[matDatetimepicker]", inputs: ["matDatetimepicker", "matDatepickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i7.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i11.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i12.PepTextboxIconComponent, selector: "pep-textbox-icon", inputs: ["value", "label", "type", "disabled"], outputs: ["iconClick"] }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-date', changeDetection: ChangeDetectionStrategy.OnPush, providers: [

package/esm2020/dialog/dialog.component.mjs

@@ -18,7 +18,7 @@ export class PepDialogComponent {
     }
 }
 PepDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PepDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepDialogComponent, selector: "pep-dialog", inputs: { title: "title", showClose: "showClose", showHeader: "showHeader", showFooter: "showFooter" }, outputs: { close: "close" }, ngImport: i0, template: "<div mat-dialog-title *ngIf=\"showHeader\" class=\"dialog-header-container\">\n    <span class=\"dialog-title\" *ngIf=\"title?.length\">\n        {{ title }}\n    </span>\n    <button mat-button *ngIf=\"showClose\" (click)=\"closeDialog()\" class=\"pep-button icon-button md weak dialog-close\">\n        <mat-icon>\n            <pep-icon name=\"system_close\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</div>\n<div mat-dialog-content>\n    <ng-content select=\"[pep-dialog-content]\"></ng-content>\n</div>\n<div mat-dialog-actions *ngIf=\"showFooter\" class=\"pep-border-top\">\n    <ng-content select=\"[pep-dialog-actions]\"></ng-content>\n</div>", styles: ["", ".pepperi-dialog,.pep-dialog{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
+PepDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepDialogComponent, selector: "pep-dialog", inputs: { title: "title", showClose: "showClose", showHeader: "showHeader", showFooter: "showFooter" }, outputs: { close: "close" }, ngImport: i0, template: "<div mat-dialog-title *ngIf=\"showHeader\" class=\"dialog-header-container\">\n    <span class=\"dialog-title\" *ngIf=\"title?.length\">\n        {{ title }}\n    </span>\n    <button mat-button *ngIf=\"showClose\" (click)=\"closeDialog()\" class=\"pep-button icon-button md weak dialog-close\">\n        <mat-icon>\n            <pep-icon name=\"system_close\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</div>\n<div mat-dialog-content>\n    <ng-content select=\"[pep-dialog-content]\"></ng-content>\n</div>\n<div mat-dialog-actions *ngIf=\"showFooter\" class=\"pep-border-top\">\n    <ng-content select=\"[pep-dialog-actions]\"></ng-content>\n</div>", styles: ["", ".pepperi-dialog,.pep-dialog{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-dialog', template: "<div mat-dialog-title *ngIf=\"showHeader\" class=\"dialog-header-container\">\n    <span class=\"dialog-title\" *ngIf=\"title?.length\">\n        {{ title }}\n    </span>\n    <button mat-button *ngIf=\"showClose\" (click)=\"closeDialog()\" class=\"pep-button icon-button md weak dialog-close\">\n        <mat-icon>\n            <pep-icon name=\"system_close\">\n            </pep-icon>\n        </mat-icon>\n    </button>\n</div>\n<div mat-dialog-content>\n    <ng-content select=\"[pep-dialog-content]\"></ng-content>\n</div>\n<div mat-dialog-actions *ngIf=\"showFooter\" class=\"pep-border-top\">\n    <ng-content select=\"[pep-dialog-actions]\"></ng-content>\n</div>", styles: [".pepperi-dialog,.pep-dialog{box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)!important}\n"] }]

package/esm2020/draggable-items/draggable-items.component.mjs

@@ -74,7 +74,7 @@ export class DraggableItemsComponent {
     }
 }
 DraggableItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DraggableItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemsComponent, selector: "pep-draggable-items", inputs: { containerId: "containerId", showSearch: "showSearch", title: "title", titleType: "titleType", titleSizeType: "titleSizeType", itemPlaceholderType: "itemPlaceholderType", dropAreaIds: "dropAreaIds", items: "items" }, outputs: { itemDragStarted: "itemDragStarted", itemDragEnded: "itemDragEnded" }, ngImport: i0, template: "<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\">\r\n        <div class=\"draggable-items-wrapper\">\r\n            <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n                [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n                [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n        \r\n                <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n                    <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n                </ng-container>\r\n            </pep-draggable-item>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.draggable-items-overflow{overflow:auto;padding:var(--pep-spacing-lg, 1rem) 0}.draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.draggable-items-wrapper .draggble-item{cursor:grab}.draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.title-container .title{align-self:center}.title-container .search-button{display:flex;align-self:center}.placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i4.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "data", "disabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+DraggableItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DraggableItemsComponent, selector: "pep-draggable-items", inputs: { containerId: "containerId", showSearch: "showSearch", title: "title", titleType: "titleType", titleSizeType: "titleSizeType", itemPlaceholderType: "itemPlaceholderType", dropAreaIds: "dropAreaIds", items: "items" }, outputs: { itemDragStarted: "itemDragStarted", itemDragEnded: "itemDragEnded" }, ngImport: i0, template: "<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\">\r\n        <div class=\"draggable-items-wrapper\">\r\n            <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n                [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n                [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n        \r\n                <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n                    <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n                </ng-container>\r\n            </pep-draggable-item>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.draggable-items-overflow{overflow:auto;padding:var(--pep-spacing-lg, 1rem) 0}.draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.draggable-items-wrapper .draggble-item{cursor:grab}.draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.title-container .title{align-self:center}.title-container .search-button{display:flex;align-self:center}.placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PepSearchComponent, selector: "pep-search", inputs: ["triggerOn", "autoCompleteTop", "autoCompleteValues", "shrink", "value", "searchControl", "useAsWebComponent", "sizeType"], outputs: ["search", "autocompleteChange", "stateChange"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "component", type: i4.DraggableItemComponent, selector: "pep-draggable-item", inputs: ["title", "data", "disabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DraggableItemsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pep-draggable-items', template: "<div [id]=\"containerId\" class=\"pep-draggable-items-container\" cdkDropList [cdkDropListData]=\"filteredItems$ | async\"\r\n    cdkDropListSortingDisabled [cdkDropListConnectedTo]=\"dropAreaIds\">\r\n\r\n    <div *ngIf=\"titleType !== 'none'\" class=\"title-container\"\r\n        [ngClass]=\"{ 'pep-border-bottom': titleType === 'with-bottom-border'}\">\r\n        <label class=\"title body-{{ titleSizeType }} bold ellipsis \" >{{title}}</label>\r\n        <pep-search *ngIf=\"showSearch && items?.length > numberItemsToShowSearch\" class=\"search-button\" sizeType=\"sm\" shrink=\"always\"\r\n            [searchControl]=\"searchControl\" triggerOn=\"keydown\"></pep-search>\r\n    </div>\r\n\r\n    <div class=\"draggable-items-overflow\">\r\n        <div class=\"draggable-items-wrapper\">\r\n            <pep-draggable-item *ngFor=\"let item of filteredItems$ | async; let i=index;\" class=\"draggble-item\"\r\n                [title]=\"item.title\" [data]=\"item.data\" [disabled]=\"item.disabled\" cdkDrag [cdkDragData]=\"item.data\"\r\n                [cdkDragDisabled]=\"item.disabled\" (cdkDragStarted)=\"onDragStart($event)\" (cdkDragEnded)=\"onDragEnd($event)\">\r\n        \r\n                <ng-container *ngIf=\"itemPlaceholderType !== 'regular'\">\r\n                    <div class=\"placeholder-item {{itemPlaceholderType}}\" *cdkDragPlaceholder></div>\r\n                </ng-container>\r\n            </pep-draggable-item>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".pep-draggable-items-container{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;padding-inline-end:var(--pep-spacing-xs, .25rem)}.draggable-items-overflow{overflow:auto;padding:var(--pep-spacing-lg, 1rem) 0}.draggable-items-wrapper{display:flex;flex-direction:column;gap:var(--pep-spacing-sm, .5rem)}.draggable-items-wrapper .draggble-item{cursor:grab}.draggable-items-wrapper .draggble-item.cdk-drag-disabled{cursor:not-allowed}.title-container{height:var(--pep-top-bar-field-height, 2.5rem);display:flex;gap:var(--pep-spacing-sm, .5rem);flex-flow:row;justify-content:space-between}.title-container .title{align-self:center}.title-container .search-button{display:flex;align-self:center}.placeholder-item{height:2.5rem;border-radius:var(--pep-border-radius-md, .25rem);width:100%}\n", ".placeholder-item.none{opacity:0}.placeholder-item.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}\n"] }]