@pepperi-addons/ngx-lib 0.4.2-beta.31 → 0.4.2-beta.310

package/fesm2020/pepperi-addons-ngx-lib-checkbox.mjs

@@ -28,6 +28,7 @@ class PepCheckboxComponent {
         this.key = '';
         this.value = false;
         this.label = '';
+        this.id = '';
         this._type = 'checkbox'; // || 'booleanText'
         this.mandatory = false;
         this.disabled = false;
@@ -43,6 +44,7 @@ class PepCheckboxComponent {
         this.layoutType = 'form';
         this._visible = true;
         this.valueChange = new EventEmitter();
+        this.validationChange = new EventEmitter();
         this.standAlone = false;
         this.jsonLib = JSON;
     }
@@ -101,6 +103,28 @@ class PepCheckboxComponent {
         this.form = this.customizationService.getDefaultFromGroup(pepField);
     }
     ngOnInit() {
+        // Auto-generate unique ID only when used as a custom element (for React wrappers)
+        // Check if we're inside a custom element by traversing up the DOM tree
+        if (!this.id || this.id.trim() === '') {
+            let element = this.element.nativeElement;
+            let isCustomElement = false;
+            // Traverse up to find a custom element (tag name contains '-element')
+            while (element && element !== document.body) {
+                if (element.tagName?.toLowerCase().includes('-element')) {
+                    isCustomElement = true;
+                    break;
+                }
+                element = element.parentElement;
+            }
+            if (isCustomElement) {
+                // Initialize global counter if not exists
+                if (typeof window.__pepCheckboxCounter === 'undefined') {
+                    window.__pepCheckboxCounter = 0;
+                }
+                // Generate unique ID using window-level counter (shared across all custom elements)
+                this.id = `pep-checkbox-${window.__pepCheckboxCounter++}`;
+            }
+        }
         if (this.form === null) {
             this.standAlone = true;
             this.setDefaultForm();
@@ -131,20 +155,28 @@ class PepCheckboxComponent {
     }
     changeValue(value) {
         this.customizationService.updateFormFieldValue(this.form, this.key, value);
+        // Raise this only for stand alone fields, If false then the usage for this field is inside a form. 
+        // Then the form will take care of raising the (onFormValidationChanged) event
+        if (this.standAlone) {
+            const isValid = (this.disabled || this.readonly) ? true : this.form.valid;
+            this.validationChange.emit(isValid);
+        }
         this.valueChange.emit(value);
     }
 }
 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"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i1$1.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", id: "id", 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", validationChange: "validationChange" }, 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                    <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\" [id]=\"id\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\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\" >\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 *ngIf=\"readonly || disabled; then readonlyBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #readonlyBlock>\n                <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n                <ng-template #booleanTextTemplate>\n                    <div class=\"pep-disabled-checkbox-in-table\">\n                        {{ value === true || value.toString() === 'true' ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </div>\n                </ng-template>\n                <ng-template #regularTemplate>\n                    <div *ngIf=\"value === true || value.toString() === 'true'\" class=\"pep-disabled-checkbox-in-table\">\n                        <span></span>\n                    </div>\n                </ng-template>\n\n            </ng-template>\n            <ng-template #editableBlock>\n                <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>", styles: [".mat-checkbox-anim-checked-unchecked .mat-checkbox-background{display:none}.mat-checkbox-disabled .mat-checkbox-layout .mat-checkbox-background,.mat-checkbox-indeterminate .mat-checkbox-layout .mat-checkbox-background,.mat-checkbox-checked .mat-checkbox-layout .mat-checkbox-background{border-radius:var(--pep-border-radius-md, .25rem)}.mat-checkbox-checked .mat-checkbox-layout .mat-checkbox-background{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==);width:inherit;height:inherit}.mat-checkbox-checked .mat-checkbox-layout .mat-checkbox-background .mat-checkbox-checkmark-path{display:none}.mat-checkbox-indeterminate .mat-checkbox-layout .mat-checkbox-background{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+Cgk8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iNCIgeD0iNCIgeT0iMTAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcng9IjIiLz4KICAgPCEtLSA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIgLz4gLS0+CiAgPC9zdmc+);width:inherit;height:inherit}.mat-checkbox-indeterminate .mat-checkbox-layout .mat-checkbox-background .mat-checkbox-checkmark-path{display:none}.pepperi-checkbox-container,.pep-checkbox-container{z-index:0;display:grid;align-items:center}.pepperi-checkbox-container .mat-checkbox,.pep-checkbox-container .mat-checkbox{z-index:1;height:inherit;display:flex;align-items:center;cursor:default}.pepperi-checkbox-container .mat-checkbox-layout,.pep-checkbox-container .mat-checkbox-layout{cursor:pointer}.pepperi-checkbox-container .mat-checkbox-inner-container,.pep-checkbox-container .mat-checkbox-inner-container{margin:auto 0!important;margin-left:.25rem!important}.pepperi-checkbox-container .emoji-icon,.pep-checkbox-container .emoji-icon{line-height:1rem;border-radius:var(--pep-border-radius-md, .25rem);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding:0;background:transparent;width:1.5rem;height:1.5rem}.pepperi-checkbox-container .emoji-title,.pep-checkbox-container .emoji-title{margin:0 .25rem}.pepperi-checkbox-container.right-alignment .mat-checkbox-inner-container,.pep-checkbox-container.right-alignment .mat-checkbox-inner-container{margin-left:0!important;margin-right:.25rem!important}.pepperi-checkbox-container.right-alignment .emoji-icon,.pep-checkbox-container.right-alignment .emoji-icon{margin-left:0!important;margin-right:.25rem}.pepperi-checkbox-container.center-alignment .mat-checkbox-inner-container,.pep-checkbox-container.center-alignment .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.pepperi-checkbox-container.center-alignment .mat-checkbox-layout,.pep-checkbox-container.center-alignment .mat-checkbox-layout{width:100%!important;justify-content:center!important}.pepperi-checkbox-container.pepperi-input,.pepperi-checkbox-container.pep-input,.pep-checkbox-container.pepperi-input,.pep-checkbox-container.pep-input{padding-left:.5rem;padding-right:.5rem}.pepperi-report-checkbox,.pep-report-checkbox{background:transparent!important}.pepperi-report-checkbox .mat-checkbox-background,.pepperi-report-checkbox .mat-checkbox-frame,.pep-report-checkbox .mat-checkbox-background,.pep-report-checkbox .mat-checkbox-frame{border:unset!important;background:unset!important;box-shadow:unset!important}.pepperi-card-checkbox,.pep-card-checkbox{display:flex;padding-top:0!important;padding-bottom:0!important}.pepperi-card-checkbox.right-alignment,.pep-card-checkbox.right-alignment{justify-self:flex-end}.pepperi-card-checkbox.center-alignment,.pep-card-checkbox.center-alignment{justify-self:center}.pepperi-card-checkbox.no-title,.pep-card-checkbox.no-title{width:2.5rem!important}.pepperi-card-checkbox .mat-checkbox-layout,.pep-card-checkbox .mat-checkbox-layout{width:100%!important;height:auto;align-items:center!important;vertical-align:unset}.pepperi-card-checkbox .mat-checkbox-inner-container,.pep-card-checkbox .mat-checkbox-inner-container{margin:auto .25rem}.pepperi-card-checkbox.pepperi-input,.pepperi-card-checkbox.pep-input,.pep-card-checkbox.pepperi-input,.pep-card-checkbox.pep-input{padding-left:.25rem;padding-right:.25rem}.pepperi-card-checkbox.one-row,.pep-card-checkbox.one-row{padding-top:0;height:var(--pep-card-field-height, 1.5rem);line-height:1rem}.pepperi-card-checkbox.one-row.no-title,.pep-card-checkbox.one-row.no-title{width:var(--pep-card-field-height, 1.5rem)!important}.pepperi-card-checkbox.one-row.no-title .mat-checkbox-inner-container,.pep-card-checkbox.one-row.no-title .mat-checkbox-inner-container,.pepperi-card-checkbox.one-row.no-title .emoji-icon,.pep-card-checkbox.one-row.no-title .emoji-icon{margin-left:0!important;margin-right:0!important}.pepperi-card-checkbox.one-row .emoji-icon,.pep-card-checkbox.one-row .emoji-icon{height:1rem;width:1rem;font-size:var(--pep-font-size-xs, .75rem)!important}.pepperi-card-checkbox.one-row .mat-checkbox-layout,.pep-card-checkbox.one-row .mat-checkbox-layout{height:1.5rem}.pepperi-card-checkbox.one-row .mat-checkbox-inner-container,.pep-card-checkbox.one-row .mat-checkbox-inner-container{border-radius:var(--pep-border-radius-md, .25rem);width:1rem;height:1rem}.pepperi-card-checkbox.disable,.pep-card-checkbox.disable{background:transparent!important;padding:0!important}.mat-checkbox-layout{z-index:1;margin-bottom:unset;width:fit-content;font-weight:inherit;align-items:unset!important;vertical-align:unset!important;display:grid!important;grid-auto-flow:column}.mat-checkbox-layout .mat-checkbox-inner-container{border-radius:var(--pep-border-radius-md, .25rem);width:1.5rem;height:1.5rem}.mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-ripple{display:none}.mat-checkbox-layout .mat-checkbox-label{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mat-checkbox-layout .mat-checkbox-label span{margin:0 .25rem}.mat-checkbox-layout .mat-checkbox-frame{height:inherit;width:inherit;display:flex;border-radius:var(--pep-border-radius-md, .25rem)}.mat-checkbox-disabled,.mat-checkbox-disabled .mat-checkbox-layout{cursor:auto}.mat-checkbox.lg .mat-checkbox-inner-container{width:1.5rem;height:1.5rem}.mat-checkbox.md .mat-checkbox-inner-container{width:1.25rem;height:1.25rem}.mat-checkbox.sm .mat-checkbox-inner-container{width:1rem;height:1rem}.mat-checkbox.xs .mat-checkbox-inner-container{width:.75rem;height:.75rem}:host{height:inherit;display:grid}:host>*{align-self:center}.pep-disabled-checkbox-in-table{width:inherit;height:inherit;align-items:center;justify-content:center;display:flex}.pep-disabled-checkbox-in-table span{width:1.5rem;height:1.5rem;content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==)}\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: i1$1.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", "multiLine"] }], 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"] }]
