@pepperi-addons/ngx-lib 0.2.55 → 0.2.58-beta.1

package/smart-filters/pepperi-addons-ngx-lib-smart-filters.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepSmartFiltersModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":37,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":39,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":40,"character":8},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":41,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":43,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":44,"character":8},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":45,"character":8},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":46,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":47,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":48,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":49,"character":8},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":50,"character":8},{"__symbolic":"reference","module":"ngx-virtual-scroller","name":"VirtualScrollerModule","line":52,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":54,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/checkbox","name":"PepCheckboxModule","line":55,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/date","name":"PepDateModule","line":56,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/select","name":"PepSelectModule","line":57,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox","name":"PepTextboxModule","line":58,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchModule","line":59,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":60,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSmartFiltersComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSmartFiltersComponent"},{"__symbolic":"reference","name":"PepFilterActionsComponent"},{"__symbolic":"reference","name":"PepBooleanFilterComponent"},{"__symbolic":"reference","name":"PepDateFilterComponent"},{"__symbolic":"reference","name":"PepMultiSelectFilterComponent"},{"__symbolic":"reference","name":"PepNumberFilterComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":74,"character":41}]}]}},"PepSmartFiltersComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"pep-smart-filters","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":19,"character":21},"member":"OnPush"},"template":"<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div 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                    <!-- <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(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem);padding:0 .75rem;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;-webkit-margin-end:.5rem;margin-inline-end:.5rem;-webkit-margin-end:var(--pep-spacing-sm,.5rem);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}"]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"filters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"filtersChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":5}}]}],"fieldToggleChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":75,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":81,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":82,"character":30}]}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"setupFilters":[{"__symbolic":"method"}],"raiseFiltersChange":[{"__symbolic":"method"}],"toggleField":[{"__symbolic":"method"}],"clearFilters":[{"__symbolic":"method"}],"clearFilter":[{"__symbolic":"method"}],"onFiltersClear":[{"__symbolic":"method"}],"onFilterClear":[{"__symbolic":"method"}],"onFilterChange":[{"__symbolic":"method"}]}},"BaseFilterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":46,"character":1},"arguments":[{}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":5}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"filterClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":74,"character":5}}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":75,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":140,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":141,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":142,"character":26},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":143,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":144,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepValidatorService","line":145,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":146,"character":28}]}],"createActionsComponent":[{"__symbolic":"method"}],"setupForm":[{"__symbolic":"method"}],"setupOperators":[{"__symbolic":"method"}],"setupFilter":[{"__symbolic":"method"}],"getDestroyer":[{"__symbolic":"method"}],"updateValidity":[{"__symbolic":"method"}],"loadOperatorsOptions":[{"__symbolic":"method"}],"setFieldsStateAndValidators":[{"__symbolic":"method"}],"getDefaultOperatorUnit":[{"__symbolic":"method"}],"initFilter":[{"__symbolic":"method"}],"getDefaultOperator":[{"__symbolic":"method"}],"getFilterValue":[{"__symbolic":"method"}],"clearFilter":[{"__symbolic":"method"}],"applyFilter":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"PepFilterActionsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"pep-filter-actions","template":"<div [formGroup]=\"form\" class=\"filter-actions pep-spacing-element-negative\">\n    <button mat-button class=\"pep-spacing-element pep-button sm weak\" (click)=\"clear()\">\n        {{ 'ACTIONS.CLEAR' | translate }}\n    </button>\n    <button mat-button class=\"pep-spacing-element pep-button sm strong\" (click)=\"apply()\" [disabled]=\"form.invalid\">\n        {{ 'ACTIONS.APPLY' | translate }}\n    </button>\n</div>","styles":[".filter-actions{margin:1rem 0 calc(1rem / 2);margin:var(--pep-spacing-lg,1rem) 0 calc(var(--pep-spacing-lg, 1rem) / 2);display:flex;justify-content:flex-end}"]}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":5}}]}],"clearClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":5}}]}],"applyClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":5}}]}],"clear":[{"__symbolic":"method"}],"apply":[{"__symbolic":"method"}]}},"PepBooleanFilterComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BaseFilterComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"pep-boolean-filter","template":"<div [formGroup]=\"form\">\n    <mat-radio-group class=\"radio-group\" [formControlName]=\"firstControlKey\">\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"true\">\n            {{ 'CHECKBOX.TRUE' | translate }}\n        </mat-radio-button>\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n            {{ 'CHECKBOX.FALSE' | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</div>","styles":[".radio-group{display:flex;flex-direction:column}.radio-group .pep-radio-button.pep-input{height:2.25rem;display:flex}"]}]}],"members":{"getDefaultOperator":[{"__symbolic":"method"}],"getFilterValue":[{"__symbolic":"method"}]}},"PepDateFilterComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BaseFilterComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"pep-date-filter","template":"<div [formGroup]=\"form\">\n    <ng-container>\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n            [emptyOption]=\"false\" [options]=\"chooseTimeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterOperators.DueIn ||\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\" fxLayoutGap=\"1rem\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"'int'\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\">\n        </pep-textbox>\n        <!-- Time unit -->\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" fxFlex=\"50%\" [emptyOption]=\"false\"\n            [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n        </pep-select>\n    </div>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        fxLayoutGap=\"1rem\">\n        <!-- Start date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [value]=\"firstControl.value\" [maxDateValue]=\"secondControl.value\">\n        </pep-date>\n        <!-- End date -->\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [value]=\"secondControl.value\" [minDateValue]=\"firstControl.value\">\n        </pep-date>\n    </div>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n        <!-- Choose a date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n            [renderError]=\"false\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl.value\">\n        </pep-date>\n    </ng-container>\n</div>","styles":[""]}]}],"members":{"getDefaultOperator":[{"__symbolic":"method"}],"getDefaultOperatorUnit":[{"__symbolic":"method"}],"getFilterValue":[{"__symbolic":"method"}],"loadOperatorsOptions":[{"__symbolic":"method"}],"setFieldsStateAndValidators":[{"__symbolic":"method"}],"onOperatorChanged":[{"__symbolic":"method"}],"onTimeUnitChanged":[{"__symbolic":"method"}]}},"PepMultiSelectFilterComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BaseFilterComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":28,"character":1},"arguments":[{"selector":"pep-multi-select-filter","template":"<div [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n                    <div class=\"title\">\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n                    </div>\n                </mat-checkbox>\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n                        translate }}\n                    </span>\n                </ng-container>\n            </virtual-scroller>\n        </div>\n    </div>\n</div>","styles":[".multi-select-options{margin:.5rem calc(.25rem * -1) 0;margin:var(--pep-spacing-sm,.5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(.5rem * -1) calc(.25rem * -1) 0;margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:.5rem .75rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-md,.75rem)}.multi-select-options .flip-scroll{padding:.5rem .25rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-xs,.25rem);min-height:3.25rem;max-height:34.75rem;direction:rtl}.multi-select-options .flip-scroll.rtl,.multi-select-options .flip-scroll virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;-webkit-padding-end:0;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout{width:100%;height:100%;grid-template-columns:auto 1fr}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout .mat-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:flex;justify-content:space-between;align-items:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem)}"]}]}],"members":{"optionsContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":5},"arguments":["optionsContainer"]}]}],"virtualScroller":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":44,"character":5},"arguments":[{"__symbolic":"reference","module":"ngx-virtual-scroller","name":"VirtualScrollerComponent","line":44,"character":15}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"initOptionsSelectedValues":[{"__symbolic":"method"}],"calcOptionsHeight":[{"__symbolic":"method"}],"filterOptions":[{"__symbolic":"method"}],"getDefaultOperator":[{"__symbolic":"method"}],"getFilterValue":[{"__symbolic":"method"}],"initFilter":[{"__symbolic":"method"}],"onOptionChange":[{"__symbolic":"method"}]}},"PepNumberFilterComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BaseFilterComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"pep-number-filter","template":"<div [formGroup]=\"form\">\n    <ng-container>\n        <pep-select [key]=\"'typeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.TYPE' | translate\"\n            [emptyOption]=\"false\" [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator !== PepSmartFilterOperators.NumberRange\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [type]=\"field.type\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\">\n        </pep-textbox>\n    </div>\n    <div *ngIf=\"operator === PepSmartFilterOperators.NumberRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        fxLayoutGap=\"1rem\">\n        <!-- Min number -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.MIN' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type\" [formattedValue]=\"firstControl.value\"\n            [value]=\"firstControl.value\" [maxValue]=\"secondControl.value\">\n        </pep-textbox>\n        <!-- Max number -->\n        <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\n            [renderError]=\"false\" fxFlex=\"50%\" [type]=\"field.type\" [formattedValue]=\"secondControl.value\"\n            [value]=\"secondControl.value\" [minValue]=\"firstControl.value\">\n        </pep-textbox>\n    </div>\n</div>","styles":[""]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}],"getDefaultOperator":[{"__symbolic":"method"}],"getFilterValue":[{"__symbolic":"method"}],"loadOperatorsOptions":[{"__symbolic":"method"}],"setFieldsStateAndValidators":[{"__symbolic":"method"}],"onOperatorChanged":[{"__symbolic":"method"}]}},"createSmartFilterField":{"__symbolic":"function"},"createSmartFilter":{"__symbolic":"function","parameters":["fieldId","operator","first","second","operatorUnit"],"value":{"fieldId":{"__symbolic":"reference","name":"fieldId"},"operator":{"__symbolic":"reference","name":"operator"},"operatorUnit":{"__symbolic":"reference","name":"operatorUnit"},"value":{"first":{"__symbolic":"reference","name":"first"},"second":{"__symbolic":"reference","name":"second"}}}},"IPepSmartFilterFieldOption":{"__symbolic":"interface"},"IPepSmartFilterField":{"__symbolic":"interface"},"PepSmartFilterBaseField":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterBooleanField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterDateBaseField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"PepSmartFilterDateField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterDateBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterDateTimeField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterDateBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterMultiSelectField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterNumberBaseField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"PepSmartFilterIntField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterNumberBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterRealField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterNumberBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterCurrencyField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterNumberBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterPercentageField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterNumberBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"IPepSmartFilterData":{"__symbolic":"interface"},"IPepSmartFilterDataValue":{"__symbolic":"interface"},"IPepSmartFilterOperator":{"__symbolic":"class","members":{}},"PepSmartFilterOperators":{"Equals":{"id":"eq","name":"EQUAL","short":"=","componentType":["number","boolean"]},"NotEqual":{"id":"neq","name":"NOT_EQUAL","short":"<>","componentType":["number"]},"LessThan":{"id":"lt","name":"LESS_THEN","short":"<","componentType":["number"]},"GreaterThan":{"id":"gt","name":"GREATER_THEN","short":">","componentType":["number"]},"NumberRange":{"id":"numberRange","name":"NUMBER_RANGE","short":"Range","componentType":["number"]},"InTheLast":{"id":"inTheLast","name":"IN_THE_LAST","short":"In the last","componentType":["date"]},"Today":{"id":"today","name":"TODAY","short":"Today","componentType":["date"]},"ThisWeek":{"id":"thisWeek","name":"THIS_WEEK","short":"This week","componentType":["date"]},"ThisMonth":{"id":"thisMonth","name":"THIS_MONTH","short":"This month","componentType":["date"]},"DateRange":{"id":"dateRange","name":"DATE_RANGE","short":"Range","componentType":["date"]},"DueIn":{"id":"dueIn","name":"DUE_IN","short":"Due in","componentType":["date"]},"On":{"id":"on","name":"ON","short":"On","componentType":["date"]},"NotInTheLast":{"id":"notInTheLast","name":"NOT_IN_THE_LAST","short":"Not in the last","componentType":["date"]},"NotDueIn":{"id":"notDueIn","name":"NOT_DUE_IN","short":"Not due in","componentType":["date"]},"IsEmpty":{"id":"isEmpty","name":"IS_EMPTY","short":"Is empty","componentType":["date"]},"IsNotEmpty":{"id":"isNotEmpty","name":"IS_NOT_EMPTY","short":"Is not empty","componentType":["date"]},"In":{"id":"in","name":"IN","short":"In","componentType":["multi-select"]}},"IPepSmartFilterOperatorUnit":{"__symbolic":"class","members":{}},"PepSmartFilterOperatorUnits":{"Days":{"id":"days","name":"DAYS","componentType":["date"]},"Weeks":{"id":"weeks","name":"WEEKS","componentType":["date"]},"Months":{"id":"months","name":"MONTHS","componentType":["date"]},"Years":{"id":"years","name":"YEARS","componentType":["date"]}},"PepSmartFilterComponentType":{"__symbolic":"interface"},"PepSmartFilterType":{"__symbolic":"interface"},"PepSmartFilterOperatorType":{"__symbolic":"interface"},"PepSmartFilterOperatorUnitType":{"__symbolic":"interface"}},"origins":{"PepSmartFiltersModule":"./smart-filters.module","PepSmartFiltersComponent":"./smart-filters.component","BaseFilterComponent":"./common/model/base-filter-component","PepFilterActionsComponent":"./common/filter-actions.component","PepBooleanFilterComponent":"./boolean-filter/boolean-filter.component","PepDateFilterComponent":"./date-filter/date-filter.component","PepMultiSelectFilterComponent":"./multi-select-filter/multi-select-filter.component","PepNumberFilterComponent":"./number-filter/number-filter.component","createSmartFilterField":"./common/model/creator","createSmartFilter":"./common/model/creator","IPepSmartFilterFieldOption":"./common/model/field","IPepSmartFilterField":"./common/model/field","PepSmartFilterBaseField":"./common/model/field","PepSmartFilterBooleanField":"./common/model/field","PepSmartFilterDateBaseField":"./common/model/field","PepSmartFilterDateField":"./common/model/field","PepSmartFilterDateTimeField":"./common/model/field","PepSmartFilterMultiSelectField":"./common/model/field","PepSmartFilterNumberBaseField":"./common/model/field","PepSmartFilterIntField":"./common/model/field","PepSmartFilterRealField":"./common/model/field","PepSmartFilterCurrencyField":"./common/model/field","PepSmartFilterPercentageField":"./common/model/field","IPepSmartFilterData":"./common/model/filter","IPepSmartFilterDataValue":"./common/model/filter","IPepSmartFilterOperator":"./common/model/operator","PepSmartFilterOperators":"./common/model/operator","IPepSmartFilterOperatorUnit":"./common/model/operator","PepSmartFilterOperatorUnits":"./common/model/operator","PepSmartFilterComponentType":"./common/model/type","PepSmartFilterType":"./common/model/type","PepSmartFilterOperatorType":"./common/model/type","PepSmartFilterOperatorUnitType":"./common/model/type"},"importAs":"@pepperi-addons/ngx-lib/smart-filters"}
+{"__symbolic":"module","version":4,"metadata":{"PepSmartFiltersModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":44,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":46,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":47,"character":8},{"__symbolic":"reference","module":"@angular/flex-layout","name":"FlexLayoutModule","line":48,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":50,"character":8},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":51,"character":8},{"__symbolic":"reference","module":"@angular/material/chips","name":"MatChipsModule","line":52,"character":8},{"__symbolic":"reference","module":"@angular/material/expansion","name":"MatExpansionModule","line":53,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":54,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":55,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":56,"character":8},{"__symbolic":"reference","module":"@angular/material/radio","name":"MatRadioModule","line":57,"character":8},{"__symbolic":"reference","module":"ngx-virtual-scroller","name":"VirtualScrollerModule","line":59,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":61,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/checkbox","name":"PepCheckboxModule","line":62,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/date","name":"PepDateModule","line":63,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/select","name":"PepSelectModule","line":64,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox","name":"PepTextboxModule","line":65,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchModule","line":66,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":67,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/button","name":"PepButtonModule","line":68,"character":8}],"exports":[{"__symbolic":"reference","name":"PepSmartFiltersComponent"},{"__symbolic":"reference","name":"FilterBuilderComponent"}],"declarations":[{"__symbolic":"reference","name":"PepSmartFiltersComponent"},{"__symbolic":"reference","name":"PepFilterActionsComponent"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"PepBooleanFilterComponent"},{"__symbolic":"reference","name":"PepDateFilterComponent"},{"__symbolic":"reference","name":"PepMultiSelectFilterComponent"},{"__symbolic":"reference","name":"PepNumberFilterComponent"},{"__symbolic":"reference","name":"FilterBuilderComponent"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":87,"character":41}]}]}},"PepSmartFiltersComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"pep-smart-filters","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":19,"character":21},"member":"OnPush"},"template":"<div class=\"smart-filters-container\" dir=\"{{ layoutService.isRtl() ? 'rtl' : 'ltr' }}\">\n    <div 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                    <!-- <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(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));display:flex;flex-flow:wrap;align-items:center;justify-content:space-between}.smart-filters-container .title .clear-filter{display:flex;flex-direction:row;align-items:center;justify-content:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem);padding:0 .75rem;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;-webkit-margin-end:.5rem;margin-inline-end:.5rem;-webkit-margin-end:var(--pep-spacing-sm,.5rem);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}"]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":5}}]}],"filters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5}}]}],"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"useAsWebComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":58,"character":5}}]}],"filtersChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":70,"character":5}}]}],"fieldToggleChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":75,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":81,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":82,"character":30}]}],"exportFunctionsOnHostElement":[{"__symbolic":"method"}],"setupFilters":[{"__symbolic":"method"}],"raiseFiltersChange":[{"__symbolic":"method"}],"toggleField":[{"__symbolic":"method"}],"clearFilters":[{"__symbolic":"method"}],"clearFilter":[{"__symbolic":"method"}],"onFiltersClear":[{"__symbolic":"method"}],"onFilterClear":[{"__symbolic":"method"}],"onFilterChange":[{"__symbolic":"method"}]}},"BaseFilterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":47,"character":1},"arguments":[{}]}],"members":{"field":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":5}}]}],"parentForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":5}}]}],"emitOnChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":5}}]}],"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"showActionButtons":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":83,"character":5}}]}],"filterClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":85,"character":5}}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":86,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":151,"character":34},{"__symbolic":"reference","module":"@angular/core","name":"Injector","line":152,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":153,"character":26},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":154,"character":25},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":155,"character":29},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepValidatorService","line":156,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":157,"character":28},{"__symbolic":"reference","name":"ɵd"}]}],"createActionsComponent":[{"__symbolic":"method"}],"setupForm":[{"__symbolic":"method"}],"setupOperators":[{"__symbolic":"method"}],"setupFilter":[{"__symbolic":"method"}],"updateParentForm":[{"__symbolic":"method"}],"getDestroyer":[{"__symbolic":"method"}],"updateValidity":[{"__symbolic":"method"}],"loadOperatorsOptions":[{"__symbolic":"method"}],"setFieldsStateAndValidators":[{"__symbolic":"method"}],"getDefaultOperatorUnit":[{"__symbolic":"method"}],"initFilter":[{"__symbolic":"method"}],"getDefaultOperator":[{"__symbolic":"method"}],"getFilterValue":[{"__symbolic":"method"}],"clearFilter":[{"__symbolic":"method"}],"applyFilter":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"PepFilterActionsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"pep-filter-actions","template":"<div [formGroup]=\"form\" class=\"filter-actions pep-spacing-element-negative\">\n    <button mat-button class=\"pep-spacing-element pep-button sm weak\" (click)=\"clear()\">\n        {{ 'ACTIONS.CLEAR' | translate }}\n    </button>\n    <button mat-button class=\"pep-spacing-element pep-button sm strong\" (click)=\"apply()\" [disabled]=\"form.invalid\">\n        {{ 'ACTIONS.APPLY' | translate }}\n    </button>\n</div>","styles":[".filter-actions{margin:1rem 0 calc(1rem / 2);margin:var(--pep-spacing-lg,1rem) 0 calc(var(--pep-spacing-lg, 1rem) / 2);display:flex;justify-content:flex-end}"]}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":5}}]}],"clearClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":11,"character":5}}]}],"applyClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":5}}]}],"clear":[{"__symbolic":"method"}],"apply":[{"__symbolic":"method"}]}},"PepBooleanFilterComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BaseFilterComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"pep-boolean-filter","template":"<ng-container *ngIf=\"inline\">\n    <pep-select [value]=\"firstControl?.value || ''\" xAlignment=\"left\" [options]=\"typeConvertorService.booleans\"\n        [renderTitle]=\"renderTitle\" [emptyOption]=\"true\" (valueChange)=\"onValueChanged($event)\">\n    </pep-select>\n\n</ng-container>\n\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <mat-radio-group class=\"radio-group\" [formControlName]=\"firstControlKey\" (change)=\"onRadioChanged()\">\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"true\">\n            {{ 'CHECKBOX.TRUE' | translate }}\n        </mat-radio-button>\n        <mat-radio-button class=\"pep-radio-button md pep-input no-default-background\" value=\"false\">\n            {{ 'CHECKBOX.FALSE' | translate }}\n        </mat-radio-button>\n    </mat-radio-group>\n</div>","styles":[".radio-group{display:flex;flex-direction:column}.radio-group .pep-radio-button.pep-input{height:2.25rem;display:flex}"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}],"getDefaultOperator":[{"__symbolic":"method"}],"getFilterValue":[{"__symbolic":"method"}],"onRadioChanged":[{"__symbolic":"method"}],"onValueChanged":[{"__symbolic":"method"}]}},"PepDateFilterComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BaseFilterComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"pep-date-filter","template":"<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [key]=\"'timeOperator'\" [value]=\"operator.id\" [label]=\"'SMART_FILTERS.CHOOSE_TIME' | translate\"\n            [renderTitle]=\"renderTitle\" [emptyOption]=\"false\" [options]=\"chooseTimeOptions\"\n            [fxFlex]=\"inline ? operatorWidth : null\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator === PepSmartFilterOperators.InTheLast ||\n                operator === PepSmartFilterOperators.NotInTheLast ||\n                operator === PepSmartFilterOperators.DueIn ||\n                operator === PepSmartFilterOperators.NotDueIn\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\" [type]=\"'int'\"\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-textbox>\n        <!-- Time unit -->\n        <pep-select [form]=\"form\" [key]=\"'timeUnit'\" [value]=\"operatorUnit?.id\"\n            [label]=\"'SMART_FILTERS.TIME_UNIT' | translate\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [emptyOption]=\"false\" [options]=\"chooseTimeUnitOptions\" (valueChange)=\"onTimeUnitChanged($event)\">\n        </pep-select>\n    </div>\n    <div pepRtlDirection *ngIf=\"operator === PepSmartFilterOperators.DateRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\" [fxFlex]=\"inline ? fieldsWidth : null\">\n        <!-- Start date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.START_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"firstControl?.value || ''\"\n            [maxDateValue]=\"secondControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n        <!-- End date -->\n        <pep-date [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.END_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" fxFlex=\"50%\"\n            [type]=\"field.type === 'date' ? 'date' : 'datetime'\" [value]=\"secondControl?.value || ''\"\n            [minDateValue]=\"firstControl?.value\" (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </div>\n    <ng-container *ngIf=\"operator === PepSmartFilterOperators.On\">\n        <!-- Choose a date -->\n        <pep-date [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.CHOOSE_DATE' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type === 'date' ? 'date' : 'datetime'\"\n            [fxFlex]=\"inline ? fieldsWidth : null\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onDateValueChanged()\">\n        </pep-date>\n    </ng-container>\n</div>","styles":[""]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}],"getDefaultOperator":[{"__symbolic":"method"}],"getDefaultOperatorUnit":[{"__symbolic":"method"}],"getFilterValue":[{"__symbolic":"method"}],"loadOperatorsOptions":[{"__symbolic":"method"}],"setFieldsStateAndValidators":[{"__symbolic":"method"}],"setControlsWidth":[{"__symbolic":"method"}],"onOperatorChanged":[{"__symbolic":"method"}],"onTimeUnitChanged":[{"__symbolic":"method"}],"onDateValueChanged":[{"__symbolic":"method"}]}},"PepMultiSelectFilterComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BaseFilterComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":29,"character":1},"arguments":[{"selector":"pep-multi-select-filter","template":"<ng-container *ngIf=\"inline\">\n    <pep-select [key]=\"'multi1'\" [label]=\"'Pepperi Multi Select'\" [type]=\"'multi'\" [value]=\"selected\"\n        [xAlignment]=\"'left'\" [renderTitle]=\"renderTitle\" [options]='inlineOptions'\n        (valueChange)=\"onMultiSelectChanged($event)\">\n    </pep-select>\n</ng-container>\n<div *ngIf=\"!inline\" [formGroup]=\"form\">\n    <pep-search *ngIf=\"options?.length > numberOptionsToShowSearch\" [searchControl]=\"searchControl\"\n        [triggerOn]=\"'keydown'\" [shrinkInSmallScreen]=\"false\"></pep-search>\n    <div pepRtlClass class=\"multi-select-options pep-border-top pep-border-bottom\"\n        [ngClass]=\"{'with-no-search': options?.length <= numberOptionsToShowSearch}\">\n        <div #optionsContainer class=\"flip-scroll\" pepRtlClass>\n            <virtual-scroller #scroll [items]=\"filteredOptions$ | async\" [parentScroll]=\"optionsContainer\">\n                <mat-checkbox *ngFor=\"let opt of scroll.viewPortItems\"\n                    class=\"pep-checkbox-container pep-input no-default-background md\" [title]=\"opt.value\"\n                    [checked]=\"opt.selected\" (change)=\"onOptionChange(opt, $event)\">\n                    <div class=\"title\">\n                        <span class=\"body-sm ellipsis\">{{ opt.value }}</span>\n                        <span *ngIf=\"opt.count\" class=\"color-dimmed body-xs ellipsis\">({{opt.count}})</span>\n                    </div>\n                </mat-checkbox>\n                <ng-container *ngIf=\"scroll.viewPortItems?.length === 0\">\n                    <span class=\"no-options body-sm ellipsis\" [title]=\"field.name\">\n                        {{ ( options.length > 0 ? \"SMART_FILTERS.NO_SEARCH_RESULTS\" : \"SMART_FILTERS.NO_OPTIONS\") |\n                        translate }}\n                    </span>\n                </ng-container>\n            </virtual-scroller>\n        </div>\n    </div>\n</div>","styles":[".multi-select-options{margin:.5rem calc(.25rem * -1) 0;margin:var(--pep-spacing-sm,.5rem) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options.with-no-search{margin:calc(.5rem * -1) calc(.25rem * -1) 0;margin:calc(var(--pep-spacing-sm, .5rem) * -1) calc(var(--pep-spacing-xs, .25rem) * -1) 0}.multi-select-options .no-options{display:flex;padding:.5rem .75rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-md,.75rem)}.multi-select-options .flip-scroll{padding:.5rem .25rem;padding:var(--pep-spacing-sm,.5rem) var(--pep-spacing-xs,.25rem);min-height:3.25rem;max-height:34.75rem;direction:rtl}.multi-select-options .flip-scroll.rtl,.multi-select-options .flip-scroll virtual-scroller{direction:ltr}.multi-select-options .flip-scroll.rtl virtual-scroller{direction:rtl}.multi-select-options .pep-checkbox-container{height:2.25rem;-webkit-padding-end:0;padding-inline-end:0}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout{width:100%;height:100%;grid-template-columns:auto 1fr}.multi-select-options .pep-checkbox-container ::ng-deep.mat-checkbox-layout .mat-checkbox-label{align-self:center}.multi-select-options .pep-checkbox-container .title{display:flex;justify-content:space-between;align-items:center;margin:0 .25rem;margin:0 var(--pep-spacing-xs,.25rem)}"]}]}],"members":{"optionsContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":44,"character":5},"arguments":["optionsContainer"]}]}],"virtualScroller":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":48,"character":5},"arguments":[{"__symbolic":"reference","module":"ngx-virtual-scroller","name":"VirtualScrollerComponent","line":48,"character":15}]}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"inlineControlInit":[{"__symbolic":"method"}],"noneInlineControlInit":[{"__symbolic":"method"}],"initOptionsSelectedValues":[{"__symbolic":"method"}],"calcOptionsHeight":[{"__symbolic":"method"}],"filterOptions":[{"__symbolic":"method"}],"getDefaultOperator":[{"__symbolic":"method"}],"getFilterValue":[{"__symbolic":"method"}],"initFilter":[{"__symbolic":"method"}],"onOptionChange":[{"__symbolic":"method"}],"onMultiSelectChanged":[{"__symbolic":"method"}]}},"PepNumberFilterComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BaseFilterComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"pep-number-filter","template":"<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <ng-container>\n        <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n            [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n            [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n    </ng-container>\n    <div *ngIf=\"operator !== PepSmartFilterOperators.NumberRange\" [fxFlex]=\"inline ? firstControlWidth : null\">\n        <!-- Amount -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.AMOUNT' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\"\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </div>\n    <div *ngIf=\"operator === PepSmartFilterOperators.NumberRange\" fxLayout=\"row\" fxLayout.xs=\"column\"\n        [fxLayoutGap]=\"inline ? '.5rem' : '1rem'\">\n        <!-- Min number -->\n        <pep-textbox [form]=\"form\" [key]=\"firstControlKey\" [label]=\"'SMART_FILTERS.MIN' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n            [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n            [maxValue]=\"secondControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n        <!-- Max number -->\n        <pep-textbox [form]=\"form\" [key]=\"secondControlKey\" [label]=\"'SMART_FILTERS.MAX' | translate\"\n            [renderError]=\"false\" [renderTitle]=\"renderTitle\" [type]=\"field.type\" fxFlex=\"50%\"\n            [formattedValue]=\"secondControl?.value || ''\" [value]=\"secondControl?.value || ''\"\n            [minValue]=\"firstControl?.value || ''\" (valueChange)=\"onValueChanged()\">\n        </pep-textbox>\n    </div>\n</div>","styles":[""]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}],"getDefaultOperator":[{"__symbolic":"method"}],"getFilterValue":[{"__symbolic":"method"}],"loadOperatorsOptions":[{"__symbolic":"method"}],"setFieldsStateAndValidators":[{"__symbolic":"method"}],"setControlsWidth":[{"__symbolic":"method"}],"onOperatorChanged":[{"__symbolic":"method"}],"onValueChanged":[{"__symbolic":"method"}]}},"FilterBuilderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"pep-filter-builder","template":"<!-- <div class=\"filter-builder-container\"> -->\n<ng-container #filterRoot></ng-container>\n<!-- </div> -->","styles":[""]}]}],"members":{"json":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":5}}]}],"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":5}}]}],"filters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":27,"character":5}}]}],"formValidationChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":29,"character":5}}]}],"filterRoot":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":5},"arguments":["filterRoot",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":32,"character":37},"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":42,"character":21},{"__symbolic":"reference","name":"ɵa"}]}],"setupForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"createSmartFilterField":{"__symbolic":"function"},"createSmartFilter":{"__symbolic":"function","parameters":["fieldId","operator","first","second","operatorUnit"],"value":{"fieldId":{"__symbolic":"reference","name":"fieldId"},"operator":{"__symbolic":"reference","name":"operator"},"operatorUnit":{"__symbolic":"reference","name":"operatorUnit"},"value":{"first":{"__symbolic":"reference","name":"first"},"second":{"__symbolic":"reference","name":"second"}}}},"IPepSmartFilterFieldOption":{"__symbolic":"interface"},"IPepSmartFilterField":{"__symbolic":"interface"},"PepSmartFilterBaseField":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterTextField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterBooleanField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterDateBaseField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"PepSmartFilterDateField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterDateBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterDateTimeField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterDateBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterMultiSelectField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterNumberBaseField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}]}},"PepSmartFilterIntField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterNumberBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterRealField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterNumberBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterCurrencyField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterNumberBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"PepSmartFilterPercentageField":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"PepSmartFilterNumberBaseField"},"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"}]}],"getType":[{"__symbolic":"method"}]}},"IPepSmartFilterData":{"__symbolic":"interface"},"IPepSmartFilterDataValue":{"__symbolic":"interface"},"IPepSmartFilterOperator":{"__symbolic":"class","members":{}},"PepSmartFilterOperators":{"Equals":{"id":"eq","name":"EQUAL","short":"=","componentType":["number","boolean"]},"NotEqual":{"id":"neq","name":"NOT_EQUAL","short":"<>","componentType":["number"]},"LessThan":{"id":"lt","name":"LESS_THEN","short":"<","componentType":["number"]},"GreaterThan":{"id":"gt","name":"GREATER_THEN","short":">","componentType":["number"]},"NumberRange":{"id":"numberRange","name":"NUMBER_RANGE","short":"Range","componentType":["number"]},"Contains":{"id":"contains","name":"CONTAINS","short":"Contains","componentType":["text"]},"InTheLast":{"id":"inTheLast","name":"IN_THE_LAST","short":"In the last","componentType":["date"]},"Today":{"id":"today","name":"TODAY","short":"Today","componentType":["date"]},"ThisWeek":{"id":"thisWeek","name":"THIS_WEEK","short":"This week","componentType":["date"]},"ThisMonth":{"id":"thisMonth","name":"THIS_MONTH","short":"This month","componentType":["date"]},"DateRange":{"id":"dateRange","name":"DATE_RANGE","short":"Range","componentType":["date"]},"DueIn":{"id":"dueIn","name":"DUE_IN","short":"Due in","componentType":["date"]},"On":{"id":"on","name":"ON","short":"On","componentType":["date"]},"NotInTheLast":{"id":"notInTheLast","name":"NOT_IN_THE_LAST","short":"Not in the last","componentType":["date"]},"NotDueIn":{"id":"notDueIn","name":"NOT_DUE_IN","short":"Not due in","componentType":["date"]},"IsEmpty":{"id":"isEmpty","name":"IS_EMPTY","short":"Is empty","componentType":["date"]},"IsNotEmpty":{"id":"isNotEmpty","name":"IS_NOT_EMPTY","short":"Is not empty","componentType":["date"]},"In":{"id":"in","name":"IN","short":"In","componentType":["multi-select"]}},"IPepSmartFilterOperatorUnit":{"__symbolic":"class","members":{}},"PepSmartFilterOperatorUnits":{"Days":{"id":"days","name":"DAYS","componentType":["date"]},"Weeks":{"id":"weeks","name":"WEEKS","componentType":["date"]},"Months":{"id":"months","name":"MONTHS","componentType":["date"]},"Years":{"id":"years","name":"YEARS","componentType":["date"]}},"PepSmartFilterComponentType":{"__symbolic":"interface"},"PepSmartFilterType":{"__symbolic":"interface"},"PepSmartFilterOperatorType":{"__symbolic":"interface"},"PepSmartFilterOperatorUnitType":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":26,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":39,"character":29},{"__symbolic":"reference","module":"@angular/core","name":"ComponentFactoryResolver","line":39,"character":61},{"__symbolic":"reference","name":"ɵb"}]}],"createFilterTree":[{"__symbolic":"method"}],"hasProperty":[{"__symbolic":"method"}],"flatten":[{"__symbolic":"method"}],"createSection":[{"__symbolic":"method"}],"createItem":[{"__symbolic":"method"}],"getFilter":[{"__symbolic":"method"}],"getSelectedField":[{"__symbolic":"method"}],"getFilterValues":[{"__symbolic":"method"}],"convertToSmartFilterFields":[{"__symbolic":"method"}],"createOutputJson":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"generateJson":[{"__symbolic":"method"}],"initProperties":[{"__symbolic":"method"}],"treeWalk":[{"__symbolic":"method"}],"createItem":[{"__symbolic":"method"}],"createSection":[{"__symbolic":"method"}],"getItemValues":[{"__symbolic":"method"}],"getFieldKeys":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵc":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"BaseFilterComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"pep-text-filter","template":"<div [formGroup]=\"form\" [fxLayout]=\"inline ? 'row' : 'column'\" [fxLayoutGap]=\"inline ? '.5rem' : '0rem'\">\n    <pep-select [fxFlex]=\"inline ? operatorWidth : null\" [key]=\"'typeOperator'\" [value]=\"operator.id\"\n        [label]=\"'SMART_FILTERS.TYPE' | translate\" [renderTitle]=\"renderTitle\" [emptyOption]=\"false\"\n        [options]=\"chooseTypeOptions\" (valueChange)=\"onOperatorChanged($event)\">\n    </pep-select>\n    <pep-textbox [fxFlex]=\"inline ? firstControlWidth : null\" [form]=\"form\" [key]=\"firstControlKey\"\n        [label]=\"'SMART_FILTERS.AMOUNT' | translate\" [renderError]=\"false\" [renderTitle]=\"renderTitle\"\n        [type]=\"field.type\" [formattedValue]=\"firstControl?.value || ''\" [value]=\"firstControl?.value || ''\"\n        (valueChange)=\"onValueChanged()\">\n    </pep-textbox>\n</div>","styles":[""]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}],"getDefaultOperator":[{"__symbolic":"method"}],"getFilterValue":[{"__symbolic":"method"}],"loadOperatorsOptions":[{"__symbolic":"method"}],"setFieldsStateAndValidators":[{"__symbolic":"method"}],"onOperatorChanged":[{"__symbolic":"method"}],"onValueChanged":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"initOperators":[{"__symbolic":"method"}],"initBooleans":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"pep-filter-builder-section","template":"<div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n    <div class=\"filter-section-container\" fxLayout=\"row\" fxLayoutAlign=\"flex-start start\" fxLayoutGap=\".5rem\">\n        <pep-select fxFlex=\"11\" [value]=\"f.operator.value\" xAlignment=\"left\" [options]=\"typeConvertorService.operators\"\n            [renderTitle]=\"false\" [emptyOption]=false (valueChange)=\"onOperatorChanged($event)\">\n        </pep-select>\n        <div fxFlex=\"89\" class=\"filter-section-wrapper\" fxLayout=\"column\" fxLayoutGap=\".5rem\">\n            <ng-container #sectionContainer></ng-container>\n            <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n                <pep-button value=\"Add Filter\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\" classNames=\"\"\n                    [disabled]=\"false\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                    (buttonClick)=\"onAddRuleClicked()\"></pep-button>\n                <ng-container *ngIf=\"depth < filterBuilderService.maxDepth-1\">\n                    <pep-button value=\"Add Filter Group\" styleType=\"weak\" styleStateType=\"system\" sizeType=\"sm\"\n                        classNames=\"\" [disabled]=\"false\" iconName=\"number_plus\" iconPosition=\"end\" [visible]=\"true\"\n                        (buttonClick)=\"onAddRuleSetClicked()\"></pep-button>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n    <pep-button *ngIf=\"depth > 0\" styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\"\n        [disabled]=\"false\" iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\"\n        (buttonClick)=\"onDeleteSectionClicked()\">\n    </pep-button>\n</div>","styles":[".filter-section-wrapper{width:100%}.filter-section-container{border-radius:.25rem;border-radius:var(--pep-border-radius-md,.25rem);padding:.5rem;width:100%}"]}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":5}}]}],"depth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"remove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":5}}]}],"operatorChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":18,"character":5}}]}],"sectionContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":21,"character":5},"arguments":["sectionContainer",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ViewContainerRef","line":21,"character":43},"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵd"}]}],"ngOnInit":[{"__symbolic":"method"}],"onOperatorChanged":[{"__symbolic":"method"}],"onAddRuleClicked":[{"__symbolic":"method"}],"onAddRuleSetClicked":[{"__symbolic":"method"}],"onDeleteSectionClicked":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"pep-filter-builder-item","template":"<div class=\"filter-item-container\" fxLayout=\"column\" fxLayoutGap=\".5rem\">\n    <div fxLayout=\"row\" fxLayoutGap=\".5rem\">\n        <pep-select fxFlex=\"25%\" [value]=\"_selectedField?.id\" xAlignment=\"left\" [options]=\"_options\"\n            [renderTitle]=\"false\" (valueChange)=\"onFieldChanged($event)\"></pep-select>\n        <ng-container *ngIf=\"_selectedField?.componentType\">\n            <ng-container [ngSwitch]=\"_selectedField.componentType\">\n                <ng-container *ngSwitchCase=\"'text'\">\n                    <pep-text-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"_form\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-text-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'boolean'\">\n                    <pep-boolean-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"_form\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-boolean-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'date'\">\n                    <pep-date-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"_form\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-date-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'multi-select'\">\n                    <pep-multi-select-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"_form\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-multi-select-filter>\n                </ng-container>\n                <ng-container *ngSwitchCase=\"'number'\">\n                    <pep-number-filter fxFlex=\"auto\" [showActionButtons]=\"false\" [field]=\"_selectedField\"\n                        [filter]=\"_filter\" [parentForm]=\"_form\" [emitOnChange]=\"true\" [inline]=\"true\"\n                        [renderTitle]=\"false\" (filterChange)=\"onFilterChanged()\">\n                    </pep-number-filter>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n        <!-- <ng-container *ngIf=\"(_parentForm | filterItemCounter) > 1\"> -->\n        <pep-button styleType=\"weak\" styleStateType=\"system_bin\" sizeType=\"md\" classNames=\"\" [disabled]=\"false\"\n            iconName=\"system_bin\" iconPosition=\"end\" [visible]=\"true\" (buttonClick)=\"onDeleteItemClicked()\">\n        </pep-button>\n        <!-- </ng-container>         -->\n    </div>\n</div>","styles":[""]}]}],"members":{"formKey":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"fields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":5}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"parentForm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"filterChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":52,"character":5}}]}],"remove":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":54,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":65,"character":29}]}],"ngOnInit":[{"__symbolic":"method"}],"setupForm":[{"__symbolic":"method"}],"addToParentForm":[{"__symbolic":"method"}],"onFieldChanged":[{"__symbolic":"method"}],"onFilterChanged":[{"__symbolic":"method"}],"onDeleteItemClicked":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"filterItemCounter"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"PepSmartFiltersModule":"./smart-filters.module","PepSmartFiltersComponent":"./smart-filters.component","BaseFilterComponent":"./common/model/base-filter-component","PepFilterActionsComponent":"./common/filter-actions.component","PepBooleanFilterComponent":"./boolean-filter/boolean-filter.component","PepDateFilterComponent":"./date-filter/date-filter.component","PepMultiSelectFilterComponent":"./multi-select-filter/multi-select-filter.component","PepNumberFilterComponent":"./number-filter/number-filter.component","FilterBuilderComponent":"./filter-builder/filter-builder.component","createSmartFilterField":"./common/model/creator","createSmartFilter":"./common/model/creator","IPepSmartFilterFieldOption":"./common/model/field","IPepSmartFilterField":"./common/model/field","PepSmartFilterBaseField":"./common/model/field","PepSmartFilterTextField":"./common/model/field","PepSmartFilterBooleanField":"./common/model/field","PepSmartFilterDateBaseField":"./common/model/field","PepSmartFilterDateField":"./common/model/field","PepSmartFilterDateTimeField":"./common/model/field","PepSmartFilterMultiSelectField":"./common/model/field","PepSmartFilterNumberBaseField":"./common/model/field","PepSmartFilterIntField":"./common/model/field","PepSmartFilterRealField":"./common/model/field","PepSmartFilterCurrencyField":"./common/model/field","PepSmartFilterPercentageField":"./common/model/field","IPepSmartFilterData":"./common/model/filter","IPepSmartFilterDataValue":"./common/model/filter","IPepSmartFilterOperator":"./common/model/operator","PepSmartFilterOperators":"./common/model/operator","IPepSmartFilterOperatorUnit":"./common/model/operator","PepSmartFilterOperatorUnits":"./common/model/operator","PepSmartFilterComponentType":"./common/model/type","PepSmartFilterType":"./common/model/type","PepSmartFilterOperatorType":"./common/model/type","PepSmartFilterOperatorUnitType":"./common/model/type","ɵa":"./filter-builder/filter-builder.service","ɵb":"./filter-builder/common/services/output-filter.service","ɵc":"./text-filter/text-filter.component","ɵd":"./filter-builder/common/services/type-convertor.service","ɵe":"./filter-builder/filter-builder-section/filter-builder-section.component","ɵf":"./filter-builder/filter-builder-item/filter-builder-item.component","ɵg":"./filter-builder/common/pipes/filter-item-counter.pipe"},"importAs":"@pepperi-addons/ngx-lib/smart-filters"}

