@vendure/admin-ui 2.2.0-next.1 → 2.2.0-next.2

package/esm2022/core/shared/components/assign-to-channel-dialog/assign-to-channel-dialog.component.mjs

@@ -46,7 +46,7 @@ export class AssignToChannelDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssignToChannelDialogComponent, deps: [{ token: i1.DataService }, { token: i2.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssignToChannelDialogComponent, selector: "vdr-assign-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.confirm-bulk-assign-to-channel' | translate }}\r\n</ng-template>\r\n<div class=\"form-grid\">\r\n    <vdr-form-item>\r\n        <div *ngIf=\"0 < nMore\">\r\n            {{\r\n                'common.list-items-and-n-more'\r\n                    | translate\r\n                        : {\r\n                              items: itemNames,\r\n                              nMore: nMore\r\n                          }\r\n            }}\r\n        </div>\r\n        <div *ngIf=\"nMore === 0\">\r\n            {{ itemNames }}\r\n        </div>\r\n    </vdr-form-item>\r\n    <vdr-form-field [label]=\"'common.channel' | translate\" class=\"mb-4\">\r\n        <vdr-channel-assignment-control\r\n            clrInput\r\n            [multiple]=\"false\"\r\n            [includeDefaultChannel]=\"false\"\r\n            [formControl]=\"selectedChannelIdControl\"\r\n        ></vdr-channel-assignment-control>\r\n    </vdr-form-field>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\r\n        <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n            {{ 'catalog.assign-to-named-channel' | translate : { channelCode: selectedChannel?.code } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'catalog.no-channel-selected' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: ["vdr-channel-assignment-control{min-width:200px}\n"], dependencies: [{ kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "component", type: i7.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "directive", type: i8.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i9.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i10.ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssignToChannelDialogComponent, selector: "vdr-assign-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.confirm-bulk-assign-to-channel' | translate }}\r\n</ng-template>\r\n<div class=\"form-grid\">\r\n    <vdr-form-item>\r\n        <div *ngIf=\"0 < nMore\">\r\n            {{\r\n                'common.list-items-and-n-more'\r\n                    | translate\r\n                        : {\r\n                              items: itemNames,\r\n                              nMore: nMore\r\n                          }\r\n            }}\r\n        </div>\r\n        <div *ngIf=\"nMore === 0\">\r\n            {{ itemNames }}\r\n        </div>\r\n    </vdr-form-item>\r\n    <vdr-form-field [label]=\"'common.channel' | translate\" class=\"mb-4\">\r\n        <vdr-channel-assignment-control\r\n            clrInput\r\n            [multiple]=\"false\"\r\n            [includeDefaultChannel]=\"false\"\r\n            [formControl]=\"selectedChannelIdControl\"\r\n        ></vdr-channel-assignment-control>\r\n    </vdr-form-field>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\r\n        <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n            {{ 'catalog.assign-to-named-channel' | translate : { channelCode: selectedChannel?.code } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'catalog.no-channel-selected' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: ["vdr-channel-assignment-control{min-width:200px}\n"], dependencies: [{ kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "component", type: i7.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "directive", type: i8.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i9.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i10.ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssignToChannelDialogComponent, decorators: [{
             type: Component,

package/esm2022/core/shared/components/currency-input/currency-input.component.mjs

@@ -130,7 +130,7 @@ export class CurrencyInputComponent {
                 useExisting: CurrencyInputComponent,
                 multi: true,
             },
-        ], usesOnChanges: true, ngImport: i0, template: "<vdr-affixed-input\r\n    [prefix]=\"prefix$ | async | localeCurrencyName: 'symbol'\"\r\n    [suffix]=\"suffix$ | async | localeCurrencyName: 'symbol'\"\r\n>\r\n    <input\r\n        type=\"number\"\r\n        [step]=\"hasFractionPart ? 1 / precisionFactor : 1\"\r\n        [value]=\"_inputValue\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (input)=\"onInput($event.target.value)\"\r\n        (focus)=\"onFocus()\"\r\n    />\r\n</vdr-affixed-input>\r\n", styles: [":host{padding:0;border:none}input[readonly]{background-color:transparent}\n"], dependencies: [{ kind: "component", type: i3.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocaleCurrencyNamePipe, name: "localeCurrencyName" }] }); }
+        ], usesOnChanges: true, ngImport: i0, template: "<vdr-affixed-input\r\n    [prefix]=\"prefix$ | async | localeCurrencyName: 'symbol'\"\r\n    [suffix]=\"suffix$ | async | localeCurrencyName: 'symbol'\"\r\n>\r\n    <input\r\n        type=\"number\"\r\n        [step]=\"hasFractionPart ? 1 / precisionFactor : 1\"\r\n        [value]=\"_inputValue\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (input)=\"onInput($event.target.value)\"\r\n        (focus)=\"onFocus()\"\r\n    />\r\n</vdr-affixed-input>\r\n", styles: [":host{padding:0;border:none}:host.ng-invalid input[type=number]{color:var(--color-error-700);border-color:var(--color-error-300)}input[readonly]{background-color:transparent}\n"], dependencies: [{ kind: "component", type: i3.AffixedInputComponent, selector: "vdr-affixed-input", inputs: ["prefix", "suffix"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.LocaleCurrencyNamePipe, name: "localeCurrencyName" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CurrencyInputComponent, decorators: [{
             type: Component,
@@ -140,7 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                             useExisting: CurrencyInputComponent,
                             multi: true,
                         },
-                    ], template: "<vdr-affixed-input\r\n    [prefix]=\"prefix$ | async | localeCurrencyName: 'symbol'\"\r\n    [suffix]=\"suffix$ | async | localeCurrencyName: 'symbol'\"\r\n>\r\n    <input\r\n        type=\"number\"\r\n        [step]=\"hasFractionPart ? 1 / precisionFactor : 1\"\r\n        [value]=\"_inputValue\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (input)=\"onInput($event.target.value)\"\r\n        (focus)=\"onFocus()\"\r\n    />\r\n</vdr-affixed-input>\r\n", styles: [":host{padding:0;border:none}input[readonly]{background-color:transparent}\n"] }]
+                    ], template: "<vdr-affixed-input\r\n    [prefix]=\"prefix$ | async | localeCurrencyName: 'symbol'\"\r\n    [suffix]=\"suffix$ | async | localeCurrencyName: 'symbol'\"\r\n>\r\n    <input\r\n        type=\"number\"\r\n        [step]=\"hasFractionPart ? 1 / precisionFactor : 1\"\r\n        [value]=\"_inputValue\"\r\n        [disabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        (input)=\"onInput($event.target.value)\"\r\n        (focus)=\"onFocus()\"\r\n    />\r\n</vdr-affixed-input>\r\n", styles: [":host{padding:0;border:none}:host.ng-invalid input[type=number]{color:var(--color-error-700);border-color:var(--color-error-300)}input[readonly]{background-color:transparent}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i2.CurrencyService }]; }, propDecorators: { disabled: [{
                 type: Input
             }], readonly: [{

package/esm2022/core/shared/components/custom-field-control/custom-field-control.component.mjs

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { map } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../data/providers/data.service";
@@ -66,7 +66,7 @@ export class CustomFieldControlComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CustomFieldControlComponent, deps: [{ token: i1.DataService }, { token: i2.CustomFieldComponentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: { entityName: "entityName", formGroup: ["customFieldsFormGroup", "formGroup"], customField: "customField", compact: "compact", showLabel: "showLabel", readonly: "readonly" }, viewQueries: [{ propertyName: "customComponentPlaceholder", first: true, predicate: ["customComponentPlaceholder"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"clr-form-control\" *ngIf=\"compact\">\r\n    <div class=\"flex\">\r\n        <label for=\"basic\" class=\"clr-control-label\"\r\n            >{{ customField | customFieldLabel: (uiLanguage$ | async) }}\r\n            <vdr-help-tooltip\r\n                *ngIf=\"customField | customFieldDescription: (uiLanguage$ | async) as description\"\r\n                [content]=\"description\"\r\n            ></vdr-help-tooltip>\r\n        </label>\r\n    </div>\r\n    <div class=\"clr-control-container\">\r\n        <div class=\"clr-input-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n<vdr-form-field\r\n    [label]=\"customField | customFieldLabel: (uiLanguage$ | async)\"\r\n    [tooltip]=\"customField | customFieldDescription: (uiLanguage$ | async)\"\r\n    [for]=\"customField.name\"\r\n    *ngIf=\"!compact\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n</vdr-form-field>\r\n\r\n<ng-template #inputs>\r\n    <ng-container [formGroup]=\"formGroup\">\r\n        <vdr-dynamic-form-input\r\n            [formControlName]=\"customField.name\"\r\n            [readonly]=\"readonly || customField.readonly\"\r\n            [control]=\"formGroup.get(customField.name)\"\r\n            [def]=\"getFieldDefinition()\"\r\n        >\r\n        </vdr-dynamic-form-input>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%}:host .toggle-switch{margin-top:0;margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "component", type: i7.HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { kind: "component", type: i8.DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.CustomFieldLabelPipe, name: "customFieldLabel" }, { kind: "pipe", type: i10.CustomFieldDescriptionPipe, name: "customFieldDescription" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: { entityName: "entityName", formGroup: ["customFieldsFormGroup", "formGroup"], customField: "customField", compact: "compact", showLabel: "showLabel", readonly: "readonly" }, ngImport: i0, template: "<div class=\"clr-form-control\" *ngIf=\"compact\">\r\n    <div class=\"flex\">\r\n        <label for=\"basic\" class=\"clr-control-label\"\r\n            >{{ customField | customFieldLabel: (uiLanguage$ | async) }}\r\n            <vdr-help-tooltip\r\n                *ngIf=\"customField | customFieldDescription: (uiLanguage$ | async) as description\"\r\n                [content]=\"description\"\r\n            ></vdr-help-tooltip>\r\n        </label>\r\n    </div>\r\n    <div class=\"clr-control-container\">\r\n        <div class=\"clr-input-wrapper\">\r\n            <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n<vdr-form-field\r\n    [label]=\"customField | customFieldLabel: (uiLanguage$ | async)\"\r\n    [tooltip]=\"customField | customFieldDescription: (uiLanguage$ | async)\"\r\n    [for]=\"customField.name\"\r\n    *ngIf=\"!compact\"\r\n>\r\n    <ng-container *ngTemplateOutlet=\"inputs\"></ng-container>\r\n</vdr-form-field>\r\n\r\n<ng-template #inputs>\r\n    <ng-container [formGroup]=\"formGroup\">\r\n        <vdr-dynamic-form-input\r\n            [formControlName]=\"customField.name\"\r\n            [readonly]=\"readonly || customField.readonly\"\r\n            [control]=\"formGroup.get(customField.name)\"\r\n            [def]=\"getFieldDefinition()\"\r\n        >\r\n        </vdr-dynamic-form-input>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;width:100%}:host .toggle-switch{margin-top:0;margin-bottom:0}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "component", type: i7.HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { kind: "component", type: i8.DynamicFormInputComponent, selector: "vdr-dynamic-form-input", inputs: ["def", "readonly", "control"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.CustomFieldLabelPipe, name: "customFieldLabel" }, { kind: "pipe", type: i10.CustomFieldDescriptionPipe, name: "customFieldDescription" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CustomFieldControlComponent, decorators: [{
             type: Component,
@@ -84,8 +84,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 type: Input
             }], readonly: [{
                 type: Input
-            }], customComponentPlaceholder: [{
-                type: ViewChild,
-                args: ['customComponentPlaceholder', { read: ViewContainerRef }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLWZpZWxkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb3JlL3NyYy9zaGFyZWQvY29tcG9uZW50cy9jdXN0b20tZmllbGQtY29udHJvbC9jdXN0b20tZmllbGQtY29udHJvbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL2N1c3RvbS1maWVsZC1jb250cm9sL2N1c3RvbS1maWVsZC1jb250cm9sLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQW9CLEtBQUssRUFBVSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHeEcsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7Ozs7Ozs7QUFXckM7OztHQUdHO0FBTUgsTUFBTSxPQUFPLDJCQUEyQjtJQWNwQyxZQUNZLFdBQXdCLEVBQ3hCLDJCQUF3RDtRQUR4RCxnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUN4QixnQ0FBMkIsR0FBM0IsMkJBQTJCLENBQTZCO1FBWjNELFlBQU8sR0FBRyxLQUFLLENBQUM7UUFDaEIsY0FBUyxHQUFHLElBQUksQ0FBQztRQUNqQixhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQzFCLHFCQUFnQixHQUFHLEtBQUssQ0FBQztJQVV0QixDQUFDO0lBRUosUUFBUTtRQUNKLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNO2FBQ3JDLE9BQU8sRUFBRTthQUNULE9BQU8sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUM7SUFDOUQsQ0FBQztJQUVELGtCQUFrQjtRQUNkLE1BQU0sTUFBTSxHQUF5RDtZQUNqRSxHQUFHLElBQUksQ0FBQyxXQUFXO1NBQ3RCLENBQUM7UUFDRixNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsMkJBQTJCLENBQUMsMEJBQTBCLENBQ2xFLElBQUksQ0FBQyxVQUFVLEVBQ2YsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQ3hCLENBQUM7UUFDRixJQUFJLEVBQUUsRUFBRTtZQUNKLE1BQU0sQ0FBQyxFQUFFLEdBQUcsRUFBRSxTQUFTLEVBQUUsRUFBRSxFQUFFLENBQUM7U0FDakM7UUFDRCxRQUFRLE1BQU0sQ0FBQyxVQUFVLEVBQUU7WUFDdkIsS0FBSyxzQkFBc0I7Z0JBQ3ZCLE9BQU87b0JBQ0gsR0FBRyxNQUFNO29CQUNULEdBQUcsRUFBRSxNQUFNLENBQUMsTUFBTTtvQkFDbEIsR0FBRyxFQUFFLE1BQU0sQ0FBQyxNQUFNO29CQUNsQixJQUFJLEVBQUUsTUFBTSxDQUFDLE9BQU87aUJBQ3ZCLENBQUM7WUFDTixLQUFLLHdCQUF3QjtnQkFDekIsT0FBTztvQkFDSCxHQUFHLE1BQU07b0JBQ1QsR0FBRyxFQUFFLE1BQU0sQ0FBQyxRQUFRO29CQUNwQixHQUFHLEVBQUUsTUFBTSxDQUFDLFFBQVE7b0JBQ3BCLElBQUksRUFBRSxNQUFNLENBQUMsU0FBUztpQkFDekIsQ0FBQztZQUNOLEtBQUssMkJBQTJCO2dCQUM1QixPQUFPO29CQUNILEdBQUcsTUFBTTtvQkFDVCxHQUFHLEVBQUUsTUFBTSxDQUFDLFdBQVc7b0JBQ3ZCLEdBQUcsRUFBRSxNQUFNLENBQUMsV0FBVztvQkFDdkIsSUFBSSxFQUFFLE1BQU0sQ0FBQyxZQUFZO2lCQUM1QixDQUFDO1lBQ047Z0JBQ0ksT0FBTztvQkFDSCxHQUFHLE1BQU07aUJBQ1osQ0FBQztTQUNUO0lBQ0wsQ0FBQzs4R0EvRFEsMkJBQTJCO2tHQUEzQiwyQkFBMkIsNFdBUWEsZ0JBQWdCLDZCQy9CckUsczVDQW9DQTs7MkZEYmEsMkJBQTJCO2tCQUx2QyxTQUFTOytCQUNJLDBCQUEwQjs0SUFLM0IsVUFBVTtzQkFBbEIsS0FBSztnQkFDMEIsU0FBUztzQkFBeEMsS0FBSzt1QkFBQyx1QkFBdUI7Z0JBQ3JCLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFHRSwwQkFBMEI7c0JBRGpDLFNBQVM7dUJBQUMsNEJBQTRCLEVBQUUsRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbXBvbmVudEZhY3RvcnksIElucHV0LCBPbkluaXQsIFZpZXdDaGlsZCwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBVbnR5cGVkRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IG1hcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcclxuXHJcbmltcG9ydCB7IElucHV0Q29tcG9uZW50Q29uZmlnIH0gZnJvbSAnLi4vLi4vLi4vY29tbW9uL2NvbXBvbmVudC1yZWdpc3RyeS10eXBlcyc7XHJcbmltcG9ydCB7IEN1c3RvbUZpZWxkQ29uZmlnLCBDdXN0b21GaWVsZHNGcmFnbWVudCwgTGFuZ3VhZ2VDb2RlIH0gZnJvbSAnLi4vLi4vLi4vY29tbW9uL2dlbmVyYXRlZC10eXBlcyc7XHJcbmltcG9ydCB7IERhdGFTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vZGF0YS9wcm92aWRlcnMvZGF0YS5zZXJ2aWNlJztcclxuaW1wb3J0IHtcclxuICAgIEN1c3RvbUZpZWxkQ29tcG9uZW50U2VydmljZSxcclxuICAgIEN1c3RvbUZpZWxkQ29udHJvbCxcclxuICAgIEN1c3RvbUZpZWxkRW50aXR5TmFtZSxcclxufSBmcm9tICcuLi8uLi8uLi9wcm92aWRlcnMvY3VzdG9tLWZpZWxkLWNvbXBvbmVudC9jdXN0b20tZmllbGQtY29tcG9uZW50LnNlcnZpY2UnO1xyXG5cclxuLyoqXHJcbiAqIFRoaXMgY29tcG9uZW50IHJlbmRlcnMgdGhlIGFwcHJvcHJpYXRlIHR5cGUgb2YgZm9ybSBpbnB1dCBjb250cm9sIGJhc2VkXHJcbiAqIG9uIHRoZSBcInR5cGVcIiBwcm9wZXJ0eSBvZiB0aGUgcHJvdmlkZWQgQ3VzdG9tRmllbGRDb25maWcuXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAndmRyLWN1c3RvbS1maWVsZC1jb250cm9sJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9jdXN0b20tZmllbGQtY29udHJvbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9jdXN0b20tZmllbGQtY29udHJvbC5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ3VzdG9tRmllbGRDb250cm9sQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICAgIEBJbnB1dCgpIGVudGl0eU5hbWU6IEN1c3RvbUZpZWxkRW50aXR5TmFtZTtcclxuICAgIEBJbnB1dCgnY3VzdG9tRmllbGRzRm9ybUdyb3VwJykgZm9ybUdyb3VwOiBVbnR5cGVkRm9ybUdyb3VwO1xyXG4gICAgQElucHV0KCkgY3VzdG9tRmllbGQ6IEN1c3RvbUZpZWxkc0ZyYWdtZW50O1xyXG4gICAgQElucHV0KCkgY29tcGFjdCA9IGZhbHNlO1xyXG4gICAgQElucHV0KCkgc2hvd0xhYmVsID0gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHJlYWRvbmx5ID0gZmFsc2U7XHJcbiAgICBoYXNDdXN0b21Db250cm9sID0gZmFsc2U7XHJcbiAgICBAVmlld0NoaWxkKCdjdXN0b21Db21wb25lbnRQbGFjZWhvbGRlcicsIHsgcmVhZDogVmlld0NvbnRhaW5lclJlZiB9KVxyXG4gICAgcHJpdmF0ZSBjdXN0b21Db21wb25lbnRQbGFjZWhvbGRlcjogVmlld0NvbnRhaW5lclJlZjtcclxuXHJcbiAgICBwcml2YXRlIGN1c3RvbUNvbXBvbmVudEZhY3Rvcnk6IENvbXBvbmVudEZhY3Rvcnk8Q3VzdG9tRmllbGRDb250cm9sPiB8IHVuZGVmaW5lZDtcclxuICAgIHVpTGFuZ3VhZ2UkOiBPYnNlcnZhYmxlPExhbmd1YWdlQ29kZT47XHJcblxyXG4gICAgY29uc3RydWN0b3IoXHJcbiAgICAgICAgcHJpdmF0ZSBkYXRhU2VydmljZTogRGF0YVNlcnZpY2UsXHJcbiAgICAgICAgcHJpdmF0ZSBjdXN0b21GaWVsZENvbXBvbmVudFNlcnZpY2U6IEN1c3RvbUZpZWxkQ29tcG9uZW50U2VydmljZSxcclxuICAgICkge31cclxuXHJcbiAgICBuZ09uSW5pdCgpIHtcclxuICAgICAgICB0aGlzLnVpTGFuZ3VhZ2UkID0gdGhpcy5kYXRhU2VydmljZS5jbGllbnRcclxuICAgICAgICAgICAgLnVpU3RhdGUoKVxyXG4gICAgICAgICAgICAuc3RyZWFtJC5waXBlKG1hcCgoeyB1aVN0YXRlIH0pID0+IHVpU3RhdGUubGFuZ3VhZ2UpKTtcclxuICAgIH1cclxuXHJcbiAgICBnZXRGaWVsZERlZmluaXRpb24oKTogQ3VzdG9tRmllbGRDb25maWcgJiB7IHVpPzogSW5wdXRDb21wb25lbnRDb25maWcgfSB7XHJcbiAgICAgICAgY29uc3QgY29uZmlnOiBDdXN0b21GaWVsZHNGcmFnbWVudCAmIHsgdWk/OiBJbnB1dENvbXBvbmVudENvbmZpZyB9ID0ge1xyXG4gICAgICAgICAgICAuLi50aGlzLmN1c3RvbUZpZWxkLFxyXG4gICAgICAgIH07XHJcbiAgICAgICAgY29uc3QgaWQgPSB0aGlzLmN1c3RvbUZpZWxkQ29tcG9uZW50U2VydmljZS5jdXN0b21GaWVsZENvbXBvbmVudEV4aXN0cyhcclxuICAgICAgICAgICAgdGhpcy5lbnRpdHlOYW1lLFxyXG4gICAgICAgICAgICB0aGlzLmN1c3RvbUZpZWxkLm5hbWUsXHJcbiAgICAgICAgKTtcclxuICAgICAgICBpZiAoaWQpIHtcclxuICAgICAgICAgICAgY29uZmlnLnVpID0geyBjb21wb25lbnQ6IGlkIH07XHJcbiAgICAgICAgfVxyXG4gICAgICAgIHN3aXRjaCAoY29uZmlnLl9fdHlwZW5hbWUpIHtcclxuICAgICAgICAgICAgY2FzZSAnSW50Q3VzdG9tRmllbGRDb25maWcnOlxyXG4gICAgICAgICAgICAgICAgcmV0dXJuIHtcclxuICAgICAgICAgICAgICAgICAgICAuLi5jb25maWcsXHJcbiAgICAgICAgICAgICAgICAgICAgbWluOiBjb25maWcuaW50TWluLFxyXG4gICAgICAgICAgICAgICAgICAgIG1heDogY29uZmlnLmludE1heCxcclxuICAgICAgICAgICAgICAgICAgICBzdGVwOiBjb25maWcuaW50U3RlcCxcclxuICAgICAgICAgICAgICAgIH07XHJcbiAgICAgICAgICAgIGNhc2UgJ0Zsb2F0Q3VzdG9tRmllbGRDb25maWcnOlxyXG4gICAgICAgICAgICAgICAgcmV0dXJuIHtcclxuICAgICAgICAgICAgICAgICAgICAuLi5jb25maWcsXHJcbiAgICAgICAgICAgICAgICAgICAgbWluOiBjb25maWcuZmxvYXRNaW4sXHJcbiAgICAgICAgICAgICAgICAgICAgbWF4OiBjb25maWcuZmxvYXRNYXgsXHJcbiAgICAgICAgICAgICAgICAgICAgc3RlcDogY29uZmlnLmZsb2F0U3RlcCxcclxuICAgICAgICAgICAgICAgIH07XHJcbiAgICAgICAgICAgIGNhc2UgJ0RhdGVUaW1lQ3VzdG9tRmllbGRDb25maWcnOlxyXG4gICAgICAgICAgICAgICAgcmV0dXJuIHtcclxuICAgICAgICAgICAgICAgICAgICAuLi5jb25maWcsXHJcbiAgICAgICAgICAgICAgICAgICAgbWluOiBjb25maWcuZGF0ZXRpbWVNaW4sXHJcbiAgICAgICAgICAgICAgICAgICAgbWF4OiBjb25maWcuZGF0ZXRpbWVNYXgsXHJcbiAgICAgICAgICAgICAgICAgICAgc3RlcDogY29uZmlnLmRhdGV0aW1lU3RlcCxcclxuICAgICAgICAgICAgICAgIH07XHJcbiAgICAgICAgICAgIGRlZmF1bHQ6XHJcbiAgICAgICAgICAgICAgICByZXR1cm4ge1xyXG4gICAgICAgICAgICAgICAgICAgIC4uLmNvbmZpZyxcclxuICAgICAgICAgICAgICAgIH07XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJjbHItZm9ybS1jb250cm9sXCIgKm5nSWY9XCJjb21wYWN0XCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwiZmxleFwiPlxyXG4gICAgICAgIDxsYWJlbCBmb3I9XCJiYXNpY1wiIGNsYXNzPVwiY2xyLWNvbnRyb2wtbGFiZWxcIlxyXG4gICAgICAgICAgICA+e3sgY3VzdG9tRmllbGQgfCBjdXN0b21GaWVsZExhYmVsOiAodWlMYW5ndWFnZSQgfCBhc3luYykgfX1cclxuICAgICAgICAgICAgPHZkci1oZWxwLXRvb2x0aXBcclxuICAgICAgICAgICAgICAgICpuZ0lmPVwiY3VzdG9tRmllbGQgfCBjdXN0b21GaWVsZERlc2NyaXB0aW9uOiAodWlMYW5ndWFnZSQgfCBhc3luYykgYXMgZGVzY3JpcHRpb25cIlxyXG4gICAgICAgICAgICAgICAgW2NvbnRlbnRdPVwiZGVzY3JpcHRpb25cIlxyXG4gICAgICAgICAgICA+PC92ZHItaGVscC10b29sdGlwPlxyXG4gICAgICAgIDwvbGFiZWw+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJjbHItY29udHJvbC1jb250YWluZXJcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiY2xyLWlucHV0LXdyYXBwZXJcIj5cclxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImlucHV0c1wiPjwvbmctY29udGFpbmVyPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG48dmRyLWZvcm0tZmllbGRcclxuICAgIFtsYWJlbF09XCJjdXN0b21GaWVsZCB8IGN1c3RvbUZpZWxkTGFiZWw6ICh1aUxhbmd1YWdlJCB8IGFzeW5jKVwiXHJcbiAgICBbdG9vbHRpcF09XCJjdXN0b21GaWVsZCB8IGN1c3RvbUZpZWxkRGVzY3JpcHRpb246ICh1aUxhbmd1YWdlJCB8IGFzeW5jKVwiXHJcbiAgICBbZm9yXT1cImN1c3RvbUZpZWxkLm5hbWVcIlxyXG4gICAgKm5nSWY9XCIhY29tcGFjdFwiXHJcbj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJpbnB1dHNcIj48L25nLWNvbnRhaW5lcj5cclxuPC92ZHItZm9ybS1maWVsZD5cclxuXHJcbjxuZy10ZW1wbGF0ZSAjaW5wdXRzPlxyXG4gICAgPG5nLWNvbnRhaW5lciBbZm9ybUdyb3VwXT1cImZvcm1Hcm91cFwiPlxyXG4gICAgICAgIDx2ZHItZHluYW1pYy1mb3JtLWlucHV0XHJcbiAgICAgICAgICAgIFtmb3JtQ29udHJvbE5hbWVdPVwiY3VzdG9tRmllbGQubmFtZVwiXHJcbiAgICAgICAgICAgIFtyZWFkb25seV09XCJyZWFkb25seSB8fCBjdXN0b21GaWVsZC5yZWFkb25seVwiXHJcbiAgICAgICAgICAgIFtjb250cm9sXT1cImZvcm1Hcm91cC5nZXQoY3VzdG9tRmllbGQubmFtZSlcIlxyXG4gICAgICAgICAgICBbZGVmXT1cImdldEZpZWxkRGVmaW5pdGlvbigpXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgPC92ZHItZHluYW1pYy1mb3JtLWlucHV0PlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbjwvbmctdGVtcGxhdGU+XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3VzdG9tLWZpZWxkLWNvbnRyb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb3JlL3NyYy9zaGFyZWQvY29tcG9uZW50cy9jdXN0b20tZmllbGQtY29udHJvbC9jdXN0b20tZmllbGQtY29udHJvbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL2N1c3RvbS1maWVsZC1jb250cm9sL2N1c3RvbS1maWVsZC1jb250cm9sLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBR3pELE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7Ozs7O0FBVXJDOzs7R0FHRztBQU1ILE1BQU0sT0FBTywyQkFBMkI7SUFVcEMsWUFDWSxXQUF3QixFQUN4QiwyQkFBd0Q7UUFEeEQsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFDeEIsZ0NBQTJCLEdBQTNCLDJCQUEyQixDQUE2QjtRQVIzRCxZQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ2hCLGNBQVMsR0FBRyxJQUFJLENBQUM7UUFDakIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUMxQixxQkFBZ0IsR0FBRyxLQUFLLENBQUM7SUFNdEIsQ0FBQztJQUVKLFFBQVE7UUFDSixJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTTthQUNyQyxPQUFPLEVBQUU7YUFDVCxPQUFPLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxDQUFDLE9BQU8sQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDO0lBQzlELENBQUM7SUFFRCxrQkFBa0I7UUFDZCxNQUFNLE1BQU0sR0FBeUQ7WUFDakUsR0FBRyxJQUFJLENBQUMsV0FBVztTQUN0QixDQUFDO1FBQ0YsTUFBTSxFQUFFLEdBQUcsSUFBSSxDQUFDLDJCQUEyQixDQUFDLDBCQUEwQixDQUNsRSxJQUFJLENBQUMsVUFBVSxFQUNmLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUN4QixDQUFDO1FBQ0YsSUFBSSxFQUFFLEVBQUU7WUFDSixNQUFNLENBQUMsRUFBRSxHQUFHLEVBQUUsU0FBUyxFQUFFLEVBQUUsRUFBRSxDQUFDO1NBQ2pDO1FBQ0QsUUFBUSxNQUFNLENBQUMsVUFBVSxFQUFFO1lBQ3ZCLEtBQUssc0JBQXNCO2dCQUN2QixPQUFPO29CQUNILEdBQUcsTUFBTTtvQkFDVCxHQUFHLEVBQUUsTUFBTSxDQUFDLE1BQU07b0JBQ2xCLEdBQUcsRUFBRSxNQUFNLENBQUMsTUFBTTtvQkFDbEIsSUFBSSxFQUFFLE1BQU0sQ0FBQyxPQUFPO2lCQUN2QixDQUFDO1lBQ04sS0FBSyx3QkFBd0I7Z0JBQ3pCLE9BQU87b0JBQ0gsR0FBRyxNQUFNO29CQUNULEdBQUcsRUFBRSxNQUFNLENBQUMsUUFBUTtvQkFDcEIsR0FBRyxFQUFFLE1BQU0sQ0FBQyxRQUFRO29CQUNwQixJQUFJLEVBQUUsTUFBTSxDQUFDLFNBQVM7aUJBQ3pCLENBQUM7WUFDTixLQUFLLDJCQUEyQjtnQkFDNUIsT0FBTztvQkFDSCxHQUFHLE1BQU07b0JBQ1QsR0FBRyxFQUFFLE1BQU0sQ0FBQyxXQUFXO29CQUN2QixHQUFHLEVBQUUsTUFBTSxDQUFDLFdBQVc7b0JBQ3ZCLElBQUksRUFBRSxNQUFNLENBQUMsWUFBWTtpQkFDNUIsQ0FBQztZQUNOO2dCQUNJLE9BQU87b0JBQ0gsR0FBRyxNQUFNO2lCQUNaLENBQUM7U0FDVDtJQUNMLENBQUM7OEdBM0RRLDJCQUEyQjtrR0FBM0IsMkJBQTJCLHVQQ3RCeEMsczVDQW9DQTs7MkZEZGEsMkJBQTJCO2tCQUx2QyxTQUFTOytCQUNJLDBCQUEwQjs0SUFLM0IsVUFBVTtzQkFBbEIsS0FBSztnQkFDMEIsU0FBUztzQkFBeEMsS0FBSzt1QkFBQyx1QkFBdUI7Z0JBQ3JCLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBVbnR5cGVkRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IG1hcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcclxuXHJcbmltcG9ydCB7IElucHV0Q29tcG9uZW50Q29uZmlnIH0gZnJvbSAnLi4vLi4vLi4vY29tbW9uL2NvbXBvbmVudC1yZWdpc3RyeS10eXBlcyc7XHJcbmltcG9ydCB7IEN1c3RvbUZpZWxkQ29uZmlnLCBDdXN0b21GaWVsZHNGcmFnbWVudCwgTGFuZ3VhZ2VDb2RlIH0gZnJvbSAnLi4vLi4vLi4vY29tbW9uL2dlbmVyYXRlZC10eXBlcyc7XHJcbmltcG9ydCB7IERhdGFTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vLi4vZGF0YS9wcm92aWRlcnMvZGF0YS5zZXJ2aWNlJztcclxuaW1wb3J0IHtcclxuICAgIEN1c3RvbUZpZWxkQ29tcG9uZW50U2VydmljZSxcclxuICAgIEN1c3RvbUZpZWxkRW50aXR5TmFtZSxcclxufSBmcm9tICcuLi8uLi8uLi9wcm92aWRlcnMvY3VzdG9tLWZpZWxkLWNvbXBvbmVudC9jdXN0b20tZmllbGQtY29tcG9uZW50LnNlcnZpY2UnO1xyXG5cclxuLyoqXHJcbiAqIFRoaXMgY29tcG9uZW50IHJlbmRlcnMgdGhlIGFwcHJvcHJpYXRlIHR5cGUgb2YgZm9ybSBpbnB1dCBjb250cm9sIGJhc2VkXHJcbiAqIG9uIHRoZSBcInR5cGVcIiBwcm9wZXJ0eSBvZiB0aGUgcHJvdmlkZWQgQ3VzdG9tRmllbGRDb25maWcuXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAndmRyLWN1c3RvbS1maWVsZC1jb250cm9sJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9jdXN0b20tZmllbGQtY29udHJvbC5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9jdXN0b20tZmllbGQtY29udHJvbC5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ3VzdG9tRmllbGRDb250cm9sQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICAgIEBJbnB1dCgpIGVudGl0eU5hbWU6IEN1c3RvbUZpZWxkRW50aXR5TmFtZTtcclxuICAgIEBJbnB1dCgnY3VzdG9tRmllbGRzRm9ybUdyb3VwJykgZm9ybUdyb3VwOiBVbnR5cGVkRm9ybUdyb3VwO1xyXG4gICAgQElucHV0KCkgY3VzdG9tRmllbGQ6IEN1c3RvbUZpZWxkc0ZyYWdtZW50O1xyXG4gICAgQElucHV0KCkgY29tcGFjdCA9IGZhbHNlO1xyXG4gICAgQElucHV0KCkgc2hvd0xhYmVsID0gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHJlYWRvbmx5ID0gZmFsc2U7XHJcbiAgICBoYXNDdXN0b21Db250cm9sID0gZmFsc2U7XHJcbiAgICB1aUxhbmd1YWdlJDogT2JzZXJ2YWJsZTxMYW5ndWFnZUNvZGU+O1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKFxyXG4gICAgICAgIHByaXZhdGUgZGF0YVNlcnZpY2U6IERhdGFTZXJ2aWNlLFxyXG4gICAgICAgIHByaXZhdGUgY3VzdG9tRmllbGRDb21wb25lbnRTZXJ2aWNlOiBDdXN0b21GaWVsZENvbXBvbmVudFNlcnZpY2UsXHJcbiAgICApIHt9XHJcblxyXG4gICAgbmdPbkluaXQoKSB7XHJcbiAgICAgICAgdGhpcy51aUxhbmd1YWdlJCA9IHRoaXMuZGF0YVNlcnZpY2UuY2xpZW50XHJcbiAgICAgICAgICAgIC51aVN0YXRlKClcclxuICAgICAgICAgICAgLnN0cmVhbSQucGlwZShtYXAoKHsgdWlTdGF0ZSB9KSA9PiB1aVN0YXRlLmxhbmd1YWdlKSk7XHJcbiAgICB9XHJcblxyXG4gICAgZ2V0RmllbGREZWZpbml0aW9uKCk6IEN1c3RvbUZpZWxkQ29uZmlnICYgeyB1aT86IElucHV0Q29tcG9uZW50Q29uZmlnIH0ge1xyXG4gICAgICAgIGNvbnN0IGNvbmZpZzogQ3VzdG9tRmllbGRzRnJhZ21lbnQgJiB7IHVpPzogSW5wdXRDb21wb25lbnRDb25maWcgfSA9IHtcclxuICAgICAgICAgICAgLi4udGhpcy5jdXN0b21GaWVsZCxcclxuICAgICAgICB9O1xyXG4gICAgICAgIGNvbnN0IGlkID0gdGhpcy5jdXN0b21GaWVsZENvbXBvbmVudFNlcnZpY2UuY3VzdG9tRmllbGRDb21wb25lbnRFeGlzdHMoXHJcbiAgICAgICAgICAgIHRoaXMuZW50aXR5TmFtZSxcclxuICAgICAgICAgICAgdGhpcy5jdXN0b21GaWVsZC5uYW1lLFxyXG4gICAgICAgICk7XHJcbiAgICAgICAgaWYgKGlkKSB7XHJcbiAgICAgICAgICAgIGNvbmZpZy51aSA9IHsgY29tcG9uZW50OiBpZCB9O1xyXG4gICAgICAgIH1cclxuICAgICAgICBzd2l0Y2ggKGNvbmZpZy5fX3R5cGVuYW1lKSB7XHJcbiAgICAgICAgICAgIGNhc2UgJ0ludEN1c3RvbUZpZWxkQ29uZmlnJzpcclxuICAgICAgICAgICAgICAgIHJldHVybiB7XHJcbiAgICAgICAgICAgICAgICAgICAgLi4uY29uZmlnLFxyXG4gICAgICAgICAgICAgICAgICAgIG1pbjogY29uZmlnLmludE1pbixcclxuICAgICAgICAgICAgICAgICAgICBtYXg6IGNvbmZpZy5pbnRNYXgsXHJcbiAgICAgICAgICAgICAgICAgICAgc3RlcDogY29uZmlnLmludFN0ZXAsXHJcbiAgICAgICAgICAgICAgICB9O1xyXG4gICAgICAgICAgICBjYXNlICdGbG9hdEN1c3RvbUZpZWxkQ29uZmlnJzpcclxuICAgICAgICAgICAgICAgIHJldHVybiB7XHJcbiAgICAgICAgICAgICAgICAgICAgLi4uY29uZmlnLFxyXG4gICAgICAgICAgICAgICAgICAgIG1pbjogY29uZmlnLmZsb2F0TWluLFxyXG4gICAgICAgICAgICAgICAgICAgIG1heDogY29uZmlnLmZsb2F0TWF4LFxyXG4gICAgICAgICAgICAgICAgICAgIHN0ZXA6IGNvbmZpZy5mbG9hdFN0ZXAsXHJcbiAgICAgICAgICAgICAgICB9O1xyXG4gICAgICAgICAgICBjYXNlICdEYXRlVGltZUN1c3RvbUZpZWxkQ29uZmlnJzpcclxuICAgICAgICAgICAgICAgIHJldHVybiB7XHJcbiAgICAgICAgICAgICAgICAgICAgLi4uY29uZmlnLFxyXG4gICAgICAgICAgICAgICAgICAgIG1pbjogY29uZmlnLmRhdGV0aW1lTWluLFxyXG4gICAgICAgICAgICAgICAgICAgIG1heDogY29uZmlnLmRhdGV0aW1lTWF4LFxyXG4gICAgICAgICAgICAgICAgICAgIHN0ZXA6IGNvbmZpZy5kYXRldGltZVN0ZXAsXHJcbiAgICAgICAgICAgICAgICB9O1xyXG4gICAgICAgICAgICBkZWZhdWx0OlxyXG4gICAgICAgICAgICAgICAgcmV0dXJuIHtcclxuICAgICAgICAgICAgICAgICAgICAuLi5jb25maWcsXHJcbiAgICAgICAgICAgICAgICB9O1xyXG4gICAgICAgIH1cclxuICAgIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiY2xyLWZvcm0tY29udHJvbFwiICpuZ0lmPVwiY29tcGFjdFwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImZsZXhcIj5cclxuICAgICAgICA8bGFiZWwgZm9yPVwiYmFzaWNcIiBjbGFzcz1cImNsci1jb250cm9sLWxhYmVsXCJcclxuICAgICAgICAgICAgPnt7IGN1c3RvbUZpZWxkIHwgY3VzdG9tRmllbGRMYWJlbDogKHVpTGFuZ3VhZ2UkIHwgYXN5bmMpIH19XHJcbiAgICAgICAgICAgIDx2ZHItaGVscC10b29sdGlwXHJcbiAgICAgICAgICAgICAgICAqbmdJZj1cImN1c3RvbUZpZWxkIHwgY3VzdG9tRmllbGREZXNjcmlwdGlvbjogKHVpTGFuZ3VhZ2UkIHwgYXN5bmMpIGFzIGRlc2NyaXB0aW9uXCJcclxuICAgICAgICAgICAgICAgIFtjb250ZW50XT1cImRlc2NyaXB0aW9uXCJcclxuICAgICAgICAgICAgPjwvdmRyLWhlbHAtdG9vbHRpcD5cclxuICAgICAgICA8L2xhYmVsPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8ZGl2IGNsYXNzPVwiY2xyLWNvbnRyb2wtY29udGFpbmVyXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImNsci1pbnB1dC13cmFwcGVyXCI+XHJcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJpbnB1dHNcIj48L25nLWNvbnRhaW5lcj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj5cclxuPHZkci1mb3JtLWZpZWxkXHJcbiAgICBbbGFiZWxdPVwiY3VzdG9tRmllbGQgfCBjdXN0b21GaWVsZExhYmVsOiAodWlMYW5ndWFnZSQgfCBhc3luYylcIlxyXG4gICAgW3Rvb2x0aXBdPVwiY3VzdG9tRmllbGQgfCBjdXN0b21GaWVsZERlc2NyaXB0aW9uOiAodWlMYW5ndWFnZSQgfCBhc3luYylcIlxyXG4gICAgW2Zvcl09XCJjdXN0b21GaWVsZC5uYW1lXCJcclxuICAgICpuZ0lmPVwiIWNvbXBhY3RcIlxyXG4+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiaW5wdXRzXCI+PC9uZy1jb250YWluZXI+XHJcbjwvdmRyLWZvcm0tZmllbGQ+XHJcblxyXG48bmctdGVtcGxhdGUgI2lucHV0cz5cclxuICAgIDxuZy1jb250YWluZXIgW2Zvcm1Hcm91cF09XCJmb3JtR3JvdXBcIj5cclxuICAgICAgICA8dmRyLWR5bmFtaWMtZm9ybS1pbnB1dFxyXG4gICAgICAgICAgICBbZm9ybUNvbnRyb2xOYW1lXT1cImN1c3RvbUZpZWxkLm5hbWVcIlxyXG4gICAgICAgICAgICBbcmVhZG9ubHldPVwicmVhZG9ubHkgfHwgY3VzdG9tRmllbGQucmVhZG9ubHlcIlxyXG4gICAgICAgICAgICBbY29udHJvbF09XCJmb3JtR3JvdXAuZ2V0KGN1c3RvbUZpZWxkLm5hbWUpXCJcclxuICAgICAgICAgICAgW2RlZl09XCJnZXRGaWVsZERlZmluaXRpb24oKVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgIDwvdmRyLWR5bmFtaWMtZm9ybS1pbnB1dD5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG48L25nLXRlbXBsYXRlPlxyXG4iXX0=

package/esm2022/core/shared/components/data-table/data-table.component.mjs

@@ -138,7 +138,7 @@ export class DataTableComponent {
         this.selectionManager?.toggleSelection(item, event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableComponent, selector: "vdr-data-table", inputs: { items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", emptyStateLabel: "emptyStateLabel", selectionManager: "selectionManager", allSelected: "allSelected", isRowSelectedFn: "isRowSelectedFn" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", allSelectChange: "allSelectChange", rowSelectChange: "rowSelectChange" }, providers: [PaginationService], queries: [{ propertyName: "columns", predicate: DataTableColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!items || (items && items.length); else emptyPlaceholder\">\r\n    <div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"table\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr>\r\n                <th *ngIf=\"isRowSelectedFn || selectionManager\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"allSelected ? allSelected : selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th *ngFor=\"let header of columns?.toArray()\" class=\"left align-middle\" [class.expand]=\"header.expand\">\r\n                    <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"isRowSelectedFn || selectionManager\" class=\"align-middle selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"isRowSelectedFn ? isRowSelectedFn(item) : selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: i }\"\r\n                ></ng-container>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n    <div class=\"table-footer\">\r\n        <vdr-items-per-page-controls\r\n            *ngIf=\"totalItems\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n        ></vdr-items-per-page-controls>\r\n        <div *ngIf=\"totalItems\" class=\"p5\">\r\n            {{ 'common.total-items' | translate: { currentStart, currentEnd, totalItems } }}\r\n        </div>\r\n\r\n        <vdr-pagination-controls\r\n            *ngIf=\"totalItems\"\r\n            [currentPage]=\"currentPage\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            [totalItems]=\"totalItems\"\r\n            (pageChange)=\"pageChange.emit($event)\"\r\n        ></vdr-pagination-controls>\r\n    </div>\r\n</ng-container>\r\n<ng-template #emptyPlaceholder>\r\n    <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;overflow:auto;position:relative}.bulk-actions{position:absolute;left:50px;top:30px;z-index:2}table.table{max-width:100vw;overflow-x:auto}table.no-select{-webkit-user-select:none;user-select:none}thead th.expand{width:100%}thead.items-selected tr th{color:transparent}.selection-col{width:24px}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i4.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i5.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i6.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "pipe", type: i7.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableComponent, selector: "vdr-data-table", inputs: { items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", emptyStateLabel: "emptyStateLabel", selectionManager: "selectionManager", allSelected: "allSelected", isRowSelectedFn: "isRowSelectedFn" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", allSelectChange: "allSelectChange", rowSelectChange: "rowSelectChange" }, providers: [PaginationService], queries: [{ propertyName: "columns", predicate: DataTableColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"!items || (items && items.length); else emptyPlaceholder\">\r\n    <div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"table\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr>\r\n                <th *ngIf=\"isRowSelectedFn || selectionManager\" class=\"align-middle\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"allSelected ? allSelected : selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th *ngFor=\"let header of columns?.toArray()\" class=\"left align-middle\" [class.expand]=\"header.expand\">\r\n                    <ng-container *ngTemplateOutlet=\"header.template\"></ng-container>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"isRowSelectedFn || selectionManager\" class=\"align-middle selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"isRowSelectedFn ? isRowSelectedFn(item) : selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"rowTemplate; context: { item: item, index: i }\"\r\n                ></ng-container>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n    <div class=\"table-footer\">\r\n        <vdr-items-per-page-controls\r\n            *ngIf=\"totalItems\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n        ></vdr-items-per-page-controls>\r\n        <div *ngIf=\"totalItems\" class=\"p5\">\r\n            {{ 'common.total-items' | translate: { currentStart, currentEnd, totalItems } }}\r\n        </div>\r\n\r\n        <vdr-pagination-controls\r\n            *ngIf=\"totalItems\"\r\n            [currentPage]=\"currentPage\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            [totalItems]=\"totalItems\"\r\n            (pageChange)=\"pageChange.emit($event)\"\r\n        ></vdr-pagination-controls>\r\n    </div>\r\n</ng-container>\r\n<ng-template #emptyPlaceholder>\r\n    <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;overflow:auto;position:relative}.bulk-actions{position:absolute;left:50px;top:30px;z-index:2}table.table{max-width:100vw;overflow-x:auto}table.no-select{-webkit-user-select:none;user-select:none}thead th.expand{width:100%}thead.items-selected tr th{color:transparent}.selection-col{width:24px}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i4.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i5.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i6.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "pipe", type: i7.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,

package/esm2022/core/shared/components/data-table-2/data-table-custom-field-column.component.mjs

@@ -1,5 +1,6 @@
 import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
 import { map } from 'rxjs/operators';
+import { CustomFieldLabelPipe } from '../../pipes/custom-field-label.pipe';
 import { DataTable2ColumnComponent } from './data-table-column.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../../../data/providers/data.service";
@@ -11,6 +12,7 @@ import * as i6 from "../dropdown/dropdown-trigger.directive";
 import * as i7 from "../object-tree/object-tree.component";
 import * as i8 from "@ngx-translate/core";
 import * as i9 from "../../pipes/locale-date.pipe";
+const labelPipe = new CustomFieldLabelPipe();
 export class DataTableCustomFieldColumnComponent extends DataTable2ColumnComponent {
     constructor(dataService) {
         super();
@@ -30,6 +32,7 @@ export class DataTableCustomFieldColumnComponent extends DataTable2ColumnCompone
         this.hiddenByDefault = true;
         this.sort = this.sorts?.get(this.customField.name);
         this.id = this.customField.name;
+        this.heading = labelPipe.transform(this.customField, null);
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableCustomFieldColumnComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -46,4 +49,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 type: ViewChild,
                 args: [TemplateRef, { static: false }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS10YWJsZS1jdXN0b20tZmllbGQtY29sdW1uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29yZS9zcmMvc2hhcmVkL2NvbXBvbmVudHMvZGF0YS10YWJsZS0yL2RhdGEtdGFibGUtY3VzdG9tLWZpZWxkLWNvbHVtbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL2RhdGEtdGFibGUtMi9kYXRhLXRhYmxlLWN1c3RvbS1maWVsZC1jb2x1bW4uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBZ0IsS0FBSyxFQUFVLFdBQVcsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0YsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBSXJDLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLCtCQUErQixDQUFDOzs7Ozs7Ozs7OztBQVExRSxNQUFNLE9BQU8sbUNBQXVDLFNBQVEseUJBQTRCO0lBS3BGLFlBQXNCLFdBQXdCO1FBQzFDLEtBQUssRUFBRSxDQUFDO1FBRFUsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFFMUMsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLE1BQU07YUFDckMsT0FBTyxFQUFFO2FBQ1QsT0FBTyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLE9BQU8sRUFBRSxFQUFFLEVBQUUsQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQztJQUM5RCxDQUFDO0lBRUQsUUFBUTtRQUNKLElBQUksQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUFDLFVBQVUsQ0FBQyxFQUFFO1lBQ3BDLElBQUksQ0FBQyxPQUFPO2dCQUNSLEtBQUssQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsSUFBSSxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQztvQkFDdEUsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxZQUFZLEtBQUssVUFBVSxDQUFDLEVBQUUsS0FBSzt3QkFDdEUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJO29CQUN2QixDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUM7UUFDcEMsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsZUFBZSxHQUFHLElBQUksQ0FBQztRQUM1QixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsR0FBRyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLEVBQUUsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQztRQUNoQyxLQUFLLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDckIsQ0FBQzs4R0F4QlEsbUNBQW1DO2tHQUFuQyxtQ0FBbUMscUtBR2pDLFdBQVcsMEZDakIxQiwwakVBNENBOzsyRkQ5QmEsbUNBQW1DO2tCQU4vQyxTQUFTOytCQUNJLDZCQUE2QixZQUc3QixLQUFLO2tHQUdOLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNxQyxRQUFRO3NCQUFsRCxTQUFTO3VCQUFDLFdBQVcsRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZCwgSW5wdXQsIE9uSW5pdCwgVGVtcGxhdGVSZWYsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IG1hcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcclxuaW1wb3J0IHsgQ3VzdG9tRmllbGRDb25maWcsIExhbmd1YWdlQ29kZSB9IGZyb20gJy4uLy4uLy4uL2NvbW1vbi9nZW5lcmF0ZWQtdHlwZXMnO1xyXG5pbXBvcnQgeyBEYXRhU2VydmljZSB9IGZyb20gJy4uLy4uLy4uL2RhdGEvcHJvdmlkZXJzL2RhdGEuc2VydmljZSc7XHJcbmltcG9ydCB7IERhdGFUYWJsZVNvcnRDb2xsZWN0aW9uIH0gZnJvbSAnLi4vLi4vLi4vcHJvdmlkZXJzL2RhdGEtdGFibGUvZGF0YS10YWJsZS1zb3J0LWNvbGxlY3Rpb24nO1xyXG5pbXBvcnQgeyBEYXRhVGFibGUyQ29sdW1uQ29tcG9uZW50IH0gZnJvbSAnLi9kYXRhLXRhYmxlLWNvbHVtbi5jb21wb25lbnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3Zkci1kdDItY3VzdG9tLWZpZWxkLWNvbHVtbicsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vZGF0YS10YWJsZS1jdXN0b20tZmllbGQtY29sdW1uLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2RhdGEtdGFibGUtY3VzdG9tLWZpZWxkLWNvbHVtbi5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgZXhwb3J0QXM6ICdyb3cnLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgRGF0YVRhYmxlQ3VzdG9tRmllbGRDb2x1bW5Db21wb25lbnQ8VD4gZXh0ZW5kcyBEYXRhVGFibGUyQ29sdW1uQ29tcG9uZW50PFQ+IGltcGxlbWVudHMgT25Jbml0IHtcclxuICAgIEBJbnB1dCgpIGN1c3RvbUZpZWxkOiBDdXN0b21GaWVsZENvbmZpZztcclxuICAgIEBJbnB1dCgpIHNvcnRzPzogRGF0YVRhYmxlU29ydENvbGxlY3Rpb248YW55LCBhbnlbXT47XHJcbiAgICBAVmlld0NoaWxkKFRlbXBsYXRlUmVmLCB7IHN0YXRpYzogZmFsc2UgfSkgdGVtcGxhdGU6IFRlbXBsYXRlUmVmPGFueT47XHJcbiAgICBwcm90ZWN0ZWQgdWlMYW5ndWFnZSQ6IE9ic2VydmFibGU8TGFuZ3VhZ2VDb2RlPjtcclxuICAgIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBkYXRhU2VydmljZTogRGF0YVNlcnZpY2UpIHtcclxuICAgICAgICBzdXBlcigpO1xyXG4gICAgICAgIHRoaXMudWlMYW5ndWFnZSQgPSB0aGlzLmRhdGFTZXJ2aWNlLmNsaWVudFxyXG4gICAgICAgICAgICAudWlTdGF0ZSgpXHJcbiAgICAgICAgICAgIC5zdHJlYW0kLnBpcGUobWFwKCh7IHVpU3RhdGUgfSkgPT4gdWlTdGF0ZS5sYW5ndWFnZSkpO1xyXG4gICAgfVxyXG5cclxuICAgIG5nT25Jbml0KCkge1xyXG4gICAgICAgIHRoaXMudWlMYW5ndWFnZSQuc3Vic2NyaWJlKHVpTGFuZ3VhZ2UgPT4ge1xyXG4gICAgICAgICAgICB0aGlzLmhlYWRpbmcgPVxyXG4gICAgICAgICAgICAgICAgQXJyYXkuaXNBcnJheSh0aGlzLmN1c3RvbUZpZWxkLmxhYmVsKSAmJiB0aGlzLmN1c3RvbUZpZWxkLmxhYmVsLmxlbmd0aCA+IDBcclxuICAgICAgICAgICAgICAgICAgICA/IHRoaXMuY3VzdG9tRmllbGQubGFiZWwuZmluZChsID0+IGwubGFuZ3VhZ2VDb2RlID09PSB1aUxhbmd1YWdlKT8udmFsdWUgPz9cclxuICAgICAgICAgICAgICAgICAgICAgIHRoaXMuY3VzdG9tRmllbGQubmFtZVxyXG4gICAgICAgICAgICAgICAgICAgIDogdGhpcy5jdXN0b21GaWVsZC5uYW1lO1xyXG4gICAgICAgIH0pO1xyXG4gICAgICAgIHRoaXMuaGlkZGVuQnlEZWZhdWx0ID0gdHJ1ZTtcclxuICAgICAgICB0aGlzLnNvcnQgPSB0aGlzLnNvcnRzPy5nZXQodGhpcy5jdXN0b21GaWVsZC5uYW1lKTtcclxuICAgICAgICB0aGlzLmlkID0gdGhpcy5jdXN0b21GaWVsZC5uYW1lO1xyXG4gICAgICAgIHN1cGVyLm5nT25Jbml0KCk7XHJcbiAgICB9XHJcbn1cclxuIiwiPG5nLXRlbXBsYXRlIGxldC1pdGVtPVwiaXRlbVwiPlxyXG4gICAgPG5nLWNvbnRhaW5lclxyXG4gICAgICAgICpuZ0lmPVwiaXRlbS5jdXN0b21GaWVsZHNbY3VzdG9tRmllbGQubmFtZV0gPT0gbnVsbCB8fCBpdGVtLmN1c3RvbUZpZWxkc1tjdXN0b21GaWVsZC5uYW1lXSA9PT0gJydcIlxyXG4gICAgPlxyXG4gICAgICAgIDxzcGFuIGNsYXNzPVwiZW1wdHlcIj4tPC9zcGFuPlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiaXRlbS5jdXN0b21GaWVsZHNbY3VzdG9tRmllbGQubmFtZV0gIT0gbnVsbFwiPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgW25nU3dpdGNoXT1cImN1c3RvbUZpZWxkLnR5cGVcIj5cclxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ2Jvb2xlYW4nXCI+XHJcbiAgICAgICAgICAgICAgICA8Y2xyLWljb25cclxuICAgICAgICAgICAgICAgICAgICAqbmdJZj1cIml0ZW0uY3VzdG9tRmllbGRzW2N1c3RvbUZpZWxkLm5hbWVdXCJcclxuICAgICAgICAgICAgICAgICAgICBzaGFwZT1cImNoZWNrXCJcclxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImNvbG9yLXN1Y2Nlc3MtNzAwXCJcclxuICAgICAgICAgICAgICAgID48L2Nsci1pY29uPlxyXG4gICAgICAgICAgICAgICAgPGNsci1pY29uICpuZ0lmPVwiIWl0ZW0uY3VzdG9tRmllbGRzW2N1c3RvbUZpZWxkLm5hbWVdXCIgc2hhcGU9XCJ0aW1lc1wiPjwvY2xyLWljb24+XHJcbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInZGF0ZXRpbWUnXCI+XHJcbiAgICAgICAgICAgICAgICB7eyBpdGVtLmN1c3RvbUZpZWxkc1tjdXN0b21GaWVsZC5uYW1lXSB8IGxvY2FsZURhdGUgfX1cclxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIid0ZXh0J1wiPlxyXG4gICAgICAgICAgICAgICAge3sgaXRlbS5jdXN0b21GaWVsZHNbY3VzdG9tRmllbGQubmFtZV0gfCBzbGljZSA6IDAgOiA1MCB9fVxyXG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ3JlbGF0aW9uJ1wiPlxyXG4gICAgICAgICAgICAgICAgPHZkci1kcm9wZG93bj5cclxuICAgICAgICAgICAgICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1saW5rIGJ0bi1pY29uXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgdmRyRHJvcGRvd25UcmlnZ2VyXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIFt0aXRsZV09XCInY29tbW9uLmRldGFpbHMnIHwgdHJhbnNsYXRlXCJcclxuICAgICAgICAgICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIDxjbHItaWNvbiBzaGFwZT1cImRldGFpbHNcIj48L2Nsci1pY29uPlxyXG4gICAgICAgICAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgICAgIDx2ZHItZHJvcGRvd24tbWVudT5cclxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInJlc3VsdC1kZXRhaWxcIj5cclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx2ZHItb2JqZWN0LXRyZWUgW3ZhbHVlXT1cIml0ZW0uY3VzdG9tRmllbGRzW2N1c3RvbUZpZWxkLm5hbWVdXCI+PC92ZHItb2JqZWN0LXRyZWU+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICAgICAgICAgIDwvdmRyLWRyb3Bkb3duLW1lbnU+XHJcbiAgICAgICAgICAgICAgICA8L3Zkci1kcm9wZG93bj5cclxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoRGVmYXVsdD5cclxuICAgICAgICAgICAgICAgIHt7IGl0ZW0uY3VzdG9tRmllbGRzW2N1c3RvbUZpZWxkLm5hbWVdIH19XHJcbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbjwvbmctdGVtcGxhdGU+XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS10YWJsZS1jdXN0b20tZmllbGQtY29sdW1uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29yZS9zcmMvc2hhcmVkL2NvbXBvbmVudHMvZGF0YS10YWJsZS0yL2RhdGEtdGFibGUtY3VzdG9tLWZpZWxkLWNvbHVtbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL2RhdGEtdGFibGUtMi9kYXRhLXRhYmxlLWN1c3RvbS1maWVsZC1jb2x1bW4uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBZ0IsS0FBSyxFQUFVLFdBQVcsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFL0YsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBSXJDLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQzNFLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLCtCQUErQixDQUFDOzs7Ozs7Ozs7OztBQUUxRSxNQUFNLFNBQVMsR0FBRyxJQUFJLG9CQUFvQixFQUFFLENBQUM7QUFRN0MsTUFBTSxPQUFPLG1DQUF1QyxTQUFRLHlCQUE0QjtJQUtwRixZQUFzQixXQUF3QjtRQUMxQyxLQUFLLEVBQUUsQ0FBQztRQURVLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBRTFDLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNO2FBQ3JDLE9BQU8sRUFBRTthQUNULE9BQU8sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUM7SUFDOUQsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUNwQyxJQUFJLENBQUMsT0FBTztnQkFDUixLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLENBQUM7b0JBQ3RFLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsWUFBWSxLQUFLLFVBQVUsQ0FBQyxFQUFFLEtBQUs7d0JBQ3RFLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSTtvQkFDdkIsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDO1FBQ3BDLENBQUMsQ0FBQyxDQUFDO1FBQ0gsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUM7UUFDNUIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLEdBQUcsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ25ELElBQUksQ0FBQyxFQUFFLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUM7UUFDaEMsSUFBSSxDQUFDLE9BQU8sR0FBRyxTQUFTLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDM0QsS0FBSyxDQUFDLFFBQVEsRUFBRSxDQUFDO0lBQ3JCLENBQUM7OEdBekJRLG1DQUFtQztrR0FBbkMsbUNBQW1DLHFLQUdqQyxXQUFXLDBGQ3BCMUIsMGpFQTRDQTs7MkZEM0JhLG1DQUFtQztrQkFOL0MsU0FBUzsrQkFDSSw2QkFBNkIsWUFHN0IsS0FBSztrR0FHTixXQUFXO3NCQUFuQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDcUMsUUFBUTtzQkFBbEQsU0FBUzt1QkFBQyxXQUFXLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGQsIElucHV0LCBPbkluaXQsIFRlbXBsYXRlUmVmLCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xyXG5pbXBvcnQgeyBtYXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XHJcbmltcG9ydCB7IEN1c3RvbUZpZWxkQ29uZmlnLCBMYW5ndWFnZUNvZGUgfSBmcm9tICcuLi8uLi8uLi9jb21tb24vZ2VuZXJhdGVkLXR5cGVzJztcclxuaW1wb3J0IHsgRGF0YVNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9kYXRhL3Byb3ZpZGVycy9kYXRhLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBEYXRhVGFibGVTb3J0Q29sbGVjdGlvbiB9IGZyb20gJy4uLy4uLy4uL3Byb3ZpZGVycy9kYXRhLXRhYmxlL2RhdGEtdGFibGUtc29ydC1jb2xsZWN0aW9uJztcclxuaW1wb3J0IHsgQ3VzdG9tRmllbGRMYWJlbFBpcGUgfSBmcm9tICcuLi8uLi9waXBlcy9jdXN0b20tZmllbGQtbGFiZWwucGlwZSc7XHJcbmltcG9ydCB7IERhdGFUYWJsZTJDb2x1bW5Db21wb25lbnQgfSBmcm9tICcuL2RhdGEtdGFibGUtY29sdW1uLmNvbXBvbmVudCc7XHJcblxyXG5jb25zdCBsYWJlbFBpcGUgPSBuZXcgQ3VzdG9tRmllbGRMYWJlbFBpcGUoKTtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICd2ZHItZHQyLWN1c3RvbS1maWVsZC1jb2x1bW4nLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2RhdGEtdGFibGUtY3VzdG9tLWZpZWxkLWNvbHVtbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9kYXRhLXRhYmxlLWN1c3RvbS1maWVsZC1jb2x1bW4uY29tcG9uZW50LnNjc3MnXSxcclxuICAgIGV4cG9ydEFzOiAncm93JyxcclxufSlcclxuZXhwb3J0IGNsYXNzIERhdGFUYWJsZUN1c3RvbUZpZWxkQ29sdW1uQ29tcG9uZW50PFQ+IGV4dGVuZHMgRGF0YVRhYmxlMkNvbHVtbkNvbXBvbmVudDxUPiBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgICBASW5wdXQoKSBjdXN0b21GaWVsZDogQ3VzdG9tRmllbGRDb25maWc7XHJcbiAgICBASW5wdXQoKSBzb3J0cz86IERhdGFUYWJsZVNvcnRDb2xsZWN0aW9uPGFueSwgYW55W10+O1xyXG4gICAgQFZpZXdDaGlsZChUZW1wbGF0ZVJlZiwgeyBzdGF0aWM6IGZhbHNlIH0pIHRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG4gICAgcHJvdGVjdGVkIHVpTGFuZ3VhZ2UkOiBPYnNlcnZhYmxlPExhbmd1YWdlQ29kZT47XHJcbiAgICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgZGF0YVNlcnZpY2U6IERhdGFTZXJ2aWNlKSB7XHJcbiAgICAgICAgc3VwZXIoKTtcclxuICAgICAgICB0aGlzLnVpTGFuZ3VhZ2UkID0gdGhpcy5kYXRhU2VydmljZS5jbGllbnRcclxuICAgICAgICAgICAgLnVpU3RhdGUoKVxyXG4gICAgICAgICAgICAuc3RyZWFtJC5waXBlKG1hcCgoeyB1aVN0YXRlIH0pID0+IHVpU3RhdGUubGFuZ3VhZ2UpKTtcclxuICAgIH1cclxuXHJcbiAgICBuZ09uSW5pdCgpIHtcclxuICAgICAgICB0aGlzLnVpTGFuZ3VhZ2UkLnN1YnNjcmliZSh1aUxhbmd1YWdlID0+IHtcclxuICAgICAgICAgICAgdGhpcy5oZWFkaW5nID1cclxuICAgICAgICAgICAgICAgIEFycmF5LmlzQXJyYXkodGhpcy5jdXN0b21GaWVsZC5sYWJlbCkgJiYgdGhpcy5jdXN0b21GaWVsZC5sYWJlbC5sZW5ndGggPiAwXHJcbiAgICAgICAgICAgICAgICAgICAgPyB0aGlzLmN1c3RvbUZpZWxkLmxhYmVsLmZpbmQobCA9PiBsLmxhbmd1YWdlQ29kZSA9PT0gdWlMYW5ndWFnZSk/LnZhbHVlID8/XHJcbiAgICAgICAgICAgICAgICAgICAgICB0aGlzLmN1c3RvbUZpZWxkLm5hbWVcclxuICAgICAgICAgICAgICAgICAgICA6IHRoaXMuY3VzdG9tRmllbGQubmFtZTtcclxuICAgICAgICB9KTtcclxuICAgICAgICB0aGlzLmhpZGRlbkJ5RGVmYXVsdCA9IHRydWU7XHJcbiAgICAgICAgdGhpcy5zb3J0ID0gdGhpcy5zb3J0cz8uZ2V0KHRoaXMuY3VzdG9tRmllbGQubmFtZSk7XHJcbiAgICAgICAgdGhpcy5pZCA9IHRoaXMuY3VzdG9tRmllbGQubmFtZTtcclxuICAgICAgICB0aGlzLmhlYWRpbmcgPSBsYWJlbFBpcGUudHJhbnNmb3JtKHRoaXMuY3VzdG9tRmllbGQsIG51bGwpO1xyXG4gICAgICAgIHN1cGVyLm5nT25Jbml0KCk7XHJcbiAgICB9XHJcbn1cclxuIiwiPG5nLXRlbXBsYXRlIGxldC1pdGVtPVwiaXRlbVwiPlxyXG4gICAgPG5nLWNvbnRhaW5lclxyXG4gICAgICAgICpuZ0lmPVwiaXRlbS5jdXN0b21GaWVsZHNbY3VzdG9tRmllbGQubmFtZV0gPT0gbnVsbCB8fCBpdGVtLmN1c3RvbUZpZWxkc1tjdXN0b21GaWVsZC5uYW1lXSA9PT0gJydcIlxyXG4gICAgPlxyXG4gICAgICAgIDxzcGFuIGNsYXNzPVwiZW1wdHlcIj4tPC9zcGFuPlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbiAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiaXRlbS5jdXN0b21GaWVsZHNbY3VzdG9tRmllbGQubmFtZV0gIT0gbnVsbFwiPlxyXG4gICAgICAgIDxuZy1jb250YWluZXIgW25nU3dpdGNoXT1cImN1c3RvbUZpZWxkLnR5cGVcIj5cclxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ2Jvb2xlYW4nXCI+XHJcbiAgICAgICAgICAgICAgICA8Y2xyLWljb25cclxuICAgICAgICAgICAgICAgICAgICAqbmdJZj1cIml0ZW0uY3VzdG9tRmllbGRzW2N1c3RvbUZpZWxkLm5hbWVdXCJcclxuICAgICAgICAgICAgICAgICAgICBzaGFwZT1cImNoZWNrXCJcclxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImNvbG9yLXN1Y2Nlc3MtNzAwXCJcclxuICAgICAgICAgICAgICAgID48L2Nsci1pY29uPlxyXG4gICAgICAgICAgICAgICAgPGNsci1pY29uICpuZ0lmPVwiIWl0ZW0uY3VzdG9tRmllbGRzW2N1c3RvbUZpZWxkLm5hbWVdXCIgc2hhcGU9XCJ0aW1lc1wiPjwvY2xyLWljb24+XHJcbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCInZGF0ZXRpbWUnXCI+XHJcbiAgICAgICAgICAgICAgICB7eyBpdGVtLmN1c3RvbUZpZWxkc1tjdXN0b21GaWVsZC5uYW1lXSB8IGxvY2FsZURhdGUgfX1cclxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIid0ZXh0J1wiPlxyXG4gICAgICAgICAgICAgICAge3sgaXRlbS5jdXN0b21GaWVsZHNbY3VzdG9tRmllbGQubmFtZV0gfCBzbGljZSA6IDAgOiA1MCB9fVxyXG4gICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ3JlbGF0aW9uJ1wiPlxyXG4gICAgICAgICAgICAgICAgPHZkci1kcm9wZG93bj5cclxuICAgICAgICAgICAgICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1saW5rIGJ0bi1pY29uXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgdmRyRHJvcGRvd25UcmlnZ2VyXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIFt0aXRsZV09XCInY29tbW9uLmRldGFpbHMnIHwgdHJhbnNsYXRlXCJcclxuICAgICAgICAgICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIDxjbHItaWNvbiBzaGFwZT1cImRldGFpbHNcIj48L2Nsci1pY29uPlxyXG4gICAgICAgICAgICAgICAgICAgIDwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgICAgIDx2ZHItZHJvcGRvd24tbWVudT5cclxuICAgICAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInJlc3VsdC1kZXRhaWxcIj5cclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx2ZHItb2JqZWN0LXRyZWUgW3ZhbHVlXT1cIml0ZW0uY3VzdG9tRmllbGRzW2N1c3RvbUZpZWxkLm5hbWVdXCI+PC92ZHItb2JqZWN0LXRyZWU+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICAgICAgICAgIDwvdmRyLWRyb3Bkb3duLW1lbnU+XHJcbiAgICAgICAgICAgICAgICA8L3Zkci1kcm9wZG93bj5cclxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoRGVmYXVsdD5cclxuICAgICAgICAgICAgICAgIHt7IGl0ZW0uY3VzdG9tRmllbGRzW2N1c3RvbUZpZWxkLm5hbWVdIH19XHJcbiAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgPC9uZy1jb250YWluZXI+XHJcbjwvbmctdGVtcGxhdGU+XHJcbiJdfQ==

package/esm2022/core/shared/components/data-table-2/data-table-search.component.mjs

@@ -5,7 +5,7 @@ import * as i2 from "@angular/forms";
 import * as i3 from "../form-field/form-field-control.directive";
 export class DataTable2SearchComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTable2SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: { searchTermControl: "searchTermControl", searchTermPlaceholder: "searchTermPlaceholder" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template #vdrDt2Search>\r\n    <div class=\"search-wrapper\">\r\n        <clr-icon shape=\"search\" class=\"search-icon\"></clr-icon>\r\n        <input [formControl]=\"searchTermControl\" [placeholder]=\"searchTermPlaceholder\" />\r\n    </div>\r\n</ng-template>\r\n", styles: [".search-wrapper{position:relative}.search-wrapper .search-icon{position:absolute;top:50%;transform:translateY(-50%);left:8px;color:var(--color-weight-600)}.search-wrapper>input{padding-inline-start:32px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormFieldControlDirective, selector: "input, textarea, select" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: { searchTermControl: "searchTermControl", searchTermPlaceholder: "searchTermPlaceholder" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: "<ng-template #vdrDt2Search>\r\n    <div class=\"search-wrapper\">\r\n        <clr-icon shape=\"search\" class=\"search-icon\"></clr-icon>\r\n        <input [formControl]=\"searchTermControl\" [placeholder]=\"searchTermPlaceholder\" />\r\n    </div>\r\n</ng-template>\r\n", styles: [".search-wrapper{position:relative}.search-wrapper .search-icon{position:absolute;top:50%;transform:translateY(-50%);left:8px;color:var(--color-weight-600)}.search-wrapper>input{padding-inline-start:32px!important;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTable2SearchComponent, decorators: [{
             type: Component,

package/esm2022/core/shared/components/data-table-2/data-table2.component.mjs

@@ -261,7 +261,7 @@ export class DataTable2Component {
         return dataTableConfig;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTable2Component, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalStorageService }, { token: i2.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTable2Component, selector: "vdr-data-table-2", inputs: { id: "id", items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", emptyStateLabel: "emptyStateLabel", filters: "filters", activeIndex: "activeIndex" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, providers: [PaginationService, FilterPresetService], queries: [{ propertyName: "searchComponent", first: true, predicate: DataTable2SearchComponent, descendants: true }, { propertyName: "bulkActionMenuComponent", first: true, predicate: BulkActionMenuComponent, descendants: true }, { propertyName: "customSearchTemplate", first: true, predicate: ["vdrDt2CustomSearch"], descendants: true }, { propertyName: "columns", predicate: DataTable2ColumnComponent }, { propertyName: "customFieldColumns", predicate: DataTableCustomFieldColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\r\n    *ngIf=\"filters\"\r\n    [filters]=\"filters\"\r\n    [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n    <div class=\"bulk-actions\">\r\n        <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-add-filter-preset-button\r\n                                    [filters]=\"filters\"\r\n                                    [dataTableId]=\"id\"\r\n                                ></vdr-add-filter-preset-button>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                        >\r\n                            <ng-container\r\n                                *ngComponentOutlet=\"\r\n                                    componentConfig.config.component;\r\n                                    inputs: { rowItem: item };\r\n                                    injector: componentConfig.injector\r\n                                \"\r\n                            ></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #defaultComponent>\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                            ></ng-container>\r\n                        </ng-template>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i6.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i7.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i8.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i9.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i10.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i11.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: i12.DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: i13.AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i15.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTable2Component, selector: "vdr-data-table-2", inputs: { id: "id", items: "items", itemsPerPage: "itemsPerPage", currentPage: "currentPage", totalItems: "totalItems", emptyStateLabel: "emptyStateLabel", filters: "filters", activeIndex: "activeIndex" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange" }, providers: [PaginationService, FilterPresetService], queries: [{ propertyName: "searchComponent", first: true, predicate: DataTable2SearchComponent, descendants: true }, { propertyName: "bulkActionMenuComponent", first: true, predicate: BulkActionMenuComponent, descendants: true }, { propertyName: "customSearchTemplate", first: true, predicate: ["vdrDt2CustomSearch"], descendants: true }, { propertyName: "columns", predicate: DataTable2ColumnComponent }, { propertyName: "customFieldColumns", predicate: DataTableCustomFieldColumnComponent }, { propertyName: "templateRefs", predicate: TemplateRef }], usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\r\n    *ngIf=\"filters\"\r\n    [filters]=\"filters\"\r\n    [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n    <div class=\"bulk-actions\">\r\n        <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                        (change)=\"onToggleAllClick()\"\r\n                    />\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-add-filter-preset-button\r\n                                    [filters]=\"filters\"\r\n                                    [dataTableId]=\"id\"\r\n                                ></vdr-add-filter-preset-button>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr\r\n                *ngFor=\"\r\n                    let item of items\r\n                        | paginate\r\n                            : {\r\n                                  id: id,\r\n                                  itemsPerPage: itemsPerPage,\r\n                                  currentPage: currentPage,\r\n                                  totalItems: totalItems\r\n                              };\r\n                    index as i;\r\n                    trackBy: trackByFn\r\n                \"\r\n            >\r\n                <td *ngIf=\"selectionManager\" class=\"selection-col\" [class.active]=\"activeIndex === i\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrCheckbox\r\n                        [checked]=\"selectionManager?.isSelected(item)\"\r\n                        (click)=\"onRowClick(item, $event)\"\r\n                    />\r\n                </td>\r\n                <td *ngFor=\"let column of visibleSortedColumns\" [class.active]=\"activeIndex === i\">\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <ng-container\r\n                            *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                        >\r\n                            <ng-container\r\n                                *ngComponentOutlet=\"\r\n                                    componentConfig.config.component;\r\n                                    inputs: { rowItem: item };\r\n                                    injector: componentConfig.injector\r\n                                \"\r\n                            ></ng-container>\r\n                        </ng-container>\r\n                        <ng-template #defaultComponent>\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { item: item, index: i }\"\r\n                            ></ng-container>\r\n                        </ng-template>\r\n                    </div>\r\n                </td>\r\n                <td [class.active]=\"activeIndex === i\"><!-- column select --></td>\r\n            </tr>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i6.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i7.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i8.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i9.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i10.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i11.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: i12.DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: i13.AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i15.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTable2Component, decorators: [{
             type: Component,

package/esm2022/core/shared/components/data-table-column-picker/data-table-column-picker.component.mjs

@@ -27,7 +27,7 @@ export class DataTableColumnPickerComponent {
         this.resetColumns.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableColumnPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: { columns: "columns", uiLanguage: "uiLanguage" }, outputs: { reorder: "reorder", resetColumns: "resetColumns" }, ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\">\r\n    <button class=\"button-small\" vdrDropdownTrigger [title]=\"'common.select-table-columns' | translate\">\r\n        <clr-icon shape=\"view-columns\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n            <div\r\n                *ngFor=\"let column of columns; index as i\"\r\n                class=\"mx-2 column-list\"\r\n                cdkDrag\r\n                cdkDragLockAxis=\"y\"\r\n                [cdkDragData]=\"column\"\r\n            >\r\n                <div cdkDragHandle class=\"drag-handle\" [cdkDragHandleDisabled]=\"column.orderable === false\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <label class=\"flex\">\r\n                    <clr-checkbox-container>\r\n                        <clr-checkbox-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrCheckbox\r\n                                [disabled]=\"column.optional === false\"\r\n                                [indeterminate]=\"column.optional === false\"\r\n                                [checked]=\"column.visible\"\r\n                                (change)=\"toggleColumn(column)\"\r\n                                class=\"mr-1\"\r\n                            />\r\n                            <label>{{ column.heading | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </clr-checkbox-container>\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-1 pt-1 mx-1 flex center reset-button\">\r\n            <button class=\"button-small\" (click)=\"reset()\">\r\n                <span>{{ 'common.reset-columns' | translate }}</span>\r\n                <clr-icon shape=\"history\"></clr-icon>\r\n            </button>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".column-list{display:flex;align-items:center}.drag-handle{cursor:grab;margin-top:-4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.reset-button{border-top:1px solid var(--color-weight-125)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i5.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i6.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i7.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: { columns: "columns", uiLanguage: "uiLanguage" }, outputs: { reorder: "reorder", resetColumns: "resetColumns" }, ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\">\r\n    <button class=\"button-small\" vdrDropdownTrigger [title]=\"'common.select-table-columns' | translate\">\r\n        <clr-icon shape=\"view-columns\"></clr-icon>\r\n    </button>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\r\n            <div\r\n                *ngFor=\"let column of columns; index as i\"\r\n                class=\"mx-2 column-list\"\r\n                cdkDrag\r\n                cdkDragLockAxis=\"y\"\r\n                [cdkDragData]=\"column\"\r\n            >\r\n                <div cdkDragHandle class=\"drag-handle\" [cdkDragHandleDisabled]=\"column.orderable === false\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <label class=\"flex\">\r\n                    <clr-checkbox-container>\r\n                        <clr-checkbox-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrCheckbox\r\n                                [disabled]=\"column.optional === false\"\r\n                                [indeterminate]=\"column.optional === false\"\r\n                                [checked]=\"column.visible\"\r\n                                (change)=\"toggleColumn(column)\"\r\n                                class=\"mr-1\"\r\n                            />\r\n                            <label>{{ column.heading | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </clr-checkbox-container>\r\n                </label>\r\n            </div>\r\n        </div>\r\n        <div class=\"mt-1 pt-1 mx-1 flex center reset-button\">\r\n            <button class=\"button-small\" (click)=\"reset()\">\r\n                <span>{{ 'common.reset-columns' | translate }}</span>\r\n                <clr-icon shape=\"history\"></clr-icon>\r\n            </button>\r\n        </div>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".column-list{display:flex;align-items:center}.drag-handle{cursor:grab;margin-top:-4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.reset-button{border-top:1px solid var(--color-weight-125)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i5.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i6.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i7.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableColumnPickerComponent, decorators: [{
             type: Component,

package/esm2022/core/shared/components/data-table-filter-presets/add-filter-preset-button.component.mjs

@@ -51,7 +51,7 @@ export class AddFilterPresetButtonComponent {
             .find(p => p.value === this.filters.serialize())?.name;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AddFilterPresetButtonComponent, deps: [{ token: i1.FilterPresetService }, { token: i0.ChangeDetectorRef }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: { dataTableId: "dataTableId", filters: "filters" }, viewQueries: [{ propertyName: "addPresetDropdown", first: true, predicate: ["addPresetDropdown"], descendants: true }], ngImport: i0, template: "<vdr-dropdown #addPresetDropdown>\r\n    <button\r\n        class=\"add-preset-button mt-1\"\r\n        vdrDropdownTrigger\r\n        [class.visible]=\"filters.activeFilters.length > 0 && !selectedFilterPreset\"\r\n        [disabled]=\"filters.activeFilters.length === 0 || !!selectedFilterPreset\"\r\n    >\r\n        <clr-icon shape=\"floppy\"/>\r\n        <div>{{ 'common.save-filter-preset' | translate }}</div>\r\n    </button>\r\n    <vdr-dropdown-menu\r\n        vdrPosition=\"bottom-left\"\r\n        [cdkTrapFocus]=\"true\"\r\n        [cdkTrapFocusAutoCapture]=\"true\"\r\n    >\r\n        <form class=\"mx-1\">\r\n            <div>\r\n                <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"'common.filter-preset-name' | translate\"\r\n                    [formControl]=\"filterPresetName\"\r\n                />\r\n            </div>\r\n            <div class=\"preset-create-row\">\r\n                <button class=\"button mt-2\" (click)=\"saveFilterPreset()\">\r\n                    {{ 'common.create' | translate }}\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".add-preset-button{display:flex;flex-direction:row;cursor:pointer;gap:6px;align-items:center;border:none;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text);opacity:0;transition:opacity .2s}.add-preset-button.visible{opacity:1}.preset-create-row{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i7.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i8.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i9.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: { dataTableId: "dataTableId", filters: "filters" }, viewQueries: [{ propertyName: "addPresetDropdown", first: true, predicate: ["addPresetDropdown"], descendants: true }], ngImport: i0, template: "<vdr-dropdown #addPresetDropdown>\r\n    <button\r\n        class=\"add-preset-button mt-1\"\r\n        vdrDropdownTrigger\r\n        [class.visible]=\"filters.activeFilters.length > 0 && !selectedFilterPreset\"\r\n        [disabled]=\"filters.activeFilters.length === 0 || !!selectedFilterPreset\"\r\n    >\r\n        <clr-icon shape=\"floppy\"/>\r\n        <div>{{ 'common.save-filter-preset' | translate }}</div>\r\n    </button>\r\n    <vdr-dropdown-menu\r\n        vdrPosition=\"bottom-left\"\r\n        [cdkTrapFocus]=\"true\"\r\n        [cdkTrapFocusAutoCapture]=\"true\"\r\n    >\r\n        <form class=\"mx-1\">\r\n            <div>\r\n                <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"'common.filter-preset-name' | translate\"\r\n                    [formControl]=\"filterPresetName\"\r\n                />\r\n            </div>\r\n            <div class=\"preset-create-row\">\r\n                <button class=\"button mt-2\" (click)=\"saveFilterPreset()\">\r\n                    {{ 'common.create' | translate }}\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [".add-preset-button{display:flex;flex-direction:row;cursor:pointer;gap:6px;align-items:center;border:none;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text);opacity:0;transition:opacity .2s}.add-preset-button.visible{opacity:1}.preset-create-row{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i6.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i7.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i8.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i9.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AddFilterPresetButtonComponent, decorators: [{
             type: Component,

package/esm2022/core/shared/components/data-table-filter-presets/rename-filter-preset-dialog.component.mjs

@@ -11,7 +11,7 @@ export class RenameFilterPresetDialogComponent {
         this.resolveWith(this.name);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RenameFilterPresetDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RenameFilterPresetDialogComponent, selector: "vdr-rename-filter-preset-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.rename-filter-preset' | translate }}\r\n</ng-template>\r\n    <vdr-form-field>\r\n        <input type=\"text\" [(ngModel)]=\"name\">\r\n    </vdr-form-field>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"rename()\" [disabled]=\"!name\" class=\"button primary\">\r\n       {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i3.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i4.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i5.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RenameFilterPresetDialogComponent, selector: "vdr-rename-filter-preset-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.rename-filter-preset' | translate }}\r\n</ng-template>\r\n    <vdr-form-field>\r\n        <input type=\"text\" [(ngModel)]=\"name\">\r\n    </vdr-form-field>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"rename()\" [disabled]=\"!name\" class=\"button primary\">\r\n       {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i3.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i4.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i5.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RenameFilterPresetDialogComponent, decorators: [{
             type: Component,

package/esm2022/core/shared/components/data-table-filters/data-table-filters.component.mjs

@@ -197,7 +197,7 @@ export class DataTableFiltersComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableFiltersComponent, deps: [{ token: i1.I18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: { filters: "filters", filterWithValue: "filterWithValue" }, host: { listeners: { "window:keydown.f": "onFKeyPress($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "customComponentHost", first: true, predicate: ["customComponentHost"], descendants: true, read: CustomFilterComponentDirective }], ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\r\n    <div class=\"filter-button\" [ngClass]=\"state\">\r\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\r\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <button vdrDropdownTrigger class=\"\">\r\n            <span *ngIf=\"state === 'new'\"\r\n                >{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span\r\n            >\r\n            <span *ngIf=\"state === 'active'\">\r\n                <vdr-data-table-filter-label\r\n                    [filterWithValue]=\"filterWithValue\"\r\n                ></vdr-data-table-filter-label>\r\n            </span>\r\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div *ngIf=\"!selectedFilter\">\r\n            <div class=\"filter-heading\">Filter by:</div>\r\n            <div *ngFor=\"let filter of filters.getFilters()\">\r\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\r\n                    <vdr-localized-text [text]=\"filter?.label\" />\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\r\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\r\n        </div>\r\n        <div class=\"mx-2 mt-1\">\r\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\r\n        </div>\r\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\r\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\r\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\r\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\r\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\r\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\r\n                            <span>{{ option.label | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'boolean'\">\r\n                        <label\r\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\r\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\r\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'text'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"contains\">\r\n                                        {{ 'common.operator-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notContains\">\r\n                                        {{ 'common.operator-not-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'id'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'number'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\r\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\r\n                                type=\"text\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                            <vdr-currency-input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'dateRange'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <vdr-form-field [label]=\"'common.data-table-filter-date-mode' | translate\">\r\n                                <select name=\"mode\" formControlName=\"mode\" class=\"mb-1\">\r\n                                    <option value=\"relative\">\r\n                                        {{ 'common.data-table-filter-date-relative' | translate }}\r\n                                    </option>\r\n                                    <option value=\"range\">\r\n                                        {{ 'common.data-table-filter-date-range' | translate }}\r\n                                    </option>\r\n                                </select>\r\n                            </vdr-form-field>\r\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'relative'\">\r\n                                <div class=\"flex mt-2\">\r\n                                    <vdr-form-field class=\"mr-1\">\r\n                                        <input type=\"number\" min=\"1\" formControlName=\"relativeValue\" />\r\n                                    </vdr-form-field>\r\n                                    <vdr-form-field>\r\n                                        <select name=\"mode\" formControlName=\"relativeUnit\">\r\n                                            <option value=\"day\">{{ 'datetime.day' | translate }}</option>\r\n                                            <option value=\"month\">{{ 'datetime.month' | translate }}</option>\r\n                                            <option value=\"year\">{{ 'datetime.year' | translate }}</option>\r\n                                        </select>\r\n                                    </vdr-form-field>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'range'\">\r\n                                <label>\r\n                                    <div>{{ 'common.start-date' | translate }}</div>\r\n                                </label>\r\n                                <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\r\n                                <label>\r\n                                    <div>{{ 'common.end-date' | translate }}</div>\r\n                                </label>\r\n                                <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"apply-wrapper mt-2\">\r\n                <button class=\"button\" (click)=\"activate($event)\" [disabled]=\"!formControl?.valid\">\r\n                    <span>{{ 'common.apply' | translate }}</span>\r\n                    <clr-icon shape=\"check\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-inline-end:calc(var(--space-unit) * 2)}.filter-hotkey{font-size:var(--font-size-xs);color:var(--color-weight-500);border:1px solid var(--color-weight-200);background-color:var(--color-weight-100);border-radius:var(--border-radius);padding:0 3px;text-transform:uppercase;margin-inline-start:3px}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i6.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i7.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i8.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i9.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i10.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i11.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i12.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i13.DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }, { kind: "component", type: i14.DataTableFilterLabelComponent, selector: "vdr-data-table-filter-label", inputs: ["filterWithValue"] }, { kind: "directive", type: i15.CustomFilterComponentDirective, selector: "[vdrCustomFilterComponentHost]" }, { kind: "component", type: i16.LocalizedTextComponent, selector: "vdr-localized-text", inputs: ["text"] }, { kind: "pipe", type: i17.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: { filters: "filters", filterWithValue: "filterWithValue" }, host: { listeners: { "window:keydown.f": "onFKeyPress($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "customComponentHost", first: true, predicate: ["customComponentHost"], descendants: true, read: CustomFilterComponentDirective }], ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\r\n    <div class=\"filter-button\" [ngClass]=\"state\">\r\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\r\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <button vdrDropdownTrigger class=\"\">\r\n            <span *ngIf=\"state === 'new'\"\r\n                >{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span\r\n            >\r\n            <span *ngIf=\"state === 'active'\">\r\n                <vdr-data-table-filter-label\r\n                    [filterWithValue]=\"filterWithValue\"\r\n                ></vdr-data-table-filter-label>\r\n            </span>\r\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div *ngIf=\"!selectedFilter\">\r\n            <div class=\"filter-heading\">Filter by:</div>\r\n            <div *ngFor=\"let filter of filters.getFilters()\">\r\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\r\n                    <vdr-localized-text [text]=\"filter?.label\" />\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\r\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\r\n        </div>\r\n        <div class=\"mx-2 mt-1\">\r\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\r\n        </div>\r\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\r\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\r\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\r\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\r\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\r\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\r\n                            <span>{{ option.label | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'boolean'\">\r\n                        <label\r\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\r\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\r\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'text'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"contains\">\r\n                                        {{ 'common.operator-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notContains\">\r\n                                        {{ 'common.operator-not-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'id'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'number'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\r\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\r\n                                type=\"text\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                            <vdr-currency-input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'dateRange'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <vdr-form-field [label]=\"'common.data-table-filter-date-mode' | translate\">\r\n                                <select name=\"mode\" formControlName=\"mode\" class=\"mb-1\">\r\n                                    <option value=\"relative\">\r\n                                        {{ 'common.data-table-filter-date-relative' | translate }}\r\n                                    </option>\r\n                                    <option value=\"range\">\r\n                                        {{ 'common.data-table-filter-date-range' | translate }}\r\n                                    </option>\r\n                                </select>\r\n                            </vdr-form-field>\r\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'relative'\">\r\n                                <div class=\"flex mt-2\">\r\n                                    <vdr-form-field class=\"mr-1\">\r\n                                        <input type=\"number\" min=\"1\" formControlName=\"relativeValue\" />\r\n                                    </vdr-form-field>\r\n                                    <vdr-form-field>\r\n                                        <select name=\"mode\" formControlName=\"relativeUnit\">\r\n                                            <option value=\"day\">{{ 'datetime.day' | translate }}</option>\r\n                                            <option value=\"month\">{{ 'datetime.month' | translate }}</option>\r\n                                            <option value=\"year\">{{ 'datetime.year' | translate }}</option>\r\n                                        </select>\r\n                                    </vdr-form-field>\r\n                                </div>\r\n                            </ng-container>\r\n                            <ng-container *ngIf=\"formControl.get('mode')?.value === 'range'\">\r\n                                <label>\r\n                                    <div>{{ 'common.start-date' | translate }}</div>\r\n                                </label>\r\n                                <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\r\n                                <label>\r\n                                    <div>{{ 'common.end-date' | translate }}</div>\r\n                                </label>\r\n                                <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"apply-wrapper mt-2\">\r\n                <button class=\"button\" (click)=\"activate($event)\" [disabled]=\"!formControl?.valid\">\r\n                    <span>{{ 'common.apply' | translate }}</span>\r\n                    <clr-icon shape=\"check\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-inline-end:calc(var(--space-unit) * 2)}.filter-hotkey{font-size:var(--font-size-xs);color:var(--color-weight-500);border:1px solid var(--color-weight-200);background-color:var(--color-weight-100);border-radius:var(--border-radius);padding:0 3px;text-transform:uppercase;margin-inline-start:3px}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i6.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i7.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i8.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i9.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i10.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i11.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i12.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: i13.DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }, { kind: "component", type: i14.DataTableFilterLabelComponent, selector: "vdr-data-table-filter-label", inputs: ["filterWithValue"] }, { kind: "directive", type: i15.CustomFilterComponentDirective, selector: "[vdrCustomFilterComponentHost]" }, { kind: "component", type: i16.LocalizedTextComponent, selector: "vdr-localized-text", inputs: ["text"] }, { kind: "pipe", type: i17.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableFiltersComponent, decorators: [{
             type: Component,