@pepperi-addons/ngx-lib 0.4.1-yaron.1 → 0.4.2-beta.2

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

@@ -83,10 +83,10 @@ class PepAddressComponent {
     }
 }
 PepAddressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAddressComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PepAddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepAddressComponent, selector: "pep-address", inputs: { key: "key", formattedValue: "formattedValue", label: "label", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", xAlignment: "xAlignment", rowSpan: "rowSpan", groupFields: "groupFields", form: "form", layoutType: "layoutType", visible: "visible" }, outputs: { addressValueChange: "addressValueChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\n        </pep-field-title>\n        <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\n            dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n            <div [ngSwitch]=\"groupField.controlType\" *ngFor=\"let groupField of groupFields; let i = index\"\n                class=\"pep-address-field columns-{{ groupField.colSpan }}\">\n                <pep-textbox *ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\"\n                    [formattedValue]=\"groupField.formattedValue\" [label]=\"groupField.label\"\n                    [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\n                    [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\n                    [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-textbox>\n\n                <pep-select *ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n                    [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\n                    [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\n                    [options]=\"groupField.options\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-select>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-card-input \" title=\"{{ label }}&nbsp;{{ formattedValue }}\"\n            [ngClass]=\"['text-align-' + xAlignment]\">\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-container>", styles: [".header{grid-column:1/span 3}.pep-address-container{padding:.875rem var(--pep-spacing-md, .75rem);border-radius:var(--pep-border-radius-md, .25rem);display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:var(--pep-spacing-md, .75rem);grid-row-gap:var(--pep-spacing-md, .75rem)}.pep-address-container .columns-2{grid-column:1/span 2}.pep-address-container .columns-3{grid-column:1/span 3}\n", ".pepperi-address-container,.pep-address-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "formattedValue", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError"], outputs: ["valueChange", "formValidationChange"] }, { kind: "component", type: i5.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle"], outputs: ["valueChange", "formValidationChange"] }, { kind: "component", type: i6.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PepAddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepAddressComponent, selector: "pep-address", inputs: { key: "key", formattedValue: "formattedValue", label: "label", mandatory: "mandatory", disabled: "disabled", readonly: "readonly", xAlignment: "xAlignment", rowSpan: "rowSpan", groupFields: "groupFields", form: "form", layoutType: "layoutType", visible: "visible" }, outputs: { addressValueChange: "addressValueChange" }, usesOnChanges: true, ngImport: i0, template: "<ng-container [formGroup]=\"form\">\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\n        </pep-field-title>\n        <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\n            dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n            <div [ngSwitch]=\"groupField.controlType\" *ngFor=\"let groupField of groupFields; let i = index\"\n                class=\"pep-address-field columns-{{ groupField.colSpan }}\">\n                <pep-textbox *ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n                    [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\n                    [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\n                    [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-textbox>\n\n                <pep-select *ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n                    [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\n                    [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\n                    [options]=\"groupField.options\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-select>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-card-input \" title=\"{{ label }}&nbsp;{{ formattedValue }}\"\n            [ngClass]=\"['text-align-' + xAlignment]\">\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-container>", styles: [".header{grid-column:1/span 3}.pep-address-container{padding:.875rem var(--pep-spacing-md, .75rem);border-radius:var(--pep-border-radius-md, .25rem);display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:var(--pep-spacing-md, .75rem);grid-row-gap:var(--pep-spacing-md, .75rem)}.pep-address-container .columns-2{grid-column:1/span 2}.pep-address-container .columns-3{grid-column:1/span 3}\n", ".pepperi-address-container,.pep-address-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i4.PepTextboxComponent, selector: "pep-textbox", inputs: ["key", "value", "minFractionDigits", "maxFractionDigits", "accessory", "label", "placeholder", "type", "mandatory", "disabled", "readonly", "maxFieldCharacters", "hint", "textColor", "xAlignment", "rowSpan", "minValue", "maxValue", "visible", "form", "isActive", "showTitle", "renderTitle", "renderError", "renderSymbol", "layoutType", "parentFieldKey", "regex", "regexError", "isInFocus"], outputs: ["valueChange", "keyup"] }, { kind: "component", type: i5.PepSelectComponent, selector: "pep-select", inputs: ["key", "value", "label", "type", "mandatory", "disabled", "readonly", "xAlignment", "rowSpan", "options", "visible", "emptyOption", "form", "layoutType", "parentFieldKey", "isActive", "showTitle", "renderTitle", "typeaheadDebounceInterval"], outputs: ["valueChange"] }, { kind: "component", type: i6.PepFieldTitleComponent, selector: "pep-field-title", inputs: ["label", "mandatory", "disabled", "maxFieldCharacters", "hint", "xAlignment", "showTitle", "inputLength", "fontBodyType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepAddressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-address', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"form\">\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\n        </pep-field-title>\n        <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\n            dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n            <div [ngSwitch]=\"groupField.controlType\" *ngFor=\"let groupField of groupFields; let i = index\"\n                class=\"pep-address-field columns-{{ groupField.colSpan }}\">\n                <pep-textbox *ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\"\n                    [formattedValue]=\"groupField.formattedValue\" [label]=\"groupField.label\"\n                    [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\n                    [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\n                    [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-textbox>\n\n                <pep-select *ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n                    [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\n                    [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\n                    [options]=\"groupField.options\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-select>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-card-input \" title=\"{{ label }}&nbsp;{{ formattedValue }}\"\n            [ngClass]=\"['text-align-' + xAlignment]\">\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-container>", styles: [".header{grid-column:1/span 3}.pep-address-container{padding:.875rem var(--pep-spacing-md, .75rem);border-radius:var(--pep-border-radius-md, .25rem);display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:var(--pep-spacing-md, .75rem);grid-row-gap:var(--pep-spacing-md, .75rem)}.pep-address-container .columns-2{grid-column:1/span 2}.pep-address-container .columns-3{grid-column:1/span 3}\n", ".pepperi-address-container,.pep-address-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)}\n"] }]
+            args: [{ selector: 'pep-address', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container [formGroup]=\"form\">\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\n        </pep-field-title>\n        <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\n            dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n            <div [ngSwitch]=\"groupField.controlType\" *ngFor=\"let groupField of groupFields; let i = index\"\n                class=\"pep-address-field columns-{{ groupField.colSpan }}\">\n                <pep-textbox *ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n                    [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\n                    [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\n                    [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-textbox>\n\n                <pep-select *ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n                    [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\n                    [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\n                    [options]=\"groupField.options\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-select>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-card-input \" title=\"{{ label }}&nbsp;{{ formattedValue }}\"\n            [ngClass]=\"['text-align-' + xAlignment]\">\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-container>", styles: [".header{grid-column:1/span 3}.pep-address-container{padding:.875rem var(--pep-spacing-md, .75rem);border-radius:var(--pep-border-radius-md, .25rem);display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:var(--pep-spacing-md, .75rem);grid-row-gap:var(--pep-spacing-md, .75rem)}.pep-address-container .columns-2{grid-column:1/span 2}.pep-address-container .columns-3{grid-column:1/span 3}\n", ".pepperi-address-container,.pep-address-container{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { key: [{
                 type: Input
             }], formattedValue: [{

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

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-address.mjs","sources":["../../../projects/ngx-lib/address/address.component.ts","../../../projects/ngx-lib/address/address.component.html","../../../projects/ngx-lib/address/address.module.ts","../../../projects/ngx-lib/address/public-api.ts","../../../projects/ngx-lib/address/pepperi-addons-ngx-lib-address.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    OnChanges,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectionStrategy,\n    OnDestroy,\n    Renderer2,\n    ElementRef,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport {\n    PepLayoutType,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    IPepFieldValueChangeEvent,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n    selector: 'pep-address',\n    templateUrl: './address.component.html',\n    styleUrls: ['./address.component.scss', './address.component.theme.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepAddressComponent implements OnChanges, OnInit, OnDestroy {\n    @Input() key = '';\n    // @Input() value = '';\n    @Input() formattedValue = '';\n    @Input() label = '';\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() readonly = false;\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() rowSpan = 1;\n    @Input() groupFields: Array<any>;\n\n    @Input() form: FormGroup = null;\n    @Input() layoutType: PepLayoutType = 'form';\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    @Output()\n    addressValueChange: EventEmitter<IPepFieldValueChangeEvent> = new EventEmitter<IPepFieldValueChangeEvent>();\n\n    constructor(private element: ElementRef, private renderer: Renderer2) { }\n\n    ngOnInit(): void {\n        this.renderer.addClass(this.element.nativeElement, 'pep-grouped-field');\n    }\n\n    ngOnChanges(changes): void {\n        //\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    // Not in use anymore comment in 16.55.\n    // onBlur(e: any, key: string): void {\n    //     const value = e.target ? e.target.value : e;\n    //     this.changeValue({ key, value }, e.relatedTarget);\n    // }\n\n    onValueChange(value: string, key: string): void {\n        // if (e.target) {\n        //     const input = e.target ? e.target.value : e;\n        //     this.changeValue({ key, value: input.value });\n        // } else {\n        //     this.changeValue(e);\n        // }\n\n        const currentGroupField = this.groupFields.find((gf) => gf.key === key);\n\n        if (currentGroupField && currentGroupField.value !== value) {\n            // Set the value in the form controls\n            if (this.form) {\n                const formCtrl = this.form.get(this.key);\n\n                if (formCtrl) {\n                    formCtrl.get(key).setValue(value);\n                }\n            }\n\n            this.addressValueChange.emit({\n                key: key,\n                value: value,\n            });\n        }\n    }\n\n    // changeValue(field: any): void {\n    //     const currentGroupField = this.groupFields.filter(\n    //         (groupField) => groupField.key === field.key\n    //     )[0];\n\n    //     if (currentGroupField.value !== field.value) {\n    //         // Set the value in the form controls\n    //         if (this.form) {\n    //             const formCtrl = this.form.get(this.key);\n\n    //             if (formCtrl) {\n    //                 formCtrl.get(field.key).setValue(field.value);\n    //             }\n    //         }\n\n    //         this.valueChange.emit({\n    //             key: field.key,\n    //             value: field.value,\n    //         });\n    //     }\n    // }\n}\n","<ng-container [formGroup]=\"form\">\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\n        </pep-field-title>\n        <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\n            dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n            <div [ngSwitch]=\"groupField.controlType\" *ngFor=\"let groupField of groupFields; let i = index\"\n                class=\"pep-address-field columns-{{ groupField.colSpan }}\">\n                <pep-textbox *ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\"\n                    [formattedValue]=\"groupField.formattedValue\" [label]=\"groupField.label\"\n                    [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\n                    [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\n                    [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-textbox>\n\n                <pep-select *ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n                    [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\n                    [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\n                    [options]=\"groupField.options\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-select>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-card-input \" title=\"{{ label }}&nbsp;{{ formattedValue }}\"\n            [ngClass]=\"['text-align-' + xAlignment]\">\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-container>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\nimport { PepSelectModule } from '@pepperi-addons/ngx-lib/select';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepAddressComponent } from './address.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules\n        MatCommonModule,\n        MatFormFieldModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepTextboxModule,\n        PepSelectModule,\n        PepFieldTitleModule,\n    ],\n    exports: [PepAddressComponent],\n    declarations: [PepAddressComponent],\n})\nexport class PepAddressModule {}\n","/*\n * Public API Surface of ngx-lib/address\n */\nexport * from './address.module';\nexport * from './address.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-address.mjs","sources":["../../../projects/ngx-lib/address/address.component.ts","../../../projects/ngx-lib/address/address.component.html","../../../projects/ngx-lib/address/address.module.ts","../../../projects/ngx-lib/address/public-api.ts","../../../projects/ngx-lib/address/pepperi-addons-ngx-lib-address.ts"],"sourcesContent":["import {\n    Component,\n    OnInit,\n    OnChanges,\n    Input,\n    Output,\n    EventEmitter,\n    ChangeDetectionStrategy,\n    OnDestroy,\n    Renderer2,\n    ElementRef,\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport {\n    PepLayoutType,\n    PepHorizontalAlignment,\n    DEFAULT_HORIZONTAL_ALIGNMENT,\n    IPepFieldValueChangeEvent,\n} from '@pepperi-addons/ngx-lib';\n\n@Component({\n    selector: 'pep-address',\n    templateUrl: './address.component.html',\n    styleUrls: ['./address.component.scss', './address.component.theme.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PepAddressComponent implements OnChanges, OnInit, OnDestroy {\n    @Input() key = '';\n    // @Input() value = '';\n    @Input() formattedValue = '';\n    @Input() label = '';\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() readonly = false;\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() rowSpan = 1;\n    @Input() groupFields: Array<any>;\n\n    @Input() form: FormGroup = null;\n    @Input() layoutType: PepLayoutType = 'form';\n\n    private _visible = true;\n    @Input()\n    set visible(visible: boolean) {\n        this._visible = visible;\n        if (visible) {\n            this.renderer.removeClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        } else {\n            this.renderer.addClass(\n                this.element.nativeElement,\n                'hidden-element'\n            );\n        }\n    }\n    get visible(): boolean {\n        return this._visible;\n    }\n\n    @Output()\n    addressValueChange: EventEmitter<IPepFieldValueChangeEvent> = new EventEmitter<IPepFieldValueChangeEvent>();\n\n    constructor(private element: ElementRef, private renderer: Renderer2) { }\n\n    ngOnInit(): void {\n        this.renderer.addClass(this.element.nativeElement, 'pep-grouped-field');\n    }\n\n    ngOnChanges(changes): void {\n        //\n    }\n\n    ngOnDestroy(): void {\n        //\n    }\n\n    // Not in use anymore comment in 16.55.\n    // onBlur(e: any, key: string): void {\n    //     const value = e.target ? e.target.value : e;\n    //     this.changeValue({ key, value }, e.relatedTarget);\n    // }\n\n    onValueChange(value: string, key: string): void {\n        // if (e.target) {\n        //     const input = e.target ? e.target.value : e;\n        //     this.changeValue({ key, value: input.value });\n        // } else {\n        //     this.changeValue(e);\n        // }\n\n        const currentGroupField = this.groupFields.find((gf) => gf.key === key);\n\n        if (currentGroupField && currentGroupField.value !== value) {\n            // Set the value in the form controls\n            if (this.form) {\n                const formCtrl = this.form.get(this.key);\n\n                if (formCtrl) {\n                    formCtrl.get(key).setValue(value);\n                }\n            }\n\n            this.addressValueChange.emit({\n                key: key,\n                value: value,\n            });\n        }\n    }\n\n    // changeValue(field: any): void {\n    //     const currentGroupField = this.groupFields.filter(\n    //         (groupField) => groupField.key === field.key\n    //     )[0];\n\n    //     if (currentGroupField.value !== field.value) {\n    //         // Set the value in the form controls\n    //         if (this.form) {\n    //             const formCtrl = this.form.get(this.key);\n\n    //             if (formCtrl) {\n    //                 formCtrl.get(field.key).setValue(field.value);\n    //             }\n    //         }\n\n    //         this.valueChange.emit({\n    //             key: field.key,\n    //             value: field.value,\n    //         });\n    //     }\n    // }\n}\n","<ng-container [formGroup]=\"form\">\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <pep-field-title [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\" class=\"header\">\n        </pep-field-title>\n        <div [formGroupName]=\"key\" [id]=\"key\" class=\"pep-address-container\"\n            dir=\"{{ xAlignment === 'right' ? 'rtl' : 'ltr' }}\">\n            <div [ngSwitch]=\"groupField.controlType\" *ngFor=\"let groupField of groupFields; let i = index\"\n                class=\"pep-address-field columns-{{ groupField.colSpan }}\">\n                <pep-textbox *ngSwitchCase=\"'textbox'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n                    [placeholder]=\"groupField.placeholder\" [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\"\n                    [disabled]=\"groupField.disabled\" [readonly]=\"groupField.readonly\"\n                    [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-textbox>\n\n                <pep-select *ngSwitchCase=\"'select'\" [layoutType]=\"layoutType\" title=\"{{ groupField.formattedValue }}\"\n                    [form]=\"form\" [key]=\"groupField.key\" [value]=\"groupField.value\" [label]=\"groupField.label\"\n                    [type]=\"groupField.type\" [mandatory]=\"groupField.mandatory\" [disabled]=\"groupField.disabled\"\n                    [readonly]=\"groupField.readonly\" [xAlignment]=\"groupField.xAlignment\" [rowSpan]=\"groupField.rowSpan\"\n                    [options]=\"groupField.options\" [parentFieldKey]=\"key\"\n                    (valueChange)=\"onValueChange($event, groupField.key)\">\n                </pep-select>\n            </div>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <div class=\"pep-card-input \" title=\"{{ label }}&nbsp;{{ formattedValue }}\"\n            [ngClass]=\"['text-align-' + xAlignment]\">\n            <span *ngIf=\"label != ''\" class=\"body-xs title\">{{ label }}&nbsp;</span>\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <div class=\"pep-card-input \" title=\"{{ formattedValue }}\" [ngClass]=\"['text-align-' + xAlignment]\">\n            <ng-container *ngFor=\"let groupField of groupFields; let i = index\">\n                <span *ngIf=\"groupField?.formattedValue != ''\" class=\"body-sm\">{{ groupField.formattedValue\n                    }},&nbsp;</span>\n            </ng-container>\n        </div>\n    </ng-container>\n</ng-container>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { MatCommonModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { PepTextboxModule } from '@pepperi-addons/ngx-lib/textbox';\nimport { PepSelectModule } from '@pepperi-addons/ngx-lib/select';\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\n\nimport { PepAddressComponent } from './address.component';\n\n@NgModule({\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,\n        // Material modules\n        MatCommonModule,\n        MatFormFieldModule,\n        // ngx-lib modules\n        PepNgxLibModule,\n        PepTextboxModule,\n        PepSelectModule,\n        PepFieldTitleModule,\n    ],\n    exports: [PepAddressComponent],\n    declarations: [PepAddressComponent],\n})\nexport class PepAddressModule {}\n","/*\n * Public API Surface of ngx-lib/address\n */\nexport * from './address.module';\nexport * from './address.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -2,19 +2,20 @@ 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 * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i5 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 { PepNgxLibModule } from '@pepperi-addons/ngx-lib';
+import { 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 { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';
-import * as i6 from '@pepperi-addons/ngx-lib/button';
+import * as i7 from '@pepperi-addons/ngx-lib/button';
 import { PepButtonModule } from '@pepperi-addons/ngx-lib/button';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -39,6 +40,7 @@ class PepChipsService {
     }
     addChip(chip) {
         this._chips.push({
+            key: chip.key,
             value: chip.value,
             disabled: chip.disabled !== undefined ? chip.disabled : false,
             selected: chip.selected !== undefined ? chip.selected : false,
@@ -65,6 +67,21 @@ class PepChipsComponent {
         this.chipsService = chipsService;
         this._translate = _translate;
         /**
+        * The chips within the chip list.
+        *
+        * @memberof PepChipsComponent
+        */
+        this.form = null;
+        this.layoutType = 'form';
+        this.inline = false;
+        this.xAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;
+        this.renderTitle = true;
+        this.showTitle = true;
+        this.label = '';
+        this.mandatory = false;
+        this.disabled = false;
+        this.classNames = '';
+        /**
         * The add chip emitter type.
         *
         * @type {PepChipsInputType}
@@ -107,11 +124,6 @@ class PepChipsComponent {
         this.selectionChange = new EventEmitter();
         //
     }
-    /**
-    * The chips within the chip list.
-    *
-    * @memberof PepChipsComponent
-    */
     set chips(chips) {
         this.chipsService.initData(chips);
     }
@@ -131,7 +143,7 @@ class PepChipsComponent {
         }
     }
     ngOnInit() {
-        this._translate.get("CHIPS.ADD_CHIP").pipe(this.chipsService.destroyer).subscribe((text) => this.placeholder = text);
+        //
     }
     /**
      * Adding chip(s) to current chips list
@@ -151,7 +163,7 @@ class PepChipsComponent {
                 value: value
             });
             // clear the input value
-            event.chipInput.clear();
+            event.chipInput?.clear();
         }
     }
     /**
@@ -187,11 +199,31 @@ class PepChipsComponent {
     }
 }
 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: { chips: "chips", type: "type", orientation: "orientation", styleType: "styleType", multiSelect: "multiSelect", placeholder: "placeholder" }, outputs: { fieldClick: "fieldClick", selectionChange: "selectionChange" }, providers: [PepChipsService], ngImport: i0, template: "<mat-form-field class=\"pep-chips-container\" appearance=\"outline\">\n  <mat-chip-list #chipList aria-label=\"Fruit selection\"\n    [ngClass]=\"{'mat-chip-list-stacked': orientation === 'vertical'}\" [multiple]=\"multiSelect\">\n    <mat-chip *ngFor=\"let chip of chips\" class=\"pep-chips {{ styleType }}\" [disabled]=\"chip.disabled\"\n      [selected]=\"chip.selected\" [removable]=\"chip.removable\" [selectable]=\"chip.selectable\"\n      (removed)=\"onChipRemoved(chip)\" (selectionChange)=\"onSelectionChanged($event.selected, chip)\">\n      <span class=\"ellipsis pull-left flip\" title=\"{{chip.value}}\">{{chip.value}}</span>     \n      <pep-button *ngIf=\"chip.removable\" matChipRemove sizeType=\"xs\" iconName=\"system_close\"></pep-button>\n    </mat-chip>\n    <input *ngIf=\"type === 'input'\" matInput [placeholder]=\"placeholder\" [matChipInputFor]=\"chipList\"\n      [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"onChipAdded($event)\">\n    <div *ngIf=\"type === 'select'\" class=\"chips-select\" (click)=\"onChipsSelectClicked()\">{{ 'CHIPS.ADD_CHIP' | translate\n      }}</div>\n  </mat-chip-list>\n</mat-form-field>", styles: [".pep-chips-container ::ng-deep .mat-chip-list{width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper{gap:var(--pep-spacing-sm, .5rem);margin:var(--pep-spacing-sm, .5rem)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-xs, 1rem);margin:0;padding-top:0;padding-bottom:0;height:var(--pep-line-height-md, 1.5rem);min-height:unset;z-index:1;gap:var(--pep-spacing-xs, .25rem);max-width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove{height:unset;width:unset;margin:0}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove .pep-button{flex-shrink:0;border-radius:50%;min-width:unset;height:var(--pep-spacing-lg, 1rem);width:var(--pep-spacing-lg, 1rem)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove .pep-button .mat-icon{height:var(--pep-spacing-md, .75rem);width:var(--pep-spacing-md, .75rem);font-size:var(--pep-font-size-md, 1rem);margin:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .mat-chip-input{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-md, 1.5rem);margin:0}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .chips-select{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-md, 1.5rem);z-index:1}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .pep-chips{justify-content:space-between;width:-moz-fit-content!important;width:fit-content!important}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .mat-chip-input{flex:unset;width:100%}\n", ".pep-chips-container ::ng-deep .mat-chip-list .mat-chip.mat-standard-chip:after{background:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip.mat-standard-chip:focus:after{opacity:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular.mat-chip-selected{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:hover{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);cursor:pointer}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert.mat-chip-selected{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:focus{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong.mat-chip-selected{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong:focus{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:focus{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:active{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%))!important;opacity:.5!important;color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled):after{border:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i5.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.PepButtonComponent, selector: "pep-button", inputs: ["key", "value", "styleType", "styleStateType", "sizeType", "classNames", "disabled", "iconName", "iconPosition", "visible"], outputs: ["buttonClick"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+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.25rem))}.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, 1rem);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.5rem);min-height:unset;z-index:1;gap:var(--pep-spacing-xs, .25rem);max-width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove{height:unset;width:unset;margin:0;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.25rem)!important;max-height:var(--pep-line-height-sm, 1.25rem)}.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.5rem);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.5rem);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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepChipsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pep-chips', providers: [PepChipsService], template: "<mat-form-field class=\"pep-chips-container\" appearance=\"outline\">\n  <mat-chip-list #chipList aria-label=\"Fruit selection\"\n    [ngClass]=\"{'mat-chip-list-stacked': orientation === 'vertical'}\" [multiple]=\"multiSelect\">\n    <mat-chip *ngFor=\"let chip of chips\" class=\"pep-chips {{ styleType }}\" [disabled]=\"chip.disabled\"\n      [selected]=\"chip.selected\" [removable]=\"chip.removable\" [selectable]=\"chip.selectable\"\n      (removed)=\"onChipRemoved(chip)\" (selectionChange)=\"onSelectionChanged($event.selected, chip)\">\n      <span class=\"ellipsis pull-left flip\" title=\"{{chip.value}}\">{{chip.value}}</span>     \n      <pep-button *ngIf=\"chip.removable\" matChipRemove sizeType=\"xs\" iconName=\"system_close\"></pep-button>\n    </mat-chip>\n    <input *ngIf=\"type === 'input'\" matInput [placeholder]=\"placeholder\" [matChipInputFor]=\"chipList\"\n      [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"onChipAdded($event)\">\n    <div *ngIf=\"type === 'select'\" class=\"chips-select\" (click)=\"onChipsSelectClicked()\">{{ 'CHIPS.ADD_CHIP' | translate\n      }}</div>\n  </mat-chip-list>\n</mat-form-field>", styles: [".pep-chips-container ::ng-deep .mat-chip-list{width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper{gap:var(--pep-spacing-sm, .5rem);margin:var(--pep-spacing-sm, .5rem)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-xs, 1rem);margin:0;padding-top:0;padding-bottom:0;height:var(--pep-line-height-md, 1.5rem);min-height:unset;z-index:1;gap:var(--pep-spacing-xs, .25rem);max-width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove{height:unset;width:unset;margin:0}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove .pep-button{flex-shrink:0;border-radius:50%;min-width:unset;height:var(--pep-spacing-lg, 1rem);width:var(--pep-spacing-lg, 1rem)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove .pep-button .mat-icon{height:var(--pep-spacing-md, .75rem);width:var(--pep-spacing-md, .75rem);font-size:var(--pep-font-size-md, 1rem);margin:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .mat-chip-input{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-md, 1.5rem);margin:0}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .chips-select{font-family:var(--pep-font-family-body, Inter),-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif;font-size:var(--pep-font-size-xs, .75rem);font-weight:var(--pep-font-weight-normal, 400);line-height:var(--pep-line-height-md, 1.5rem);z-index:1}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .pep-chips{justify-content:space-between;width:-moz-fit-content!important;width:fit-content!important}.pep-chips-container ::ng-deep .mat-chip-list.mat-chip-list-stacked .mat-chip-input{flex:unset;width:100%}\n", ".pep-chips-container ::ng-deep .mat-chip-list .mat-chip.mat-standard-chip:after{background:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip.mat-standard-chip:focus:after{opacity:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 30%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular:hover{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),98%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),calc(var(--pep-color-regular-l, 10%) + 20%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular.mat-chip-selected{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.regular:focus{background:hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),88%);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);border:1px solid hsl(var(--pep-color-regular-h, 0),var(--pep-color-regular-s, 0%),var(--pep-color-regular-l, 10%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak.mat-chip-selected:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus{box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);position:relative;box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus:not(.keep-background-on-focus){background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;inset:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:hover{background:hsla(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%),.5);box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);cursor:pointer}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert.mat-chip-selected{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:var(--pep-shadow-xs-offset, 0 .125rem .25rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16);color:hsl(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%))!important}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.weak-invert:focus{background:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%));box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong.mat-chip-selected{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong:focus{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button{font-weight:var(--pep-font-weight-bold, 600);background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:hover{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 8%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.16)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:focus{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.08);box-shadow:0 0 0 var(--pep-spacing-xs, .25rem) hsla(var(--pep-color-text-link-h, 207),var(--pep-color-text-link-s, 76%),var(--pep-color-text-link-l, 37%),.5)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:active{background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),calc(var(--pep-color-strong-l, 27%) - 15%));box-shadow:var(--pep-shadow-sm-offset, 0 .25rem .5rem 0) hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.32)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;background:hsl(var(--pep-color-strong-h, 78),var(--pep-color-strong-s, 87%),var(--pep-color-strong-l, 27%))!important;opacity:.5!important;color:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled):after{border:unset}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon{fill:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon{fill:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips.strong .pep-button:disabled:not(.ignore-disabled) .svg-icon.stroke{fill:unset;stroke:hsl(var(--pep-color-system-primary-invert-h, 255),var(--pep-color-system-primary-invert-s, 100%),var(--pep-color-system-primary-invert-l, 100%))}\n"] }]
-        }], ctorParameters: function () { return [{ type: PepChipsService }, { type: i2.TranslateService }]; }, propDecorators: { chips: [{
+            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.25rem))}.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, 1rem);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.5rem);min-height:unset;z-index:1;gap:var(--pep-spacing-xs, .25rem);max-width:100%}.pep-chips-container ::ng-deep .mat-chip-list .mat-chip-list-wrapper .pep-chips .mat-chip-remove{height:unset;width:unset;margin:0;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.25rem)!important;max-height:var(--pep-line-height-sm, 1.25rem)}.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.5rem);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.5rem);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: [{
+                type: Input
+            }], inline: [{
+                type: Input
+            }], xAlignment: [{
+                type: Input
+            }], renderTitle: [{
+                type: Input
+            }], showTitle: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], mandatory: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], classNames: [{
+                type: Input
+            }], chips: [{
                 type: Input
             }], type: [{
                 type: Input

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

@@ -1 +1 @@
-{"version":3,"file":"pepperi-addons-ngx-lib-chips.mjs","sources":["../../../projects/ngx-lib/chips/chips.service.ts","../../../projects/ngx-lib/chips/chips.component.ts","../../../projects/ngx-lib/chips/chips.component.html","../../../projects/ngx-lib/chips/chips.module.ts","../../../projects/ngx-lib/chips/public-api.ts","../../../projects/ngx-lib/chips/pepperi-addons-ngx-lib-chips.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { IPepChip } from './chips.model';\n\n@Injectable()\nexport class PepChipsService {\n    private readonly _destroyer: Subject<void>;\n    private _chips: IPepChip[] = [];    \n\n    constructor() {\n        this._destroyer = new Subject();\n    }\n\n    get chips() {\n        return this._chips;\n    }\n\n    get selected() {\n        return this._chips.filter(chip => chip.selected).map(chip => chip.value);\n    }\n\n    initData(chips: IPepChip[]) {\n        this._chips = [];      \n        if (chips?.length) {\n            chips.forEach(chip => this.addChip(chip));\n        }        \n    }\n\n    addChip(chip: IPepChip) {\n        this._chips.push({\n            value: chip.value,\n            disabled: chip.disabled !== undefined ? chip.disabled : false,\n            selected: chip.selected !== undefined ? chip.selected : false,\n            removable: chip.removable !== undefined ? chip.removable : true,\n            selectable: chip.selectable !== undefined ? chip.selectable : true\n        })\n    }\n\n    destroy() {\n        this._destroyer.next();\n        this._destroyer.complete();\n    }\n\n    get destroyer() {\n        return takeUntil(this._destroyer);\n    } \n\n}","import {\n    Component,\n    OnInit,\n    Input,\n    Output,\n    EventEmitter,\n    OnDestroy\n} from '@angular/core';\nimport { MatChipInputEvent, } from '@angular/material/chips';\nimport { TranslateService } from '@ngx-translate/core';\nimport { PepStyleType } from '@pepperi-addons/ngx-lib';\nimport { IPepChip, PepChipsOrientationType, PepChipsInputType, IPepChipSelection } from './chips.model';\nimport { PepChipsService } from './chips.service';\n\n\n@Component({\n    selector: 'pep-chips',\n    templateUrl: './chips.component.html',\n    styleUrls: ['./chips.component.scss', './chips.component.theme.scss'],\n    providers: [PepChipsService]\n})\nexport class PepChipsComponent implements OnInit, OnDestroy {\n    /**\n    * The chips within the chip list.\n    *    \n    * @memberof PepChipsComponent\n    */\n    @Input()\n    set chips(chips: IPepChip[]) {\n        this.chipsService.initData(chips);\n    }\n    get chips() {\n        return this.chipsService.chips;\n    }\n\n    /**\n    * The add chip emitter type.\n    *\n    * @type {PepChipsInputType}\n    * @memberof PepChipsComponent\n    */\n    @Input() type: PepChipsInputType = 'input';\n\n    /**\n    * The chip layput direction type.\n    *\n    * @type {PepChipsOrientationType}\n    * @memberof PepChipsComponent\n    */\n    @Input() orientation: PepChipsOrientationType = 'horizontal';\n\n    /**\n    * The style of the button.\n    *\n    * @type {PepStyleType}\n    * @memberof PepButtonComponent\n    */\n    @Input() styleType: PepStyleType = 'regular';\n\n    /**\n    * Whether chip multi select allowed.\n    *    \n    * @memberof PepChipsComponent\n    */\n    @Input() multiSelect = false;\n\n    /**\n    * Add new chip placeholder.\n    *    \n    * @memberof PepChipsComponent\n    */\n    @Input() placeholder = '';\n\n    /**\n     * Add new chip(s) event.\n     *\n     * @type {EventEmitter<void>}\n     * @memberof PepButtonComponent\n     */\n    @Output() fieldClick: EventEmitter<void> = new EventEmitter<void>();\n    @Output() selectionChange: EventEmitter<IPepChipSelection> = new EventEmitter<IPepChipSelection>();\n\n    /**\n     * Selected chip(s)\n     */\n    get selected() {\n        const selected = this.chipsService.selected;        \n        if (this.multiSelect) {\n            return selected.length ? selected : [];\n        } else {\n            return selected.length ? selected[0] : null;\n        }        \n    }\n\n    constructor(public chipsService: PepChipsService, private _translate: TranslateService) {\n        //\n    }\n\n    ngOnInit(): void {\n        this._translate.get(\"CHIPS.ADD_CHIP\").pipe(this.chipsService.destroyer).subscribe((text: string) => this.placeholder = text);\n    }\n\n    /**\n     * Adding chip(s) to current chips list\n     * @param chips Chip(s) to add\n     */\n    addChipsToList(chips: IPepChip[]) {\n        chips.forEach(chip => this.chipsService.addChip(chip));\n    }    \n\n    /**\n     * On new chip added\n     * @param event Chip addition event\n     */\n    onChipAdded(event: MatChipInputEvent): void {\n        const value = (event.value || '').trim();\n\n        if (value) {\n            this.chipsService.addChip({\n                value: value\n            });\n            // clear the input value\n            event.chipInput!.clear();\n        }\n    }\n\n    /**\n     * On chip removed\n     * @param chip Removed chip item\n     */\n    onChipRemoved(chip: IPepChip): void {\n        const index = this.chips.indexOf(chip);\n\n        if (index >= 0) {\n            this.chips.splice(index, 1);\n        }\n    }\n\n    /**\n     * On chip selection status changed\n     * @param isSelected Whether the chip is selected\n     * @param chip Selected chip item\n     */\n    onSelectionChanged(isSelected: boolean, chip: IPepChip) {\n        chip.selected = isSelected;\n\n        this.selectionChange.emit({\n            value: chip.value,\n            isSelected: isSelected\n        })\n    }\n\n    /**\n     * On Add new chip(s) clicked\n     */\n    onChipsSelectClicked() {\n        this.fieldClick.emit();\n    }\n\n    ngOnDestroy(): void {\n        this.chipsService.destroy();\n    }\n}","<mat-form-field class=\"pep-chips-container\" appearance=\"outline\">\n  <mat-chip-list #chipList aria-label=\"Fruit selection\"\n    [ngClass]=\"{'mat-chip-list-stacked': orientation === 'vertical'}\" [multiple]=\"multiSelect\">\n    <mat-chip *ngFor=\"let chip of chips\" class=\"pep-chips {{ styleType }}\" [disabled]=\"chip.disabled\"\n      [selected]=\"chip.selected\" [removable]=\"chip.removable\" [selectable]=\"chip.selectable\"\n      (removed)=\"onChipRemoved(chip)\" (selectionChange)=\"onSelectionChanged($event.selected, chip)\">\n      <span class=\"ellipsis pull-left flip\" title=\"{{chip.value}}\">{{chip.value}}</span>     \n      <pep-button *ngIf=\"chip.removable\" matChipRemove sizeType=\"xs\" iconName=\"system_close\"></pep-button>\n    </mat-chip>\n    <input *ngIf=\"type === 'input'\" matInput [placeholder]=\"placeholder\" [matChipInputFor]=\"chipList\"\n      [matChipInputAddOnBlur]=\"true\" (matChipInputTokenEnd)=\"onChipAdded($event)\">\n    <div *ngIf=\"type === 'select'\" class=\"chips-select\" (click)=\"onChipsSelectClicked()\">{{ 'CHIPS.ADD_CHIP' | translate\n      }}</div>\n  </mat-chip-list>\n</mat-form-field>","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 { MatChipsModule, MAT_CHIPS_DEFAULT_OPTIONS } from '@angular/material/chips';\nimport { MatIconModule } from '@angular/material/icon';\nimport { COMMA, ENTER, TAB, SEMICOLON } from '@angular/cdk/keycodes';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { \n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemBolt,\n    pepIconSystemClose\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepChipsComponent } from './chips.component';\n\nconst pepIcons = [\n    pepIconSystemBolt,\n    pepIconSystemClose\n];\n\n\n@NgModule({\n    declarations: [PepChipsComponent],\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,        \n        MatCommonModule,\n        MatFormFieldModule,\n        MatChipsModule,\n        MatIconModule,\n        PepNgxLibModule,\n        PepIconModule,\n        PepFieldTitleModule,        \n        PepButtonModule\n    ],\n    exports: [PepChipsComponent],\n    providers: [\n        {\n          provide: MAT_CHIPS_DEFAULT_OPTIONS,\n          useValue: {\n            separatorKeyCodes: [ENTER, COMMA]\n          }\n        }\n      ]    \n})\nexport class PepChipsModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons(pepIcons);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/chips\n */\nexport * from './chips.module';\nexport * from './chips.component';\nexport * from './chips.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.PepChipsService"],"mappings":"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"}
+{"version":3,"file":"pepperi-addons-ngx-lib-chips.mjs","sources":["../../../projects/ngx-lib/chips/chips.service.ts","../../../projects/ngx-lib/chips/chips.component.ts","../../../projects/ngx-lib/chips/chips.component.html","../../../projects/ngx-lib/chips/chips.module.ts","../../../projects/ngx-lib/chips/public-api.ts","../../../projects/ngx-lib/chips/pepperi-addons-ngx-lib-chips.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\nimport { IPepChip } from './chips.model';\n\n@Injectable()\nexport class PepChipsService {\n    private readonly _destroyer: Subject<void>;\n    private _chips: IPepChip[] = [];    \n\n    constructor() {\n        this._destroyer = new Subject();\n    }\n\n    get chips() {\n        return this._chips;\n    }\n\n    get selected() {\n        return this._chips.filter(chip => chip.selected).map(chip => chip.value);\n    }\n\n    initData(chips: IPepChip[]) {\n        this._chips = [];      \n        if (chips?.length) {\n            chips.forEach(chip => this.addChip(chip));\n        }        \n    }\n\n    addChip(chip: IPepChip) {        \n        this._chips.push({\n            key: chip.key,\n            value: chip.value,\n            disabled: chip.disabled !== undefined ? chip.disabled : false,\n            selected: chip.selected !== undefined ? chip.selected : false,\n            removable: chip.removable !== undefined ? chip.removable : true,\n            selectable: chip.selectable !== undefined ? chip.selectable : true\n        })\n    }\n\n    destroy() {\n        this._destroyer.next();\n        this._destroyer.complete();\n    }\n\n    get destroyer() {\n        return takeUntil(this._destroyer);\n    } \n\n}","import {\n    Component,\n    OnInit,\n    Input,\n    Output,\n    EventEmitter,\n    OnDestroy\n} from '@angular/core';\nimport { FormGroup } from '@angular/forms';\nimport { MatChipInputEvent, } from '@angular/material/chips';\nimport { TranslateService } from '@ngx-translate/core';\nimport { DEFAULT_HORIZONTAL_ALIGNMENT, PepHorizontalAlignment, PepLayoutType, PepStyleType } from '@pepperi-addons/ngx-lib';\nimport { IPepChip, PepChipsOrientationType, PepChipsInputType, IPepChipSelection } from './chips.model';\nimport { PepChipsService } from './chips.service';\n\n\n@Component({\n    selector: 'pep-chips',\n    templateUrl: './chips.component.html',\n    styleUrls: ['./chips.component.scss', './chips.component.theme.scss'],\n    providers: [PepChipsService]\n})\nexport class PepChipsComponent implements OnInit, OnDestroy {\n    /**\n    * The chips within the chip list.\n    *    \n    * @memberof PepChipsComponent\n    */\n\n    @Input() form: FormGroup = null;\n    @Input() layoutType: PepLayoutType = 'form';\n    @Input() inline = false;\n    @Input() xAlignment: PepHorizontalAlignment = DEFAULT_HORIZONTAL_ALIGNMENT;\n    @Input() renderTitle = true;\n    @Input() showTitle = true; \n    @Input() label = '';\n\n    @Input() mandatory = false;\n    @Input() disabled = false;\n    @Input() classNames = '';\n    \n    @Input()\n    set chips(chips: IPepChip[]) {\n        this.chipsService.initData(chips);\n    }\n    get chips() {\n        return this.chipsService.chips;\n    }\n\n    /**\n    * The add chip emitter type.\n    *\n    * @type {PepChipsInputType}\n    * @memberof PepChipsComponent\n    */\n    @Input() type: PepChipsInputType = 'input';\n\n    /**\n    * The chip layput direction type.\n    *\n    * @type {PepChipsOrientationType}\n    * @memberof PepChipsComponent\n    */\n    @Input() orientation: PepChipsOrientationType = 'horizontal';\n\n    /**\n    * The style of the button.\n    *\n    * @type {PepStyleType}\n    * @memberof PepButtonComponent\n    */\n    @Input() styleType: PepStyleType = 'regular';\n\n    /**\n    * Whether chip multi select allowed.\n    *    \n    * @memberof PepChipsComponent\n    */\n    @Input() multiSelect = false;\n\n    /**\n    * Add new chip placeholder.\n    *    \n    * @memberof PepChipsComponent\n    */\n    @Input() placeholder = '';\n\n    /**\n     * Add new chip(s) event.\n     *\n     * @type {EventEmitter<void>}\n     * @memberof PepButtonComponent\n     */\n    @Output() fieldClick: EventEmitter<void> = new EventEmitter<void>();\n    @Output() selectionChange: EventEmitter<IPepChipSelection> = new EventEmitter<IPepChipSelection>();\n\n    /**\n     * Selected chip(s)\n     */\n    get selected() {\n        const selected = this.chipsService.selected;        \n        if (this.multiSelect) {\n            return selected.length ? selected : [];\n        } else {\n            return selected.length ? selected[0] : null;\n        }        \n    }\n\n    constructor(public chipsService: PepChipsService, private _translate: TranslateService) {\n        //\n    }\n\n    ngOnInit(): void {\n      //\n    }\n\n    /**\n     * Adding chip(s) to current chips list\n     * @param chips Chip(s) to add\n     */\n    addChipsToList(chips: IPepChip[]) {\n        chips.forEach(chip => this.chipsService.addChip(chip));\n    }    \n\n    /**\n     * On new chip added\n     * @param event Chip addition event\n     */\n    onChipAdded(event: MatChipInputEvent): void {\n        const value = (event.value || '').trim();\n\n        if (value) {\n            this.chipsService.addChip({\n                value: value\n            });\n            // clear the input value\n            event.chipInput?.clear();\n        }\n    }\n\n    /**\n     * On chip removed\n     * @param chip Removed chip item\n     */\n    onChipRemoved(chip: IPepChip): void {\n        const index = this.chips.indexOf(chip);\n\n        if (index >= 0) {\n            this.chips.splice(index, 1);\n        }\n    }\n\n    /**\n     * On chip selection status changed\n     * @param isSelected Whether the chip is selected\n     * @param chip Selected chip item\n     */\n    onSelectionChanged(isSelected: boolean, chip: IPepChip) {\n        chip.selected = isSelected;\n\n        this.selectionChange.emit({\n            value: chip.value,\n            isSelected: isSelected\n        })\n    }\n\n    /**\n     * On Add new chip(s) clicked\n     */\n    onChipsSelectClicked() {\n        this.fieldClick.emit();\n    }\n\n    ngOnDestroy(): void {\n        this.chipsService.destroy();\n    }\n}","<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>","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 { MatChipsModule, MAT_CHIPS_DEFAULT_OPTIONS } from '@angular/material/chips';\nimport { MatIconModule } from '@angular/material/icon';\nimport { COMMA, ENTER, TAB, SEMICOLON } from '@angular/cdk/keycodes';\n\nimport { PepNgxLibModule } from '@pepperi-addons/ngx-lib';\nimport { \n    PepIconModule,\n    PepIconRegistry,\n    pepIconSystemBolt,\n    pepIconSystemClose\n} from '@pepperi-addons/ngx-lib/icon';\n\nimport { PepFieldTitleModule } from '@pepperi-addons/ngx-lib/field-title';\nimport { PepButtonModule } from '@pepperi-addons/ngx-lib/button';\nimport { PepChipsComponent } from './chips.component';\n\nconst pepIcons = [\n    pepIconSystemBolt,\n    pepIconSystemClose\n];\n\n\n@NgModule({\n    declarations: [PepChipsComponent],\n    imports: [\n        CommonModule,\n        ReactiveFormsModule,        \n        MatCommonModule,\n        MatFormFieldModule,\n        MatChipsModule,\n        MatIconModule,\n        PepNgxLibModule,\n        PepIconModule,\n        PepFieldTitleModule,        \n        PepButtonModule\n    ],\n    exports: [PepChipsComponent],\n    providers: [\n        {\n          provide: MAT_CHIPS_DEFAULT_OPTIONS,\n          useValue: {\n            separatorKeyCodes: [ENTER, COMMA]\n          }\n        }\n      ]    \n})\nexport class PepChipsModule {\n    constructor(private pepIconRegistry: PepIconRegistry) {\n        this.pepIconRegistry.registerIcons(pepIcons);\n    }\n}\n","/*\n * Public API Surface of ngx-lib/chips\n */\nexport * from './chips.module';\nexport * from './chips.component';\nexport * from './chips.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.PepChipsService"],"mappings":"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"}