package/smart-filters/public-api.d.ts

@@ -6,6 +6,7 @@ export * from './boolean-filter/boolean-filter.component';
 export * from './date-filter/date-filter.component';
 export * from './multi-select-filter/multi-select-filter.component';
 export * from './number-filter/number-filter.component';
+export * from './filter-builder/filter-builder.component';
 export * from './common/model/creator';
 export * from './common/model/field';
 export * from './common/model/filter';

package/smart-filters/text-filter/text-filter.component.d.ts

@@ -0,0 +1,17 @@
+import { OnInit } from '@angular/core';
+import { BaseFilterComponent } from '../common/model/base-filter-component';
+import { IPepSmartFilterOperator } from '../common/model/operator';
+import { IPepOption } from '@pepperi-addons/ngx-lib';
+import { IPepSmartFilterDataValue } from '../common/model/filter';
+export declare class PepTextFilterComponent extends BaseFilterComponent implements OnInit {
+    chooseTypeOptions: Array<IPepOption>;
+    operatorWidth: string;
+    firstControlWidth: string;
+    ngOnInit(): void;
+    getDefaultOperator(): IPepSmartFilterOperator;
+    getFilterValue(): IPepSmartFilterDataValue;
+    loadOperatorsOptions(): void;
+    setFieldsStateAndValidators(): void;
+    onOperatorChanged(value: string): void;
+    onValueChanged(): void;
+}

