@vendure/admin-ui 2.0.5 → 2.1.0-next.0

package/esm2022/core/shared/components/edit-note-dialog/edit-note-dialog.component.mjs

@@ -23,10 +23,10 @@ export class EditNoteDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: EditNoteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: EditNoteDialogComponent, selector: "vdr-edit-note-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-right:6px}\n"], dependencies: [{ kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i5.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i6.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: EditNoteDialogComponent, selector: "vdr-edit-note-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i5.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i6.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: EditNoteDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-edit-note-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-right:6px}\n"] }]
+            args: [{ selector: 'vdr-edit-note-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'common.edit-note' | translate }}\r\n</ng-template>\r\n\r\n<textarea [(ngModel)]=\"note\" name=\"note\" class=\"note\"></textarea>\r\n<div class=\"visibility-select\" *ngIf=\"displayPrivacyControls\">\r\n    <clr-checkbox-wrapper>\r\n        <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"noteIsPrivate\" />\r\n        <label>{{ 'order.note-is-private' | translate }}</label>\r\n    </clr-checkbox-wrapper>\r\n    <span *ngIf=\"noteIsPrivate\" class=\"private\">\r\n        {{ 'order.note-only-visible-to-administrators' | translate }}\r\n    </span>\r\n    <span *ngIf=\"!noteIsPrivate\" class=\"public\">\r\n        {{ 'order.note-visible-to-customer' | translate }}\r\n    </span>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"note.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [".visibility-select{display:flex;justify-content:space-between;align-items:baseline}.visibility-select .public{color:var(--color-warning-500)}.visibility-select .private{color:var(--color-success-500)}textarea.note{width:100%;height:72px;border-radius:3px;margin-inline-end:6px}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdC1ub3RlLWRpYWxvZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL2VkaXQtbm90ZS1kaWFsb2cvZWRpdC1ub3RlLWRpYWxvZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL2VkaXQtbm90ZS1kaWFsb2cvZWRpdC1ub3RlLWRpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7Ozs7Ozs7QUFVM0UsTUFBTSxPQUFPLHVCQUF1QjtJQU5wQztRQU9JLDJCQUFzQixHQUFHLElBQUksQ0FBQztRQUM5QixrQkFBYSxHQUFHLElBQUksQ0FBQztRQUNyQixTQUFJLEdBQUcsRUFBRSxDQUFDO0tBYWI7SUFWRyxPQUFPO1FBQ0gsSUFBSSxDQUFDLFdBQVcsQ0FBQztZQUNiLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtZQUNmLFNBQVMsRUFBRSxJQUFJLENBQUMsYUFBYTtTQUNoQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsTUFBTTtRQUNGLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUN2QixDQUFDOzhHQWZRLHVCQUF1QjtrR0FBdkIsdUJBQXVCLDREQ1ZwQyx1akNBdUJBOzsyRkRiYSx1QkFBdUI7a0JBTm5DLFNBQVM7K0JBQ0ksc0JBQXNCLG1CQUdmLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbmltcG9ydCB7IERpYWxvZyB9IGZyb20gJy4uLy4uLy4uL3Byb3ZpZGVycy9tb2RhbC9tb2RhbC50eXBlcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAndmRyLWVkaXQtbm90ZS1kaWFsb2cnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2VkaXQtbm90ZS1kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vZWRpdC1ub3RlLWRpYWxvZy5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBFZGl0Tm90ZURpYWxvZ0NvbXBvbmVudCBpbXBsZW1lbnRzIERpYWxvZzx7IG5vdGU6IHN0cmluZzsgaXNQcml2YXRlPzogYm9vbGVhbiB9PiB7XHJcbiAgICBkaXNwbGF5UHJpdmFjeUNvbnRyb2xzID0gdHJ1ZTtcclxuICAgIG5vdGVJc1ByaXZhdGUgPSB0cnVlO1xyXG4gICAgbm90ZSA9ICcnO1xyXG4gICAgcmVzb2x2ZVdpdGg6IChyZXN1bHQ/OiB7IG5vdGU6IHN0cmluZzsgaXNQcml2YXRlPzogYm9vbGVhbiB9KSA9PiB2b2lkO1xyXG5cclxuICAgIGNvbmZpcm0oKSB7XHJcbiAgICAgICAgdGhpcy5yZXNvbHZlV2l0aCh7XHJcbiAgICAgICAgICAgIG5vdGU6IHRoaXMubm90ZSxcclxuICAgICAgICAgICAgaXNQcml2YXRlOiB0aGlzLm5vdGVJc1ByaXZhdGUsXHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgY2FuY2VsKCkge1xyXG4gICAgICAgIHRoaXMucmVzb2x2ZVdpdGgoKTtcclxuICAgIH1cclxufVxyXG4iLCI8bmctdGVtcGxhdGUgdmRyRGlhbG9nVGl0bGU+XHJcbiAgICB7eyAnY29tbW9uLmVkaXQtbm90ZScgfCB0cmFuc2xhdGUgfX1cclxuPC9uZy10ZW1wbGF0ZT5cclxuXHJcbjx0ZXh0YXJlYSBbKG5nTW9kZWwpXT1cIm5vdGVcIiBuYW1lPVwibm90ZVwiIGNsYXNzPVwibm90ZVwiPjwvdGV4dGFyZWE+XHJcbjxkaXYgY2xhc3M9XCJ2aXNpYmlsaXR5LXNlbGVjdFwiICpuZ0lmPVwiZGlzcGxheVByaXZhY3lDb250cm9sc1wiPlxyXG4gICAgPGNsci1jaGVja2JveC13cmFwcGVyPlxyXG4gICAgICAgIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIiBjbHJDaGVja2JveCBbKG5nTW9kZWwpXT1cIm5vdGVJc1ByaXZhdGVcIiAvPlxyXG4gICAgICAgIDxsYWJlbD57eyAnb3JkZXIubm90ZS1pcy1wcml2YXRlJyB8IHRyYW5zbGF0ZSB9fTwvbGFiZWw+XHJcbiAgICA8L2Nsci1jaGVja2JveC13cmFwcGVyPlxyXG4gICAgPHNwYW4gKm5nSWY9XCJub3RlSXNQcml2YXRlXCIgY2xhc3M9XCJwcml2YXRlXCI+XHJcbiAgICAgICAge3sgJ29yZGVyLm5vdGUtb25seS12aXNpYmxlLXRvLWFkbWluaXN0cmF0b3JzJyB8IHRyYW5zbGF0ZSB9fVxyXG4gICAgPC9zcGFuPlxyXG4gICAgPHNwYW4gKm5nSWY9XCIhbm90ZUlzUHJpdmF0ZVwiIGNsYXNzPVwicHVibGljXCI+XHJcbiAgICAgICAge3sgJ29yZGVyLm5vdGUtdmlzaWJsZS10by1jdXN0b21lcicgfCB0cmFuc2xhdGUgfX1cclxuICAgIDwvc3Bhbj5cclxuPC9kaXY+XHJcbjxuZy10ZW1wbGF0ZSB2ZHJEaWFsb2dCdXR0b25zPlxyXG4gICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJidG5cIiAoY2xpY2spPVwiY2FuY2VsKClcIj57eyAnY29tbW9uLmNhbmNlbCcgfCB0cmFuc2xhdGUgfX08L2J1dHRvbj5cclxuICAgIDxidXR0b24gdHlwZT1cInN1Ym1pdFwiIChjbGljayk9XCJjb25maXJtKClcIiBjbGFzcz1cImJ0biBidG4tcHJpbWFyeVwiIFtkaXNhYmxlZF09XCJub3RlLmxlbmd0aCA9PT0gMFwiPlxyXG4gICAgICAgIHt7ICdjb21tb24uY29uZmlybScgfCB0cmFuc2xhdGUgfX1cclxuICAgIDwvYnV0dG9uPlxyXG48L25nLXRlbXBsYXRlPlxyXG4iXX0=

package/esm2022/core/shared/components/facet-value-chip/facet-value-chip.component.mjs

@@ -9,11 +9,11 @@ export class FacetValueChipComponent {
         this.remove = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FacetValueChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: { facetValue: "facetValue", removable: "removable", displayFacetName: "displayFacetName" }, outputs: { remove: "remove" }, ngImport: i0, template: "<vdr-chip\r\n    [icon]=\"removable ? 'times' : undefined\"\r\n    [colorFrom]=\"facetValue.facet.name\"\r\n    (iconClick)=\"remove.emit()\"\r\n    [title]=\"facetValue.facet.name + ' - ' + facetValue.name\"\r\n>\r\n    <span *ngIf=\"displayFacetName\" class=\"facet-name\">{{ facetValue.facet.name }}</span>\r\n    <span>{{ facetValue.name }}</span>\r\n</vdr-chip>\r\n", styles: [":host{display:inline-block}.facet-name{color:var(--color-grey-100);text-transform:uppercase;font-size:10px;margin-right:3px;height:11px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: { facetValue: "facetValue", removable: "removable", displayFacetName: "displayFacetName" }, outputs: { remove: "remove" }, ngImport: i0, template: "<vdr-chip\r\n    [icon]=\"removable ? 'times' : undefined\"\r\n    [colorFrom]=\"facetValue.facet.name\"\r\n    (iconClick)=\"remove.emit()\"\r\n    [title]=\"facetValue.facet.name + ' - ' + facetValue.name\"\r\n>\r\n    <span *ngIf=\"displayFacetName\" class=\"facet-name\">{{ facetValue.facet.name }}</span>\r\n    <span>{{ facetValue.name }}</span>\r\n</vdr-chip>\r\n", styles: [":host{display:inline-block}.facet-name{color:var(--color-grey-100);text-transform:uppercase;font-size:10px;margin-inline-end:3px;height:11px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: FacetValueChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-facet-value-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip\r\n    [icon]=\"removable ? 'times' : undefined\"\r\n    [colorFrom]=\"facetValue.facet.name\"\r\n    (iconClick)=\"remove.emit()\"\r\n    [title]=\"facetValue.facet.name + ' - ' + facetValue.name\"\r\n>\r\n    <span *ngIf=\"displayFacetName\" class=\"facet-name\">{{ facetValue.facet.name }}</span>\r\n    <span>{{ facetValue.name }}</span>\r\n</vdr-chip>\r\n", styles: [":host{display:inline-block}.facet-name{color:var(--color-grey-100);text-transform:uppercase;font-size:10px;margin-right:3px;height:11px}\n"] }]
+            args: [{ selector: 'vdr-facet-value-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip\r\n    [icon]=\"removable ? 'times' : undefined\"\r\n    [colorFrom]=\"facetValue.facet.name\"\r\n    (iconClick)=\"remove.emit()\"\r\n    [title]=\"facetValue.facet.name + ' - ' + facetValue.name\"\r\n>\r\n    <span *ngIf=\"displayFacetName\" class=\"facet-name\">{{ facetValue.facet.name }}</span>\r\n    <span>{{ facetValue.name }}</span>\r\n</vdr-chip>\r\n", styles: [":host{display:inline-block}.facet-name{color:var(--color-grey-100);text-transform:uppercase;font-size:10px;margin-inline-end:3px;height:11px}\n"] }]
         }], propDecorators: { facetValue: [{
                 type: Input
             }], removable: [{

package/esm2022/core/shared/components/object-tree/object-tree.component.mjs

@@ -39,11 +39,11 @@ export class ObjectTreeComponent {
         return Object.entries(inputValue).map(([key, value]) => ({ key, value }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ObjectTreeComponent, deps: [{ token: ObjectTreeComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: { value: "value", isArrayItem: "isArrayItem" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-left:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-left:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-left:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: { value: "value", isArrayItem: "isArrayItem" }, usesOnChanges: true, ngImport: i0, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-inline-start:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-inline-start:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-inline-start:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: ObjectTreeComponent, selector: "vdr-object-tree", inputs: ["value", "isArrayItem"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ObjectTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-object-tree', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-left:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-left:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-left:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"] }]
+            args: [{ selector: 'vdr-object-tree', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"icon-button\" (click)=\"expanded = !expanded\" *ngIf=\"depth !== 0 && !isArrayItem\">\r\n    <clr-icon shape=\"caret\" size=\"12\" [dir]=\"expanded ? 'down' : 'right'\"></clr-icon>\r\n</button>\r\n<ul\r\n    class=\"object-tree-node\"\r\n    [ngClass]=\"'depth-' + depth\"\r\n    [class.array-value]=\"valueIsArray\"\r\n    [class.array-item]=\"isArrayItem\"\r\n    [class.expanded]=\"expanded\"\r\n>\r\n    <li *ngFor=\"let entry of entries\">\r\n        <span class=\"key\" *ngIf=\"entry.key\">{{ entry.key }}:</span>\r\n        <ng-container *ngIf=\"isObject(entry.value); else primitive\">\r\n            <vdr-object-tree [value]=\"entry.value\" [isArrayItem]=\"valueIsArray\"></vdr-object-tree>\r\n        </ng-container>\r\n        <ng-template #primitive>\r\n            {{ entry.value }}\r\n        </ng-template>\r\n    </li>\r\n</ul>\r\n", styles: [".object-tree-node{list-style-type:none;line-height:16px;font-size:12px;overflow:hidden;max-height:0}.object-tree-node.depth-0{margin-inline-start:0;margin-top:8px}.object-tree-node.depth-1,.object-tree-node.depth-2,.object-tree-node.depth-3,.object-tree-node.depth-4,.object-tree-node.depth-5,.object-tree-node.depth-6{margin-inline-start:6px}.object-tree-node.expanded{max-height:5000px}.object-tree-node.array-item{margin-top:-16px;margin-inline-start:16px}.object-tree-node.array-value.expanded>li+li{margin-top:6px}.key{color:var(--color-text-300)}\n"] }]
         }], ctorParameters: function () { return [{ type: ObjectTreeComponent, decorators: [{
                     type: Optional
                 }, {
@@ -53,4 +53,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
             }], isArrayItem: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2JqZWN0LXRyZWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb3JlL3NyYy9zaGFyZWQvY29tcG9uZW50cy9vYmplY3QtdHJlZS9vYmplY3QtdHJlZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL29iamVjdC10cmVlL29iamVjdC10cmVlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULEtBQUssRUFHTCxRQUFRLEVBQ1IsUUFBUSxHQUNYLE1BQU0sZUFBZSxDQUFDOzs7OztBQUV2Qjs7Ozs7Ozs7OztHQVVHO0FBT0gsTUFBTSxPQUFPLG1CQUFtQjtJQU81QixZQUFvQyxNQUEyQjtRQUx0RCxnQkFBVyxHQUFHLEtBQUssQ0FBQztRQU16QixJQUFJLE1BQU0sRUFBRTtZQUNSLElBQUksQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7U0FDakM7YUFBTTtZQUNILElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1NBQ2xCO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzNDLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssS0FBSyxDQUFDLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQztRQUNyRCxJQUFJLENBQUMsWUFBWSxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ2pGLENBQUM7SUFFRCxRQUFRLENBQUMsS0FBVTtRQUNmLE9BQU8sT0FBTyxLQUFLLEtBQUssUUFBUSxJQUFJLEtBQUssS0FBSyxJQUFJLENBQUM7SUFDdkQsQ0FBQztJQUVPLFVBQVUsQ0FBQyxVQUEyQztRQUMxRCxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUM1QixPQUFPLENBQUMsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsQ0FBQyxDQUFDO1NBQzNDO1FBQ0QsT0FBTyxNQUFNLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztJQUM5RSxDQUFDOzhHQTlCUSxtQkFBbUI7a0dBQW5CLG1CQUFtQixvSUMzQmhDLGkyQkFvQkEsdWtDRE9hLG1CQUFtQjs7MkZBQW5CLG1CQUFtQjtrQkFOL0IsU0FBUzsrQkFDSSxpQkFBaUIsbUJBR1YsdUJBQXVCLENBQUMsTUFBTTs7MEJBU2xDLFFBQVE7OzBCQUFJLFFBQVE7NENBTnhCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxyXG4gICAgQ29tcG9uZW50LFxyXG4gICAgSW5wdXQsXHJcbiAgICBPbkNoYW5nZXMsXHJcbiAgICBPbkluaXQsXHJcbiAgICBPcHRpb25hbCxcclxuICAgIFNraXBTZWxmLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuLyoqXHJcbiAqIEBkZXNjcmlwdGlvblxyXG4gKiBUaGlzIGNvbXBvbmVudCBkaXNwbGF5cyBhIHBsYWluIEphdmFTY3JpcHQgb2JqZWN0IGFzIGFuIGV4cGFuZGFibGUgdHJlZS5cclxuICpcclxuICogQGV4YW1wbGVcclxuICogYGBgSFRNTFxyXG4gKiA8dmRyLW9iamVjdC10cmVlIFt2YWx1ZV09XCJwYXltZW50Lm1ldGFkYXRhXCI+PC92ZHItb2JqZWN0LXRyZWU+XHJcbiAqIGBgYFxyXG4gKlxyXG4gKiBAZG9jc0NhdGVnb3J5IGNvbXBvbmVudHNcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICd2ZHItb2JqZWN0LXRyZWUnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL29iamVjdC10cmVlLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL29iamVjdC10cmVlLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxufSlcclxuZXhwb3J0IGNsYXNzIE9iamVjdFRyZWVDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xyXG4gICAgQElucHV0KCkgdmFsdWU6IHsgW2tleTogc3RyaW5nXTogYW55IH0gfCBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBpc0FycmF5SXRlbSA9IGZhbHNlO1xyXG4gICAgZGVwdGg6IG51bWJlcjtcclxuICAgIGV4cGFuZGVkOiBib29sZWFuO1xyXG4gICAgdmFsdWVJc0FycmF5OiBib29sZWFuO1xyXG4gICAgZW50cmllczogQXJyYXk8eyBrZXk6IHN0cmluZzsgdmFsdWU6IGFueSB9PjtcclxuICAgIGNvbnN0cnVjdG9yKEBPcHRpb25hbCgpIEBTa2lwU2VsZigpIHBhcmVudDogT2JqZWN0VHJlZUNvbXBvbmVudCkge1xyXG4gICAgICAgIGlmIChwYXJlbnQpIHtcclxuICAgICAgICAgICAgdGhpcy5kZXB0aCA9IHBhcmVudC5kZXB0aCArIDE7XHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgdGhpcy5kZXB0aCA9IDA7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIG5nT25DaGFuZ2VzKCkge1xyXG4gICAgICAgIHRoaXMuZW50cmllcyA9IHRoaXMuZ2V0RW50cmllcyh0aGlzLnZhbHVlKTtcclxuICAgICAgICB0aGlzLmV4cGFuZGVkID0gdGhpcy5kZXB0aCA9PT0gMCB8fCB0aGlzLmlzQXJyYXlJdGVtO1xyXG4gICAgICAgIHRoaXMudmFsdWVJc0FycmF5ID0gT2JqZWN0LmtleXModGhpcy52YWx1ZSkuZXZlcnkodiA9PiBOdW1iZXIuaXNJbnRlZ2VyKCt2KSk7XHJcbiAgICB9XHJcblxyXG4gICAgaXNPYmplY3QodmFsdWU6IGFueSk6IGJvb2xlYW4ge1xyXG4gICAgICAgIHJldHVybiB0eXBlb2YgdmFsdWUgPT09ICdvYmplY3QnICYmIHZhbHVlICE9PSBudWxsO1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgZ2V0RW50cmllcyhpbnB1dFZhbHVlOiB7IFtrZXk6IHN0cmluZ106IGFueSB9IHwgc3RyaW5nKTogQXJyYXk8eyBrZXk6IHN0cmluZzsgdmFsdWU6IGFueSB9PiB7XHJcbiAgICAgICAgaWYgKCF0aGlzLmlzT2JqZWN0KGlucHV0VmFsdWUpKSB7XHJcbiAgICAgICAgICAgIHJldHVybiBbeyBrZXk6ICcnLCB2YWx1ZTogaW5wdXRWYWx1ZSB9XTtcclxuICAgICAgICB9XHJcbiAgICAgICAgcmV0dXJuIE9iamVjdC5lbnRyaWVzKGlucHV0VmFsdWUpLm1hcCgoW2tleSwgdmFsdWVdKSA9PiAoeyBrZXksIHZhbHVlIH0pKTtcclxuICAgIH1cclxufVxyXG4iLCI8YnV0dG9uIGNsYXNzPVwiaWNvbi1idXR0b25cIiAoY2xpY2spPVwiZXhwYW5kZWQgPSAhZXhwYW5kZWRcIiAqbmdJZj1cImRlcHRoICE9PSAwICYmICFpc0FycmF5SXRlbVwiPlxyXG4gICAgPGNsci1pY29uIHNoYXBlPVwiY2FyZXRcIiBzaXplPVwiMTJcIiBbZGlyXT1cImV4cGFuZGVkID8gJ2Rvd24nIDogJ3JpZ2h0J1wiPjwvY2xyLWljb24+XHJcbjwvYnV0dG9uPlxyXG48dWxcclxuICAgIGNsYXNzPVwib2JqZWN0LXRyZWUtbm9kZVwiXHJcbiAgICBbbmdDbGFzc109XCInZGVwdGgtJyArIGRlcHRoXCJcclxuICAgIFtjbGFzcy5hcnJheS12YWx1ZV09XCJ2YWx1ZUlzQXJyYXlcIlxyXG4gICAgW2NsYXNzLmFycmF5LWl0ZW1dPVwiaXNBcnJheUl0ZW1cIlxyXG4gICAgW2NsYXNzLmV4cGFuZGVkXT1cImV4cGFuZGVkXCJcclxuPlxyXG4gICAgPGxpICpuZ0Zvcj1cImxldCBlbnRyeSBvZiBlbnRyaWVzXCI+XHJcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJrZXlcIiAqbmdJZj1cImVudHJ5LmtleVwiPnt7IGVudHJ5LmtleSB9fTo8L3NwYW4+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImlzT2JqZWN0KGVudHJ5LnZhbHVlKTsgZWxzZSBwcmltaXRpdmVcIj5cclxuICAgICAgICAgICAgPHZkci1vYmplY3QtdHJlZSBbdmFsdWVdPVwiZW50cnkudmFsdWVcIiBbaXNBcnJheUl0ZW1dPVwidmFsdWVJc0FycmF5XCI+PC92ZHItb2JqZWN0LXRyZWU+XHJcbiAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPG5nLXRlbXBsYXRlICNwcmltaXRpdmU+XHJcbiAgICAgICAgICAgIHt7IGVudHJ5LnZhbHVlIH19XHJcbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cclxuICAgIDwvbGk+XHJcbjwvdWw+XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2JqZWN0LXRyZWUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb3JlL3NyYy9zaGFyZWQvY29tcG9uZW50cy9vYmplY3QtdHJlZS9vYmplY3QtdHJlZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL29iamVjdC10cmVlL29iamVjdC10cmVlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULEtBQUssRUFHTCxRQUFRLEVBQ1IsUUFBUSxHQUNYLE1BQU0sZUFBZSxDQUFDOzs7OztBQUV2Qjs7Ozs7Ozs7OztHQVVHO0FBT0gsTUFBTSxPQUFPLG1CQUFtQjtJQU81QixZQUFvQyxNQUEyQjtRQUx0RCxnQkFBVyxHQUFHLEtBQUssQ0FBQztRQU16QixJQUFJLE1BQU0sRUFBRTtZQUNSLElBQUksQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7U0FDakM7YUFBTTtZQUNILElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1NBQ2xCO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzNDLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssS0FBSyxDQUFDLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQztRQUNyRCxJQUFJLENBQUMsWUFBWSxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ2pGLENBQUM7SUFFRCxRQUFRLENBQUMsS0FBVTtRQUNmLE9BQU8sT0FBTyxLQUFLLEtBQUssUUFBUSxJQUFJLEtBQUssS0FBSyxJQUFJLENBQUM7SUFDdkQsQ0FBQztJQUVPLFVBQVUsQ0FBQyxVQUEyQztRQUMxRCxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxVQUFVLENBQUMsRUFBRTtZQUM1QixPQUFPLENBQUMsRUFBRSxHQUFHLEVBQUUsRUFBRSxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsQ0FBQyxDQUFDO1NBQzNDO1FBQ0QsT0FBTyxNQUFNLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxFQUFFLEtBQUssQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxDQUFDLENBQUMsQ0FBQztJQUM5RSxDQUFDOzhHQTlCUSxtQkFBbUI7a0dBQW5CLG1CQUFtQixvSUMzQmhDLGkyQkFvQkEsK2xDRE9hLG1CQUFtQjs7MkZBQW5CLG1CQUFtQjtrQkFOL0IsU0FBUzsrQkFDSSxpQkFBaUIsbUJBR1YsdUJBQXVCLENBQUMsTUFBTTs7MEJBU2xDLFFBQVE7OzBCQUFJLFFBQVE7NENBTnhCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxyXG4gICAgQ29tcG9uZW50LFxyXG4gICAgSW5wdXQsXHJcbiAgICBPbkNoYW5nZXMsXHJcbiAgICBPbkluaXQsXHJcbiAgICBPcHRpb25hbCxcclxuICAgIFNraXBTZWxmLFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuLyoqXHJcbiAqIEBkZXNjcmlwdGlvblxyXG4gKiBUaGlzIGNvbXBvbmVudCBkaXNwbGF5cyBhIHBsYWluIEphdmFTY3JpcHQgb2JqZWN0IGFzIGFuIGV4cGFuZGFibGUgdHJlZS5cclxuICpcclxuICogQGV4YW1wbGVcclxuICogYGBgSFRNTFxyXG4gKiA8dmRyLW9iamVjdC10cmVlIFt2YWx1ZV09XCJwYXltZW50Lm1ldGFkYXRhXCI+PC92ZHItb2JqZWN0LXRyZWU+XHJcbiAqIGBgYFxyXG4gKlxyXG4gKiBAZG9jc0NhdGVnb3J5IGNvbXBvbmVudHNcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICd2ZHItb2JqZWN0LXRyZWUnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL29iamVjdC10cmVlLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL29iamVjdC10cmVlLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxufSlcclxuZXhwb3J0IGNsYXNzIE9iamVjdFRyZWVDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xyXG4gICAgQElucHV0KCkgdmFsdWU6IHsgW2tleTogc3RyaW5nXTogYW55IH0gfCBzdHJpbmc7XHJcbiAgICBASW5wdXQoKSBpc0FycmF5SXRlbSA9IGZhbHNlO1xyXG4gICAgZGVwdGg6IG51bWJlcjtcclxuICAgIGV4cGFuZGVkOiBib29sZWFuO1xyXG4gICAgdmFsdWVJc0FycmF5OiBib29sZWFuO1xyXG4gICAgZW50cmllczogQXJyYXk8eyBrZXk6IHN0cmluZzsgdmFsdWU6IGFueSB9PjtcclxuICAgIGNvbnN0cnVjdG9yKEBPcHRpb25hbCgpIEBTa2lwU2VsZigpIHBhcmVudDogT2JqZWN0VHJlZUNvbXBvbmVudCkge1xyXG4gICAgICAgIGlmIChwYXJlbnQpIHtcclxuICAgICAgICAgICAgdGhpcy5kZXB0aCA9IHBhcmVudC5kZXB0aCArIDE7XHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgdGhpcy5kZXB0aCA9IDA7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIG5nT25DaGFuZ2VzKCkge1xyXG4gICAgICAgIHRoaXMuZW50cmllcyA9IHRoaXMuZ2V0RW50cmllcyh0aGlzLnZhbHVlKTtcclxuICAgICAgICB0aGlzLmV4cGFuZGVkID0gdGhpcy5kZXB0aCA9PT0gMCB8fCB0aGlzLmlzQXJyYXlJdGVtO1xyXG4gICAgICAgIHRoaXMudmFsdWVJc0FycmF5ID0gT2JqZWN0LmtleXModGhpcy52YWx1ZSkuZXZlcnkodiA9PiBOdW1iZXIuaXNJbnRlZ2VyKCt2KSk7XHJcbiAgICB9XHJcblxyXG4gICAgaXNPYmplY3QodmFsdWU6IGFueSk6IGJvb2xlYW4ge1xyXG4gICAgICAgIHJldHVybiB0eXBlb2YgdmFsdWUgPT09ICdvYmplY3QnICYmIHZhbHVlICE9PSBudWxsO1xyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgZ2V0RW50cmllcyhpbnB1dFZhbHVlOiB7IFtrZXk6IHN0cmluZ106IGFueSB9IHwgc3RyaW5nKTogQXJyYXk8eyBrZXk6IHN0cmluZzsgdmFsdWU6IGFueSB9PiB7XHJcbiAgICAgICAgaWYgKCF0aGlzLmlzT2JqZWN0KGlucHV0VmFsdWUpKSB7XHJcbiAgICAgICAgICAgIHJldHVybiBbeyBrZXk6ICcnLCB2YWx1ZTogaW5wdXRWYWx1ZSB9XTtcclxuICAgICAgICB9XHJcbiAgICAgICAgcmV0dXJuIE9iamVjdC5lbnRyaWVzKGlucHV0VmFsdWUpLm1hcCgoW2tleSwgdmFsdWVdKSA9PiAoeyBrZXksIHZhbHVlIH0pKTtcclxuICAgIH1cclxufVxyXG4iLCI8YnV0dG9uIGNsYXNzPVwiaWNvbi1idXR0b25cIiAoY2xpY2spPVwiZXhwYW5kZWQgPSAhZXhwYW5kZWRcIiAqbmdJZj1cImRlcHRoICE9PSAwICYmICFpc0FycmF5SXRlbVwiPlxyXG4gICAgPGNsci1pY29uIHNoYXBlPVwiY2FyZXRcIiBzaXplPVwiMTJcIiBbZGlyXT1cImV4cGFuZGVkID8gJ2Rvd24nIDogJ3JpZ2h0J1wiPjwvY2xyLWljb24+XHJcbjwvYnV0dG9uPlxyXG48dWxcclxuICAgIGNsYXNzPVwib2JqZWN0LXRyZWUtbm9kZVwiXHJcbiAgICBbbmdDbGFzc109XCInZGVwdGgtJyArIGRlcHRoXCJcclxuICAgIFtjbGFzcy5hcnJheS12YWx1ZV09XCJ2YWx1ZUlzQXJyYXlcIlxyXG4gICAgW2NsYXNzLmFycmF5LWl0ZW1dPVwiaXNBcnJheUl0ZW1cIlxyXG4gICAgW2NsYXNzLmV4cGFuZGVkXT1cImV4cGFuZGVkXCJcclxuPlxyXG4gICAgPGxpICpuZ0Zvcj1cImxldCBlbnRyeSBvZiBlbnRyaWVzXCI+XHJcbiAgICAgICAgPHNwYW4gY2xhc3M9XCJrZXlcIiAqbmdJZj1cImVudHJ5LmtleVwiPnt7IGVudHJ5LmtleSB9fTo8L3NwYW4+XHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImlzT2JqZWN0KGVudHJ5LnZhbHVlKTsgZWxzZSBwcmltaXRpdmVcIj5cclxuICAgICAgICAgICAgPHZkci1vYmplY3QtdHJlZSBbdmFsdWVdPVwiZW50cnkudmFsdWVcIiBbaXNBcnJheUl0ZW1dPVwidmFsdWVJc0FycmF5XCI+PC92ZHItb2JqZWN0LXRyZWU+XHJcbiAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPG5nLXRlbXBsYXRlICNwcmltaXRpdmU+XHJcbiAgICAgICAgICAgIHt7IGVudHJ5LnZhbHVlIH19XHJcbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cclxuICAgIDwvbGk+XHJcbjwvdWw+XHJcbiJdfQ==

package/esm2022/core/shared/components/order-state-label/order-state-label.component.mjs

@@ -36,11 +36,11 @@ export class OrderStateLabelComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderStateLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-right:3px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: OrderStateLabelComponent, selector: "vdr-order-state-label", inputs: { state: "state" }, ngImport: i0, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-inline-end:3px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.StateI18nTokenPipe, name: "stateI18nToken" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: OrderStateLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-order-state-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-right:3px}\n"] }]
+            args: [{ selector: 'vdr-order-state-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-chip [ngClass]=\"state\" [colorType]=\"chipColorType\">\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'Delivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"success-standard\" *ngIf=\"state === 'PartiallyDelivered'\" size=\"12\"></clr-icon>\r\n    <clr-icon shape=\"ban\" *ngIf=\"state === 'Cancelled'\" size=\"12\"></clr-icon>\r\n    {{ state | stateI18nToken | translate }}\r\n    <ng-content></ng-content>\r\n</vdr-chip>\r\n", styles: ["clr-icon{margin-inline-end:3px}\n"] }]
         }], propDecorators: { state: [{
                 type: Input
             }] } });

package/esm2022/core/shared/components/page-block/page-block.component.mjs

@@ -2,10 +2,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class PageBlockComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: PageBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: PageBlockComponent, selector: "vdr-page-block", ngImport: i0, template: "<div class=\"page-block\"><ng-content></ng-content></div>\r\n", styles: [":host{display:block}.page-block{margin-left:var(--surface-margin-left);margin-right:var(--space-unit);margin-top:var(--space-unit);max-width:var(--layout-content-max-width)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: PageBlockComponent, selector: "vdr-page-block", ngImport: i0, template: "<div class=\"page-block\"><ng-content></ng-content></div>\r\n", styles: [":host{display:block}.page-block{margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit);margin-top:var(--space-unit);max-width:var(--layout-content-max-width)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: PageBlockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-page-block', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"page-block\"><ng-content></ng-content></div>\r\n", styles: [":host{display:block}.page-block{margin-left:var(--surface-margin-left);margin-right:var(--space-unit);margin-top:var(--space-unit);max-width:var(--layout-content-max-width)}\n"] }]
+            args: [{ selector: 'vdr-page-block', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"page-block\"><ng-content></ng-content></div>\r\n", styles: [":host{display:block}.page-block{margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit);margin-top:var(--space-unit);max-width:var(--layout-content-max-width)}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1ibG9jay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL3BhZ2UtYmxvY2svcGFnZS1ibG9jay5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL3BhZ2UtYmxvY2svcGFnZS1ibG9jay5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVFuRSxNQUFNLE9BQU8sa0JBQWtCOzhHQUFsQixrQkFBa0I7a0dBQWxCLGtCQUFrQixzRENSL0IsK0RBQ0E7OzJGRE9hLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDSSxnQkFBZ0IsbUJBR1QsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICd2ZHItcGFnZS1ibG9jaycsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vcGFnZS1ibG9jay5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9wYWdlLWJsb2NrLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxufSlcclxuZXhwb3J0IGNsYXNzIFBhZ2VCbG9ja0NvbXBvbmVudCB7fVxyXG4iLCI8ZGl2IGNsYXNzPVwicGFnZS1ibG9ja1wiPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L2Rpdj5cclxuIl19

package/esm2022/core/shared/components/page-header/page-header.component.mjs

@@ -2,10 +2,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class PageHeaderComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: PageHeaderComponent, selector: "vdr-page-header", ngImport: i0, template: "<div class=\"max-w-layout page-header\">\r\n<ng-content />\r\n</div>\r\n", styles: [":host{display:block;border-bottom:1px solid var(--color-weight-150);background-color:var(--color-page-header)}.page-header{padding-left:var(--surface-margin-left)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: PageHeaderComponent, selector: "vdr-page-header", ngImport: i0, template: "<div class=\"max-w-layout page-header\">\r\n<ng-content />\r\n</div>\r\n", styles: [":host{display:block;border-bottom:1px solid var(--color-weight-150);background-color:var(--color-page-header)}.page-header{padding-inline-start:var(--surface-margin-left)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-page-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"max-w-layout page-header\">\r\n<ng-content />\r\n</div>\r\n", styles: [":host{display:block;border-bottom:1px solid var(--color-weight-150);background-color:var(--color-page-header)}.page-header{padding-left:var(--surface-margin-left)}\n"] }]
+            args: [{ selector: 'vdr-page-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"max-w-layout page-header\">\r\n<ng-content />\r\n</div>\r\n", styles: [":host{display:block;border-bottom:1px solid var(--color-weight-150);background-color:var(--color-page-header)}.page-header{padding-inline-start:var(--surface-margin-left)}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb3JlL3NyYy9zaGFyZWQvY29tcG9uZW50cy9wYWdlLWhlYWRlci9wYWdlLWhlYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL3BhZ2UtaGVhZGVyL3BhZ2UtaGVhZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBUW5FLE1BQU0sT0FBTyxtQkFBbUI7OEdBQW5CLG1CQUFtQjtrR0FBbkIsbUJBQW1CLHVEQ1JoQywwRUFHQTs7MkZES2EsbUJBQW1CO2tCQU4vQixTQUFTOytCQUNJLGlCQUFpQixtQkFHVix1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3Zkci1wYWdlLWhlYWRlcicsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vcGFnZS1oZWFkZXIuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vcGFnZS1oZWFkZXIuY29tcG9uZW50LnNjc3MnXSxcclxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgUGFnZUhlYWRlckNvbXBvbmVudCB7fVxyXG4iLCI8ZGl2IGNsYXNzPVwibWF4LXctbGF5b3V0IHBhZ2UtaGVhZGVyXCI+XHJcbjxuZy1jb250ZW50IC8+XHJcbjwvZGl2PlxyXG4iXX0=

package/esm2022/core/shared/components/product-multi-selector-dialog/product-multi-selector-dialog.component.mjs

@@ -129,10 +129,10 @@ export class ProductMultiSelectorDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductMultiSelectorDialogComponent, deps: [{ token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductMultiSelectorDialogComponent, selector: "vdr-product-multi-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\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\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-left:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-left:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i5.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i6.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i7.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i8.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: i9.ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }, { kind: "pipe", type: i12.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductMultiSelectorDialogComponent, selector: "vdr-product-multi-selector-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\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\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i2.CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i5.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i6.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i7.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i8.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: i9.ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i11.TranslatePipe, name: "translate" }, { kind: "pipe", type: i12.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductMultiSelectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-multi-selector-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\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\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-left:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-left:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"] }]
+            args: [{ selector: 'vdr-product-multi-selector-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span *ngIf=\"mode === 'product'\">{{ 'common.select-products' | translate }}</span>\r\n        <span *ngIf=\"mode === 'variant'\">{{ 'common.select-variants' | translate }}</span>\r\n    </div>\r\n</ng-template>\r\n<vdr-product-search-input\r\n    #productSearchInputComponent\r\n    [facetValueResults]=\"facetValues$ | async\"\r\n    (searchTermChange)=\"setSearchTerm($event)\"\r\n    (facetValueChange)=\"setFacetValueIds($event)\"\r\n></vdr-product-search-input>\r\n<div class=\"flex-wrapper\">\r\n    <div class=\"gallery\">\r\n        <div\r\n            class=\"card\"\r\n            *ngFor=\"let item of (items$ | async) || [] | paginate: paginationConfig; trackBy: trackByFn\"\r\n            (click)=\"toggleSelection(item, $event)\"\r\n            [class.selected]=\"isSelected(item)\"\r\n        >\r\n            <div class=\"card-img\">\r\n                <vdr-select-toggle\r\n                    [selected]=\"isSelected(item)\"\r\n                    [disabled]=\"true\"\r\n                    [hiddenWhenOff]=\"true\"\r\n                ></vdr-select-toggle>\r\n                <img\r\n                    [src]=\"\r\n                        (mode === 'product'\r\n                            ? item.productAsset\r\n                            : item.productVariantAsset || item.productAsset\r\n                        ) | assetPreview: 'thumb'\r\n                    \"\r\n                />\r\n            </div>\r\n            <div class=\"detail\">\r\n                <span [title]=\"mode === 'product' ? item.productName : item.productVariantName\">{{\r\n                    mode === 'product' ? item.productName : item.productVariantName\r\n                }}</span>\r\n                <div *ngIf=\"mode === 'variant'\"><small>{{ item.sku }}</small></div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"selection\">\r\n        <div class=\"m-2 flex center\">\r\n            <div>\r\n                {{ 'common.items-selected-count' | translate: { count: selectionManager.selection.length } }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <button class=\"btn btn-sm btn-link\" (click)=\"clearSelection()\">\r\n                <cds-icon shape=\"times\"></cds-icon> {{ 'common.clear-selection' | translate }}\r\n            </button>\r\n        </div>\r\n        <div class=\"selected-items\">\r\n            <div *ngFor=\"let item of selectionManager.selection\" class=\"flex item-row\">\r\n                <div class=\"\">{{ mode === 'product' ? item.productName : item.productVariantName }}</div>\r\n                <div class=\"flex-spacer\"></div>\r\n                <div>\r\n                    <button class=\"icon-button\" (click)=\"toggleSelection(item, $event)\">\r\n                        <cds-icon shape=\"times\"></cds-icon>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"paging-controls\">\r\n    <vdr-items-per-page-controls\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange($event)\"\r\n    ></vdr-items-per-page-controls>\r\n\r\n    <vdr-pagination-controls\r\n        [currentPage]=\"paginationConfig.currentPage\"\r\n        [itemsPerPage]=\"paginationConfig.itemsPerPage\"\r\n        [totalItems]=\"paginationConfig.totalItems\"\r\n        (pageChange)=\"pageChange($event)\"\r\n    ></vdr-pagination-controls>\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\r\n        type=\"submit\"\r\n        (click)=\"select()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"selectionManager.selection.length === 0\"\r\n    >\r\n        {{ 'common.select-items-with-count' | translate: { count: selectionManager.selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;flex-direction:1;height:70vh}.flex-wrapper{display:flex;overflow-y:hidden}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,125px);grid-template-rows:repeat(auto-fill,200px);grid-gap:10px 20px;padding-inline-start:12px;padding-top:12px;padding-bottom:64px;overflow-y:auto}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.detail{margin:0 3px;font-size:12px;line-height:.8rem}vdr-select-toggle{position:absolute;top:-12px;left:-12px}vdr-select-toggle ::ng-deep .toggle{box-shadow:0 5px 5px -4px #000000bf}.card.selected{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card.selected .selected-checkbox{opacity:1}.selection{width:23vw;max-width:400px;padding:6px;display:flex;flex-direction:column}.selection .selected-items{flex:1;overflow-y:auto}.selection .selected-items .item-row{padding-inline-start:3px}.selection .selected-items .item-row:hover{background-color:var(--color-component-bg-200)}.paging-controls{display:flex;align-items:center;justify-content:space-between}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i0.ChangeDetectorRef }]; } });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZHVjdC1tdWx0aS1zZWxlY3Rvci1kaWFsb2cuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2xpYi9jb3JlL3NyYy9zaGFyZWQvY29tcG9uZW50cy9wcm9kdWN0LW11bHRpLXNlbGVjdG9yLWRpYWxvZy9wcm9kdWN0LW11bHRpLXNlbGVjdG9yLWRpYWxvZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvcmUvc3JjL3NoYXJlZC9jb21wb25lbnRzL3Byb2R1Y3QtbXVsdGktc2VsZWN0b3ItZGlhbG9nL3Byb2R1Y3QtbXVsdGktc2VsZWN0b3ItZGlhbG9nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBcUIsU0FBUyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBRTlGLE9BQU8sRUFBRSxlQUFlLEVBQUUsYUFBYSxFQUFjLE1BQU0sTUFBTSxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFMUMsT0FBTyxFQUNILDBDQUEwQyxHQUU3QyxNQUFNLGlDQUFpQyxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDZDQUE2QyxDQUFDOzs7Ozs7Ozs7Ozs7OztBQVkvRSxNQUFNLE9BQU8sbUNBQW1DO0lBaUI1QyxZQUFvQixXQUF3QixFQUFVLGNBQWlDO1FBQW5FLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBQVUsbUJBQWMsR0FBZCxjQUFjLENBQW1CO1FBaEJ2RixTQUFJLEdBQTBCLFNBQVMsQ0FBQztRQUN4Qyx3QkFBbUIsR0FBYSxFQUFFLENBQUM7UUFHbkMsZ0JBQVcsR0FBRyxJQUFJLGVBQWUsQ0FBUyxFQUFFLENBQUMsQ0FBQztRQUM5Qyx5QkFBb0IsR0FBRyxJQUFJLGVBQWUsQ0FBVyxFQUFFLENBQUMsQ0FBQztRQUN6RCxxQkFBZ0IsR0FBdUI7WUFDbkMsV0FBVyxFQUFFLENBQUM7WUFDZCxZQUFZLEVBQUUsRUFBRTtZQUNoQixVQUFVLEVBQUUsQ0FBQztTQUNoQixDQUFDO1FBSU0sc0JBQWlCLEdBQUcsSUFBSSxlQUFlLENBQXFCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO0lBRUQsQ0FBQztJQUUzRixRQUFRO1FBQ0osTUFBTSxJQUFJLEdBQ04sSUFBSSxDQUFDLElBQUksS0FBSyxTQUFTO1lBQ25CLENBQUMsQ0FBQyxDQUFDLENBQWEsRUFBRSxDQUFhLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxTQUFTLEtBQUssQ0FBQyxDQUFDLFNBQVM7WUFDL0QsQ0FBQyxDQUFDLENBQUMsQ0FBYSxFQUFFLENBQWEsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLGdCQUFnQixLQUFLLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQztRQUN0RixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxnQkFBZ0IsQ0FBYTtZQUNyRCxXQUFXLEVBQUUsSUFBSTtZQUNqQixhQUFhLEVBQUUsSUFBSTtZQUNuQixZQUFZLEVBQUUsSUFBSTtTQUNyQixDQUFDLENBQUM7UUFDSCxNQUFNLGlCQUFpQixHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLGNBQWMsQ0FDN0QsRUFBRSxFQUNGLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxZQUFZLEVBQ2xDLENBQUMsQ0FDSixDQUFDO1FBQ0YsTUFBTSxPQUFPLEdBQUcsYUFBYSxDQUN6QixJQUFJLENBQUMsV0FBVyxFQUNoQixJQUFJLENBQUMsb0JBQW9CLEVBQ3pCLElBQUksQ0FBQyxpQkFBaUIsQ0FDekIsQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksRUFBRSxhQUFhLEVBQUUsVUFBVSxDQUFDLEVBQUUsRUFBRTtZQUM5QyxNQUFNLElBQUksR0FBRyxDQUFDLFVBQVUsQ0FBQyxZQUFZLENBQUM7WUFDdEMsTUFBTSxJQUFJLEdBQUcsQ0FBQyxVQUFVLENBQUMsV0FBVyxHQUFHLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQztZQUNqRCxPQUFPLGlCQUFpQixDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUM7Z0JBQ2pDLEtBQUssRUFBRSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLGFBQWEsRUFBRSxjQUFjLEVBQUUsSUFBSSxDQUFDLElBQUksS0FBSyxTQUFTLEVBQUU7YUFDdEYsQ0FBQyxDQUFDO1FBQ1AsQ0FBQyxDQUFDLENBQUM7UUFFSCxJQUFJLENBQUMsTUFBTSxHQUFHLGlCQUFpQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQ3hDLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUNQLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxVQUFVLENBQUM7WUFDMUQsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzdELENBQUMsQ0FBQyxFQUNGLEdBQUcsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQ2pDLENBQUM7UUFFRixJQUFJLENBQUMsWUFBWSxHQUFHLGlCQUFpQixDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDO1FBRXpGLElBQUksSUFBSSxDQUFDLG1CQUFtQixDQUFDLE1BQU0sRUFBRTtZQUNqQyxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssU0FBUyxFQUFFO2dCQUN6QixJQUFJLENBQUMsV0FBVyxDQUFDLE9BQU87cUJBQ25CLFdBQVcsQ0FBQztvQkFDVCxNQUFNLEVBQUU7d0JBQ0osRUFBRSxFQUFFOzRCQUNBLEVBQUUsRUFBRSxJQUFJLENBQUMsbUJBQW1CO3lCQUMvQjtxQkFDSjtpQkFDSixDQUFDO3FCQUNELE9BQU8sQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUU7b0JBQ2hDLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxjQUFjLENBQ2hDLFFBQVEsQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUNkLE9BQU8sQ0FBQyxFQUFFLENBQ04sQ0FBQzt3QkFDRyxTQUFTLEVBQUUsT0FBTyxDQUFDLEVBQUU7d0JBQ3JCLFdBQVcsRUFBRSxPQUFPLENBQUMsSUFBSTtxQkFDYixDQUFBLENBQ3ZCLENBQ0osQ0FBQztvQkFDRixJQUFJLENBQUMsY0FBYyxDQUFDLFlBQVksRUFBRSxDQUFDO2dCQUN2QyxDQUFDLENBQUMsQ0FBQzthQUNWO2lCQUFNO2dCQUNILElBQUksQ0FBQyxXQUFXO3FCQUNYLEtBQUssQ0FBQywwQ0FBMEMsRUFBRTtvQkFDL0MsT0FBTyxFQUFFO3dCQUNMLE1BQU0sRUFBRTs0QkFDSixFQUFFLEVBQUU7Z0NBQ0EsRUFBRSxFQUFFLElBQUksQ0FBQyxtQkFBbUI7NkJBQy9CO3lCQUNKO3FCQUNKO2lCQUNKLENBQUM7cUJBQ0QsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUUsZUFBZSxFQUFFLEVBQUUsRUFBRTtvQkFDdkMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGNBQWMsQ0FDaEMsZUFBZSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQ3JCLE9BQU8sQ0FBQyxFQUFFLENBQ04sQ0FBQzt3QkFDRyxnQkFBZ0IsRUFBRSxPQUFPLENBQUMsRUFBRTt3QkFDNUIsa0JBQWtCLEVBQUUsT0FBTyxDQUFDLElBQUk7cUJBQ3BCLENBQUEsQ0FDdkIsQ0FDSixDQUFDO29CQUNGLElBQUksQ0FBQyxjQUFjLENBQUMsWUFBWSxFQUFFLENBQUM7Z0JBQ3ZDLENBQUMsQ0FBQyxDQUFDO2FBQ1Y7U0FDSjtJQUNMLENBQUM7SUFFRCxTQUFTLENBQUMsS0FBYSxFQUFFLElBQWdCO1FBQ3JDLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUMxQixDQUFDO0lBRUQsYUFBYSxDQUFDLElBQVk7UUFDdEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUNELGdCQUFnQixDQUFDLEdBQWE7UUFDMUIsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBRUQsZUFBZSxDQUFDLElBQWdCLEVBQUUsS0FBaUI7UUFDL0MsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyxJQUFJLEVBQUUsS0FBSyxDQUFDLENBQUM7SUFDdkQsQ0FBQztJQUVELGNBQWM7UUFDVixJQUFJLENBQUMsZ0JBQWdCLENBQUMsY0FBYyxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFFRCxVQUFVLENBQUMsSUFBZ0I7UUFDdkIsT0FBTyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ2xELENBQUM7SUFFRCxlQUFlLENBQUMsS0FBaUI7UUFDN0IsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3ZCLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsVUFBVSxDQUFDLElBQVk7UUFDbkIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7UUFDekMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztJQUN2RCxDQUFDO0lBRUQsa0JBQWtCLENBQUMsWUFBb0I7UUFDbkMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFlBQVksR0FBRyxZQUFZLENBQUM7UUFDbEQsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztJQUN2RCxDQUFDO0lBRUQsTUFBTTtRQUNGLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ3RELENBQUM7SUFFRCxNQUFNO1FBQ0YsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7OEdBckpRLG1DQUFtQztrR0FBbkMsbUNBQW1DLHlFQ3JCaEQsMjhIQTRGQTs7MkZEdkVhLG1DQUFtQztrQkFOL0MsU0FBUzsrQkFDSSxtQ0FBbUMsbUJBRzVCLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ2hhbmdlRGV0ZWN0b3JSZWYsIENvbXBvbmVudCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFBhZ2luYXRpb25JbnN0YW5jZSB9IGZyb20gJ25neC1wYWdpbmF0aW9uJztcclxuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0LCBjb21iaW5lTGF0ZXN0LCBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XHJcbmltcG9ydCB7IG1hcCwgdGFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xyXG5cclxuaW1wb3J0IHtcclxuICAgIEdldFByb2R1Y3RWYXJpYW50c0Zvck11bHRpU2VsZWN0b3JEb2N1bWVudCxcclxuICAgIFNlYXJjaFByb2R1Y3RzUXVlcnksXHJcbn0gZnJvbSAnLi4vLi4vLi4vY29tbW9uL2dlbmVyYXRlZC10eXBlcyc7XHJcbmltcG9ydCB7IFNlbGVjdGlvbk1hbmFnZXIgfSBmcm9tICcuLi8uLi8uLi9jb21tb24vdXRpbGl0aWVzL3NlbGVjdGlvbi1tYW5hZ2VyJztcclxuaW1wb3J0IHsgRGF0YVNlcnZpY2UgfSBmcm9tICcuLi8uLi8uLi9kYXRhL3Byb3ZpZGVycy9kYXRhLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBEaWFsb2cgfSBmcm9tICcuLi8uLi8uLi9wcm92aWRlcnMvbW9kYWwvbW9kYWwudHlwZXMnO1xyXG5cclxuZXhwb3J0IHR5cGUgU2VhcmNoSXRlbSA9IFNlYXJjaFByb2R1Y3RzUXVlcnlbJ3NlYXJjaCddWydpdGVtcyddW251bWJlcl07XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAndmRyLXByb2R1Y3QtbXVsdGktc2VsZWN0b3ItZGlhbG9nJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9wcm9kdWN0LW11bHRpLXNlbGVjdG9yLWRpYWxvZy5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9wcm9kdWN0LW11bHRpLXNlbGVjdG9yLWRpYWxvZy5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBQcm9kdWN0TXVsdGlTZWxlY3RvckRpYWxvZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgRGlhbG9nPFNlYXJjaEl0ZW1bXT4ge1xyXG4gICAgbW9kZTogJ3Byb2R1Y3QnIHwgJ3ZhcmlhbnQnID0gJ3Byb2R1Y3QnO1xyXG4gICAgaW5pdGlhbFNlbGVjdGlvbklkczogc3RyaW5nW10gPSBbXTtcclxuICAgIGl0ZW1zJDogT2JzZXJ2YWJsZTxTZWFyY2hJdGVtW10+O1xyXG4gICAgZmFjZXRWYWx1ZXMkOiBPYnNlcnZhYmxlPFNlYXJjaFByb2R1Y3RzUXVlcnlbJ3NlYXJjaCddWydmYWNldFZhbHVlcyddPjtcclxuICAgIHNlYXJjaFRlcm0kID0gbmV3IEJlaGF2aW9yU3ViamVjdDxzdHJpbmc+KCcnKTtcclxuICAgIHNlYXJjaEZhY2V0VmFsdWVJZHMkID0gbmV3IEJlaGF2aW9yU3ViamVjdDxzdHJpbmdbXT4oW10pO1xyXG4gICAgcGFnaW5hdGlvbkNvbmZpZzogUGFnaW5hdGlvbkluc3RhbmNlID0ge1xyXG4gICAgICAgIGN1cnJlbnRQYWdlOiAxLFxyXG4gICAgICAgIGl0ZW1zUGVyUGFnZTogMjUsXHJcbiAgICAgICAgdG90YWxJdGVtczogMSxcclxuICAgIH07XHJcbiAgICBzZWxlY3Rpb25NYW5hZ2VyOiBTZWxlY3Rpb25NYW5hZ2VyPFNlYXJjaEl0ZW0+O1xyXG5cclxuICAgIHJlc29sdmVXaXRoOiAocmVzdWx0PzogU2VhcmNoSXRlbVtdKSA9PiB2b2lkO1xyXG4gICAgcHJpdmF0ZSBwYWdpbmF0aW9uQ29uZmlnJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8UGFnaW5hdGlvbkluc3RhbmNlPih0aGlzLnBhZ2luYXRpb25Db25maWcpO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgZGF0YVNlcnZpY2U6IERhdGFTZXJ2aWNlLCBwcml2YXRlIGNoYW5nZURldGVjdG9yOiBDaGFuZ2VEZXRlY3RvclJlZikge31cclxuXHJcbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICAgICAgICBjb25zdCBpZEZuID1cclxuICAgICAgICAgICAgdGhpcy5tb2RlID09PSAncHJvZHVjdCdcclxuICAgICAgICAgICAgICAgID8gKGE6IFNlYXJjaEl0ZW0sIGI6IFNlYXJjaEl0ZW0pID0+IGEucHJvZHVjdElkID09PSBiLnByb2R1Y3RJZFxyXG4gICAgICAgICAgICAgICAgOiAoYTogU2VhcmNoSXRlbSwgYjogU2VhcmNoSXRlbSkgPT4gYS5wcm9kdWN0VmFyaWFudElkID09PSBiLnByb2R1Y3RWYXJpYW50SWQ7XHJcbiAgICAgICAgdGhpcy5zZWxlY3Rpb25NYW5hZ2VyID0gbmV3IFNlbGVjdGlvbk1hbmFnZXI8U2VhcmNoSXRlbT4oe1xyXG4gICAgICAgICAgICBtdWx0aVNlbGVjdDogdHJ1ZSxcclxuICAgICAgICAgICAgaXRlbXNBcmVFcXVhbDogaWRGbixcclxuICAgICAgICAgICAgYWRkaXRpdmVNb2RlOiB0cnVlLFxyXG4gICAgICAgIH0pO1xyXG4gICAgICAgIGNvbnN0IHNlYXJjaFF1ZXJ5UmVzdWx0ID0gdGhpcy5kYXRhU2VydmljZS5wcm9kdWN0LnNlYXJjaFByb2R1Y3RzKFxyXG4gICAgICAgICAgICAnJyxcclxuICAgICAgICAgICAgdGhpcy5wYWdpbmF0aW9uQ29uZmlnLml0ZW1zUGVyUGFnZSxcclxuICAgICAgICAgICAgMCxcclxuICAgICAgICApO1xyXG4gICAgICAgIGNvbnN0IHJlc3VsdCQgPSBjb21iaW5lTGF0ZXN0KFxyXG4gICAgICAgICAgICB0aGlzLnNlYXJjaFRlcm0kLFxyXG4gICAgICAgICAgICB0aGlzLnNlYXJjaEZhY2V0VmFsdWVJZHMkLFxyXG4gICAgICAgICAgICB0aGlzLnBhZ2luYXRpb25Db25maWckLFxyXG4gICAgICAgICkuc3Vic2NyaWJlKChbdGVybSwgZmFjZXRWYWx1ZUlkcywgcGFnaW5hdGlvbl0pID0+IHtcclxuICAgICAgICAgICAgY29uc3QgdGFrZSA9ICtwYWdpbmF0aW9uLml0ZW1zUGVyUGFnZTtcclxuICAgICAgICAgICAgY29uc3Qgc2tpcCA9IChwYWdpbmF0aW9uLmN1cnJlbnRQYWdlIC0gMSkgKiB0YWtlO1xyXG4gICAgICAgICAgICByZXR1cm4gc2VhcmNoUXVlcnlSZXN1bHQucmVmLnJlZmV0Y2goe1xyXG4gICAgICAgICAgICAgICAgaW5wdXQ6IHsgc2tpcCwgdGFrZSwgdGVybSwgZmFjZXRWYWx1ZUlkcywgZ3JvdXBCeVByb2R1Y3Q6IHRoaXMubW9kZSA9PT0gJ3Byb2R1Y3QnIH0sXHJcbiAgICAgICAgICAgIH0pO1xyXG4gICAgICAgIH0pO1xyXG5cclxuICAgICAgICB0aGlzLml0ZW1zJCA9IHNlYXJjaFF1ZXJ5UmVzdWx0LnN0cmVhbSQucGlwZShcclxuICAgICAgICAgICAgdGFwKGRhdGEgPT4ge1xyXG4gICAgICAgICAgICAgICAgdGhpcy5wYWdpbmF0aW9uQ29uZmlnLnRvdGFsSXRlbXMgPSBkYXRhLnNlYXJjaC50b3RhbEl0ZW1zO1xyXG4gICAgICAgICAgICAgICAgdGhpcy5zZWxlY3Rpb25NYW5hZ2VyLnNldEN1cnJlbnRJdGVtcyhkYXRhLnNlYXJjaC5pdGVtcyk7XHJcbiAgICAgICAgICAgIH0pLFxyXG4gICAgICAgICAgICBtYXAoZGF0YSA9PiBkYXRhLnNlYXJjaC5pdGVtcyksXHJcbiAgICAgICAgKTtcclxuXHJcbiAgICAgICAgdGhpcy5mYWNldFZhbHVlcyQgPSBzZWFyY2hRdWVyeVJlc3VsdC5zdHJlYW0kLnBpcGUobWFwKGRhdGEgPT4gZGF0YS5zZWFyY2guZmFjZXRWYWx1ZXMpKTtcclxuXHJcbiAgICAgICAgaWYgKHRoaXMuaW5pdGlhbFNlbGVjdGlvbklkcy5sZW5ndGgpIHtcclxuICAgICAgICAgICAgaWYgKHRoaXMubW9kZSA9PT0gJ3Byb2R1Y3QnKSB7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmRhdGFTZXJ2aWNlLnByb2R1Y3RcclxuICAgICAgICAgICAgICAgICAgICAuZ2V0UHJvZHVjdHMoe1xyXG4gICAgICAgICAgICAgICAgICAgICAgICBmaWx0ZXI6IHtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGlkOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaW46IHRoaXMuaW5pdGlhbFNlbGVjdGlvbklkcyxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0sXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIH0sXHJcbiAgICAgICAgICAgICAgICAgICAgfSlcclxuICAgICAgICAgICAgICAgICAgICAuc2luZ2xlJC5zdWJzY3JpYmUoKHsgcHJvZHVjdHMgfSkgPT4ge1xyXG4gICAgICAgICAgICAgICAgICAgICAgICB0aGlzLnNlbGVjdGlvbk1hbmFnZXIuc2VsZWN0TXVsdGlwbGUoXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBwcm9kdWN0cy5pdGVtcy5tYXAoXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcHJvZHVjdCA9PlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAoe1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcHJvZHVjdElkOiBwcm9kdWN0LmlkLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcHJvZHVjdE5hbWU6IHByb2R1Y3QubmFtZSxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfSBhcyBTZWFyY2hJdGVtKSxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICksXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICk7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHRoaXMuY2hhbmdlRGV0ZWN0b3IubWFya0ZvckNoZWNrKCk7XHJcbiAgICAgICAgICAgICAgICAgICAgfSk7XHJcbiAgICAgICAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmRhdGFTZXJ2aWNlXHJcbiAgICAgICAgICAgICAgICAgICAgLnF1ZXJ5KEdldFByb2R1Y3RWYXJpYW50c0Zvck11bHRpU2VsZWN0b3JEb2N1bWVudCwge1xyXG4gICAgICAgICAgICAgICAgICAgICAgICBvcHRpb25zOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBmaWx0ZXI6IHtcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZDoge1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpbjogdGhpcy5pbml0aWFsU2VsZWN0aW9uSWRzLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0sXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9LFxyXG4gICAgICAgICAgICAgICAgICAgICAgICB9LFxyXG4gICAgICAgICAgICAgICAgICAgIH0pXHJcbiAgICAgICAgICAgICAgICAgICAgLnNpbmdsZSQuc3Vic2NyaWJlKCh7IHByb2R1Y3RWYXJpYW50cyB9KSA9PiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHRoaXMuc2VsZWN0aW9uTWFuYWdlci5zZWxlY3RNdWx0aXBsZShcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHByb2R1Y3RWYXJpYW50cy5pdGVtcy5tYXAoXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFyaWFudCA9PlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAoe1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcHJvZHVjdFZhcmlhbnRJZDogdmFyaWFudC5pZCxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHByb2R1Y3RWYXJpYW50TmFtZTogdmFyaWFudC5uYW1lLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9IGFzIFNlYXJjaEl0ZW0pLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgKSxcclxuICAgICAgICAgICAgICAgICAgICAgICAgKTtcclxuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5jaGFuZ2VEZXRlY3Rvci5tYXJrRm9yQ2hlY2soKTtcclxuICAgICAgICAgICAgICAgICAgICB9KTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICB0cmFja0J5Rm4oaW5kZXg6IG51bWJlciwgaXRlbTogU2VhcmNoSXRlbSkge1xyXG4gICAgICAgIHJldHVybiBpdGVtLnByb2R1Y3RJZDtcclxuICAgIH1cclxuXHJcbiAgICBzZXRTZWFyY2hUZXJtKHRlcm06IHN0cmluZykge1xyXG4gICAgICAgIHRoaXMuc2VhcmNoVGVybSQubmV4dCh0ZXJtKTtcclxuICAgIH1cclxuICAgIHNldEZhY2V0VmFsdWVJZHMoaWRzOiBzdHJpbmdbXSkge1xyXG4gICAgICAgIHRoaXMuc2VhcmNoRmFjZXRWYWx1ZUlkcyQubmV4dChpZHMpO1xyXG4gICAgfVxyXG5cclxuICAgIHRvZ2dsZVNlbGVjdGlvbihpdGVtOiBTZWFyY2hJdGVtLCBldmVudDogTW91c2VFdmVudCkge1xyXG4gICAgICAgIHRoaXMuc2VsZWN0aW9uTWFuYWdlci50b2dnbGVTZWxlY3Rpb24oaXRlbSwgZXZlbnQpO1xyXG4gICAgfVxyXG5cclxuICAgIGNsZWFyU2VsZWN0aW9uKCkge1xyXG4gICAgICAgIHRoaXMuc2VsZWN0aW9uTWFuYWdlci5zZWxlY3RNdWx0aXBsZShbXSk7XHJcbiAgICB9XHJcblxyXG4gICAgaXNTZWxlY3RlZChpdGVtOiBTZWFyY2hJdGVtKSB7XHJcbiAgICAgICAgcmV0dXJuIHRoaXMuc2VsZWN0aW9uTWFuYWdlci5pc1NlbGVjdGVkKGl0ZW0pO1xyXG4gICAgfVxyXG5cclxuICAgIGVudGl0eUluZm9DbGljayhldmVudDogTW91c2VFdmVudCkge1xyXG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XHJcbiAgICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcGFnZUNoYW5nZShwYWdlOiBudW1iZXIpIHtcclxuICAgICAgICB0aGlzLnBhZ2luYXRpb25Db25maWcuY3VycmVudFBhZ2UgPSBwYWdlO1xyXG4gICAgICAgIHRoaXMucGFnaW5hdGlvbkNvbmZpZyQubmV4dCh0aGlzLnBhZ2luYXRpb25Db25maWcpO1xyXG4gICAgfVxyXG5cclxuICAgIGl0ZW1zUGVyUGFnZUNoYW5nZShpdGVtc1BlclBhZ2U6IG51bWJlcikge1xyXG4gICAgICAgIHRoaXMucGFnaW5hdGlvbkNvbmZpZy5pdGVtc1BlclBhZ2UgPSBpdGVtc1BlclBhZ2U7XHJcbiAgICAgICAgdGhpcy5wYWdpbmF0aW9uQ29uZmlnJC5uZXh0KHRoaXMucGFnaW5hdGlvbkNvbmZpZyk7XHJcbiAgICB9XHJcblxyXG4gICAgc2VsZWN0KCkge1xyXG4gICAgICAgIHRoaXMucmVzb2x2ZVdpdGgodGhpcy5zZWxlY3Rpb25NYW5hZ2VyLnNlbGVjdGlvbik7XHJcbiAgICB9XHJcblxyXG4gICAgY2FuY2VsKCkge1xyXG4gICAgICAgIHRoaXMucmVzb2x2ZVdpdGgoKTtcclxuICAgIH1cclxufVxyXG4iLCI8bmctdGVtcGxhdGUgdmRyRGlhbG9nVGl0bGU+XHJcbiAgICA8ZGl2IGNsYXNzPVwidGl0bGUtcm93XCI+XHJcbiAgICAgICAgPHNwYW4gKm5nSWY9XCJtb2RlID09PSAncHJvZHVjdCdcIj57eyAnY29tbW9uLnNlbGVjdC1wcm9kdWN0cycgfCB0cmFuc2xhdGUgfX08L3NwYW4+XHJcbiAgICAgICAgPHNwYW4gKm5nSWY9XCJtb2RlID09PSAndmFyaWFudCdcIj57eyAnY29tbW9uLnNlbGVjdC12YXJpYW50cycgfCB0cmFuc2xhdGUgfX08L3NwYW4+XHJcbiAgICA8L2Rpdj5cclxuPC9uZy10ZW1wbGF0ZT5cclxuPHZkci1wcm9kdWN0LXNlYXJjaC1pbnB1dFxyXG4gICAgI3Byb2R1Y3RTZWFyY2hJbnB1dENvbXBvbmVudFxyXG4gICAgW2ZhY2V0VmFsdWVSZXN1bHRzXT1cImZhY2V0VmFsdWVzJCB8IGFzeW5jXCJcclxuICAgIChzZWFyY2hUZXJtQ2hhbmdlKT1cInNldFNlYXJjaFRlcm0oJGV2ZW50KVwiXHJcbiAgICAoZmFjZXRWYWx1ZUNoYW5nZSk9XCJzZXRGYWNldFZhbHVlSWRzKCRldmVudClcIlxyXG4+PC92ZHItcHJvZHVjdC1zZWFyY2gtaW5wdXQ+XHJcbjxkaXYgY2xhc3M9XCJmbGV4LXdyYXBwZXJcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJnYWxsZXJ5XCI+XHJcbiAgICAgICAgPGRpdlxyXG4gICAgICAgICAgICBjbGFzcz1cImNhcmRcIlxyXG4gICAgICAgICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiAoaXRlbXMkIHwgYXN5bmMpIHx8IFtdIHwgcGFnaW5hdGU6IHBhZ2luYXRpb25Db25maWc7IHRyYWNrQnk6IHRyYWNrQnlGblwiXHJcbiAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVTZWxlY3Rpb24oaXRlbSwgJGV2ZW50KVwiXHJcbiAgICAgICAgICAgIFtjbGFzcy5zZWxlY3RlZF09XCJpc1NlbGVjdGVkKGl0ZW0pXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkLWltZ1wiPlxyXG4gICAgICAgICAgICAgICAgPHZkci1zZWxlY3QtdG9nZ2xlXHJcbiAgICAgICAgICAgICAgICAgICAgW3NlbGVjdGVkXT1cImlzU2VsZWN0ZWQoaXRlbSlcIlxyXG4gICAgICAgICAgICAgICAgICAgIFtkaXNhYmxlZF09XCJ0cnVlXCJcclxuICAgICAgICAgICAgICAgICAgICBbaGlkZGVuV2hlbk9mZl09XCJ0cnVlXCJcclxuICAgICAgICAgICAgICAgID48L3Zkci1zZWxlY3QtdG9nZ2xlPlxyXG4gICAgICAgICAgICAgICAgPGltZ1xyXG4gICAgICAgICAgICAgICAgICAgIFtzcmNdPVwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIChtb2RlID09PSAncHJvZHVjdCdcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgID8gaXRlbS5wcm9kdWN0QXNzZXRcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDogaXRlbS5wcm9kdWN0VmFyaWFudEFzc2V0IHx8IGl0ZW0ucHJvZHVjdEFzc2V0XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICkgfCBhc3NldFByZXZpZXc6ICd0aHVtYidcclxuICAgICAgICAgICAgICAgICAgICBcIlxyXG4gICAgICAgICAgICAgICAgLz5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZXRhaWxcIj5cclxuICAgICAgICAgICAgICAgIDxzcGFuIFt0aXRsZV09XCJtb2RlID09PSAncHJvZHVjdCcgPyBpdGVtLnByb2R1Y3ROYW1lIDogaXRlbS5wcm9kdWN0VmFyaWFudE5hbWVcIj57e1xyXG4gICAgICAgICAgICAgICAgICAgIG1vZGUgPT09ICdwcm9kdWN0JyA/IGl0ZW0ucHJvZHVjdE5hbWUgOiBpdGVtLnByb2R1Y3RWYXJpYW50TmFtZVxyXG4gICAgICAgICAgICAgICAgfX08L3NwYW4+XHJcbiAgICAgICAgICAgICAgICA8ZGl2ICpuZ0lmPVwibW9kZSA9PT0gJ3ZhcmlhbnQnXCI+PHNtYWxsPnt7IGl0ZW0uc2t1IH19PC9zbWFsbD48L2Rpdj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJzZWxlY3Rpb25cIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwibS0yIGZsZXggY2VudGVyXCI+XHJcbiAgICAgICAgICAgIDxkaXY+XHJcbiAgICAgICAgICAgICAgICB7eyAnY29tbW9uLml0ZW1zLXNlbGVjdGVkLWNvdW50JyB8IHRyYW5zbGF0ZTogeyBjb3VudDogc2VsZWN0aW9uTWFuYWdlci5zZWxlY3Rpb24ubGVuZ3RoIH0gfX1cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4LXNwYWNlclwiPjwvZGl2PlxyXG4gICAgICAgICAgICA8YnV0dG9uIGNsYXNzPVwiYnRuIGJ0bi1zbSBidG4tbGlua1wiIChjbGljayk9XCJjbGVhclNlbGVjdGlvbigpXCI+XHJcbiAgICAgICAgICAgICAgICA8Y2RzLWljb24gc2hhcGU9XCJ0aW1lc1wiPjwvY2RzLWljb24+IHt7ICdjb21tb24uY2xlYXItc2VsZWN0aW9uJyB8IHRyYW5zbGF0ZSB9fVxyXG4gICAgICAgICAgICA8L2J1dHRvbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwic2VsZWN0ZWQtaXRlbXNcIj5cclxuICAgICAgICAgICAgPGRpdiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBzZWxlY3Rpb25NYW5hZ2VyLnNlbGVjdGlvblwiIGNsYXNzPVwiZmxleCBpdGVtLXJvd1wiPlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cIlwiPnt7IG1vZGUgPT09ICdwcm9kdWN0JyA/IGl0ZW0ucHJvZHVjdE5hbWUgOiBpdGVtLnByb2R1Y3RWYXJpYW50TmFtZSB9fTwvZGl2PlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXgtc3BhY2VyXCI+PC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8ZGl2PlxyXG4gICAgICAgICAgICAgICAgICAgIDxidXR0b24gY2xhc3M9XCJpY29uLWJ1dHRvblwiIChjbGljayk9XCJ0b2dnbGVTZWxlY3Rpb24oaXRlbSwgJGV2ZW50KVwiPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICA8Y2RzLWljb24gc2hhcGU9XCJ0aW1lc1wiPjwvY2RzLWljb24+XHJcbiAgICAgICAgICAgICAgICAgICAgPC9idXR0b24+XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+XHJcblxyXG48ZGl2IGNsYXNzPVwicGFnaW5nLWNvbnRyb2xzXCI+XHJcbiAgICA8dmRyLWl0ZW1zLXBlci1wYWdlLWNvbnRyb2xzXHJcbiAgICAgICAgW2l0ZW1zUGVyUGFnZV09XCJwYWdpbmF0aW9uQ29uZmlnLml0ZW1zUGVyUGFnZVwiXHJcbiAgICAgICAgKGl0ZW1zUGVyUGFnZUNoYW5nZSk9XCJpdGVtc1BlclBhZ2VDaGFuZ2UoJGV2ZW50KVwiXHJcbiAgICA+PC92ZHItaXRlbXMtcGVyLXBhZ2UtY29udHJvbHM+XHJcblxyXG4gICAgPHZkci1wYWdpbmF0aW9uLWNvbnRyb2xzXHJcbiAgICAgICAgW2N1cnJlbnRQYWdlXT1cInBhZ2luYXRpb25Db25maWcuY3VycmVudFBhZ2VcIlxyXG4gICAgICAgIFtpdGVtc1BlclBhZ2VdPVwicGFnaW5hdGlvbkNvbmZpZy5pdGVtc1BlclBhZ2VcIlxyXG4gICAgICAgIFt0b3RhbEl0ZW1zXT1cInBhZ2luYXRpb25Db25maWcudG90YWxJdGVtc1wiXHJcbiAgICAgICAgKHBhZ2VDaGFuZ2UpPVwicGFnZUNoYW5nZSgkZXZlbnQpXCJcclxuICAgID48L3Zkci1wYWdpbmF0aW9uLWNvbnRyb2xzPlxyXG48L2Rpdj5cclxuXHJcbjxuZy10ZW1wbGF0ZSB2ZHJEaWFsb2dCdXR0b25zPlxyXG4gICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJidG5cIiAoY2xpY2spPVwiY2FuY2VsKClcIj57eyAnY29tbW9uLmNhbmNlbCcgfCB0cmFuc2xhdGUgfX08L2J1dHRvbj5cclxuICAgIDxidXR0b25cclxuICAgICAgICB0eXBlPVwic3VibWl0XCJcclxuICAgICAgICAoY2xpY2spPVwic2VsZWN0KClcIlxyXG4gICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1wcmltYXJ5XCJcclxuICAgICAgICBbZGlzYWJsZWRdPVwic2VsZWN0aW9uTWFuYWdlci5zZWxlY3Rpb24ubGVuZ3RoID09PSAwXCJcclxuICAgID5cclxuICAgICAgICB7eyAnY29tbW9uLnNlbGVjdC1pdGVtcy13aXRoLWNvdW50JyB8IHRyYW5zbGF0ZTogeyBjb3VudDogc2VsZWN0aW9uTWFuYWdlci5zZWxlY3Rpb24ubGVuZ3RoIH0gfX1cclxuICAgIDwvYnV0dG9uPlxyXG48L25nLXRlbXBsYXRlPlxyXG4iXX0=

package/esm2022/core/shared/components/product-search-input/product-search-input.component.mjs

@@ -86,11 +86,11 @@ export class ProductSearchInputComponent {
         return this.selectComponent.itemsList.markedIndex === -1;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: { facetValueResults: "facetValueResults" }, outputs: { searchTermChange: "searchTermChange", facetValueChange: "facetValueChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}ng-select{width:100%;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: i3.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i4.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: { facetValueResults: "facetValueResults" }, outputs: { searchTermChange: "searchTermChange", facetValueChange: "facetValueChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}ng-select{width:100%;margin-inline-end:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: i3.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i4.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductSearchInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-search-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}ng-select{width:100%;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"] }]
+            args: [{ selector: 'vdr-product-search-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}ng-select{width:100%;margin-inline-end:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"] }]
         }], propDecorators: { facetValueResults: [{
                 type: Input
             }], searchTermChange: [{

package/esm2022/core/shared/components/product-variant-selector/product-variant-selector.component.mjs

@@ -48,11 +48,11 @@ export class ProductVariantSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductVariantSelectorComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: { productSelected: "productSelected" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["autoComplete"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}img{border-radius:var(--border-radius-img)}\n"], dependencies: [{ kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductVariantSelectorComponent, selector: "vdr-product-variant-selector", outputs: { productSelected: "productSelected" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["autoComplete"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-inline-start:12px;color:var(--color-grey-500)}img{border-radius:var(--border-radius-img)}\n"], dependencies: [{ kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i5.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductVariantSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-left:12px;color:var(--color-grey-500)}img{border-radius:var(--border-radius-img)}\n"] }]
+            args: [{ selector: 'vdr-product-variant-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-select\r\n    #autoComplete\r\n    [items]=\"searchResults$ | async\"\r\n    [addTag]=\"false\"\r\n    [multiple]=\"false\"\r\n    [hideSelected]=\"true\"\r\n    [loading]=\"searchLoading\"\r\n    [typeahead]=\"searchInput$\"\r\n    [appendTo]=\"'body'\"\r\n    [placeholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    (change)=\"selectResult($event)\"\r\n>\r\n    <ng-template ng-option-tmp let-item=\"item\">\r\n        <img [src]=\"item.productAsset | assetPreview: 32\">\r\n        {{ item.productVariantName }}\r\n        <small class=\"sku\">{{ item.sku }}</small>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{display:block}.sku{margin-inline-start:12px;color:var(--color-grey-500)}img{border-radius:var(--border-radius-img)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }]; }, propDecorators: { productSelected: [{
                 type: Output
             }], ngSelect: [{

package/esm2022/core/shared/components/radio-card/radio-card.component.mjs

@@ -39,11 +39,11 @@ export class RadioCardComponent {
         return this.fieldset.idFn(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: RadioCardComponent, deps: [{ token: i1.RadioCardFieldsetComponent }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: RadioCardComponent, selector: "vdr-radio-card", inputs: { item: "item" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["VdrRadioCard"], ngImport: i0, template: "<label\r\n    [ngClass]=\"{\r\n        'selected': isSelected(item),\r\n        'focussed': isFocussed(item)\r\n    }\"\r\n    class=\"radio-card\"\r\n>\r\n    <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"getItemId(item)\"\r\n        class=\"hidden\"\r\n        (focus)=\"setFocussedId(item)\"\r\n        (blur)=\"setFocussedId(undefined)\"\r\n        (change)=\"selectChanged(item)\"\r\n    />\r\n    <vdr-select-toggle [selected]=\"isSelected(item)\" size=\"small\"></vdr-select-toggle>\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</label>\r\n", styles: [":host{display:inline-block}.radio-card{background:none;position:relative;display:block;border:1px solid var(--clr-btn-default-border-color, #0072a3);border-radius:var(--clr-btn-border-radius, .15rem);padding:6px;text-align:left;margin:6px}.radio-card:hover{cursor:pointer;outline:1px solid var(--color-primary-500)}.radio-card.selected{outline:1px solid var(--color-primary-500);background-color:var(--color-primary-100)}input.hidden{visibility:hidden;position:absolute}vdr-select-toggle{position:absolute;top:3px;left:3px}.content{margin-left:24px}\n"], dependencies: [{ kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i5.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: RadioCardComponent, selector: "vdr-radio-card", inputs: { item: "item" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["VdrRadioCard"], ngImport: i0, template: "<label\r\n    [ngClass]=\"{\r\n        'selected': isSelected(item),\r\n        'focussed': isFocussed(item)\r\n    }\"\r\n    class=\"radio-card\"\r\n>\r\n    <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"getItemId(item)\"\r\n        class=\"hidden\"\r\n        (focus)=\"setFocussedId(item)\"\r\n        (blur)=\"setFocussedId(undefined)\"\r\n        (change)=\"selectChanged(item)\"\r\n    />\r\n    <vdr-select-toggle [selected]=\"isSelected(item)\" size=\"small\"></vdr-select-toggle>\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</label>\r\n", styles: [":host{display:inline-block}.radio-card{background:none;position:relative;display:block;border:1px solid var(--clr-btn-default-border-color, #0072a3);border-radius:var(--clr-btn-border-radius, .15rem);padding:6px;text-align:start;margin:6px}.radio-card:hover{cursor:pointer;outline:1px solid var(--color-primary-500)}.radio-card.selected{outline:1px solid var(--color-primary-500);background-color:var(--color-primary-100)}input.hidden{visibility:hidden;position:absolute}vdr-select-toggle{position:absolute;top:3px;left:3px}.content{margin-inline-start:24px}\n"], dependencies: [{ kind: "directive", type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i5.SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: RadioCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-radio-card', exportAs: 'VdrRadioCard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\r\n    [ngClass]=\"{\r\n        'selected': isSelected(item),\r\n        'focussed': isFocussed(item)\r\n    }\"\r\n    class=\"radio-card\"\r\n>\r\n    <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"getItemId(item)\"\r\n        class=\"hidden\"\r\n        (focus)=\"setFocussedId(item)\"\r\n        (blur)=\"setFocussedId(undefined)\"\r\n        (change)=\"selectChanged(item)\"\r\n    />\r\n    <vdr-select-toggle [selected]=\"isSelected(item)\" size=\"small\"></vdr-select-toggle>\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</label>\r\n", styles: [":host{display:inline-block}.radio-card{background:none;position:relative;display:block;border:1px solid var(--clr-btn-default-border-color, #0072a3);border-radius:var(--clr-btn-border-radius, .15rem);padding:6px;text-align:left;margin:6px}.radio-card:hover{cursor:pointer;outline:1px solid var(--color-primary-500)}.radio-card.selected{outline:1px solid var(--color-primary-500);background-color:var(--color-primary-100)}input.hidden{visibility:hidden;position:absolute}vdr-select-toggle{position:absolute;top:3px;left:3px}.content{margin-left:24px}\n"] }]
+            args: [{ selector: 'vdr-radio-card', exportAs: 'VdrRadioCard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\r\n    [ngClass]=\"{\r\n        'selected': isSelected(item),\r\n        'focussed': isFocussed(item)\r\n    }\"\r\n    class=\"radio-card\"\r\n>\r\n    <input\r\n        type=\"radio\"\r\n        [name]=\"name\"\r\n        [value]=\"getItemId(item)\"\r\n        class=\"hidden\"\r\n        (focus)=\"setFocussedId(item)\"\r\n        (blur)=\"setFocussedId(undefined)\"\r\n        (change)=\"selectChanged(item)\"\r\n    />\r\n    <vdr-select-toggle [selected]=\"isSelected(item)\" size=\"small\"></vdr-select-toggle>\r\n    <div class=\"content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</label>\r\n", styles: [":host{display:inline-block}.radio-card{background:none;position:relative;display:block;border:1px solid var(--clr-btn-default-border-color, #0072a3);border-radius:var(--clr-btn-border-radius, .15rem);padding:6px;text-align:start;margin:6px}.radio-card:hover{cursor:pointer;outline:1px solid var(--color-primary-500)}.radio-card.selected{outline:1px solid var(--color-primary-500);background-color:var(--color-primary-100)}input.hidden{visibility:hidden;position:absolute}vdr-select-toggle{position:absolute;top:3px;left:3px}.content{margin-inline-start:24px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.RadioCardFieldsetComponent }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
                 type: Input
             }], itemTemplate: [{

package/esm2022/core/shared/components/rich-text-editor/external-image-dialog/external-image-dialog.component.mjs

@@ -28,10 +28,10 @@ export class ExternalImageDialogComponent {
         this.previewLoaded = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ExternalImageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ExternalImageDialogComponent, selector: "vdr-external-image-dialog", ngImport: i0, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        <ng-container *ngIf=\"existing; else doesNotExist\">{{ 'common.update' | translate }}</ng-container>\r\n        <ng-template #doesNotExist>{{ 'editor.insert-image' | translate }}</ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-left:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i1.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { kind: "directive", type: i1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i5.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ExternalImageDialogComponent, selector: "vdr-external-image-dialog", ngImport: i0, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        <ng-container *ngIf=\"existing; else doesNotExist\">{{ 'common.update' | translate }}</ng-container>\r\n        <ng-template #doesNotExist>{{ 'editor.insert-image' | translate }}</ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-inline-start:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.ClrForm, selector: "[clrForm]", inputs: ["clrLabelSize"] }, { kind: "directive", type: i1.ClrLayout, selector: "[clrForm][clrLayout]", inputs: ["clrLayout"] }, { kind: "directive", type: i1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i5.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ExternalImageDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-external-image-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        <ng-container *ngIf=\"existing; else doesNotExist\">{{ 'common.update' | translate }}</ng-container>\r\n        <ng-template #doesNotExist>{{ 'editor.insert-image' | translate }}</ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-left:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"] }]
+            args: [{ selector: 'vdr-external-image-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex\">\r\n    <form [formGroup]=\"form\" class=\"flex-spacer\" clrForm clrLayout=\"vertical\">\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-src' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"src\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-title' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"title\" />\r\n        </clr-input-container>\r\n        <clr-input-container class=\"expand\">\r\n            <label>{{ 'editor.image-alt' | translate }}</label>\r\n            <input clrInput type=\"text\" formControlName=\"alt\" />\r\n        </clr-input-container>\r\n    </form>\r\n    <div class=\"preview\">\r\n        <img\r\n            [src]=\"form.get('src')?.value\"\r\n            [class.visible]=\"previewLoaded\"\r\n            (load)=\"onImageLoad($event)\"\r\n            (error)=\"onImageError($event)\"\r\n        />\r\n        <div class=\"placeholder\" *ngIf=\"!previewLoaded\">\r\n            <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"form.invalid || !previewLoaded\">\r\n        <ng-container *ngIf=\"existing; else doesNotExist\">{{ 'common.update' | translate }}</ng-container>\r\n        <ng-template #doesNotExist>{{ 'editor.insert-image' | translate }}</ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: [".preview{display:flex;align-items:center;justify-content:center;max-width:150px;margin-inline-start:12px}.preview img{max-width:100%;display:none}.preview img.visible{display:block}.preview .placeholder{color:var(--color-grey-300)}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXh0ZXJuYWwtaW1hZ2UtZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29yZS9zcmMvc2hhcmVkL2NvbXBvbmVudHMvcmljaC10ZXh0LWVkaXRvci9leHRlcm5hbC1pbWFnZS1kaWFsb2cvZXh0ZXJuYWwtaW1hZ2UtZGlhbG9nLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29yZS9zcmMvc2hhcmVkL2NvbXBvbmVudHMvcmljaC10ZXh0LWVkaXRvci9leHRlcm5hbC1pbWFnZS1kaWFsb2cvZXh0ZXJuYWwtaW1hZ2UtZGlhbG9nLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFDM0UsT0FBTyxFQUFFLGtCQUFrQixFQUFFLGdCQUFnQixFQUFFLFVBQVUsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7OztBQWdCbEYsTUFBTSxPQUFPLDRCQUE0QjtJQU56QztRQVVJLGtCQUFhLEdBQUcsS0FBSyxDQUFDO0tBc0J6QjtJQW5CRyxRQUFRO1FBQ0osSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLGdCQUFnQixDQUFDO1lBQzdCLEdBQUcsRUFBRSxJQUFJLGtCQUFrQixDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsVUFBVSxDQUFDLFFBQVEsQ0FBQztZQUN4RixLQUFLLEVBQUUsSUFBSSxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDO1lBQ3ZFLEdBQUcsRUFBRSxJQUFJLGtCQUFrQixDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7U0FDdEUsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELE1BQU07UUFDRixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDdEMsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFZO1FBQ3BCLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO0lBQzlCLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBWTtRQUNyQixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztJQUMvQixDQUFDOzhHQXpCUSw0QkFBNEI7a0dBQTVCLDRCQUE0QixpRUNqQnpDLDRsREFrQ0E7OzJGRGpCYSw0QkFBNEI7a0JBTnhDLFNBQVM7K0JBQ0ksMkJBQTJCLG1CQUdwQix1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFVudHlwZWRGb3JtQ29udHJvbCwgVW50eXBlZEZvcm1Hcm91cCwgVmFsaWRhdG9ycyB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuXHJcbmltcG9ydCB7IERpYWxvZyB9IGZyb20gJy4uLy4uLy4uLy4uL3Byb3ZpZGVycy9tb2RhbC9tb2RhbC50eXBlcyc7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIEV4dGVybmFsSW1hZ2VBdHRycyB7XHJcbiAgICBzcmM6IHN0cmluZztcclxuICAgIHRpdGxlOiBzdHJpbmc7XHJcbiAgICBhbHQ6IHN0cmluZztcclxufVxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3Zkci1leHRlcm5hbC1pbWFnZS1kaWFsb2cnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2V4dGVybmFsLWltYWdlLWRpYWxvZy5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9leHRlcm5hbC1pbWFnZS1kaWFsb2cuY29tcG9uZW50LnNjc3MnXSxcclxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgRXh0ZXJuYWxJbWFnZURpYWxvZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgRGlhbG9nPEV4dGVybmFsSW1hZ2VBdHRycz4ge1xyXG4gICAgZm9ybTogVW50eXBlZEZvcm1Hcm91cDtcclxuXHJcbiAgICByZXNvbHZlV2l0aDogKHJlc3VsdD86IEV4dGVybmFsSW1hZ2VBdHRycykgPT4gdm9pZDtcclxuICAgIHByZXZpZXdMb2FkZWQgPSBmYWxzZTtcclxuICAgIGV4aXN0aW5nPzogRXh0ZXJuYWxJbWFnZUF0dHJzO1xyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuZm9ybSA9IG5ldyBVbnR5cGVkRm9ybUdyb3VwKHtcclxuICAgICAgICAgICAgc3JjOiBuZXcgVW50eXBlZEZvcm1Db250cm9sKHRoaXMuZXhpc3RpbmcgPyB0aGlzLmV4aXN0aW5nLnNyYyA6ICcnLCBWYWxpZGF0b3JzLnJlcXVpcmVkKSxcclxuICAgICAgICAgICAgdGl0bGU6IG5ldyBVbnR5cGVkRm9ybUNvbnRyb2wodGhpcy5leGlzdGluZyA/IHRoaXMuZXhpc3RpbmcudGl0bGUgOiAnJyksXHJcbiAgICAgICAgICAgIGFsdDogbmV3IFVudHlwZWRGb3JtQ29udHJvbCh0aGlzLmV4aXN0aW5nID8gdGhpcy5leGlzdGluZy5hbHQgOiAnJyksXHJcbiAgICAgICAgfSk7XHJcbiAgICB9XHJcblxyXG4gICAgc2VsZWN0KCkge1xyXG4gICAgICAgIHRoaXMucmVzb2x2ZVdpdGgodGhpcy5mb3JtLnZhbHVlKTtcclxuICAgIH1cclxuXHJcbiAgICBvbkltYWdlTG9hZChldmVudDogRXZlbnQpIHtcclxuICAgICAgICB0aGlzLnByZXZpZXdMb2FkZWQgPSB0cnVlO1xyXG4gICAgfVxyXG5cclxuICAgIG9uSW1hZ2VFcnJvcihldmVudDogRXZlbnQpIHtcclxuICAgICAgICB0aGlzLnByZXZpZXdMb2FkZWQgPSBmYWxzZTtcclxuICAgIH1cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiZmxleFwiPlxyXG4gICAgPGZvcm0gW2Zvcm1Hcm91cF09XCJmb3JtXCIgY2xhc3M9XCJmbGV4LXNwYWNlclwiIGNsckZvcm0gY2xyTGF5b3V0PVwidmVydGljYWxcIj5cclxuICAgICAgICA8Y2xyLWlucHV0LWNvbnRhaW5lciBjbGFzcz1cImV4cGFuZFwiPlxyXG4gICAgICAgICAgICA8bGFiZWw+e3sgJ2VkaXRvci5pbWFnZS1zcmMnIHwgdHJhbnNsYXRlIH19PC9sYWJlbD5cclxuICAgICAgICAgICAgPGlucHV0IGNscklucHV0IHR5cGU9XCJ0ZXh0XCIgZm9ybUNvbnRyb2xOYW1lPVwic3JjXCIgLz5cclxuICAgICAgICA8L2Nsci1pbnB1dC1jb250YWluZXI+XHJcbiAgICAgICAgPGNsci1pbnB1dC1jb250YWluZXIgY2xhc3M9XCJleHBhbmRcIj5cclxuICAgICAgICAgICAgPGxhYmVsPnt7ICdlZGl0b3IuaW1hZ2UtdGl0bGUnIHwgdHJhbnNsYXRlIH19PC9sYWJlbD5cclxuICAgICAgICAgICAgPGlucHV0IGNscklucHV0IHR5cGU9XCJ0ZXh0XCIgZm9ybUNvbnRyb2xOYW1lPVwidGl0bGVcIiAvPlxyXG4gICAgICAgIDwvY2xyLWlucHV0LWNvbnRhaW5lcj5cclxuICAgICAgICA8Y2xyLWlucHV0LWNvbnRhaW5lciBjbGFzcz1cImV4cGFuZFwiPlxyXG4gICAgICAgICAgICA8bGFiZWw+e3sgJ2VkaXRvci5pbWFnZS1hbHQnIHwgdHJhbnNsYXRlIH19PC9sYWJlbD5cclxuICAgICAgICAgICAgPGlucHV0IGNscklucHV0IHR5cGU9XCJ0ZXh0XCIgZm9ybUNvbnRyb2xOYW1lPVwiYWx0XCIgLz5cclxuICAgICAgICA8L2Nsci1pbnB1dC1jb250YWluZXI+XHJcbiAgICA8L2Zvcm0+XHJcbiAgICA8ZGl2IGNsYXNzPVwicHJldmlld1wiPlxyXG4gICAgICAgIDxpbWdcclxuICAgICAgICAgICAgW3NyY109XCJmb3JtLmdldCgnc3JjJyk/LnZhbHVlXCJcclxuICAgICAgICAgICAgW2NsYXNzLnZpc2libGVdPVwicHJldmlld0xvYWRlZFwiXHJcbiAgICAgICAgICAgIChsb2FkKT1cIm9uSW1hZ2VMb2FkKCRldmVudClcIlxyXG4gICAgICAgICAgICAoZXJyb3IpPVwib25JbWFnZUVycm9yKCRldmVudClcIlxyXG4gICAgICAgIC8+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInBsYWNlaG9sZGVyXCIgKm5nSWY9XCIhcHJldmlld0xvYWRlZFwiPlxyXG4gICAgICAgICAgICA8Y2xyLWljb24gc2hhcGU9XCJpbWFnZVwiIHNpemU9XCIxMjhcIj48L2Nsci1pY29uPlxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG5cclxuPG5nLXRlbXBsYXRlIHZkckRpYWxvZ0J1dHRvbnM+XHJcbiAgICA8YnV0dG9uIHR5cGU9XCJzdWJtaXRcIiAoY2xpY2spPVwic2VsZWN0KClcIiBjbGFzcz1cImJ0biBidG4tcHJpbWFyeVwiIFtkaXNhYmxlZF09XCJmb3JtLmludmFsaWQgfHwgIXByZXZpZXdMb2FkZWRcIj5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiZXhpc3Rpbmc7IGVsc2UgZG9lc05vdEV4aXN0XCI+e3sgJ2NvbW1vbi51cGRhdGUnIHwgdHJhbnNsYXRlIH19PC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgPG5nLXRlbXBsYXRlICNkb2VzTm90RXhpc3Q+e3sgJ2VkaXRvci5pbnNlcnQtaW1hZ2UnIHwgdHJhbnNsYXRlIH19PC9uZy10ZW1wbGF0ZT5cclxuICAgIDwvYnV0dG9uPlxyXG48L25nLXRlbXBsYXRlPlxyXG4iXX0=

package/esm2022/core/shared/components/rich-text-editor/prosemirror/context-menu/context-menu.component.mjs

@@ -122,11 +122,11 @@ export class ContextMenuComponent {
         return inverted;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ContextMenuComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i2.ContextMenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ContextMenuComponent, selector: "vdr-context-menu", inputs: { editorMenuElement: "editorMenuElement" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["contextMenu"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #contextMenu>\r\n    <vdr-dropdown>\r\n        <button class=\"context-menu-trigger\" vdrDropdownTrigger [class.hidden]=\"hideTrigger$ | async\" (click)=\"triggerClick()\">\r\n            <clr-icon\r\n                *ngIf=\"menuConfig?.iconShape as shape\"\r\n                [attr.shape]=\"shape\"\r\n                size=\"16\"\r\n                class=\"mr2\"\r\n            ></clr-icon>\r\n            <span class=\"title-label\">{{ menuConfig?.title }}</span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\" customClasses=\"context-menu\">\r\n            <ng-container *ngFor=\"let item of menuConfig?.items\">\r\n                <button\r\n                    class=\"context-menu-item\"\r\n                    *ngIf=\"item.enabled && item.separator !== true\"\r\n                    type=\"button\"\r\n                    (click)=\"clickItem(item)\"\r\n                >\r\n                    <div *ngIf=\"item.iconClass\" class=\"cm-icon\" [ngClass]=\"item.iconClass\"></div>\r\n                    <clr-icon\r\n                        *ngIf=\"item.iconShape as shape\"\r\n                        [attr.shape]=\"shape\"\r\n                        size=\"16\"\r\n                        class=\"mr2\"\r\n                    ></clr-icon>\r\n                    {{ item.label }}\r\n                </button>\r\n                <div *ngIf=\"item.enabled && item.separator\" class=\"dropdown-divider\" role=\"separator\"></div>\r\n            </ng-container>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-template>\r\n", styles: [".context-menu-trigger{margin:0;display:flex;align-items:center;border:1px solid var(--color-component-border-200);font-size:90%;color:var(--color-text-200);border-radius:var(--border-radius-input);background-color:var(--color-component-bg-100)}.title-label{padding-right:15px;position:relative}.title-label:after{content:\"\";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}.context-menu-item{display:flex;align-items:center;width:100%;text-align:start;font-size:90%;color:var(--color-text-200);background-color:var(--color-component-bg-100);cursor:pointer;border:none}.context-menu-item:hover{background-color:var(--color-component-bg-200)}::ng-deep .dropdown-menu.context-menu{padding:0;background-color:var(--color-component-bg-100)}::ng-deep .context-menu-trigger{min-height:16px}::ng-deep .context-menu-trigger.hidden{visibility:hidden}::ng-deep .cm-icon.add-column{height:14px;width:4px;border:1px solid;margin:0 6px 0 8px;position:relative}::ng-deep .cm-icon.add-column:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-10px}::ng-deep .cm-icon.add-row{height:4px;width:14px;border:1px solid;margin:6px 4px 2px 0;position:relative}::ng-deep .cm-icon.add-row:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-2px;top:-10px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ContextMenuComponent, selector: "vdr-context-menu", inputs: { editorMenuElement: "editorMenuElement" }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["contextMenu"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #contextMenu>\r\n    <vdr-dropdown>\r\n        <button class=\"context-menu-trigger\" vdrDropdownTrigger [class.hidden]=\"hideTrigger$ | async\" (click)=\"triggerClick()\">\r\n            <clr-icon\r\n                *ngIf=\"menuConfig?.iconShape as shape\"\r\n                [attr.shape]=\"shape\"\r\n                size=\"16\"\r\n                class=\"mr2\"\r\n            ></clr-icon>\r\n            <span class=\"title-label\">{{ menuConfig?.title }}</span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\" customClasses=\"context-menu\">\r\n            <ng-container *ngFor=\"let item of menuConfig?.items\">\r\n                <button\r\n                    class=\"context-menu-item\"\r\n                    *ngIf=\"item.enabled && item.separator !== true\"\r\n                    type=\"button\"\r\n                    (click)=\"clickItem(item)\"\r\n                >\r\n                    <div *ngIf=\"item.iconClass\" class=\"cm-icon\" [ngClass]=\"item.iconClass\"></div>\r\n                    <clr-icon\r\n                        *ngIf=\"item.iconShape as shape\"\r\n                        [attr.shape]=\"shape\"\r\n                        size=\"16\"\r\n                        class=\"mr2\"\r\n                    ></clr-icon>\r\n                    {{ item.label }}\r\n                </button>\r\n                <div *ngIf=\"item.enabled && item.separator\" class=\"dropdown-divider\" role=\"separator\"></div>\r\n            </ng-container>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-template>\r\n", styles: [".context-menu-trigger{margin:0;display:flex;align-items:center;border:1px solid var(--color-component-border-200);font-size:90%;color:var(--color-text-200);border-radius:var(--border-radius-input);background-color:var(--color-component-bg-100)}.title-label{padding-inline-end:15px;position:relative}.title-label:after{content:\"\";border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}.context-menu-item{display:flex;align-items:center;width:100%;text-align:start;font-size:90%;color:var(--color-text-200);background-color:var(--color-component-bg-100);cursor:pointer;border:none}.context-menu-item:hover{background-color:var(--color-component-bg-200)}::ng-deep .dropdown-menu.context-menu{padding:0;background-color:var(--color-component-bg-100)}::ng-deep .context-menu-trigger{min-height:16px}::ng-deep .context-menu-trigger.hidden{visibility:hidden}::ng-deep .cm-icon.add-column{height:14px;width:4px;border:1px solid;margin:0 6px 0 8px;position:relative}::ng-deep .cm-icon.add-column:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-10px}::ng-deep .cm-icon.add-row{height:4px;width:14px;border:1px solid;margin:6px 4px 2px 0;position:relative}::ng-deep .cm-icon.add-row:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-2px;top:-10px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contextMenu>\r\n    <vdr-dropdown>\r\n        <button class=\"context-menu-trigger\" vdrDropdownTrigger [class.hidden]=\"hideTrigger$ | async\" (click)=\"triggerClick()\">\r\n            <clr-icon\r\n                *ngIf=\"menuConfig?.iconShape as shape\"\r\n                [attr.shape]=\"shape\"\r\n                size=\"16\"\r\n                class=\"mr2\"\r\n            ></clr-icon>\r\n            <span class=\"title-label\">{{ menuConfig?.title }}</span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\" customClasses=\"context-menu\">\r\n            <ng-container *ngFor=\"let item of menuConfig?.items\">\r\n                <button\r\n                    class=\"context-menu-item\"\r\n                    *ngIf=\"item.enabled && item.separator !== true\"\r\n                    type=\"button\"\r\n                    (click)=\"clickItem(item)\"\r\n                >\r\n                    <div *ngIf=\"item.iconClass\" class=\"cm-icon\" [ngClass]=\"item.iconClass\"></div>\r\n                    <clr-icon\r\n                        *ngIf=\"item.iconShape as shape\"\r\n                        [attr.shape]=\"shape\"\r\n                        size=\"16\"\r\n                        class=\"mr2\"\r\n                    ></clr-icon>\r\n                    {{ item.label }}\r\n                </button>\r\n                <div *ngIf=\"item.enabled && item.separator\" class=\"dropdown-divider\" role=\"separator\"></div>\r\n            </ng-container>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-template>\r\n", styles: [".context-menu-trigger{margin:0;display:flex;align-items:center;border:1px solid var(--color-component-border-200);font-size:90%;color:var(--color-text-200);border-radius:var(--border-radius-input);background-color:var(--color-component-bg-100)}.title-label{padding-right:15px;position:relative}.title-label:after{content:\"\";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}.context-menu-item{display:flex;align-items:center;width:100%;text-align:start;font-size:90%;color:var(--color-text-200);background-color:var(--color-component-bg-100);cursor:pointer;border:none}.context-menu-item:hover{background-color:var(--color-component-bg-200)}::ng-deep .dropdown-menu.context-menu{padding:0;background-color:var(--color-component-bg-100)}::ng-deep .context-menu-trigger{min-height:16px}::ng-deep .context-menu-trigger.hidden{visibility:hidden}::ng-deep .cm-icon.add-column{height:14px;width:4px;border:1px solid;margin:0 6px 0 8px;position:relative}::ng-deep .cm-icon.add-column:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-10px}::ng-deep .cm-icon.add-row{height:4px;width:14px;border:1px solid;margin:6px 4px 2px 0;position:relative}::ng-deep .cm-icon.add-row:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-2px;top:-10px}\n"] }]
+            args: [{ selector: 'vdr-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contextMenu>\r\n    <vdr-dropdown>\r\n        <button class=\"context-menu-trigger\" vdrDropdownTrigger [class.hidden]=\"hideTrigger$ | async\" (click)=\"triggerClick()\">\r\n            <clr-icon\r\n                *ngIf=\"menuConfig?.iconShape as shape\"\r\n                [attr.shape]=\"shape\"\r\n                size=\"16\"\r\n                class=\"mr2\"\r\n            ></clr-icon>\r\n            <span class=\"title-label\">{{ menuConfig?.title }}</span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\" customClasses=\"context-menu\">\r\n            <ng-container *ngFor=\"let item of menuConfig?.items\">\r\n                <button\r\n                    class=\"context-menu-item\"\r\n                    *ngIf=\"item.enabled && item.separator !== true\"\r\n                    type=\"button\"\r\n                    (click)=\"clickItem(item)\"\r\n                >\r\n                    <div *ngIf=\"item.iconClass\" class=\"cm-icon\" [ngClass]=\"item.iconClass\"></div>\r\n                    <clr-icon\r\n                        *ngIf=\"item.iconShape as shape\"\r\n                        [attr.shape]=\"shape\"\r\n                        size=\"16\"\r\n                        class=\"mr2\"\r\n                    ></clr-icon>\r\n                    {{ item.label }}\r\n                </button>\r\n                <div *ngIf=\"item.enabled && item.separator\" class=\"dropdown-divider\" role=\"separator\"></div>\r\n            </ng-container>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-template>\r\n", styles: [".context-menu-trigger{margin:0;display:flex;align-items:center;border:1px solid var(--color-component-border-200);font-size:90%;color:var(--color-text-200);border-radius:var(--border-radius-input);background-color:var(--color-component-bg-100)}.title-label{padding-inline-end:15px;position:relative}.title-label:after{content:\"\";border-inline-start:4px solid transparent;border-inline-end:4px solid transparent;border-top:4px solid currentColor;opacity:.6;position:absolute;right:4px;top:calc(50% - 2px)}.context-menu-item{display:flex;align-items:center;width:100%;text-align:start;font-size:90%;color:var(--color-text-200);background-color:var(--color-component-bg-100);cursor:pointer;border:none}.context-menu-item:hover{background-color:var(--color-component-bg-200)}::ng-deep .dropdown-menu.context-menu{padding:0;background-color:var(--color-component-bg-100)}::ng-deep .context-menu-trigger{min-height:16px}::ng-deep .context-menu-trigger.hidden{visibility:hidden}::ng-deep .cm-icon.add-column{height:14px;width:4px;border:1px solid;margin:0 6px 0 8px;position:relative}::ng-deep .cm-icon.add-column:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-10px}::ng-deep .cm-icon.add-row{height:4px;width:14px;border:1px solid;margin:6px 4px 2px 0;position:relative}::ng-deep .cm-icon.add-row:before{content:\"+\";position:absolute;font-size:16px;line-height:14px;left:-2px;top:-10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.ContextMenuService }]; }, propDecorators: { editorMenuElement: [{
                 type: Input
             }], menuTemplate: [{