+            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                    <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\" [id]=\"id\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\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\" >\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 *ngIf=\"readonly || disabled; then readonlyBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #readonlyBlock>\n                <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n                <ng-template #booleanTextTemplate>\n                    <div class=\"pep-disabled-checkbox-in-table\">\n                        {{ value === true || value.toString() === 'true' ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </div>\n                </ng-template>\n                <ng-template #regularTemplate>\n                    <div *ngIf=\"value === true || value.toString() === 'true'\" class=\"pep-disabled-checkbox-in-table\">\n                        <span></span>\n                    </div>\n                </ng-template>\n\n            </ng-template>\n            <ng-template #editableBlock>\n                <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>", styles: [".mat-checkbox-anim-checked-unchecked .mat-checkbox-background{display:none}.mat-checkbox-disabled .mat-checkbox-layout .mat-checkbox-background,.mat-checkbox-indeterminate .mat-checkbox-layout .mat-checkbox-background,.mat-checkbox-checked .mat-checkbox-layout .mat-checkbox-background{border-radius:var(--pep-border-radius-md, .25rem)}.mat-checkbox-checked .mat-checkbox-layout .mat-checkbox-background{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==);width:inherit;height:inherit}.mat-checkbox-checked .mat-checkbox-layout .mat-checkbox-background .mat-checkbox-checkmark-path{display:none}.mat-checkbox-indeterminate .mat-checkbox-layout .mat-checkbox-background{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+Cgk8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iNCIgeD0iNCIgeT0iMTAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgcng9IjIiLz4KICAgPCEtLSA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIgLz4gLS0+CiAgPC9zdmc+);width:inherit;height:inherit}.mat-checkbox-indeterminate .mat-checkbox-layout .mat-checkbox-background .mat-checkbox-checkmark-path{display:none}.pepperi-checkbox-container,.pep-checkbox-container{z-index:0;display:grid;align-items:center}.pepperi-checkbox-container .mat-checkbox,.pep-checkbox-container .mat-checkbox{z-index:1;height:inherit;display:flex;align-items:center;cursor:default}.pepperi-checkbox-container .mat-checkbox-layout,.pep-checkbox-container .mat-checkbox-layout{cursor:pointer}.pepperi-checkbox-container .mat-checkbox-inner-container,.pep-checkbox-container .mat-checkbox-inner-container{margin:auto 0!important;margin-left:.25rem!important}.pepperi-checkbox-container .emoji-icon,.pep-checkbox-container .emoji-icon{line-height:1rem;border-radius:var(--pep-border-radius-md, .25rem);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding:0;background:transparent;width:1.5rem;height:1.5rem}.pepperi-checkbox-container .emoji-title,.pep-checkbox-container .emoji-title{margin:0 .25rem}.pepperi-checkbox-container.right-alignment .mat-checkbox-inner-container,.pep-checkbox-container.right-alignment .mat-checkbox-inner-container{margin-left:0!important;margin-right:.25rem!important}.pepperi-checkbox-container.right-alignment .emoji-icon,.pep-checkbox-container.right-alignment .emoji-icon{margin-left:0!important;margin-right:.25rem}.pepperi-checkbox-container.center-alignment .mat-checkbox-inner-container,.pep-checkbox-container.center-alignment .mat-checkbox-inner-container{margin-left:0!important;margin-right:0!important}.pepperi-checkbox-container.center-alignment .mat-checkbox-layout,.pep-checkbox-container.center-alignment .mat-checkbox-layout{width:100%!important;justify-content:center!important}.pepperi-checkbox-container.pepperi-input,.pepperi-checkbox-container.pep-input,.pep-checkbox-container.pepperi-input,.pep-checkbox-container.pep-input{padding-left:.5rem;padding-right:.5rem}.pepperi-report-checkbox,.pep-report-checkbox{background:transparent!important}.pepperi-report-checkbox .mat-checkbox-background,.pepperi-report-checkbox .mat-checkbox-frame,.pep-report-checkbox .mat-checkbox-background,.pep-report-checkbox .mat-checkbox-frame{border:unset!important;background:unset!important;box-shadow:unset!important}.pepperi-card-checkbox,.pep-card-checkbox{display:flex;padding-top:0!important;padding-bottom:0!important}.pepperi-card-checkbox.right-alignment,.pep-card-checkbox.right-alignment{justify-self:flex-end}.pepperi-card-checkbox.center-alignment,.pep-card-checkbox.center-alignment{justify-self:center}.pepperi-card-checkbox.no-title,.pep-card-checkbox.no-title{width:2.5rem!important}.pepperi-card-checkbox .mat-checkbox-layout,.pep-card-checkbox .mat-checkbox-layout{width:100%!important;height:auto;align-items:center!important;vertical-align:unset}.pepperi-card-checkbox .mat-checkbox-inner-container,.pep-card-checkbox .mat-checkbox-inner-container{margin:auto .25rem}.pepperi-card-checkbox.pepperi-input,.pepperi-card-checkbox.pep-input,.pep-card-checkbox.pepperi-input,.pep-card-checkbox.pep-input{padding-left:.25rem;padding-right:.25rem}.pepperi-card-checkbox.one-row,.pep-card-checkbox.one-row{padding-top:0;height:var(--pep-card-field-height, 1.5rem);line-height:1rem}.pepperi-card-checkbox.one-row.no-title,.pep-card-checkbox.one-row.no-title{width:var(--pep-card-field-height, 1.5rem)!important}.pepperi-card-checkbox.one-row.no-title .mat-checkbox-inner-container,.pep-card-checkbox.one-row.no-title .mat-checkbox-inner-container,.pepperi-card-checkbox.one-row.no-title .emoji-icon,.pep-card-checkbox.one-row.no-title .emoji-icon{margin-left:0!important;margin-right:0!important}.pepperi-card-checkbox.one-row .emoji-icon,.pep-card-checkbox.one-row .emoji-icon{height:1rem;width:1rem;font-size:var(--pep-font-size-xs, .75rem)!important}.pepperi-card-checkbox.one-row .mat-checkbox-layout,.pep-card-checkbox.one-row .mat-checkbox-layout{height:1.5rem}.pepperi-card-checkbox.one-row .mat-checkbox-inner-container,.pep-card-checkbox.one-row .mat-checkbox-inner-container{border-radius:var(--pep-border-radius-md, .25rem);width:1rem;height:1rem}.pepperi-card-checkbox.disable,.pep-card-checkbox.disable{background:transparent!important;padding:0!important}.mat-checkbox-layout{z-index:1;margin-bottom:unset;width:fit-content;font-weight:inherit;align-items:unset!important;vertical-align:unset!important;display:grid!important;grid-auto-flow:column}.mat-checkbox-layout .mat-checkbox-inner-container{border-radius:var(--pep-border-radius-md, .25rem);width:1.5rem;height:1.5rem}.mat-checkbox-layout .mat-checkbox-inner-container .mat-checkbox-ripple{display:none}.mat-checkbox-layout .mat-checkbox-label{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.mat-checkbox-layout .mat-checkbox-label span{margin:0 .25rem}.mat-checkbox-layout .mat-checkbox-frame{height:inherit;width:inherit;display:flex;border-radius:var(--pep-border-radius-md, .25rem)}.mat-checkbox-disabled,.mat-checkbox-disabled .mat-checkbox-layout{cursor:auto}.mat-checkbox.lg .mat-checkbox-inner-container{width:1.5rem;height:1.5rem}.mat-checkbox.md .mat-checkbox-inner-container{width:1.25rem;height:1.25rem}.mat-checkbox.sm .mat-checkbox-inner-container{width:1rem;height:1rem}.mat-checkbox.xs .mat-checkbox-inner-container{width:.75rem;height:.75rem}:host{height:inherit;display:grid}:host>*{align-self:center}.pep-disabled-checkbox-in-table{width:inherit;height:inherit;align-items:center;justify-content:center;display:flex}.pep-disabled-checkbox-in-table span{width:1.5rem;height:1.5rem;content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy41MTExNjM5LDcuMDAwNjI5NjggQzE3LjEzNTI3Myw3LjAxMDk5Mjg1IDE2Ljc3OTE1ODIsNy4xNjgzMTkwOSAxNi41MTYzMjg4LDcuNDM3NzU0MjEgQzE0LjIyNjEzMzksOS43MzI2NTE5MiAxMi4xMzU2Nzc4LDExLjk4MjQwMjIgOS45MzY5MTEzNSwxNC4yMjgxOTczIEw3LjM1MTc4NzA4LDEyLjE1NTYxMiBDNy4wNTIyMDMwMywxMS45MTUzODI5IDYuNjY5NzI4MTIsMTEuODA0MjI0MiA2LjI4ODE2OTY2LDExLjg0NjYyMjMgQzUuOTA1Njk0NzUsMTEuODg5MDE1NSA1LjU1NzEyODY0LDEyLjA4MTIwMDggNS4zMTY4OTcwNiwxMi4zODE3MzUxIEM1LjA3NzYwODQ2LDEyLjY4MTMxOTEgNC45NjY0NDk4MSwxMy4wNjM3OTQgNS4wMDg4NDc4NywxMy40NDUzNTI1IEM1LjA1MTI0MTExLDEzLjgyNzgyNzQgNS4yNDM0MjYzOCwxNC4xNzYzOTM1IDUuNTQyOTk1OTUsMTQuNDE2NjI1MSBMOS4xNjA1NzgyLDE3LjMxMDY5MDkgQzkuNzM5MDA1NDksMTcuNzcwNDEzMiAxMC41Njk5NCwxNy43MjIzNzE3IDExLjA4OTk1NTQsMTcuMTk3NjQxNCBDMTMuNjkxOTYxNywxNC41OTAwODgxIDE2LjAyMzYxNDEsMTIuMDI4MzU3NiAxOC41NjYyOTIxLDkuNDgwMTMyNjIgQzE4Ljk5MTE2NSw5LjA2Mjc4NDIxIDE5LjExNzQxODcsOC40Mjc4MjYxOCAxOC44ODQ3MTE2LDcuODgwNDg1OTggQzE4LjY1MTA3NjEsNy4zMzIyMDUyMSAxOC4xMDY1NDU2LDYuOTgzNjE0OTkgMTcuNTExMTYzOSw3LjAwMDU5MzUxIEwxNy41MTExNjM5LDcuMDAwNjI5NjggWiIvPgogIDwvc3ZnPg==)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i1.PepCustomizationService }, { type: i0.ElementRef }, { type: i2.TranslateService }]; }, propDecorators: { key: [{
                 type: Input
             }], value: [{
                 type: Input
             }], label: [{
                 type: Input
+            }], id: [{
+                type: Input
             }], type: [{
                 type: Input
             }], mandatory: [{
@@ -173,6 +205,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], validationChange: [{
+                type: Output
             }] } });
 
 class PepCheckboxModule {

package/fesm2020/pepperi-addons-ngx-lib-checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-checkbox.mjs","sources":["../../../projects/ngx-lib/checkbox/checkbox.component.ts","../../../projects/ngx-lib/checkbox/checkbox.component.html","../../../projects/ngx-lib/checkbox/checkbox.module.ts","../../../projects/ngx-lib/checkbox/public-api.ts","../../../projects/ngx-lib/checkbox/pepperi-addons-ngx-lib-checkbox.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectionStrategy,\n    OnDestroy,\n    Renderer2,\n    ElementRef,\n    Optional,\n    OnChanges,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatCheckboxChange } from '@angular/material/checkbox';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n    PepCustomizationService,\n    PepLayoutType,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    PepCheckboxFieldType,\n    PepCheckboxField,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n    selector: 'pep-checkbox',\n    templateUrl: './checkbox.component.html',\n    styleUrls: ['./checkbox.component.scss', './checkbox.component.theme.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepCheckboxComponent implements OnInit, OnChanges, OnDestroy {\n    @Input() key = '';\n    @Input() value = false;\n    @Input() label = '';\n\n    private _type: PepCheckboxFieldType = 'checkbox'; // || 'booleanText'\n    @Input()\n    set type(value: PepCheckboxFieldType) {\n        this._type = value;\n        this.setAdditionalValueObject();\n    }\n    get type(): PepCheckboxFieldType {\n        return this._type;\n    }\n\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() readonly = false;\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() rowSpan = 1;\n\n    private _additionalValue: any = undefined;\n    @Input()\n    set additionalValue(value: any) {\n        this._additionalValue = value;\n        this.setAdditionalValueObject();\n    }\n    get additionalValue(): any {\n        return this._additionalValue;\n    }\n\n    controlType = 'checkbox';\n\n    @Input() form: FormGroup = null;\n    @Input() isActive = false;\n    @Input() showTitle = true;\n    @Input() renderTitle = true;\n    @Input() layoutType: PepLayoutType = 'form';\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    @Output()\n    valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    standAlone = false;\n\n    additionalValueObject: any;\n    public jsonLib = JSON;\n\n    constructor(\n        private renderer: Renderer2,\n        private customizationService: PepCustomizationService,\n        private element: ElementRef,\n        private translate: TranslateService\n    ) { }\n\n    private setAdditionalValueObject() {\n        if (this.additionalValue && this.type === 'booleanText') {\n            try {\n                if (typeof this.additionalValue === 'string') {\n                    this.additionalValueObject = JSON.parse(\n                        this.additionalValue\n                    );\n                } else {\n                    this.additionalValueObject = this.additionalValue;\n                }\n            } catch {\n                this.additionalValueObject = {\n                    CheckedText: this.translate.instant('CHECKBOX.TRUE'),\n                    UncheckedText: this.translate.instant('CHECKBOX.FALSE'),\n                };\n            }\n        }\n    }\n\n    private setDefaultForm(): void {\n        const pepField = new PepCheckboxField({\n            key: this.key,\n            value: this.value,\n            mandatory: this.mandatory,\n            readonly: this.readonly,\n            disabled: this.disabled,\n        });\n        this.form = this.customizationService.getDefaultFromGroup(pepField);\n    }\n\n    ngOnInit(): void {\n        if (this.form === null) {\n            this.standAlone = true;\n            this.setDefaultForm();\n\n            this.renderer.addClass(\n                this.element.nativeElement,\n                PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n            );\n\n            if (!this.renderTitle) {\n                this.renderer.addClass(\n                    this.element.nativeElement,\n                    PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\n                );\n            }\n        }\n    }\n\n    ngOnChanges(changes: any): void {\n        if (this.standAlone) {\n            this.setDefaultForm();\n        }\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    onMaterialChange(e: MatCheckboxChange): void {\n        this.changeValue(e.checked);\n    }\n\n    toggleChecked(event: Event): void {\n        if (!this.disabled) {\n            const isChecked: boolean =\n                this.value ? true : false;\n            const newValue = !isChecked;\n            this.value = newValue;\n            this.changeValue(newValue);\n        }\n    }\n\n    changeValue(value: any): void {\n        this.customizationService.updateFormFieldValue(\n            this.form,\n            this.key,\n            value\n        );\n        this.valueChange.emit(value);\n    }\n}","<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>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemBolt,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepCheckboxComponent } from './checkbox.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules\n        MatCommonModule,\n        MatFormFieldModule,\n        MatCheckboxModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n        PepFieldTitleModule,\n    ],\n    exports: [PepCheckboxComponent],\n    declarations: [PepCheckboxComponent],\n})\nexport class PepCheckboxModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([pepIconSystemBolt]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/checkbox\n */\nexport * from './checkbox.module';\nexport * from './checkbox.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i8","i1"],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-checkbox.mjs","sources":["../../../projects/ngx-lib/checkbox/checkbox.component.ts","../../../projects/ngx-lib/checkbox/checkbox.component.html","../../../projects/ngx-lib/checkbox/checkbox.module.ts","../../../projects/ngx-lib/checkbox/public-api.ts","../../../projects/ngx-lib/checkbox/pepperi-addons-ngx-lib-checkbox.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectionStrategy,\n    OnDestroy,\n    Renderer2,\n    ElementRef,\n    Optional,\n    OnChanges,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatCheckboxChange } from '@angular/material/checkbox';\nimport { TranslateService } from '@ngx-translate/core';\nimport {\n    PepCustomizationService,\n    PepLayoutType,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    PepCheckboxFieldType,\n    PepCheckboxField,\n} from '@pepperi-addons/ngx-lib';\n\n// Declare global window interface for checkbox counter\ndeclare global {\n    interface Window {\n        __pepCheckboxCounter?: number;\n    }\n}\n\n@Component({\n    selector: 'pep-checkbox',\n    templateUrl: './checkbox.component.html',\n    styleUrls: ['./checkbox.component.scss', './checkbox.component.theme.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepCheckboxComponent implements OnInit, OnChanges, OnDestroy {\n    @Input() key = '';\n    @Input() value = false;\n    @Input() label = '';\n    @Input() id = '';\n\n    private _type: PepCheckboxFieldType = 'checkbox'; // || 'booleanText'\n    @Input()\n    set type(value: PepCheckboxFieldType) {\n        this._type = value;\n        this.setAdditionalValueObject();\n    }\n    get type(): PepCheckboxFieldType {\n        return this._type;\n    }\n\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() readonly = false;\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() rowSpan = 1;\n\n    private _additionalValue: any = undefined;\n    @Input()\n    set additionalValue(value: any) {\n        this._additionalValue = value;\n        this.setAdditionalValueObject();\n    }\n    get additionalValue(): any {\n        return this._additionalValue;\n    }\n\n    controlType = 'checkbox';\n\n    @Input() form: FormGroup = null;\n    @Input() isActive = false;\n    @Input() showTitle = true;\n    @Input() renderTitle = true;\n    @Input() layoutType: PepLayoutType = 'form';\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    @Output()\n    valueChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    @Output()\n    validationChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    standAlone = false;\n\n    additionalValueObject: any;\n    public jsonLib = JSON;\n\n    constructor(\n        private renderer: Renderer2,\n        private customizationService: PepCustomizationService,\n        private element: ElementRef,\n        private translate: TranslateService\n    ) { }\n\n    private setAdditionalValueObject() {\n        if (this.additionalValue && this.type === 'booleanText') {\n            try {\n                if (typeof this.additionalValue === 'string') {\n                    this.additionalValueObject = JSON.parse(\n                        this.additionalValue\n                    );\n                } else {\n                    this.additionalValueObject = this.additionalValue;\n                }\n            } catch {\n                this.additionalValueObject = {\n                    CheckedText: this.translate.instant('CHECKBOX.TRUE'),\n                    UncheckedText: this.translate.instant('CHECKBOX.FALSE'),\n                };\n            }\n        }\n    }\n\n    private setDefaultForm(): void {\n        const pepField = new PepCheckboxField({\n            key: this.key,\n            value: this.value,\n            mandatory: this.mandatory,\n            readonly: this.readonly,\n            disabled: this.disabled,\n        });\n        this.form = this.customizationService.getDefaultFromGroup(pepField);\n    }\n\n    ngOnInit(): void {\n        // Auto-generate unique ID only when used as a custom element (for React wrappers)\n        // Check if we're inside a custom element by traversing up the DOM tree\n        if (!this.id || this.id.trim() === '') {\n            let element = this.element.nativeElement;\n            let isCustomElement = false;\n            \n            // Traverse up to find a custom element (tag name contains '-element')\n            while (element && element !== document.body) {\n                if (element.tagName?.toLowerCase().includes('-element')) {\n                    isCustomElement = true;\n                    break;\n                }\n                element = element.parentElement;\n            }\n            \n            if (isCustomElement) {\n                // Initialize global counter if not exists\n                if (typeof window.__pepCheckboxCounter === 'undefined') {\n                    window.__pepCheckboxCounter = 0;\n                }\n                // Generate unique ID using window-level counter (shared across all custom elements)\n                this.id = `pep-checkbox-${window.__pepCheckboxCounter++}`;\n            }\n        }\n\n        if (this.form === null) {\n            this.standAlone = true;\n            this.setDefaultForm();\n\n            this.renderer.addClass(\n                this.element.nativeElement,\n                PepCustomizationService.STAND_ALONE_FIELD_CLASS_NAME\n            );\n\n            if (!this.renderTitle) {\n                this.renderer.addClass(\n                    this.element.nativeElement,\n                    PepCustomizationService.STAND_ALONE_FIELD_NO_SPACING_CLASS_NAME\n                );\n            }\n        }\n    }\n\n    ngOnChanges(changes: any): void {\n        if (this.standAlone) {\n            this.setDefaultForm();\n        }\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    onMaterialChange(e: MatCheckboxChange): void {\n        this.changeValue(e.checked);\n    }\n\n    toggleChecked(event: Event): void {\n        if (!this.disabled) {\n            const isChecked: boolean =\n                this.value ? true : false;\n            const newValue = !isChecked;\n            this.value = newValue;\n            this.changeValue(newValue);\n        }\n    }\n\n    changeValue(value: any): void {\n        this.customizationService.updateFormFieldValue(\n            this.form,\n            this.key,\n            value\n        );\n\n        // Raise this only for stand alone fields, If false then the usage for this field is inside a form. \n        // Then the form will take care of raising the (onFormValidationChanged) event\n        if (this.standAlone) {\n            const isValid = (this.disabled || this.readonly) ? true : this.form.valid; \n            this.validationChange.emit(isValid);\n        }\n\n        this.valueChange.emit(value);\n    }\n}","<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                    <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\" [id]=\"id\" class=\"body-sm\" type=\"checkbox\" (change)=\"onMaterialChange($event)\"\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\" >\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 *ngIf=\"readonly || disabled; then readonlyBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #readonlyBlock>\n                <ng-container *ngIf=\"type == 'booleanText'; then booleanTextTemplate; else regularTemplate\"></ng-container>\n                <ng-template #booleanTextTemplate>\n                    <div class=\"pep-disabled-checkbox-in-table\">\n                        {{ value === true || value.toString() === 'true' ? additionalValueObject?.CheckedText : additionalValueObject?.UncheckedText }}\n                    </div>\n                </ng-template>\n                <ng-template #regularTemplate>\n                    <div *ngIf=\"value === true || value.toString() === 'true'\" class=\"pep-disabled-checkbox-in-table\">\n                        <span></span>\n                    </div>\n                </ng-template>\n\n            </ng-template>\n            <ng-template #editableBlock>\n                <ng-container *ngTemplateOutlet=\"pepTemplate\"></ng-container>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatIconModule } from '@angular/material/icon';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport {\n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemBolt,\n} from '@pepperi-addons/ngx-lib/icon';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepCheckboxComponent } from './checkbox.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules\n        MatCommonModule,\n        MatFormFieldModule,\n        MatCheckboxModule,\n        MatIconModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepIconModule,\n        PepFieldTitleModule,\n    ],\n    exports: [PepCheckboxComponent],\n    declarations: [PepCheckboxComponent],\n})\nexport class PepCheckboxModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons([pepIconSystemBolt]);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/checkbox\n */\nexport * from './checkbox.module';\nexport * from './checkbox.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i8","i1"],"mappings":"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"}

package/fesm2020/pepperi-addons-ngx-lib-chips.mjs

@@ -2,29 +2,26 @@ import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/forms';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCommonModule } from '@angular/material/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/chips';
+import * as i4 from '@angular/material/chips';
 import { MatChipsModule, MAT_CHIPS_DEFAULT_OPTIONS } from '@angular/material/chips';
 import { MatIconModule } from '@angular/material/icon';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import { DEFAULT_HORIZONTAL_ALIGNMENT, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import { BaseDestroyerDirective, DEFAULT_HORIZONTAL_ALIGNMENT, PepNgxLibModule } from '@pepperi-addons/ngx-lib';
 import * as i1 from '@pepperi-addons/ngx-lib/icon';
 import { pepIconSystemBolt, pepIconSystemClose, PepIconModule } from '@pepperi-addons/ngx-lib/icon';
-import * as i6 from '@pepperi-addons/ngx-lib/field-title';
+import * as i5 from '@pepperi-addons/ngx-lib/field-title';
 import { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
-import * as i7 from '@pepperi-addons/ngx-lib/button';
+import * as i6 from '@pepperi-addons/ngx-lib/button';
 import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import * as i2 from '@ngx-translate/core';
 
 class PepChipsService {
     constructor() {
         this._chips = [];
-        this._destroyer = new Subject();
+        //
     }
     get chips() {
         return this._chips;
@@ -48,13 +45,6 @@ class PepChipsService {
             selectable: chip.selectable !== undefined ? chip.selectable : true
         });
     }
-    destroy() {
-        this._destroyer.next();
-        this._destroyer.complete();
-    }
-    get destroyer() {
-        return takeUntil(this._destroyer);
-    }
 }
 PepChipsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepChipsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 PepChipsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepChipsService });
@@ -62,8 +52,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
-class PepChipsComponent {
+class PepChipsComponent extends BaseDestroyerDirective {
     constructor(chipsService, _translate) {
+        super();
         this.chipsService = chipsService;
         this._translate = _translate;
         /**
@@ -71,7 +62,7 @@ class PepChipsComponent {
         *
         * @memberof PepChipsComponent
         */
-        this.form = null;
+        // @Input() form: FormGroup = null; // Why we need this?
         this.layoutType = 'form';
         this.inline = false;
         this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
@@ -194,18 +185,13 @@ class PepChipsComponent {
     onChipsSelectClicked() {
         this.fieldClick.emit();
     }
-    ngOnDestroy() {
-        this.chipsService.destroy();
-    }
 }
 PepChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepChipsComponent, deps: [{ token: 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: { form: "form", layoutType: "layoutType", inline: "inline", xAlignment: "xAlignment", renderTitle: "renderTitle", showTitle: "showTitle", label: "label", mandatory: "mandatory", disabled: "disabled", classNames: "classNames", chips: "chips", type: "type", orientation: "orientation", styleType: "styleType", multiSelect: "multiSelect", placeholder: "placeholder" }, outputs: { fieldClick: "fieldClick", selectionChange: "selectionChange" }, providers: [PepChipsService], ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n  <pep-field-title *ngIf=\"renderTitle\" \n      [label]=\"label\" \n      [mandatory]=\"mandatory\"\n      [disabled]=\"disabled\" \n      [xAlignment]=\"xAlignment\" \n      [showTitle]=\"showTitle\">\n  </pep-field-title>\n  <div class=\"pep-chips-container\" [ngClass]=\"[type === 'input' ? 'input-type-state' : '', chips?.length > 0 ? 'need-gap' : '' ]\" [ngStyle]=\"{ 'height': inline === true ? '100%' : 'auto' }\">\n  <!-- <mat-form-field  class=\"pep-chips-container keep-background-on-focus\" [ngClass]=\"type === 'select' ? 'not-mat-form-state' : ''\" appearance=\"outline\"> -->\n    <mat-chip-list #chipList [ngClass]=\"{'mat-chip-list-stacked': orientation === 'vertical'}\" [multiple]=\"multiSelect\">\n      <mat-chip *ngFor=\"let chip of chips\" class=\"pep-chips {{ styleType }}\" [disabled]=\"chip.disabled || 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 noSelect\" title=\"{{chip.value}}\">{{chip.value}}</span>\n        <pep-button *ngIf=\"chip.removable\" matChipRemove styleType=\"weak\" styleStateType=\"system\" sizeType=\"xs\" iconName=\"system_close\"></pep-button>\n      </mat-chip>\n    </mat-chip-list>\n    <input *ngIf=\"type === 'input' && !disabled\" matInput autocomplete=\"off\" class=\"chip-input\"\n    [placeholder]=\"placeholder || 'CHIPS.ADD_CHIP' | translate\" [matChipInputFor]=\"chipList\"\n    [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"onChipAdded($event)\">\n    <pep-button *ngIf=\"type === 'select' && !disabled\"  [value]=\"placeholder || 'CHIPS.ADD_CHIP' | translate\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"xs\" iconName=\"number_plus\"\n    iconPosition=\"end\" (buttonClick)=\"onChipsSelectClicked()\"></pep-button>\n  <!-- </mat-form-field> -->\n  </div>\n</ng-container>", styles: [".pep-chips-container{border-radius:var(--pep-border-radius-md, .25rem);padding:var(--pep-spacing-sm, .5rem);background-color:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04);display:flex;flex-direction:column;max-height:100%}.pep-chips-container.need-gap{gap:var(--pep-spacing-sm, .5rem)}.pep-chips-container ::ng-deep .mat-chip-list{width:100%;overflow-y:auto;height:calc(100% - var(--pep-line-height-sm, 1.09375rem))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper{gap:var(--pep-spacing-sm, .5rem);margin:0}.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, .9375rem);margin:0;padding-block:0;padding-inline-start:var(--pep-spacing-sm, .5rem);padding-inline-end:var(--pep-spacing-xs, .25rem);height:var(--pep-line-height-md, 1.25rem);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;opacity:1!important;margin-top:var(--pep-spacing-2xs, .125rem)}.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 .pep-chips .noSelect{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .noSelect:focus{outline:none!important}.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%}.pep-chips-container .chip-input{background:transparent;border:none;outline:none;padding:0;margin:0;width:100%;max-width:100%;vertical-align:bottom;text-align:inherit;box-sizing:content-box;font-size:var(--pep-font-size-sm, .875rem)!important;line-height:var(--pep-line-height-sm, 1.09375rem)!important;max-height:var(--pep-line-height-sm, 1.09375rem)}.pep-chips-container .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.25rem);margin:0}.pep-chips-container .mat-chip-input::placeholder{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.pep-chips-container .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.25rem);z-index:1;cursor:pointer}.pep-chips-container pep-button{display:block!important}\n", ".pep-chips-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.pep-chips-container.input-type-state: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:focus-visible{outline:none}.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: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: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: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: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: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "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.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }, { kind: "component", type: i7.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: { layoutType: "layoutType", inline: "inline", xAlignment: "xAlignment", renderTitle: "renderTitle", showTitle: "showTitle", label: "label", mandatory: "mandatory", disabled: "disabled", classNames: "classNames", chips: "chips", type: "type", orientation: "orientation", styleType: "styleType", multiSelect: "multiSelect", placeholder: "placeholder" }, outputs: { fieldClick: "fieldClick", selectionChange: "selectionChange" }, providers: [PepChipsService], usesInheritance: true, ngImport: i0, template: "<!-- <ng-container [formGroup]=\"form\"> -->\n  <pep-field-title *ngIf=\"renderTitle\" \n      [label]=\"label\" \n      [mandatory]=\"mandatory\"\n      [disabled]=\"disabled\" \n      [xAlignment]=\"xAlignment\" \n      [showTitle]=\"showTitle\">\n  </pep-field-title>\n  <div class=\"pep-chips-container\" [ngClass]=\"[type === 'input' ? 'input-type-state' : '', chips?.length > 0 ? 'need-gap' : '' ]\" [ngStyle]=\"{ 'height': inline === true ? '100%' : 'auto' }\">\n  <!-- <mat-form-field  class=\"pep-chips-container keep-background-on-focus\" [ngClass]=\"type === 'select' ? 'not-mat-form-state' : ''\" appearance=\"outline\"> -->\n    <mat-chip-list #chipList [ngClass]=\"{'mat-chip-list-stacked': orientation === 'vertical'}\" [multiple]=\"multiSelect\">\n      <mat-chip *ngFor=\"let chip of chips\" class=\"pep-chips {{ styleType }} {{ classNames }}\" [disabled]=\"chip.disabled || 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 noSelect\" title=\"{{chip.value}}\">{{chip.value}}</span>\n        <pep-button *ngIf=\"chip.removable\" matChipRemove styleType=\"weak\" styleStateType=\"system\" sizeType=\"xs\" iconName=\"system_close\"></pep-button>\n      </mat-chip>\n    </mat-chip-list>\n    <input *ngIf=\"type === 'input' && !disabled\" matInput autocomplete=\"off\" class=\"chip-input\"\n    [placeholder]=\"placeholder || 'CHIPS.ADD_CHIP' | translate\" [matChipInputFor]=\"chipList\"\n    [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"onChipAdded($event)\">\n    <pep-button *ngIf=\"type === 'select' && !disabled\"  [value]=\"placeholder || 'CHIPS.ADD_CHIP' | translate\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"xs\" iconName=\"number_plus\"\n    iconPosition=\"end\" (buttonClick)=\"onChipsSelectClicked()\"></pep-button>\n  <!-- </mat-form-field> -->\n  </div>\n<!-- </ng-container> -->", styles: [".pep-chips-container{border-radius:var(--pep-border-radius-md, .25rem);padding:var(--pep-spacing-sm, .5rem);background-color:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04);display:flex;flex-direction:column;max-height:100%}.pep-chips-container.need-gap{gap:var(--pep-spacing-sm, .5rem)}.pep-chips-container ::ng-deep .mat-chip-list{width:100%;overflow-y:auto;height:calc(100% - var(--pep-line-height-sm, 1.09375rem))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper{gap:var(--pep-spacing-sm, .5rem);margin:0}.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, .9375rem);margin:0;padding-block:0;padding-inline-start:var(--pep-spacing-sm, .5rem);padding-inline-end:var(--pep-spacing-xs, .25rem);height:var(--pep-line-height-md, 1.25rem);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;opacity:1!important;margin-top:var(--pep-spacing-2xs, .125rem)}.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 .pep-chips .noSelect{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .noSelect:focus{outline:none!important}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .pep-chips{justify-content:space-between;width:fit-content!important}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .mat-chip-input{flex:unset;width:100%}.pep-chips-container .chip-input{background:transparent;border:none;outline:none;padding:0;margin:0;width:100%;max-width:100%;vertical-align:bottom;text-align:inherit;box-sizing:content-box;font-size:var(--pep-font-size-sm, .875rem)!important;line-height:var(--pep-line-height-sm, 1.09375rem)!important;max-height:var(--pep-line-height-sm, 1.09375rem)}.pep-chips-container .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.25rem);margin:0}.pep-chips-container .mat-chip-input::placeholder{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.pep-chips-container .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.25rem);z-index:1;cursor:pointer}.pep-chips-container pep-button{display:block!important}\n", ".pep-chips-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-chips-container.input-type-state: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:focus-visible{outline:none}.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: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%),.08)}.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: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%),.12);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.weak-invert .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%))!important}.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%),.24);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: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);color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:focus .svg-icon{fill: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.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: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}.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):not(.disabled-no-background-no-color){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) .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: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.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: i4.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: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType", "multiLine"] }, { 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: "<ng-container [formGroup]=\"form\">\n  <pep-field-title *ngIf=\"renderTitle\" \n      [label]=\"label\" \n      [mandatory]=\"mandatory\"\n      [disabled]=\"disabled\" \n      [xAlignment]=\"xAlignment\" \n      [showTitle]=\"showTitle\">\n  </pep-field-title>\n  <div class=\"pep-chips-container\" [ngClass]=\"[type === 'input' ? 'input-type-state' : '', chips?.length > 0 ? 'need-gap' : '' ]\" [ngStyle]=\"{ 'height': inline === true ? '100%' : 'auto' }\">\n  <!-- <mat-form-field  class=\"pep-chips-container keep-background-on-focus\" [ngClass]=\"type === 'select' ? 'not-mat-form-state' : ''\" appearance=\"outline\"> -->\n    <mat-chip-list #chipList [ngClass]=\"{'mat-chip-list-stacked': orientation === 'vertical'}\" [multiple]=\"multiSelect\">\n      <mat-chip *ngFor=\"let chip of chips\" class=\"pep-chips {{ styleType }}\" [disabled]=\"chip.disabled || 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 noSelect\" title=\"{{chip.value}}\">{{chip.value}}</span>\n        <pep-button *ngIf=\"chip.removable\" matChipRemove styleType=\"weak\" styleStateType=\"system\" sizeType=\"xs\" iconName=\"system_close\"></pep-button>\n      </mat-chip>\n    </mat-chip-list>\n    <input *ngIf=\"type === 'input' && !disabled\" matInput autocomplete=\"off\" class=\"chip-input\"\n    [placeholder]=\"placeholder || 'CHIPS.ADD_CHIP' | translate\" [matChipInputFor]=\"chipList\"\n    [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"onChipAdded($event)\">\n    <pep-button *ngIf=\"type === 'select' && !disabled\"  [value]=\"placeholder || 'CHIPS.ADD_CHIP' | translate\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"xs\" iconName=\"number_plus\"\n    iconPosition=\"end\" (buttonClick)=\"onChipsSelectClicked()\"></pep-button>\n  <!-- </mat-form-field> -->\n  </div>\n</ng-container>", styles: [".pep-chips-container{border-radius:var(--pep-border-radius-md, .25rem);padding:var(--pep-spacing-sm, .5rem);background-color:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04);display:flex;flex-direction:column;max-height:100%}.pep-chips-container.need-gap{gap:var(--pep-spacing-sm, .5rem)}.pep-chips-container ::ng-deep .mat-chip-list{width:100%;overflow-y:auto;height:calc(100% - var(--pep-line-height-sm, 1.09375rem))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper{gap:var(--pep-spacing-sm, .5rem);margin:0}.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, .9375rem);margin:0;padding-block:0;padding-inline-start:var(--pep-spacing-sm, .5rem);padding-inline-end:var(--pep-spacing-xs, .25rem);height:var(--pep-line-height-md, 1.25rem);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;opacity:1!important;margin-top:var(--pep-spacing-2xs, .125rem)}.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 .pep-chips .noSelect{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .noSelect:focus{outline:none!important}.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%}.pep-chips-container .chip-input{background:transparent;border:none;outline:none;padding:0;margin:0;width:100%;max-width:100%;vertical-align:bottom;text-align:inherit;box-sizing:content-box;font-size:var(--pep-font-size-sm, .875rem)!important;line-height:var(--pep-line-height-sm, 1.09375rem)!important;max-height:var(--pep-line-height-sm, 1.09375rem)}.pep-chips-container .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.25rem);margin:0}.pep-chips-container .mat-chip-input::placeholder{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.pep-chips-container .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.25rem);z-index:1;cursor:pointer}.pep-chips-container pep-button{display:block!important}\n", ".pep-chips-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.pep-chips-container.input-type-state: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:focus-visible{outline:none}.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: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: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: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: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"] }]
-        }], ctorParameters: function () { return [{ type: PepChipsService }, { type: i2.TranslateService }]; }, propDecorators: { form: [{
-                type: Input
-            }], layoutType: [{
+            args: [{ selector: 'pep-chips', providers: [PepChipsService], template: "<!-- <ng-container [formGroup]=\"form\"> -->\n  <pep-field-title *ngIf=\"renderTitle\" \n      [label]=\"label\" \n      [mandatory]=\"mandatory\"\n      [disabled]=\"disabled\" \n      [xAlignment]=\"xAlignment\" \n      [showTitle]=\"showTitle\">\n  </pep-field-title>\n  <div class=\"pep-chips-container\" [ngClass]=\"[type === 'input' ? 'input-type-state' : '', chips?.length > 0 ? 'need-gap' : '' ]\" [ngStyle]=\"{ 'height': inline === true ? '100%' : 'auto' }\">\n  <!-- <mat-form-field  class=\"pep-chips-container keep-background-on-focus\" [ngClass]=\"type === 'select' ? 'not-mat-form-state' : ''\" appearance=\"outline\"> -->\n    <mat-chip-list #chipList [ngClass]=\"{'mat-chip-list-stacked': orientation === 'vertical'}\" [multiple]=\"multiSelect\">\n      <mat-chip *ngFor=\"let chip of chips\" class=\"pep-chips {{ styleType }} {{ classNames }}\" [disabled]=\"chip.disabled || 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 noSelect\" title=\"{{chip.value}}\">{{chip.value}}</span>\n        <pep-button *ngIf=\"chip.removable\" matChipRemove styleType=\"weak\" styleStateType=\"system\" sizeType=\"xs\" iconName=\"system_close\"></pep-button>\n      </mat-chip>\n    </mat-chip-list>\n    <input *ngIf=\"type === 'input' && !disabled\" matInput autocomplete=\"off\" class=\"chip-input\"\n    [placeholder]=\"placeholder || 'CHIPS.ADD_CHIP' | translate\" [matChipInputFor]=\"chipList\"\n    [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"onChipAdded($event)\">\n    <pep-button *ngIf=\"type === 'select' && !disabled\"  [value]=\"placeholder || 'CHIPS.ADD_CHIP' | translate\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"xs\" iconName=\"number_plus\"\n    iconPosition=\"end\" (buttonClick)=\"onChipsSelectClicked()\"></pep-button>\n  <!-- </mat-form-field> -->\n  </div>\n<!-- </ng-container> -->", styles: [".pep-chips-container{border-radius:var(--pep-border-radius-md, .25rem);padding:var(--pep-spacing-sm, .5rem);background-color:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04);display:flex;flex-direction:column;max-height:100%}.pep-chips-container.need-gap{gap:var(--pep-spacing-sm, .5rem)}.pep-chips-container ::ng-deep .mat-chip-list{width:100%;overflow-y:auto;height:calc(100% - var(--pep-line-height-sm, 1.09375rem))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper{gap:var(--pep-spacing-sm, .5rem);margin:0}.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, .9375rem);margin:0;padding-block:0;padding-inline-start:var(--pep-spacing-sm, .5rem);padding-inline-end:var(--pep-spacing-xs, .25rem);height:var(--pep-line-height-md, 1.25rem);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;opacity:1!important;margin-top:var(--pep-spacing-2xs, .125rem)}.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 .pep-chips .noSelect{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .noSelect:focus{outline:none!important}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .pep-chips{justify-content:space-between;width:fit-content!important}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .mat-chip-input{flex:unset;width:100%}.pep-chips-container .chip-input{background:transparent;border:none;outline:none;padding:0;margin:0;width:100%;max-width:100%;vertical-align:bottom;text-align:inherit;box-sizing:content-box;font-size:var(--pep-font-size-sm, .875rem)!important;line-height:var(--pep-line-height-sm, 1.09375rem)!important;max-height:var(--pep-line-height-sm, 1.09375rem)}.pep-chips-container .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.25rem);margin:0}.pep-chips-container .mat-chip-input::placeholder{color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.7)}.pep-chips-container .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.25rem);z-index:1;cursor:pointer}.pep-chips-container pep-button{display:block!important}\n", ".pep-chips-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.08)}.pep-chips-container.input-type-state: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:focus-visible{outline:none}.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: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%),.08)}.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: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%),.12);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.weak-invert .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%))!important}.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%),.24);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: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);color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:focus .svg-icon{fill: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.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: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}.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):not(.disabled-no-background-no-color){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) .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"] }]
+        }], ctorParameters: function () { return [{ type: PepChipsService }, { type: i2.TranslateService }]; }, propDecorators: { layoutType: [{
                 type: Input
             }], inline: [{
                 type: Input