package/src/assets/i18n/en.ngx-lib.json

@@ -75,7 +75,8 @@
             "GREATER_THEN": "Greater than",
             "GREATER_THEN_OR_EQUAL": "Greater than or equal to",
             "NUMBER_RANGE": "Between",
-            "In": "In"
+            "CONTAINS": "Contains",
+            "IN": "In"
         },
         "OPERATOR_UNITS": {
             "DAYS": "Days",

package/src/core/style/components/general.scss

@@ -851,8 +851,10 @@ $sorting-width: 1rem;
 //  Custom field (added for stand alone field).
 // ---------------------------------------------
 .pepperi-field, .pep-field {
-    min-height: $form-row-height;
-    margin-bottom: $form-spacing;
+    &:not(.pep-field-no-spacing) {
+        min-height: $form-row-height;
+        margin-bottom: $form-spacing;
+    }
 }
 
 @mixin pep-general-theme($pepperi-theme) {

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

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepTextareaModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":24,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":27,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":34,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":36,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":38,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox-icon","name":"PepTextboxIconModule","line":39,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":40,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTextareaComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTextareaComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":46,"character":41}]}]}},"PepTextareaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"pep-textarea","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"isFormView\" [label]=\"label\" [mandatory]=\"mandatory\" [disabled]=\"disabled\"\n                [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\" [xAlignment]=\"xAlignment\"\n                [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table' }\">\n                <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n                    title=\"{{ value }}\" [value]=\"value\"\n                    maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [formControlName]=\"key\" [style.height]=\"fieldHeight\">\n                </textarea>\n                <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                </div>\n                <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n                </pep-textbox-icon> -->\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-textarea-card-container card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n                [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n                <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                    [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                    class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n                    <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n                        [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                        title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n                    <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                    <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                </mat-form-field>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n    <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\">\n        <ng-container pep-dialog-content>\n            <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea>\n        </ng-container>\n        <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n            <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #editableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button class=\"pep-spacing-element pep-button md strong\"\n                    (click)=\"closeDialog(dialogTextarea.value)\">\n                    {{ 'ACTIONS.SAVE' | translate }}\n                </button>\n            </ng-template>\n            <ng-template #notEditableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-template>\n        </div>\n    </pep-dialog>\n</ng-template>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"maxFieldCharacters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":81,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":90,"character":5}}]}],"textAreaDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":94,"character":5},"arguments":["textAreaDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":94,"character":49}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":104,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":105,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":106,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":107,"character":25}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}],"closeDialog":[{"__symbolic":"method"}]}}},"origins":{"PepTextareaModule":"./textarea.module","PepTextareaComponent":"./textarea.component"},"importAs":"@pepperi-addons/ngx-lib/textarea"}
+{"__symbolic":"module","version":4,"metadata":{"PepTextareaModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":24,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":26,"character":8},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":27,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":29,"character":8},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":30,"character":8},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":31,"character":8},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":32,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":33,"character":8},{"__symbolic":"reference","module":"@angular/material/dialog","name":"MatDialogModule","line":34,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":36,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":37,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/field-title","name":"PepFieldTitleModule","line":38,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/textbox-icon","name":"PepTextboxIconModule","line":39,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogModule","line":40,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTextareaComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTextareaComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":46,"character":41}]}]}},"PepTextareaComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":25,"character":1},"arguments":[{"selector":"pep-textarea","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":29,"character":21},"member":"OnPush"},"template":"<ng-container [formGroup]=\"form\">\n    <ng-template #pepTemplate let-isFormView=\"isFormView\">\n        <div class=\"pep-textarea-container\" [ngClass]=\"{ 'stand-alone': standAlone,\n            'right-alignment': xAlignment == 'right', 'one-row': rowSpan === 1,\n            'pep-textarea-card-container': layoutType === 'card'}\">\n            <pep-field-title *ngIf=\"renderTitle && isFormView\" [label]=\"label\" [mandatory]=\"mandatory\"\n                [disabled]=\"disabled\" [maxFieldCharacters]=\"disabled || readonly ? 0 : maxFieldCharacters\"\n                [xAlignment]=\"xAlignment\" [showTitle]=\"showTitle\" [inputLength]=\"input.value?.length\">\n            </pep-field-title>\n            <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                [ngClass]=\"{ 'pep-table-textarea': layoutType === 'table' }\">\n                <textarea #input [hidden]=\"readonly\" [id]=\"key\" class=\"body-sm\" matInput (blur)=\"onBlur($event)\"\n                    title=\"{{ value }}\" [value]=\"value\"\n                    maxlength=\"{{ maxFieldCharacters > 0 ? maxFieldCharacters : 99999 }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [formControlName]=\"key\" [style.height]=\"fieldHeight\">\n                </textarea>\n                <div *ngIf=\"readonly\" class=\"body-sm disable-text-div\" title=\"{{ value }}\"\n                    [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'right' ? 'right' : 'left' }\"\n                    [innerHtml]=\"value | pepSafeHtml\" [style.height]=\"fieldHeight\">\n                </div>\n                <!-- <pep-textbox-icon *ngIf=\"xAlignment == 'right'\" matPrefix [value]=\"value\" [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\" (iconClick)=\"openDialog()\">\n                </pep-textbox-icon> -->\n                <pep-textbox-icon matSuffix [value]=\"value\" [label]=\"label\" [type]=\"controlType\"\n                    [disabled]=\"disabled || readonly\"\n                    [ngClass]=\"{ 'card-one-row-icon': layoutType === 'card' && rowSpan === 1 }\"\n                    (iconClick)=\"openDialog()\">\n                </pep-textbox-icon>\n                <mat-error>\n                    <span class=\"body-xs\"\n                        [title]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"\n                        [innerText]=\"mandatory && value.length == 0 ? ('MESSAGES.ERROR_IS_REQUIRED' | translate: { field: label }) : ('MESSAGES.ERROR_IS_NOT_VALID' | translate: { field: label })\"></span>\n                </mat-error>\n            </mat-form-field>\n        </div>\n    </ng-template>\n\n    <ng-container *ngIf=\"layoutType === 'form'\">\n        <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: true }\"></ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'card'\">\n        <ng-container *ngIf=\"isInEditMode; then editBlock; else readOnlyBlock\"></ng-container>\n        <ng-template #editBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #readOnlyBlock>\n            <div class=\"pep-textarea-card-container card-flex-container\"\n                [ngClass]=\"{'one-row': rowSpan === 1, 'pep-button weak': isActive && !disabled}\"\n                [ngStyle]=\"{ color: textColor, '-webkit-line-clamp': rowSpan }\" [class]=\"'text-align-' + xAlignment\"\n                (click)=\"!disabled ? cardTemplateClicked($event) : ''\" [style.height]=\"fieldHeight\">\n                <span *ngIf=\" showTitle && label !=''\" class=\" body-xs title no-shrink\" title=\"{{ label }}\">{{ label\n                    }}&nbsp;</span>\n                <span [id]=\"key\" title=\"{{ value }}\" class=\"body-sm value wrap\">{{ value }}</span>\n                <button *ngIf=\"isActive && !disabled\" class=\"pep-button weak card-edit-button self-start\"\n                    [ngClass]=\"{'self-end' : value && value !== ''}\" mat-button>\n                    <mat-icon>\n                        <pep-icon name=\"system_edit\">\n                        </pep-icon>\n                    </mat-icon>\n                </button>\n            </div>\n        </ng-template>\n    </ng-container>\n\n    <ng-container *ngIf=\"layoutType === 'table'\">\n        <ng-container *ngIf=\"isActive && !disabled; then selectedBlock; else notSelectedBlock\"></ng-container>\n        <ng-template #selectedBlock>\n            <ng-container *ngTemplateOutlet=\"pepTemplate; context: { isFormView: false }\"></ng-container>\n        </ng-template>\n        <ng-template #notSelectedBlock>\n            <ng-container *ngIf=\"value?.length > 0; then notEmptyBlock; else emptyBlock\"></ng-container>\n            <ng-template #notEmptyBlock>\n                <mat-form-field appearance=\"outline\" dir=\"{{ xAlignment == 'right' ? 'rtl' : 'ltr' }}\"\n                    class=\"pep-report-textarea\" [ngClass]=\"{ readonly: disabled }\">\n                    <input matInput [id]=\"key\" class=\"body-sm pep-report-input\" [ngClass]=\"{ readonly: disabled}\"\n                        [ngStyle]=\"{ color: textColor, 'text-align': xAlignment == 'center' ? 'center' : xAlignment == 'right' ? 'right' : 'left' }\"\n                        title=\"{{ value }}\" [formControlName]=\"key\" type=\"text\" [value]=\"value\" [disabled]=\"true\" />\n                    <pep-textbox-icon *ngIf=\"disabled && xAlignment == 'right'\" matPrefix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                    <pep-textbox-icon *ngIf=\"disabled && (xAlignment == 'left')\" matSuffix [value]=\"value\"\n                        [label]=\"label\" [type]=\"controlType\" [disabled]=\"disabled\" (iconClick)=\"openDialog()\">\n                    </pep-textbox-icon>\n                </mat-form-field>\n            </ng-template>\n            <ng-template #emptyBlock>\n                <span>&nbsp;</span>\n            </ng-template>\n        </ng-template>\n    </ng-container>\n</ng-container>\n\n<ng-template #textAreaDialogTemplate>\n    <pep-dialog class=\"dialog-textarea-container\" [title]=\"label\">\n        <ng-container pep-dialog-content>\n            <textarea #dialogTextarea [readonly]=\"disabled || readonly\">{{ value }}</textarea>\n        </ng-container>\n        <div pep-dialog-actions class=\"pep-spacing-element-negative\">\n            <ng-container *ngIf=\"disabled || readonly; then notEditableBlock; else editableBlock\">\n            </ng-container>\n            <ng-template #editableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CANCEL' | translate }}\n                </button>\n                <button mat-button class=\"pep-spacing-element pep-button md strong\"\n                    (click)=\"closeDialog(dialogTextarea.value)\">\n                    {{ 'ACTIONS.SAVE' | translate }}\n                </button>\n            </ng-template>\n            <ng-template #notEditableBlock>\n                <button mat-button (click)=\"closeDialog()\" class=\"pep-spacing-element pep-button md weak\">\n                    {{ 'ACTIONS.CLOSE' | translate }}\n                </button>\n            </ng-template>\n        </div>\n    </pep-dialog>\n</ng-template>","styles":[":host{height:inherit;display:grid}:host>*{align-self:center}.disable-text-div{display:inline-block;vertical-align:middle;margin:0;padding:.5rem 1.5rem .5rem 0;overflow-y:hidden}.right-alignment .disable-text-div{padding:.5rem 0 .5rem 1.5rem}.dialog-textarea-container textarea{border:none;resize:none;width:25rem;height:13rem}.dialog-textarea-container textarea:focus{outline:none}"]}]}],"members":{"key":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5}}]}],"label":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5}}]}],"mandatory":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":5}}]}],"maxFieldCharacters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":5}}]}],"textColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5}}]}],"xAlignment":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":5}}]}],"rowSpan":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"visible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":5}}]}],"isActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":5}}]}],"showTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":5}}]}],"renderTitle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":5}}]}],"layoutType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"valueChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":91,"character":5}}]}],"textAreaDialogTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":95,"character":5},"arguments":["textAreaDialogTemplate",{"read":{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":95,"character":49}}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/dialog","name":"PepDialogService","line":105,"character":31},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":106,"character":38},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":107,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":108,"character":25}]}],"setFieldHeight":[{"__symbolic":"method"}],"setDefaultForm":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"changeValue":[{"__symbolic":"method"}],"cardTemplateClicked":[{"__symbolic":"method"}],"openDialog":[{"__symbolic":"method"}],"closeDialog":[{"__symbolic":"method"}]}}},"origins":{"PepTextareaModule":"./textarea.module","PepTextareaComponent":"./textarea.component"},"importAs":"@pepperi-addons/ngx-lib/textarea"}

package/textarea/textarea.component.d.ts

@@ -27,6 +27,7 @@ export declare class PepTextareaComponent implements OnChanges, OnInit, OnDestro
     form: FormGroup;
     isActive: boolean;
     showTitle: boolean;
+    renderTitle: boolean;
     private _layoutType;
     set layoutType(value: PepLayoutType);
     get layoutType(): PepLayoutType;

package/theming.scss

@@ -88,6 +88,8 @@ $pep-typography: mat.define-typography-config(
 @import './list/list-views.component.theme';
 @import './list/list.component.theme';
 
+@import './smart-filters/filter-builder/filter-builder-section/filter-builder-section.component.theme';
+
 // Use this import in a real project instead
 // @import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
 @import './src/core/style/themes/default-theme.scss';
@@ -182,6 +184,8 @@ $material-theme-for-pep: $material-default-theme;
         @include pep-list-total-component-theme($pepperi-theme);
         @include pep-list-views-component-theme($pepperi-theme);
         @include pep-list-component-theme($pepperi-theme);
+        
+        @include pep-filter-builder-section-theme($pepperi-theme);
     }
 }
 

package/top-bar/pepperi-addons-ngx-lib-top-bar.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"PepTopBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":25,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":27,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/menu","name":"PepMenuModule","line":28,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":29,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchModule","line":30,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTopBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTopBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":36,"character":41}]}]}},"PepTopBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"pep-top-bar","template":"<div pepRtlDirection [hidden]=\"isHidden\" class=\"pep-top-bar-container\" [ngClass]=\"{ inline: inline }\">\n    <div class=\"header-content\">\n        <div class=\"main-layout\">\n            <div class=\"content pep-border-bottom\">\n                <div class=\"left-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"listActionsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listChooserTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"leftContentTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listTotalTemplate\"></ng-container>\n                </div>\n                <div class=\"pep-spacing-element\"></div>\n                <div class=\"right-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"searchTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"sortingTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"viewsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"rightContentTemplate\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <!-- hasFooterContent === null is for the first load to see if there is data in the (footer-start-content || footer-end-content). -->\n    <div *ngIf=\"hasFooterContent === null || (hasFooterContent && footerState === 'visible')\" class=\"footer\"\n        [style.height.rem]=\"customizationService.footerHeight\">\n        <div class=\"content pep-border-top\">\n            <div #footerStartContent class=\"left-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-start-content]\"></ng-content>\n            </div>\n            <div #footerEndContent class=\"right-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-end-content]\"></ng-content>\n            </div>\n        </div>\n        <!-- <ng-container *ngIf=\"showFooter && screenSize >= PepScreenSizeType.MD; then footerBlock; else noFooterBlock\">\n        </ng-container>\n        <ng-template #footerBlock>\n            {{ customizationService.showFooter() }}\n        </ng-template>\n        <ng-template #noFooterBlock>\n            {{ customizationService.hideFooter() }}\n        </ng-template> -->\n    </div>\n\n</div>\n\n<!-- Left side templates -->\n<ng-template #listActionsTemplate>\n    <div class=\"list-actions-wrapper\">\n        <ng-content *ngIf=\"!searchIsOpenAndSmallDevice\" select=\"pep-list-actions\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #titleTemplate>\n    <div *ngIf=\"title?.length > 0\" class=\"pep-spacing-element title {{ inline ? 'title-md' : 'title-lg' }}\">\n        <span [title]=\"title\">{{ title }}</span>\n    </div>\n</ng-template>\n\n<ng-template #listChooserTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listChooserComp }\">\n        <ng-content select=\"pep-list-chooser\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #leftContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-start-content]\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #listTotalTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listTotalComp }\">\n        <ng-content select=\"pep-list-total\"></ng-content>\n    </div>\n</ng-template>\n\n<!-- Right side templates -->\n<ng-template #searchTemplate>\n    <div [ngClass]=\"{ 'pep-spacing-element': searchComp }\">\n        <ng-content select=\"pep-search\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #sortingTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listSortingComp }\">\n        <ng-content select=\"pep-list-sorting\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #viewsTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listViewsComp }\" class=\"flex-wrapper\">\n        <ng-content select=\"pep-list-views\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #rightContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-end-content]\"></ng-content>\n    </div>\n</ng-template>","styles":[".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}"]}]}],"members":{"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"footerStateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"footerStartContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":5},"arguments":["footerStartContent"]}]}],"footerEndContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":51,"character":5},"arguments":["footerEndContent"]}]}],"searchComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":53,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchComponent","line":53,"character":18}]}]}],"listActionsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":54,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListActionsComponent","line":54,"character":18}]}]}],"listChooserComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":56,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListChooserComponent","line":56,"character":18}]}]}],"listTotalComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":58,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListTotalComponent","line":58,"character":18}]}]}],"listSortingComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":59,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListSortingComponent","line":59,"character":18}]}]}],"listViewsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":61,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListViewsComponent","line":61,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":73,"character":37},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":74,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":75,"character":23}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSearchIsOpenAndSmallDevice":[{"__symbolic":"method"}],"setFooterState":[{"__symbolic":"method"}]}},"PepFooterStateType":{"__symbolic":"interface"},"IPepFooterStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepTopBarModule":"./top-bar.module","PepTopBarComponent":"./top-bar.component","PepFooterStateType":"./top-bar.model","IPepFooterStateChangeEvent":"./top-bar.model"},"importAs":"@pepperi-addons/ngx-lib/top-bar"}
+{"__symbolic":"module","version":4,"metadata":{"PepTopBarModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":19,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":21,"character":8},{"__symbolic":"reference","module":"@angular/material/core","name":"MatCommonModule","line":23,"character":8},{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuModule","line":24,"character":8},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":25,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepNgxLibModule","line":27,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/menu","name":"PepMenuModule","line":28,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconModule","line":29,"character":8},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchModule","line":30,"character":8}],"exports":[{"__symbolic":"reference","name":"PepTopBarComponent"}],"declarations":[{"__symbolic":"reference","name":"PepTopBarComponent"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/icon","name":"PepIconRegistry","line":36,"character":41}]}]}},"PepTopBarComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"pep-top-bar","template":"<div pepRtlDirection [hidden]=\"isHidden\" class=\"pep-top-bar-container\" [ngClass]=\"{ inline: inline }\">\n    <div class=\"header-content\">\n        <div class=\"main-layout\">\n            <div class=\"content pep-border-bottom\">\n                <div class=\"left-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"listActionsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listChooserTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"leftContentTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"listTotalTemplate\"></ng-container>\n                </div>\n                <div class=\"pep-spacing-element\"></div>\n                <div class=\"right-container pep-spacing-element-negative\">\n                    <ng-container *ngTemplateOutlet=\"searchTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"sortingTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"viewsTemplate\"></ng-container>\n                    <ng-container *ngTemplateOutlet=\"rightContentTemplate\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <!-- hasFooterContent === null is for the first load to see if there is data in the (footer-start-content || footer-end-content). -->\n    <div *ngIf=\"hasFooterContent === null || (hasFooterContent && footerState === 'visible')\" class=\"footer\"\n        [style.height.rem]=\"customizationService.footerHeight\">\n        <div class=\"content pep-border-top\">\n            <div #footerStartContent class=\"left-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-start-content]\"></ng-content>\n            </div>\n            <div #footerEndContent class=\"right-container pep-spacing-element-negative flex-wrapper\">\n                <ng-content select=\"[footer-end-content]\"></ng-content>\n            </div>\n        </div>\n        <!-- <ng-container *ngIf=\"showFooter && screenSize >= PepScreenSizeType.MD; then footerBlock; else noFooterBlock\">\n        </ng-container>\n        <ng-template #footerBlock>\n            {{ customizationService.showFooter() }}\n        </ng-template>\n        <ng-template #noFooterBlock>\n            {{ customizationService.hideFooter() }}\n        </ng-template> -->\n    </div>\n\n</div>\n\n<!-- Left side templates -->\n<ng-template #listActionsTemplate>\n    <div class=\"list-actions-wrapper\">\n        <ng-content *ngIf=\"!searchIsOpenAndSmallDevice\" select=\"pep-list-actions\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #titleTemplate>\n    <div *ngIf=\"title?.length > 0\" class=\"pep-spacing-element title {{ inline ? 'title-md' : 'title-lg' }}\">\n        <span [title]=\"title\">{{ title }}</span>\n    </div>\n</ng-template>\n\n<ng-template #listChooserTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listChooserComp }\">\n        <ng-content select=\"pep-list-chooser\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #leftContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-start-content]\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #listTotalTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listTotalComp }\">\n        <ng-content select=\"pep-list-total\"></ng-content>\n    </div>\n</ng-template>\n\n<!-- Right side templates -->\n<ng-template #searchTemplate>\n    <div [ngClass]=\"{ 'pep-spacing-element': searchComp }\">\n        <ng-content select=\"pep-search\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #sortingTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listSortingComp }\">\n        <ng-content select=\"pep-list-sorting\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #viewsTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" [ngClass]=\"{ 'pep-spacing-element': listViewsComp }\" class=\"flex-wrapper\">\n        <ng-content select=\"pep-list-views\"></ng-content>\n    </div>\n</ng-template>\n\n<ng-template #rightContentTemplate>\n    <div *ngIf=\"!searchIsOpenAndSmallDevice\" class=\"flex-wrapper\">\n        <ng-content select=\"[header-end-content]\"></ng-content>\n    </div>\n</ng-template>","styles":[".pep-top-bar-container{display:grid;height:calc(1.5rem + .5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-top, 1.5rem) + var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));z-index:101}.pep-top-bar-container .title{display:inline-flex!important;align-items:center;justify-content:center}.pep-top-bar-container .header-content{height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));margin-top:1.5rem;margin-top:var(--pep-top-bar-spacing-top,1.5rem)}.pep-top-bar-container .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container .header-content .main-layout .content{display:flex;justify-content:space-between;height:inherit}.pep-top-bar-container .header-content .main-layout .content .left-container,.pep-top-bar-container .header-content .main-layout .content .right-container{height:inherit}.pep-top-bar-container .footer{position:fixed;bottom:0;left:0;right:0;height:4.5rem;height:var(--pep-footer-bar-height,4.5rem)}.pep-top-bar-container .footer .content{display:flex;justify-content:space-between;margin-inline:calc(1rem * 2);margin-inline:calc(var(--pep-spacing-lg, 1rem) * 2);padding-top:.75rem;padding-top:var(--pep-footer-bar-spacing-top,.75rem)}@media (max-width:599px){.pep-top-bar-container .footer .content{margin-inline:1rem;margin-inline:var(--pep-spacing-lg,1rem)}}.pep-top-bar-container .left-container{display:flex;align-items:center}.pep-top-bar-container .right-container{display:flex;justify-content:flex-end;align-items:center}.pep-top-bar-container .flex-wrapper ::ng-deep>*{display:flex}.pep-top-bar-container .list-actions-wrapper ::ng-deep.pep-button{margin-right:.25rem;margin-right:var(--pep-spacing-xs,.25rem);margin-left:.25rem;margin-left:var(--pep-spacing-xs,.25rem)}.pep-top-bar-container:not(.inline) .pep-button,.pep-top-bar-container:not(.inline) .pepperi-button,.pep-top-bar-container:not(.inline) ::ng-deep .pep-button,.pep-top-bar-container:not(.inline) ::ng-deep .pepperi-button{height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);line-height:2.5rem;line-height:var(--pep-top-bar-field-height,2.5rem)}.pep-top-bar-container.inline{position:inherit;height:calc(.5rem + 2.5rem);height:calc(var(--pep-top-bar-spacing-bottom, .5rem) + var(--pep-top-bar-field-height, 2.5rem));width:100%}.pep-top-bar-container.inline .header-content{margin-top:0;height:2.5rem;height:var(--pep-top-bar-field-height,2.5rem);padding:0;position:inherit;width:inherit}.pep-top-bar-container.inline .header-content .main-layout{width:inherit;height:inherit;padding:0}.pep-top-bar-container.inline .header-content .main-layout .content{height:inherit;margin:0}"]}]}],"members":{"inline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":5}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"footerStateChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":5}}]}],"footerStartContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":50,"character":5},"arguments":["footerStartContent"]}]}],"footerEndContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":51,"character":5},"arguments":["footerEndContent"]}]}],"searchComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":53,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/search","name":"PepSearchComponent","line":53,"character":18}]}]}],"listActionsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":54,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListActionsComponent","line":54,"character":18}]}]}],"listChooserComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":56,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListChooserComponent","line":56,"character":18}]}]}],"listTotalComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":58,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListTotalComponent","line":58,"character":18}]}]}],"listSortingComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":59,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListSortingComponent","line":59,"character":18}]}]}],"listViewsComp":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":61,"character":5},"arguments":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib/list","name":"PepListViewsComponent","line":61,"character":18}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepCustomizationService","line":73,"character":37},{"__symbolic":"reference","module":"@pepperi-addons/ngx-lib","name":"PepLayoutService","line":74,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":75,"character":23}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setSearchIsOpenAndSmallDevice":[{"__symbolic":"method"}],"setFooterState":[{"__symbolic":"method"}]}},"PepFooterStateType":{"__symbolic":"interface"},"IPepFooterStateChangeEvent":{"__symbolic":"interface"}},"origins":{"PepTopBarModule":"./top-bar.module","PepTopBarComponent":"./top-bar.component","PepFooterStateType":"./top-bar.model","IPepFooterStateChangeEvent":"./top-bar.model"},"importAs":"@pepperi-addons/ngx-lib/top-bar"}