@pepperi-addons/ngx-lib 0.4.0-angular14.36 → 0.4.0-angular14.39

package/esm2020/smart-filters/smart-filters.component.mjs

@@ -1,141 +1,141 @@
-import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter, } from '@angular/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@pepperi-addons/ngx-lib";
-import * as i2 from "@angular/common";
-import * as i3 from "@angular/cdk/bidi";
-import * as i4 from "@angular/material/chips";
-import * as i5 from "@angular/material/expansion";
-import * as i6 from "@angular/material/icon";
-import * as i7 from "@pepperi-addons/ngx-lib/icon";
-import * as i8 from "./text-filter/text-filter.component";
-import * as i9 from "./boolean-filter/boolean-filter.component";
-import * as i10 from "./date-filter/date-filter.component";
-import * as i11 from "./multi-select-filter/multi-select-filter.component";
-import * as i12 from "./number-filter/number-filter.component";
-import * as i13 from "@ngx-translate/core";
-export class PepSmartFiltersComponent {
-    constructor(hostElement, layoutService) {
-        this.hostElement = hostElement;
-        this.layoutService = layoutService;
-        this.title = '';
-        this.filtersDataMap = new Map();
-        this._filters = [];
-        this._fields = [];
-        this._useAsWebComponent = false;
-        // @Output()
-        // filtersClear: EventEmitter<void> = new EventEmitter<void>();
-        this.filtersChange = new EventEmitter();
-        this.fieldToggleChange = new EventEmitter();
-        this.expansionPanelHeaderHeight = '*';
-    }
-    set filters(value) {
-        this._filters = value;
-        this.setupFilters(value);
-    }
-    get filters() {
-        this._filters = [...this.filtersDataMap.keys()]
-            // .filter((key) => this.filtersDataMap.get(key) !== null)
-            .map((key) => {
-            if (key) {
-                return this.filtersDataMap.get(key);
-            }
-        });
-        return this._filters;
-    }
-    set fields(value) {
-        this._fields = value;
-    }
-    get fields() {
-        return this._fields;
-    }
-    set useAsWebComponent(value) {
-        if (value) {
-            this.exportFunctionsOnHostElement();
-        }
-    }
-    get useAsWebComponent() {
-        return this._useAsWebComponent;
-    }
-    exportFunctionsOnHostElement() {
-        // This is for web component usage for use those functions.
-        this.hostElement.nativeElement.clearFilters = this.clearFilters.bind(this);
-        this.hostElement.nativeElement.clearFilter = this.clearFilter.bind(this);
-        this.hostElement.nativeElement.toggleField = this.toggleField.bind(this);
-    }
-    setupFilters(value) {
-        this.filtersDataMap.clear();
-        if (value) {
-            value.forEach((filter) => {
-                // Validate before add the filter into the map.
-                let currentField = null;
-                if (this.fields && this.fields.length > 0) {
-                    currentField = this.fields.find((field) => field.id === filter.fieldId);
-                }
-                if (currentField) {
-                    // Only if the operator is from the same type
-                    if (filter.operator.componentType.includes(currentField.componentType)) {
-                        let isOperatorUnitValid = true;
-                        if (filter.operatorUnit) {
-                            // Only if the operator unit is not from the same type
-                            if (!filter.operatorUnit.componentType.includes(currentField.componentType)) {
-                                isOperatorUnitValid = false;
-                            }
-                        }
-                        // Add the filter.
-                        if (isOperatorUnitValid) {
-                            this.filtersDataMap.set(filter.fieldId, filter);
-                        }
-                    }
-                }
-            });
-        }
-    }
-    raiseFiltersChange() {
-        this.filtersChange.emit(this.filters);
-    }
-    toggleField(index, isOpen) {
-        this.fields[index].isOpen = isOpen;
-        this.fieldToggleChange.emit(this.fields[index]);
-    }
-    clearFilters() {
-        this.filtersDataMap.clear();
-    }
-    clearFilter(fieldId) {
-        this.filtersDataMap.delete(fieldId);
-    }
-    // Clear all the filters and raise event that filters has change.
-    onFiltersClear() {
-        this.clearFilters();
-        this.raiseFiltersChange();
-    }
-    // Clear the filter and raise event that filters has change.
-    onFilterClear(field) {
-        this.clearFilter(field.id);
-        this.raiseFiltersChange();
-    }
-    // Set the filter and raise event that filters has change.
-    onFilterChange(field, filterData) {
-        this.clearFilter(field.id);
-        this.filtersDataMap.set(field.id, filterData);
-        this.raiseFiltersChange();
-    }
-}
-PepSmartFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSmartFiltersComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
-PepSmartFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSmartFiltersComponent, selector: "pep-smart-filters", inputs: { title: "title", filters: "filters", fields: "fields", useAsWebComponent: "useAsWebComponent" }, outputs: { filtersChange: "filtersChange", fieldToggleChange: "fieldToggleChange" }, ngImport: i0, template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div *ngIf=\"fields?.length > 0\" class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n            class=\"clear-filter pep-button chip xs weak\">\n            <span class=\"body-xs ellipsis \">\n                {{ \"ACTIONS.CLEAR\" | translate}}\n            </span>\n        </mat-chip>\n    </div>\n\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\n                <mat-panel-title class=\"pep-spacing-element-negative\">\n                    <div class=\"smart-filter-title-container\">\n                        <mat-icon class=\"pep-spacing-element\">\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n                            {{ field.name }}\n                        </span>\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\n                                <!-- {{ field.componentType === 'multi-select' ?\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n                            </span>\n                            <mat-icon>\n                                <pep-icon name=\"system_close\"></pep-icon>\n                            </mat-icon>\n                        </mat-chip>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-content smart-filter-content\">\n                <ng-container [ngSwitch]=\"field.componentType\">\n                    <ng-container *ngSwitchCase=\"'boolean'\">\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-boolean-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'date'\">\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-date-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-multi-select-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'number'\">\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-number-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'text'\">\n                        <pep-text-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-text-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>", styles: [".smart-filters-container .title{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 var(--pep-spacing-xs, .25rem);padding:0 var(--pep-spacing-md, .75rem)}.smart-filters-container .title .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container{display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr auto;width:100%}.smart-filters-container .smart-filter-title-container>*{align-self:center}.smart-filters-container .smart-filter-title-container .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-inline-end:var(--pep-spacing-sm, .5rem)}.smart-filters-container .smart-filter-title-container .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container .mat-icon pep-icon{height:.75rem;width:.75rem}\n", ".smart-filters-container .clear-filter.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.smart-filters-container .clear-filter.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.smart-filters-container .clear-filter.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)}.smart-filters-container .clear-filter.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%))}.smart-filters-container .clear-filter.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:active{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}.smart-filters-container .clear-filter.weak:active: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%))}.smart-filters-container .clear-filter.weak:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):after{border:unset}.smart-filters-container .clear-filter.weak: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)}.smart-filters-container .clear-filter.weak: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)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i8.PepTextFilterComponent, selector: "pep-text-filter" }, { kind: "component", type: i9.PepBooleanFilterComponent, selector: "pep-boolean-filter", inputs: ["options"] }, { kind: "component", type: i10.PepDateFilterComponent, selector: "pep-date-filter" }, { kind: "component", type: i11.PepMultiSelectFilterComponent, selector: "pep-multi-select-filter" }, { kind: "component", type: i12.PepNumberFilterComponent, selector: "pep-number-filter" }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSmartFiltersComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pep-smart-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div *ngIf=\"fields?.length > 0\" class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n            class=\"clear-filter pep-button chip xs weak\">\n            <span class=\"body-xs ellipsis \">\n                {{ \"ACTIONS.CLEAR\" | translate}}\n            </span>\n        </mat-chip>\n    </div>\n\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\n                <mat-panel-title class=\"pep-spacing-element-negative\">\n                    <div class=\"smart-filter-title-container\">\n                        <mat-icon class=\"pep-spacing-element\">\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n                            {{ field.name }}\n                        </span>\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\n                                <!-- {{ field.componentType === 'multi-select' ?\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n                            </span>\n                            <mat-icon>\n                                <pep-icon name=\"system_close\"></pep-icon>\n                            </mat-icon>\n                        </mat-chip>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-content smart-filter-content\">\n                <ng-container [ngSwitch]=\"field.componentType\">\n                    <ng-container *ngSwitchCase=\"'boolean'\">\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-boolean-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'date'\">\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-date-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-multi-select-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'number'\">\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-number-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'text'\">\n                        <pep-text-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-text-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>", styles: [".smart-filters-container .title{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 var(--pep-spacing-xs, .25rem);padding:0 var(--pep-spacing-md, .75rem)}.smart-filters-container .title .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container{display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr auto;width:100%}.smart-filters-container .smart-filter-title-container>*{align-self:center}.smart-filters-container .smart-filter-title-container .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-inline-end:var(--pep-spacing-sm, .5rem)}.smart-filters-container .smart-filter-title-container .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container .mat-icon pep-icon{height:.75rem;width:.75rem}\n", ".smart-filters-container .clear-filter.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.smart-filters-container .clear-filter.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.smart-filters-container .clear-filter.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)}.smart-filters-container .clear-filter.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%))}.smart-filters-container .clear-filter.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:active{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}.smart-filters-container .clear-filter.weak:active: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%))}.smart-filters-container .clear-filter.weak:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):after{border:unset}.smart-filters-container .clear-filter.weak: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)}.smart-filters-container .clear-filter.weak: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)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepLayoutService }]; }, propDecorators: { title: [{
-                type: Input
-            }], filters: [{
-                type: Input
-            }], fields: [{
-                type: Input
-            }], useAsWebComponent: [{
-                type: Input
-            }], filtersChange: [{
-                type: Output
-            }], fieldToggleChange: [{
-                type: Output
-            }] } });
+import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter, } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@pepperi-addons/ngx-lib";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/bidi";
+import * as i4 from "@angular/material/chips";
+import * as i5 from "@angular/material/expansion";
+import * as i6 from "@angular/material/icon";
+import * as i7 from "@pepperi-addons/ngx-lib/icon";
+import * as i8 from "./text-filter/text-filter.component";
+import * as i9 from "./boolean-filter/boolean-filter.component";
+import * as i10 from "./date-filter/date-filter.component";
+import * as i11 from "./multi-select-filter/multi-select-filter.component";
+import * as i12 from "./number-filter/number-filter.component";
+import * as i13 from "@ngx-translate/core";
+export class PepSmartFiltersComponent {
+    constructor(hostElement, layoutService) {
+        this.hostElement = hostElement;
+        this.layoutService = layoutService;
+        this.title = '';
+        this.filtersDataMap = new Map();
+        this._filters = [];
+        this._fields = [];
+        this._useAsWebComponent = false;
+        // @Output()
+        // filtersClear: EventEmitter<void> = new EventEmitter<void>();
+        this.filtersChange = new EventEmitter();
+        this.fieldToggleChange = new EventEmitter();
+        this.expansionPanelHeaderHeight = '*';
+    }
+    set filters(value) {
+        this._filters = value;
+        this.setupFilters(value);
+    }
+    get filters() {
+        this._filters = [...this.filtersDataMap.keys()]
+            // .filter((key) => this.filtersDataMap.get(key) !== null)
+            .map((key) => {
+            if (key) {
+                return this.filtersDataMap.get(key);
+            }
+        });
+        return this._filters;
+    }
+    set fields(value) {
+        this._fields = value;
+    }
+    get fields() {
+        return this._fields;
+    }
+    set useAsWebComponent(value) {
+        if (value) {
+            this.exportFunctionsOnHostElement();
+        }
+    }
+    get useAsWebComponent() {
+        return this._useAsWebComponent;
+    }
+    exportFunctionsOnHostElement() {
+        // This is for web component usage for use those functions.
+        this.hostElement.nativeElement.clearFilters = this.clearFilters.bind(this);
+        this.hostElement.nativeElement.clearFilter = this.clearFilter.bind(this);
+        this.hostElement.nativeElement.toggleField = this.toggleField.bind(this);
+    }
+    setupFilters(value) {
+        this.filtersDataMap.clear();
+        if (value) {
+            value.forEach((filter) => {
+                // Validate before add the filter into the map.
+                let currentField = null;
+                if (this.fields && this.fields.length > 0) {
+                    currentField = this.fields.find((field) => field.id === filter.fieldId);
+                }
+                if (currentField) {
+                    // Only if the operator is from the same type
+                    if (filter.operator.componentType.includes(currentField.componentType)) {
+                        let isOperatorUnitValid = true;
+                        if (filter.operatorUnit) {
+                            // Only if the operator unit is not from the same type
+                            if (!filter.operatorUnit.componentType.includes(currentField.componentType)) {
+                                isOperatorUnitValid = false;
+                            }
+                        }
+                        // Add the filter.
+                        if (isOperatorUnitValid) {
+                            this.filtersDataMap.set(filter.fieldId, filter);
+                        }
+                    }
+                }
+            });
+        }
+    }
+    raiseFiltersChange() {
+        this.filtersChange.emit(this.filters);
+    }
+    toggleField(index, isOpen) {
+        this.fields[index].isOpen = isOpen;
+        this.fieldToggleChange.emit(this.fields[index]);
+    }
+    clearFilters() {
+        this.filtersDataMap.clear();
+    }
+    clearFilter(fieldId) {
+        this.filtersDataMap.delete(fieldId);
+    }
+    // Clear all the filters and raise event that filters has change.
+    onFiltersClear() {
+        this.clearFilters();
+        this.raiseFiltersChange();
+    }
+    // Clear the filter and raise event that filters has change.
+    onFilterClear(field) {
+        this.clearFilter(field.id);
+        this.raiseFiltersChange();
+    }
+    // Set the filter and raise event that filters has change.
+    onFilterChange(field, filterData) {
+        this.clearFilter(field.id);
+        this.filtersDataMap.set(field.id, filterData);
+        this.raiseFiltersChange();
+    }
+}
+PepSmartFiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSmartFiltersComponent, deps: [{ token: i0.ElementRef }, { token: i1.PepLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+PepSmartFiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PepSmartFiltersComponent, selector: "pep-smart-filters", inputs: { title: "title", filters: "filters", fields: "fields", useAsWebComponent: "useAsWebComponent" }, outputs: { filtersChange: "filtersChange", fieldToggleChange: "fieldToggleChange" }, ngImport: i0, template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div *ngIf=\"fields?.length > 0\" class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n            class=\"clear-filter pep-button chip xs weak\">\n            <span class=\"body-xs ellipsis \">\n                {{ \"ACTIONS.CLEAR\" | translate}}\n            </span>\n        </mat-chip>\n    </div>\n\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\n                <mat-panel-title class=\"pep-spacing-element-negative\">\n                    <div class=\"smart-filter-title-container\">\n                        <mat-icon class=\"pep-spacing-element\">\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n                            {{ field.name }}\n                        </span>\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\n                                <!-- {{ field.componentType === 'multi-select' ?\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n                            </span>\n                            <mat-icon>\n                                <pep-icon name=\"system_close\"></pep-icon>\n                            </mat-icon>\n                        </mat-chip>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-content smart-filter-content\">\n                <ng-container [ngSwitch]=\"field.componentType\">\n                    <ng-container *ngSwitchCase=\"'boolean'\">\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-boolean-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'date'\">\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-date-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-multi-select-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'number'\">\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-number-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'text'\">\n                        <pep-text-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-text-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>", styles: [".smart-filters-container .title{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 var(--pep-spacing-xs, .25rem);padding:0 var(--pep-spacing-md, .75rem)}.smart-filters-container .title .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container{display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr auto;width:100%}.smart-filters-container .smart-filter-title-container>*{align-self:center}.smart-filters-container .smart-filter-title-container .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-inline-end:var(--pep-spacing-sm, .5rem)}.smart-filters-container .smart-filter-title-container .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container .mat-icon pep-icon{height:.75rem;width:.75rem}\n", ".smart-filters-container .clear-filter.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.smart-filters-container .clear-filter.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.smart-filters-container .clear-filter.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)}.smart-filters-container .clear-filter.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%))}.smart-filters-container .clear-filter.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:active{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}.smart-filters-container .clear-filter.weak:active: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%))}.smart-filters-container .clear-filter.weak:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):after{border:unset}.smart-filters-container .clear-filter.weak: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)}.smart-filters-container .clear-filter.weak: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)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "directive", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.PepIconComponent, selector: "pep-icon", inputs: ["spin", "name", "fill"] }, { kind: "component", type: i8.PepTextFilterComponent, selector: "pep-text-filter" }, { kind: "component", type: i9.PepBooleanFilterComponent, selector: "pep-boolean-filter", inputs: ["options"] }, { kind: "component", type: i10.PepDateFilterComponent, selector: "pep-date-filter" }, { kind: "component", type: i11.PepMultiSelectFilterComponent, selector: "pep-multi-select-filter" }, { kind: "component", type: i12.PepNumberFilterComponent, selector: "pep-number-filter" }, { kind: "pipe", type: i13.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PepSmartFiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pep-smart-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div *ngIf=\"fields?.length > 0\" class=\"title\">\n        <span class=\"body-md bold\">{{ title?.length > 0 ? title : (\"SMART_FILTERS.TITLE\" | translate)}}</span>\n        <mat-chip *ngIf=\"filtersDataMap.size > 0\" [selectable]=\"false\" [removable]=\"true\" (click)=\"onFiltersClear()\"\n            class=\"clear-filter pep-button chip xs weak\">\n            <span class=\"body-xs ellipsis \">\n                {{ \"ACTIONS.CLEAR\" | translate}}\n            </span>\n        </mat-chip>\n    </div>\n\n    <mat-accordion [displayMode]=\"'flat'\" [multi]=\"true\" class=\"pep-accordion2\">\n        <mat-expansion-panel *ngFor=\"let field of fields; let i = index\" hideToggle=\"true\" [expanded]=\"field.isOpen\"\n            (opened)=\"toggleField(i, true)\" (closed)=\"toggleField(i, false)\">\n            <mat-expansion-panel-header [collapsedHeight]=\"expansionPanelHeaderHeight\"\n                [expandedHeight]=\"expansionPanelHeaderHeight\">\n                <mat-panel-title class=\"pep-spacing-element-negative\">\n                    <div class=\"smart-filter-title-container\">\n                        <mat-icon class=\"pep-spacing-element\">\n                            <pep-icon [name]=\"field.isOpen ? 'number_minus' : 'number_plus'\"></pep-icon>\n                        </mat-icon>\n                        <span class=\"body-sm ellipsis\" [title]=\"field.name\">\n                            {{ field.name }}\n                        </span>\n                        <mat-chip *ngIf=\"filtersDataMap.get(field.id)\" [selectable]=\"false\" [removable]=\"true\"\n                            (click)=\"onFilterClear(field)\" class=\"clear-filter pep-button chip xs weak\">\n                            <span *ngIf=\"field.componentType === 'multi-select'\" class=\"body-xs pep-spacing-element\">\n                                {{ filtersDataMap.get(field.id).value?.first?.length }}\n                                <!-- {{ field.componentType === 'multi-select' ?\n                                filtersDataMap.get(field.id).value?.first?.length : 1 }} -->\n                            </span>\n                            <mat-icon>\n                                <pep-icon name=\"system_close\"></pep-icon>\n                            </mat-icon>\n                        </mat-chip>\n                    </div>\n                </mat-panel-title>\n            </mat-expansion-panel-header>\n            <div class=\"expansion-content smart-filter-content\">\n                <ng-container [ngSwitch]=\"field.componentType\">\n                    <ng-container *ngSwitchCase=\"'boolean'\">\n                        <pep-boolean-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-boolean-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'date'\">\n                        <pep-date-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-date-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'multi-select'\">\n                        <pep-multi-select-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-multi-select-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'number'\">\n                        <pep-number-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-number-filter>\n                    </ng-container>\n                    <ng-container *ngSwitchCase=\"'text'\">\n                        <pep-text-filter [field]=\"field\" [filter]=\"filtersDataMap.get(field.id)\"\n                            (filterChange)=\"onFilterChange(field, $event)\" (filterClear)=\"onFilterClear(field)\">\n                        </pep-text-filter>\n                    </ng-container>\n                    <!-- <div *ngSwitchDefault>\n                    </div> -->\n                </ng-container>\n            </div>\n        </mat-expansion-panel>\n    </mat-accordion>\n</div>", styles: [".smart-filters-container .title{height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 var(--pep-spacing-xs, .25rem);padding:0 var(--pep-spacing-md, .75rem)}.smart-filters-container .title .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container{display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr auto;width:100%}.smart-filters-container .smart-filter-title-container>*{align-self:center}.smart-filters-container .smart-filter-title-container .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-inline-end:var(--pep-spacing-sm, .5rem)}.smart-filters-container .smart-filter-title-container .clear-filter:after{background-color:transparent}.smart-filters-container .smart-filter-title-container .mat-icon pep-icon{height:.75rem;width:.75rem}\n", ".smart-filters-container .clear-filter.weak{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.12)}.smart-filters-container .clear-filter.weak:hover{background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.16)}.smart-filters-container .clear-filter.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)}.smart-filters-container .clear-filter.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%))}.smart-filters-container .clear-filter.weak:focus:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:active{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}.smart-filters-container .clear-filter.weak:active: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%))}.smart-filters-container .clear-filter.weak:active:after{z-index:0;content:\"\";transition:all .25s;display:block;position:absolute;top:0;bottom:0;left:0;right:0;border-radius:inherit;border:1px solid hsl(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%))}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled){box-shadow:unset;border:unset;color:hsla(var(--pep-color-system-primary-h, 0),var(--pep-color-system-primary-s, 0%),var(--pep-color-system-primary-l, 10%),.35)!important;background:hsla(var(--pep-color-weak-h, 0),var(--pep-color-weak-s, 0%),var(--pep-color-weak-l, 10%),.04)!important}.smart-filters-container .clear-filter.weak:disabled:not(.ignore-disabled):after{border:unset}.smart-filters-container .clear-filter.weak: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)}.smart-filters-container .clear-filter.weak: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)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.PepLayoutService }]; }, propDecorators: { title: [{
+                type: Input
+            }], filters: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], useAsWebComponent: [{
+                type: Input
+            }], filtersChange: [{
+                type: Output
+            }], fieldToggleChange: [{
+                type: Output
+            }] } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic21hcnQtZmlsdGVycy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbGliL3NtYXJ0LWZpbHRlcnMvc21hcnQtZmlsdGVycy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbGliL3NtYXJ0LWZpbHRlcnMvc21hcnQtZmlsdGVycy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0gsU0FBUyxFQUNULEtBQUssRUFDTCx1QkFBdUIsRUFDdkIsTUFBTSxFQUNOLFlBQVksR0FFZixNQUFNLGVBQWUsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7O0FBY3ZCLE1BQU0sT0FBTyx3QkFBd0I7SUEyRGpDLFlBQ1ksV0FBdUIsRUFDeEIsYUFBK0I7UUFEOUIsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFDeEIsa0JBQWEsR0FBYixhQUFhLENBQWtCO1FBM0RqQyxVQUFLLEdBQUcsRUFBRSxDQUFDO1FBRXBCLG1CQUFjLEdBQXFDLElBQUksR0FBRyxFQUd2RCxDQUFDO1FBRUksYUFBUSxHQUEwQixFQUFFLENBQUM7UUFrQnJDLFlBQU8sR0FBZ0MsRUFBRSxDQUFDO1FBUzFDLHVCQUFrQixHQUFHLEtBQUssQ0FBQztRQVduQyxZQUFZO1FBQ1osK0RBQStEO1FBRS9ELGtCQUFhLEdBQXdDLElBQUksWUFBWSxFQUVsRSxDQUFDO1FBR0osc0JBQWlCLEdBQXVDLElBQUksWUFBWSxFQUF3QixDQUFDO1FBRWpHLCtCQUEwQixHQUFHLEdBQUcsQ0FBQztJQUs3QixDQUFDO0lBcERMLElBQ0ksT0FBTyxDQUFDLEtBQTRCO1FBQ3BDLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ3RCLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0IsQ0FBQztJQUNELElBQUksT0FBTztRQUNQLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxH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QVVGLGlCQUFpQjtzQkFEcEIsS0FBSztnQkFhTixhQUFhO3NCQURaLE1BQU07Z0JBTVAsaUJBQWlCO3NCQURoQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDb21wb25lbnQsXG4gICAgSW5wdXQsXG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgT3V0cHV0LFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBFbGVtZW50UmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgSVBlcFNtYXJ0RmlsdGVyRmllbGQsXG4gICAgUGVwU21hcnRGaWx0ZXJCYXNlRmllbGQsXG59IGZyb20gJy4vY29tbW9uL21vZGVsL2ZpZWxkJztcbmltcG9ydCB7IFBlcExheW91dFNlcnZpY2UgfSBmcm9tICdAcGVwcGVyaS1hZGRvbnMvbmd4LWxpYic7XG5pbXBvcnQgeyBJUGVwU21hcnRGaWx0ZXJEYXRhIH0gZnJvbSAnLi9jb21tb24vbW9kZWwvZmlsdGVyJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdwZXAtc21hcnQtZmlsdGVycycsXG4gICAgdGVtcGxhdGVVcmw6ICcuL3NtYXJ0LWZpbHRlcnMuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3NtYXJ0LWZpbHRlcnMuY29tcG9uZW50LnNjc3MnLCAnLi9zbWFydC1maWx0ZXJzLmNvbXBvbmVudC50aGVtZS5zY3NzJ10sXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFBlcFNtYXJ0RmlsdGVyc0NvbXBvbmVudCB7XG5cbiAgICBASW5wdXQoKSB0aXRsZSA9ICcnO1xuXG4gICAgZmlsdGVyc0RhdGFNYXA6IE1hcDxzdHJpbmcsIElQZXBTbWFydEZpbHRlckRhdGE+ID0gbmV3IE1hcDxcbiAgICAgICAgc3RyaW5nLFxuICAgICAgICBJUGVwU21hcnRGaWx0ZXJEYXRhXG4gICAgPigpO1xuXG4gICAgcHJpdmF0ZSBfZmlsdGVyczogSVBlcFNtYXJ0RmlsdGVyRGF0YVtdID0gW107XG4gICAgQElucHV0KClcbiAgICBzZXQgZmlsdGVycyh2YWx1ZTogSVBlcFNtYXJ0RmlsdGVyRGF0YVtdKSB7XG4gICAgICAgIHRoaXMuX2ZpbHRlcnMgPSB2YWx1ZTtcbiAgICAgICAgdGhpcy5zZXR1cEZpbHRlcnModmFsdWUpO1xuICAgIH1cbiAgICBnZXQgZmlsdGVycygpOiBJUGVwU21hcnRGaWx0ZXJEYXRhW10ge1xuICAgICAgICB0aGlzLl9maWx0ZXJzID0gWy4uLnRoaXMuZmlsdGVyc0RhdGFNYXAua2V5cygpXVxuICAgICAgICAgICAgLy8gLmZpbHRlcigoa2V5KSA9PiB0aGlzLmZpbHRlcnNEYXRhTWFwLmdldChrZXkpICE9PSBudWxsKVxuICAgICAgICAgICAgLm1hcCgoa2V5KSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKGtleSkge1xuICAgICAgICAgICAgICAgICAgICByZXR1cm4gdGhpcy5maWx0ZXJzRGF0YU1hcC5nZXQoa2V5KTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9KTtcblxuICAgICAgICByZXR1cm4gdGhpcy5fZmlsdGVycztcbiAgICB9XG5cbiAgICBwcml2YXRlIF9maWVsZHM6IEFycmF5PElQZXBTbWFydEZpbHRlckZpZWxkPiA9IFtdO1xuICAgIEBJbnB1dCgpXG4gICAgc2V0IGZpZWxkcyh2YWx1ZTogQXJyYXk8SVBlcFNtYXJ0RmlsdGVyRmllbGQ+KSB7XG4gICAgICAgIHRoaXMuX2ZpZWxkcyA9IHZhbHVlO1xuICAgIH1cbiAgICBnZXQgZmllbGRzKCk6IEFycmF5PElQZXBTbWFydEZpbHRlckZpZWxkPiB7XG4gICAgICAgIHJldHVybiB0aGlzLl9maWVsZHM7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBfdXNlQXNXZWJDb21wb25lbnQgPSBmYWxzZTtcbiAgICBASW5wdXQoKVxuICAgIHNldCB1c2VBc1dlYkNvbXBvbmVudCh2YWx1ZTogYm9vbGVhbikge1xuICAgICAgICBpZiAodmFsdWUpIHtcbiAgICAgICAgICAgIHRoaXMuZXhwb3J0RnVuY3Rpb25zT25Ib3N0RWxlbWVudCgpO1xuICAgICAgICB9XG4gICAgfVxuICAgIGdldCB1c2VBc1dlYkNvbXBvbmVudCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX3VzZUFzV2ViQ29tcG9uZW50O1xuICAgIH1cblxuICAgIC8vIEBPdXRwdXQoKVxuICAgIC8vIGZpbHRlcnNDbGVhcjogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICAgIEBPdXRwdXQoKVxuICAgIGZpbHRlcnNDaGFuZ2U6IEV2ZW50RW1pdHRlcjxJUGVwU21hcnRGaWx0ZXJEYXRhW10+ID0gbmV3IEV2ZW50RW1pdHRlcjxcbiAgICAgICAgSVBlcFNtYXJ0RmlsdGVyRGF0YVtdXG4gICAgPigpO1xuXG4gICAgQE91dHB1dCgpXG4gICAgZmllbGRUb2dnbGVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxJUGVwU21hcnRGaWx0ZXJGaWVsZD4gPSBuZXcgRXZlbnRFbWl0dGVyPElQZXBTbWFydEZpbHRlckZpZWxkPigpO1xuXG4gICAgZXhwYW5zaW9uUGFuZWxIZWFkZXJIZWlnaHQgPSAnKic7XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgcHJpdmF0ZSBob3N0RWxlbWVudDogRWxlbWVudFJlZixcbiAgICAgICAgcHVibGljIGxheW91dFNlcnZpY2U6IFBlcExheW91dFNlcnZpY2VcbiAgICApIHsgfVxuXG4gICAgcHJpdmF0ZSBleHBvcnRGdW5jdGlvbnNPbkhvc3RFbGVtZW50KCkge1xuICAgICAgICAvLyBUaGlzIGlzIGZvciB3ZWIgY29tcG9uZW50IHVzYWdlIGZvciB1c2UgdGhvc2UgZnVuY3Rpb25zLlxuICAgICAgICB0aGlzLmhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQuY2xlYXJGaWx0ZXJzID0gdGhpcy5jbGVhckZpbHRlcnMuYmluZChcbiAgICAgICAgICAgIHRoaXNcbiAgICAgICAgKTtcbiAgICAgICAgdGhpcy5ob3N0RWxlbWVudC5uYXRpdmVFbGVtZW50LmNsZWFyRmlsdGVyID0gdGhpcy5jbGVhckZpbHRlci5iaW5kKFxuICAgICAgICAgICAgdGhpc1xuICAgICAgICApO1xuICAgICAgICB0aGlzLmhvc3RFbGVtZW50Lm5hdGl2ZUVsZW1lbnQudG9nZ2xlRmllbGQgPSB0aGlzLnRvZ2dsZUZpZWxkLmJpbmQoXG4gICAgICAgICAgICB0aGlzXG4gICAgICAgICk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBzZXR1cEZpbHRlcnModmFsdWU6IElQZXBTbWFydEZpbHRlckRhdGFbXSkge1xuICAgICAgICB0aGlzLmZpbHRlcnNEYXRhTWFwLmNsZWFyKCk7XG4gICAgICAgIGlmICh2YWx1ZSkge1xuICAgICAgICAgICAgdmFsdWUuZm9yRWFjaCgoZmlsdGVyKSA9PiB7XG4gICAgICAgICAgICAgICAgLy8gVmFsaWRhdGUgYmVmb3JlIGFkZCB0aGUgZmlsdGVyIGludG8gdGhlIG1hcC5cbiAgICAgICAgICAgICAgICBsZXQgY3VycmVudEZpZWxkID0gbnVsbDtcblxuICAgICAgICAgICAgICAgIGlmICh0aGlzLmZpZWxkcyAmJiB0aGlzLmZpZWxkcy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICAgICAgICAgIGN1cnJlbnRGaWVsZCA9IHRoaXMuZmllbGRzLmZpbmQoXG4gICAgICAgICAgICAgICAgICAgICAgICAoZmllbGQpID0+IGZpZWxkLmlkID09PSBmaWx0ZXIuZmllbGRJZFxuICAgICAgICAgICAgICAgICAgICApIGFzIFBlcFNtYXJ0RmlsdGVyQmFzZUZpZWxkO1xuICAgICAgICAgICAgICAgIH1cblxuICAgICAgICAgICAgICAgIGlmIChjdXJyZW50RmllbGQpIHtcbiAgICAgICAgICAgICAgICAgICAgLy8gT25seSBpZiB0aGUgb3BlcmF0b3IgaXMgZnJvbSB0aGUgc2FtZSB0eXBlXG4gICAgICAgICAgICAgICAgICAgIGlmIChcbiAgICAgICAgICAgICAgICAgICAgICAgIGZpbHRlci5vcGVyYXRvci5jb21wb25lbnRUeXBlLmluY2x1ZGVzKFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGN1cnJlbnRGaWVsZC5jb21wb25lbnRUeXBlXG4gICAgICAgICAgICAgICAgICAgICAgICApXG4gICAgICAgICAgICAgICAgICAgICkge1xuICAgICAgICAgICAgICAgICAgICAgICAgbGV0IGlzT3BlcmF0b3JVbml0VmFsaWQgPSB0cnVlO1xuICAgICAgICAgICAgICAgICAgICAgICAgaWYgKGZpbHRlci5vcGVyYXRvclVuaXQpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAvLyBPbmx5IGlmIHRoZSBvcGVyYXRvciB1bml0IGlzIG5vdCBmcm9tIHRoZSBzYW1lIHR5cGVcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZiAoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICFmaWx0ZXIub3BlcmF0b3JVbml0LmNvbXBvbmVudFR5cGUuaW5jbHVkZXMoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBjdXJyZW50RmllbGQuY29tcG9uZW50VHlwZVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICApXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlzT3BlcmF0b3JVbml0VmFsaWQgPSBmYWxzZTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgICAgICAgICAgIC8vIEFkZCB0aGUgZmlsdGVyLlxuICAgICAgICAgICAgICAgICAgICAgICAgaWYgKGlzT3BlcmF0b3JVbml0VmFsaWQpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0aGlzLmZpbHRlcnNEYXRhTWFwLnNldChmaWx0ZXIuZmllbGRJZCwgZmlsdGVyKTtcbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0pO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgcHJpdmF0ZSByYWlzZUZpbHRlcnNDaGFuZ2UoKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZmlsdGVyc0NoYW5nZS5lbWl0KHRoaXMuZmlsdGVycyk7XG4gICAgfVxuXG4gICAgdG9nZ2xlRmllbGQoaW5kZXg6IG51bWJlciwgaXNPcGVuOiBib29sZWFuKTogdm9pZCB7XG4gICAgICAgIHRoaXMuZmllbGRzW2luZGV4XS5pc09wZW4gPSBpc09wZW47XG4gICAgICAgIHRoaXMuZmllbGRUb2dnbGVDaGFuZ2UuZW1pdCh0aGlzLmZpZWxkc1tpbmRleF0pO1xuICAgIH1cblxuICAgIGNsZWFyRmlsdGVycygpIHtcbiAgICAgICAgdGhpcy5maWx0ZXJzRGF0YU1hcC5jbGVhcigpO1xuICAgIH1cblxuICAgIGNsZWFyRmlsdGVyKGZpZWxkSWQ6IHN0cmluZykge1xuICAgICAgICB0aGlzLmZpbHRlcnNEYXRhTWFwLmRlbGV0ZShmaWVsZElkKTtcbiAgICB9XG5cbiAgICAvLyBDbGVhciBhbGwgdGhlIGZpbHRlcnMgYW5kIHJhaXNlIGV2ZW50IHRoYXQgZmlsdGVycyBoYXMgY2hhbmdlLlxuICAgIG9uRmlsdGVyc0NsZWFyKCkge1xuICAgICAgICB0aGlzLmNsZWFyRmlsdGVycygpO1xuICAgICAgICB0aGlzLnJhaXNlRmlsdGVyc0NoYW5nZSgpO1xuICAgIH1cblxuICAgIC8vIENsZWFyIHRoZSBmaWx0ZXIgYW5kIHJhaXNlIGV2ZW50IHRoYXQgZmlsdGVycyBoYXMgY2hhbmdlLlxuICAgIG9uRmlsdGVyQ2xlYXIoZmllbGQ6IElQZXBTbWFydEZpbHRlckZpZWxkKSB7XG4gICAgICAgIHRoaXMuY2xlYXJGaWx0ZXIoZmllbGQuaWQpO1xuICAgICAgICB0aGlzLnJhaXNlRmlsdGVyc0NoYW5nZSgpO1xuICAgIH1cblxuICAgIC8vIFNldCB0aGUgZmlsdGVyIGFuZCByYWlzZSBldmVudCB0aGF0IGZpbHRlcnMgaGFzIGNoYW5nZS5cbiAgICBvbkZpbHRlckNoYW5nZShcbiAgICAgICAgZmllbGQ6IElQZXBTbWFydEZpbHRlckZpZWxkLFxuICAgICAgICBmaWx0ZXJEYXRhOiBJUGVwU21hcnRGaWx0ZXJEYXRhXG4gICAgKSB7XG4gICAgICAgIHRoaXMuY2xlYXJGaWx0ZXIoZmllbGQuaWQpO1xuICAgICAgICB0aGlzLmZpbHRlcnNEYXRhTWFwLnNldChmaWVsZC5pZCwgZmlsdGVyRGF0YSk7XG4gICAgICAgIHRoaXMucmFpc2VGaWx0ZXJzQ2hhbmdlKCk7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNtYXJ0LWZpbHRlcnMtY29udGFpbmVyXCIgZGlyPVwie3sgbGF5b3V0U2VydmljZS5pc1J0bCgpID8gJ3J0bCcgOiAnbHRyJyB9fVwiPlxuICAgIDxkaXYgKm5nSWY9XCJmaWVsZHM/Lmxlbmd0aCA+IDBcIiBjbGFzcz1cInRpdGxlXCI+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwiYm9keS1tZCBib2xkXCI+e3sgdGl0bGU/Lmxlbmd0aCA+IDAgPyB0aXRsZSA6IChcIlNNQVJUX0ZJTFRFUlMuVElUTEVcIiB8IHRyYW5zbGF0ZSl9fTwvc3Bhbj5cbiAgICAgICAgPG1hdC1jaGlwICpuZ0lmPVwiZmlsdGVyc0RhdGFNYXAuc2l6ZSA+IDBcIiBbc2VsZWN0YWJsZV09XCJmYWxzZVwiIFtyZW1vdmFibGVdPVwidHJ1ZVwiIChjbGljayk9XCJvbkZpbHRlcnNDbGVhcigpXCJcbiAgICAgICAgICAgIGNsYXNzPVwiY2xlYXItZmlsdGVyIHBlcC1idXR0b24gY2hpcCB4cyB3ZWFrXCI+XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cImJvZHkteHMgZWxsaXBzaXMgXCI+XG4gICAgICAgICAgICAgICAge3sgXCJBQ1RJT05TLkNMRUFSXCIgfCB0cmFuc2xhdGV9fVxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICA8L21hdC1jaGlwPlxuICAgIDwvZGl2PlxuXG4gICAgPG1hdC1hY2NvcmRpb24gW2Rpc3BsYXlNb2RlXT1cIidmbGF0J1wiIFttdWx0aV09XCJ0cnVlXCIgY2xhc3M9XCJwZXAtYWNjb3JkaW9uMlwiPlxuICAgICAgICA8bWF0LWV4cGFuc2lvbi1wYW5lbCAqbmdGb3I9XCJsZXQgZmllbGQgb2YgZmllbGRzOyBsZXQgaSA9IGluZGV4XCIgaGlkZVRvZ2dsZT1cInRydWVcIiBbZXhwYW5kZWRdPVwiZmllbGQuaXNPcGVuXCJcbiAgICAgICAgICAgIChvcGVuZWQpPVwidG9nZ2xlRmllbGQoaSwgdHJ1ZSlcIiAoY2xvc2VkKT1cInRvZ2dsZUZpZWxkKGksIGZhbHNlKVwiPlxuICAgICAgICAgICAgPG1hdC1leHBhbnNpb24tcGFuZWwtaGVhZGVyIFtjb2xsYXBzZWRIZWlnaHRdPVwiZXhwYW5zaW9uUGFuZWxIZWFkZXJIZWlnaHRcIlxuICAgICAgICAgICAgICAgIFtleHBhbmRlZEhlaWdodF09XCJleHBhbnNpb25QYW5lbEhlYWRlckhlaWdodFwiPlxuICAgICAgICAgICAgICAgIDxtYXQtcGFuZWwtdGl0bGUgY2xhc3M9XCJwZXAtc3BhY2luZy1lbGVtZW50LW5lZ2F0aXZlXCI+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzbWFydC1maWx0ZXItdGl0bGUtY29udGFpbmVyXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8bWF0LWljb24gY2xhc3M9XCJwZXAtc3BhY2luZy1lbGVtZW50XCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPHBlcC1pY29uIFtuYW1lXT1cImZpZWxkLmlzT3BlbiA/ICdudW1iZXJfbWludXMnIDogJ251bWJlcl9wbHVzJ1wiPjwvcGVwLWljb24+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L21hdC1pY29uPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJib2R5LXNtIGVsbGlwc2lzXCIgW3RpdGxlXT1cImZpZWxkLm5hbWVcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB7eyBmaWVsZC5uYW1lIH19XG4gICAgICAgICAgICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICAgICAgICAgICAgICA8bWF0LWNoaXAgKm5nSWY9XCJmaWx0ZXJzRGF0YU1hcC5nZXQoZmllbGQuaWQpXCIgW3NlbGVjdGFibGVdPVwiZmFsc2VcIiBbcmVtb3ZhYmxlXT1cInRydWVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJvbkZpbHRlckNsZWFyKGZpZWxkKVwiIGNsYXNzPVwiY2xlYXItZmlsdGVyIHBlcC1idXR0b24gY2hpcCB4cyB3ZWFrXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPHNwYW4gKm5nSWY9XCJmaWVsZC5jb21wb25lbnRUeXBlID09PSAnbXVsdGktc2VsZWN0J1wiIGNsYXNzPVwiYm9keS14cyBwZXAtc3BhY2luZy1lbGVtZW50XCI+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHt7IGZpbHRlcnNEYXRhTWFwLmdldChmaWVsZC5pZCkudmFsdWU/LmZpcnN0Py5sZW5ndGggfX1cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPCEtLSB7eyBmaWVsZC5jb21wb25lbnRUeXBlID09PSAnbXVsdGktc2VsZWN0JyA/XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGZpbHRlcnNEYXRhTWFwLmdldChmaWVsZC5pZCkudmFsdWU/LmZpcnN0Py5sZW5ndGggOiAxIH19IC0tPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8bWF0LWljb24+XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwZXAtaWNvbiBuYW1lPVwic3lzdGVtX2Nsb3NlXCI+PC9wZXAtaWNvbj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L21hdC1pY29uPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9tYXQtY2hpcD5cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPC9tYXQtcGFuZWwtdGl0bGU+XG4gICAgICAgICAgICA8L21hdC1leHBhbnNpb24tcGFuZWwtaGVhZGVyPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImV4cGFuc2lvbi1jb250ZW50IHNtYXJ0LWZpbHRlci1jb250ZW50XCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciBbbmdTd2l0Y2hdPVwiZmllbGQuY29tcG9uZW50VHlwZVwiPlxuICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInYm9vbGVhbidcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxwZXAtYm9vbGVhbi1maWx0ZXIgW2ZpZWxkXT1cImZpZWxkXCIgW2ZpbHRlcl09XCJmaWx0ZXJzRGF0YU1hcC5nZXQoZmllbGQuaWQpXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAoZmlsdGVyQ2hhbmdlKT1cIm9uRmlsdGVyQ2hhbmdlKGZpZWxkLCAkZXZlbnQpXCIgKGZpbHRlckNsZWFyKT1cIm9uRmlsdGVyQ2xlYXIoZmllbGQpXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L3BlcC1ib29sZWFuLWZpbHRlcj5cbiAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIidkYXRlJ1wiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHBlcC1kYXRlLWZpbHRlciBbZmllbGRdPVwiZmllbGRcIiBbZmlsdGVyXT1cImZpbHRlcnNEYXRhTWFwLmdldChmaWVsZC5pZClcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIChmaWx0ZXJDaGFuZ2UpPVwib25GaWx0ZXJDaGFuZ2UoZmllbGQsICRldmVudClcIiAoZmlsdGVyQ2xlYXIpPVwib25GaWx0ZXJDbGVhcihmaWVsZClcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvcGVwLWRhdGUtZmlsdGVyPlxuICAgICAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ211bHRpLXNlbGVjdCdcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxwZXAtbXVsdGktc2VsZWN0LWZpbHRlciBbZmllbGRdPVwiZmllbGRcIiBbZmlsdGVyXT1cImZpbHRlcnNEYXRhTWFwLmdldChmaWVsZC5pZClcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIChmaWx0ZXJDaGFuZ2UpPVwib25GaWx0ZXJDaGFuZ2UoZmllbGQsICRldmVudClcIiAoZmlsdGVyQ2xlYXIpPVwib25GaWx0ZXJDbGVhcihmaWVsZClcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvcGVwLW11bHRpLXNlbGVjdC1maWx0ZXI+XG4gICAgICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInbnVtYmVyJ1wiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHBlcC1udW1iZXItZmlsdGVyIFtmaWVsZF09XCJmaWVsZFwiIFtmaWx0ZXJdPVwiZmlsdGVyc0RhdGFNYXAuZ2V0KGZpZWxkLmlkKVwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKGZpbHRlckNoYW5nZSk9XCJvbkZpbHRlckNoYW5nZShmaWVsZCwgJGV2ZW50KVwiIChmaWx0ZXJDbGVhcik9XCJvbkZpbHRlckNsZWFyKGZpZWxkKVwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPC9wZXAtbnVtYmVyLWZpbHRlcj5cbiAgICAgICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIid0ZXh0J1wiPlxuICAgICAgICAgICAgICAgICAgICAgICAgPHBlcC10ZXh0LWZpbHRlciBbZmllbGRdPVwiZmllbGRcIiBbZmlsdGVyXT1cImZpbHRlcnNEYXRhTWFwLmdldChmaWVsZC5pZClcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIChmaWx0ZXJDaGFuZ2UpPVwib25GaWx0ZXJDaGFuZ2UoZmllbGQsICRldmVudClcIiAoZmlsdGVyQ2xlYXIpPVwib25GaWx0ZXJDbGVhcihmaWVsZClcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvcGVwLXRleHQtZmlsdGVyPlxuICAgICAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgICAgICAgICAgPCEtLSA8ZGl2ICpuZ1N3aXRjaERlZmF1bHQ+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PiAtLT5cbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L21hdC1leHBhbnNpb24tcGFuZWw+XG4gICAgPC9tYXQtYWNjb3JkaW9uPlxuPC9kaXY+Il19