@tilde-nlp/ngx-common 2.0.18 → 2.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1272,10 +1272,10 @@ class FilterBarComponent {
1272
1272
  }
1273
1273
  }
1274
1274
  FilterBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
1275
- FilterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterBarComponent, selector: "tld-filter-bar", inputs: { settings: "settings", filterRowVisible: "filterRowVisible" }, outputs: { filterBarChange: "filterBarChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterWrapper", first: true, predicate: ["filterWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" class=\"filter-bar-search-input\">\r\n <span matPrefix class=\"material-icons-outlined\">\r\n {{prefixIcon}}\r\n </span>\r\n <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n {{suffixIcon}}\r\n </span>\r\n <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n [formControlName]=\"inputFormControlName\">\r\n </mat-form-field>\r\n <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n <mat-form-field [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n <mat-option *ngFor=\"let value of filter.values\" [value]=\"value\">\r\n {{value.key | translate : {default: value.value | titlecase } }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_forward_ios\r\n </span>\r\n </button>\r\n</div>\r\n<mat-chip-list>\r\n <div *ngFor=\"let filter of settings?.filters\">\r\n <mat-chip *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n <button matChipRemove>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n <span class=\"chip-value semi-bold\"> {{filterValue.key | translate : {default: filterValue.value | titlecase }\r\n }}</span>\r\n </mat-chip>\r\n </div>\r\n</mat-chip-list>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:.5rem 1.25rem 1rem;max-width:100%;align-items:baseline;margin-bottom:.5rem}.filter-row ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.filter-row ::ng-deep .mat-form-field-underline{bottom:0!important}.search-input{background-color:unset;border:none}mat-form-field+mat-form-field{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-chip.mat-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-chip.mat-standard-chip span{display:inline-block}.mat-chip.mat-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.mat-chip .mat-chip-remove{margin-left:0;margin-right:.5em;color:var(--base-40);opacity:1}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i12.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i12.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
1275
+ FilterBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FilterBarComponent, selector: "tld-filter-bar", inputs: { settings: "settings", filterRowVisible: "filterRowVisible" }, outputs: { filterBarChange: "filterBarChange" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "filterWrapper", first: true, predicate: ["filterWrapper"], descendants: true }], ngImport: i0, template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" class=\"filter-bar-search-input\">\r\n <span matPrefix class=\"material-icons-outlined\">\r\n {{prefixIcon}}\r\n </span>\r\n <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n {{suffixIcon}}\r\n </span>\r\n <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n [formControlName]=\"inputFormControlName\">\r\n </mat-form-field>\r\n <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n <mat-form-field [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n <mat-option *ngFor=\"let value of filter.values\" [value]=\"value\">\r\n {{value.key | translate : {default: value.value | titlecase } }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_forward_ios\r\n </span>\r\n </button>\r\n</div>\r\n<mat-chip-list>\r\n <div *ngFor=\"let filter of settings?.filters\">\r\n <mat-chip *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n <button matChipRemove>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n <span class=\"chip-value semi-bold\"> {{filterValue.key | translate : {default: filterValue.value | titlecase }\r\n }}</span>\r\n </mat-chip>\r\n </div>\r\n</mat-chip-list>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:.5rem 1.25rem 1rem;max-width:100%;align-items:baseline;margin-bottom:.5rem}.filter-row ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.filter-row ::ng-deep .mat-form-field-underline{bottom:0!important}.search-input{background-color:unset;border:none}.engine-filter{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-chip.mat-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-chip.mat-standard-chip span{display:inline-block}.mat-chip.mat-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.mat-chip .mat-chip-remove{margin-left:0;margin-right:.5em;color:var(--base-40);opacity:1}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i2$3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$3.DefaultFlexDirective, selector: " [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md], [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md], [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm], [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: " [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl], [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl], [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i12.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i12.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i12.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i2$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
1276
1276
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FilterBarComponent, decorators: [{
1277
1277
  type: Component,
1278
- args: [{ selector: 'tld-filter-bar', template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" class=\"filter-bar-search-input\">\r\n <span matPrefix class=\"material-icons-outlined\">\r\n {{prefixIcon}}\r\n </span>\r\n <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n {{suffixIcon}}\r\n </span>\r\n <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n [formControlName]=\"inputFormControlName\">\r\n </mat-form-field>\r\n <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n <mat-form-field [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n <mat-option *ngFor=\"let value of filter.values\" [value]=\"value\">\r\n {{value.key | translate : {default: value.value | titlecase } }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_forward_ios\r\n </span>\r\n </button>\r\n</div>\r\n<mat-chip-list>\r\n <div *ngFor=\"let filter of settings?.filters\">\r\n <mat-chip *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n <button matChipRemove>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n <span class=\"chip-value semi-bold\"> {{filterValue.key | translate : {default: filterValue.value | titlecase }\r\n }}</span>\r\n </mat-chip>\r\n </div>\r\n</mat-chip-list>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:.5rem 1.25rem 1rem;max-width:100%;align-items:baseline;margin-bottom:.5rem}.filter-row ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.filter-row ::ng-deep .mat-form-field-underline{bottom:0!important}.search-input{background-color:unset;border:none}mat-form-field+mat-form-field{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-chip.mat-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-chip.mat-standard-chip span{display:inline-block}.mat-chip.mat-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.mat-chip .mat-chip-remove{margin-left:0;margin-right:.5em;color:var(--base-40);opacity:1}.hidden{display:none}\n"] }]
1278
+ args: [{ selector: 'tld-filter-bar', template: "<div class=\"filter-row\" *ngIf=\"filterRowVisible\">\r\n <div fxLayout=\"row\" class=\"filter-wrapper\" #filterWrapper [formGroup]=\"form\">\r\n <mat-form-field fxFlex *ngIf=\"showSearch && !filterOverflow || activeFilterIndex === searchIndex\" class=\"filter-bar-search-input\">\r\n <span matPrefix class=\"material-icons-outlined\">\r\n {{prefixIcon}}\r\n </span>\r\n <span matSuffix class=\"material-icons-outlined\" *ngIf=\"showSuffixIcon\" [matTooltip]=\"searchTooltip | translate\">\r\n {{suffixIcon}}\r\n </span>\r\n <input class=\"search-input\" matInput [placeholder]=\"searchTitle | translate\"\r\n [formControlName]=\"inputFormControlName\">\r\n </mat-form-field>\r\n <ng-container [formGroup]=\"filterFormGroup\">\r\n\r\n <mat-form-field [ngClass]=\"{'hidden': filterOverflow && activeFilterIndex !== i, 'engine-filter': !filterOverflow}\" *ngFor=\"let filter of settings?.filters; let i = index\">\r\n <mat-label>{{filter.title | translate}}</mat-label>\r\n <mat-select multiple [formControlName]=\"filter.fieldName\">\r\n <mat-option *ngFor=\"let value of filter.values\" [value]=\"value\">\r\n {{value.key | translate : {default: value.value | titlecase } }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </ng-container>\r\n </div>\r\n <button mat-icon-button (click)=\"switchLeft()\" *ngIf=\"filterOverflow\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_back_ios\r\n </span>\r\n </button>\r\n <button mat-icon-button *ngIf=\"filterOverflow\" (click)=\"switchRight()\">\r\n <span class=\"material-icons-outlined\">\r\n arrow_forward_ios\r\n </span>\r\n </button>\r\n</div>\r\n<mat-chip-list>\r\n <div *ngFor=\"let filter of settings?.filters\">\r\n <mat-chip *ngFor=\"let filterValue of filterFormGroupValue[filter.fieldName]; let ix=index\"\r\n (removed)=\"removeFilter(filter.fieldName, ix)\" class=\"text-s\">\r\n <button matChipRemove>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <span class=\"chip-filter-title\">{{filter.title | translate}}:</span>\r\n <span class=\"chip-value semi-bold\"> {{filterValue.key | translate : {default: filterValue.value | titlecase }\r\n }}</span>\r\n </mat-chip>\r\n </div>\r\n</mat-chip-list>\r\n", styles: [":host{display:inline-block}.filter-row{display:flex;background-color:var(--base-95);min-height:40px;min-width:100%;border-radius:.5rem;padding:.5rem 1.25rem 1rem;max-width:100%;align-items:baseline;margin-bottom:.5rem}.filter-row ::ng-deep .mat-form-field-wrapper{padding-bottom:0!important}.filter-row ::ng-deep .mat-form-field-underline{bottom:0!important}.search-input{background-color:unset;border:none}.engine-filter{margin-left:1rem}.filter-bar-search-input{width:100%}.filter-bar-search-input::ng-deep .material-icons-outlined{vertical-align:bottom}.material-icons-outlined{color:var(--base-40)}.filter-wrapper{max-width:100%;overflow-x:hidden;overflow-y:hidden;display:flex;flex:1}.mat-chip.mat-standard-chip{background-color:var(--base-95);padding-left:.5em;padding-right:.75em;border:.5px solid var(--base-70)}.mat-chip.mat-standard-chip span{display:inline-block}.mat-chip.mat-standard-chip .chip-filter-title+.chip-value{margin-left:.25rem}.mat-chip .mat-chip-remove{margin-left:0;margin-right:.5em;color:var(--base-40);opacity:1}.hidden{display:none}\n"] }]
1279
1279
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.TranslateService }]; }, propDecorators: { filterWrapper: [{
1280
1280
  type: ViewChild,
1281
1281
  args: ["filterWrapper"]