npm - @vendure/admin-ui - Versions diffs - 2.0.6 → 2.0.8 - Mend

@vendure/admin-ui 2.0.6 → 2.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (118) hide show

package/fesm2022/vendure-admin-ui-core.mjs CHANGED Viewed

@@ -9350,11 +9350,11 @@ class ChannelSwitcherComponent {
         this.channelService.setActiveChannel(channelId).subscribe(() => this.filterControl.patchValue(''));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChannelSwitcherComponent, deps: [{ token: DataService }, { token: ChannelService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher", ngImport: i0, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"channel-label\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChannelSwitcherComponent, selector: "vdr-channel-switcher", ngImport: i0, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"channel-label\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChannelSwitcherComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-channel-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"channel-label\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'vdr-channel-switcher', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\r\n    <vdr-dropdown>\r\n        <button class=\"active-channel m-auto\" vdrDropdownTrigger>\r\n            <vdr-channel-badge [channelCode]=\"activeChannelCode$ | async\"></vdr-channel-badge>\r\n            <span class=\"channel-label\">{{\r\n                activeChannelCode$ | async | channelCodeToLabel | translate\r\n            }}</span>\r\n            <span class=\"trigger\"><clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon></span>\r\n        </button>\r\n        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n            <input\r\n                *ngIf=\"((channelCount$ | async) || 0) >= displayFilterThreshold\"\r\n                [formControl]=\"filterControl\"\r\n                type=\"text\"\r\n                class=\"ml2 mr2\"\r\n                [placeholder]=\"'common.filter' | translate\"\r\n            />\r\n            <button\r\n                *ngFor=\"let channel of channels$ | async\"\r\n                type=\"button\"\r\n                vdrDropdownItem\r\n                (click)=\"setActiveChannel(channel.id)\"\r\n            >\r\n                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                {{ channel.code | channelCodeToLabel | translate }}\r\n            </button>\r\n        </vdr-dropdown-menu>\r\n    </vdr-dropdown>\r\n</ng-container>\r\n", styles: [":host{display:block;align-items:center;height:2.5rem}.active-channel{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-xs);color:var(--color-left-nav-text);background-color:var(--color-channel-switcher-bg);border:none;cursor:pointer;width:100%;border-radius:var(--border-radius-lg);padding:var(--space-unit) calc(var(--space-unit) * 2);transition:background-color .1s,color .1s}.active-channel:hover{background-color:var(--color-channel-switcher-hover-bg);color:var(--color-left-nav-text-hover)}.active-channel clr-icon{color:var(--color-left-nav-text)}.channel-label{margin:0 3px;overflow:hidden;flex:1;white-space:nowrap;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: function () { return [{ type: DataService }, { type: ChannelService }]; } });
 class AppShellComponent {
@@ -11639,11 +11639,11 @@ class ChipComponent {
         this.iconClick = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChipComponent, selector: "vdr-chip", inputs: { icon: "icon", invert: "invert", colorFrom: "colorFrom", colorType: "colorType" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block;overflow:hidden}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:baseline;gap:2px}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"], dependencies: [{ kind: "directive", type: i1$4.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: "pipe", type: StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ChipComponent, selector: "vdr-chip", inputs: { icon: "icon", invert: "invert", colorFrom: "colorFrom", colorType: "colorType" }, outputs: { iconClick: "iconClick" }, ngImport: i0, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block;overflow:hidden}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:center;gap:2px}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"], dependencies: [{ kind: "directive", type: i1$4.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: "pipe", type: StringToColorPipe, name: "stringToColor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block;overflow:hidden}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:baseline;gap:2px}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"] }]
+            args: [{ selector: 'vdr-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    class=\"wrapper\"\r\n    [class.with-background]=\"!invert && colorFrom\"\r\n    [style.backgroundColor]=\"!invert && (colorFrom | stringToColor)\"\r\n    [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n    [style.borderColor]=\"invert && (colorFrom | stringToColor)\"\r\n    [ngClass]=\"colorType\"\r\n>\r\n    <div class=\"chip-label\"><ng-content></ng-content></div>\r\n    <div class=\"chip-icon\" *ngIf=\"icon\">\r\n        <button (click)=\"iconClick.emit($event)\">\r\n            <clr-icon\r\n                [attr.shape]=\"icon\"\r\n                [style.color]=\"invert && (colorFrom | stringToColor)\"\r\n                [class.is-inverse]=\"!invert && colorFrom\"\r\n            ></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:inline-block;overflow:hidden}.wrapper{display:flex;vertical-align:baseline;font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);font-weight:600;line-height:12px;text-align:center;color:var(--color-weight-700);border:1px solid var(--color-weight-125)}.wrapper.with-background{color:var(--color-grey-100);border-color:transparent}.wrapper.with-background .chip-label{opacity:.9}.wrapper.warning{border-color:var(--color-chip-warning-border);color:var(--color-chip-warning-text);background-color:var(--color-chip-warning-bg)}.wrapper.success{border-color:var(--color-chip-success-border);color:var(--color-chip-success-text);background-color:var(--color-chip-success-bg)}.wrapper.error{border-color:var(--color-chip-error-border);color:var(--color-chip-error-text);background-color:var(--color-chip-error-bg)}.chip-label{padding:5px 8px;white-space:nowrap;display:flex;align-items:center;gap:2px}.chip-icon{border-left:1px solid var(--color-component-border-200);padding:0 3px;line-height:1em;display:flex}.chip-icon button{cursor:pointer;background:none;margin:0;padding:0;border:none}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], invert: [{
@@ -12151,11 +12151,11 @@ 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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-right:3px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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-right:3px}\n"] }]
         }], propDecorators: { facetValue: [{
                 type: Input
             }], removable: [{
@@ -13586,11 +13586,11 @@ class TabbedCustomFieldsComponent {
             .map(([tabName, customFields]) => ({ tabName, customFields }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: TabbedCustomFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: { entityName: "entityName", customFields: "customFields", customFieldsFormGroup: "customFieldsFormGroup", readonly: "readonly", compact: "compact", showLabel: "showLabel" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i1$4.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i1$4.ClrTab, selector: "clr-tab" }, { kind: "component", type: i1$4.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i1$4.ClrTabLink, selector: "[clrTabLink]", inputs: ["clrTabLinkInOverflow", "id"] }, { kind: "directive", type: i1$4.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i1$4.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: { entityName: "entityName", customFields: "customFields", customFieldsFormGroup: "customFieldsFormGroup", readonly: "readonly", compact: "compact", showLabel: "showLabel" }, ngImport: i0, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}::ng-deep clr-tabs .btn.btn-link{box-shadow:none}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { kind: "component", type: i1$4.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { kind: "component", type: i1$4.ClrTab, selector: "clr-tab" }, { kind: "component", type: i1$4.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { kind: "directive", type: i1$4.ClrTabLink, selector: "[clrTabLink]", inputs: ["clrTabLinkInOverflow", "id"] }, { kind: "directive", type: i1$4.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { kind: "directive", type: i1$4.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomFieldControlComponent, selector: "vdr-custom-field-control", inputs: ["entityName", "customFieldsFormGroup", "customField", "compact", "showLabel", "readonly"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: TabbedCustomFieldsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-tabbed-custom-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}\n"] }]
+            args: [{ selector: 'vdr-tabbed-custom-fields', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"1 < tabbedCustomFields.length; else singleGroup\">\r\n    <clr-tabs>\r\n        <clr-tab *ngFor=\"let group of tabbedCustomFields\">\r\n            <button clrTabLink>\r\n                {{\r\n                    group.tabName === defaultTabName\r\n                        ? ('common.general' | translate)\r\n                        : (group.tabName | translate)\r\n                }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive>\r\n                <div class=\"mt-2 form-grid\">\r\n                    <ng-container *ngFor=\"let customField of group.customFields\">\r\n                        <vdr-custom-field-control\r\n                            *ngIf=\"customFieldIsSet(customField.name)\"\r\n                            [entityName]=\"entityName\"\r\n                            [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                            [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                            [customField]=\"customField\"\r\n                            [readonly]=\"readonly\"\r\n                            [compact]=\"compact\"\r\n                            [showLabel]=\"showLabel\"\r\n                        ></vdr-custom-field-control>\r\n                    </ng-container>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</ng-container>\r\n<ng-template #singleGroup>\r\n    <div class=\"form-grid\">\r\n        <ng-container *ngFor=\"let customField of tabbedCustomFields[0]?.customFields\">\r\n            <vdr-custom-field-control\r\n                *ngIf=\"customFieldIsSet(customField.name)\"\r\n                [entityName]=\"entityName\"\r\n                [class.form-grid-span]=\"componentShouldSpanGrid(customField)\"\r\n                [customFieldsFormGroup]=\"customFieldsFormGroup\"\r\n                [customField]=\"customField\"\r\n                [readonly]=\"readonly\"\r\n                [compact]=\"compact\"\r\n                [showLabel]=\"showLabel\"\r\n            ></vdr-custom-field-control>\r\n        </ng-container>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:contents}::ng-deep clr-tabs .btn.btn-link{box-shadow:none}\n"] }]
         }], propDecorators: { entityName: [{
                 type: Input
             }], customFields: [{
@@ -13808,6 +13808,10 @@ class AssetPreviewComponent {
         this.height = 0;
         this.centered = true;
         this.settingFocalPoint = false;
+        this.previewAssetIndex = 0;
+        this.disableNextButton = false;
+        this.disablePreviousButton = false;
+        this.showSlideButtons = false;
     }
     get fpx() {
         return this.asset.focalPoint ? this.asset.focalPoint.x : null;
@@ -13817,6 +13821,15 @@ class AssetPreviewComponent {
     }
     ngOnInit() {
         const { focalPoint } = this.asset;
+        if (this.assets?.length) {
+            this.showSlideButtons = true;
+            this.previewAssetIndex = this.assets.findIndex(asset => asset.id === this.asset.id) || 0;
+        }
+        else {
+            this.showSlideButtons = false;
+            this.updateButtonAccessibility();
+        }
+        this.updateButtonAccessibility();
         this.form.get('name')?.setValue(this.asset.name);
         this.form.get('tags')?.setValue(this.asset.tags?.map(t => t.value));
         this.subscription = this.form.valueChanges.subscribe(value => {
@@ -13929,14 +13942,34 @@ class AssetPreviewComponent {
             }
         });
     }
+    nextImage() {
+        this.previewAssetIndex = this.previewAssetIndex + 1;
+        if (Array.isArray(this.assets)) {
+            this.asset = this.assets[this.previewAssetIndex];
+            this.updateButtonAccessibility();
+        }
+    }
+    previousImage() {
+        this.previewAssetIndex = this.previewAssetIndex - 1;
+        if (Array.isArray(this.assets)) {
+            this.asset = this.assets[this.previewAssetIndex];
+            this.updateButtonAccessibility();
+        }
+    }
+    updateButtonAccessibility() {
+        this.disableNextButton = this.assets?.[this.previewAssetIndex + 1]?.id ? false : true;
+        this.disablePreviousButton = this.assets?.[this.previewAssetIndex - 1]?.id ? false : true;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPreviewComponent, deps: [{ token: i1$5.FormBuilder }, { token: DataService }, { token: NotificationService }, { token: i0.ChangeDetectorRef }, { token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n        <div class=\"image-wrapper\">\r\n            <vdr-focal-point-control\r\n                [width]=\"width\"\r\n                [height]=\"height\"\r\n                [fpx]=\"fpx\"\r\n                [fpy]=\"fpy\"\r\n                [editable]=\"settingFocalPoint\"\r\n                (focalPointChange)=\"onFocalPointChange($event)\"\r\n            >\r\n                <img\r\n                    class=\"asset-image\"\r\n                    [src]=\"asset | assetPreview : size\"\r\n                    [ngClass]=\"size\"\r\n                    #imageElement\r\n                    (load)=\"onImageLoad()\"\r\n                />\r\n            </vdr-focal-point-control>\r\n            <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                    <clr-icon shape=\"times\"></clr-icon>\r\n                </button>\r\n                <button\r\n                    class=\"btn btn-primary btn-sm\"\r\n                    (click)=\"setFocalPointEnd()\"\r\n                    [disabled]=\"!lastFocalPoint\"\r\n                >\r\n                    <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                    {{ 'asset.set-focal-point' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:800px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}\n"], dependencies: [{ kind: "directive", type: i1$4.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: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: { asset: "asset", assets: "assets", editable: "editable", customFields: "customFields", customFieldsForm: "customFieldsForm" }, outputs: { assetChange: "assetChange", editClick: "editClick" }, viewQueries: [{ propertyName: "imageElementRef", first: true, predicate: ["imageElement"], descendants: true, static: true }, { propertyName: "previewDivRef", first: true, predicate: ["previewDiv"], descendants: true, static: true }], ngImport: i0, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"carousel-container\">\r\n    <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" [class.disabled]=\"disablePreviousButton\"><clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon\r\n        ></button>\r\n    <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n        <div class=\"image-wrapper\">\r\n            <vdr-focal-point-control\r\n                [width]=\"width\"\r\n                [height]=\"height\"\r\n                [fpx]=\"fpx\"\r\n                [fpy]=\"fpy\"\r\n                [editable]=\"settingFocalPoint\"\r\n                (focalPointChange)=\"onFocalPointChange($event)\"\r\n            >\r\n                <img\r\n                    class=\"asset-image\"\r\n                    [src]=\"asset | assetPreview : size\"\r\n                    [ngClass]=\"size\"\r\n                    #imageElement\r\n                    (load)=\"onImageLoad()\"\r\n                />\r\n            </vdr-focal-point-control>\r\n            <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                    <clr-icon shape=\"times\"></clr-icon>\r\n                </button>\r\n                <button\r\n                    class=\"btn btn-primary btn-sm\"\r\n                    (click)=\"setFocalPointEnd()\"\r\n                    [disabled]=\"!lastFocalPoint\"\r\n                >\r\n                    <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                    {{ 'asset.set-focal-point' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button  *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" [class.disabled]=\"disableNextButton\"><clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon\r\n        ></button>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1$4.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: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: LabeledDataComponent, selector: "vdr-labeled-data", inputs: ["label"] }, { kind: "component", type: FocalPointControlComponent, selector: "vdr-focal-point-control", inputs: ["visible", "editable", "width", "height", "fpx", "fpy"], outputs: ["focalPointChange"] }, { kind: "component", type: TagSelectorComponent, selector: "vdr-tag-selector", inputs: ["placeholder"] }, { kind: "component", type: TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "component", type: PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n        <div class=\"image-wrapper\">\r\n            <vdr-focal-point-control\r\n                [width]=\"width\"\r\n                [height]=\"height\"\r\n                [fpx]=\"fpx\"\r\n                [fpy]=\"fpy\"\r\n                [editable]=\"settingFocalPoint\"\r\n                (focalPointChange)=\"onFocalPointChange($event)\"\r\n            >\r\n                <img\r\n                    class=\"asset-image\"\r\n                    [src]=\"asset | assetPreview : size\"\r\n                    [ngClass]=\"size\"\r\n                    #imageElement\r\n                    (load)=\"onImageLoad()\"\r\n                />\r\n            </vdr-focal-point-control>\r\n            <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                    <clr-icon shape=\"times\"></clr-icon>\r\n                </button>\r\n                <button\r\n                    class=\"btn btn-primary btn-sm\"\r\n                    (click)=\"setFocalPointEnd()\"\r\n                    [disabled]=\"!lastFocalPoint\"\r\n                >\r\n                    <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                    {{ 'asset.set-focal-point' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:800px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}\n"] }]
+            args: [{ selector: 'vdr-asset-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-detail-layout>\r\n    <vdr-page-detail-sidebar>\r\n        <vdr-card>\r\n            <div *ngIf=\"!editable\" class=\"mb-2\">\r\n                <a\r\n                    class=\"button-ghost\"\r\n                    [routerLink]=\"['/catalog', 'assets', asset.id]\"\r\n                    (click)=\"editClick.emit()\"\r\n                >\r\n                    <clr-icon shape=\"edit\"></clr-icon>\r\n                    {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <vdr-form-field *ngIf=\"editable\" [label]=\"'common.name' | translate\" class=\"mb-2\">\r\n                <input\r\n                    type=\"text\"\r\n                    [formControl]=\"form.get('name')\"\r\n                    [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission) || settingFocalPoint\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-labeled-data [label]=\"'common.name' | translate\" *ngIf=\"!editable\">\r\n                <span class=\"elide\">\r\n                    {{ asset.name }}\r\n                </span>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'asset.source-file' | translate\">\r\n                <a [href]=\"asset.source\" [title]=\"asset.source\" target=\"_blank\" class=\"elide source-link\">{{\r\n                    getSourceFileName()\r\n                }}</a>\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.original-asset-size' | translate\">\r\n                {{ asset.fileSize | filesize }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.dimensions' | translate\">\r\n                {{ asset.width }} x {{ asset.height }}\r\n            </vdr-labeled-data>\r\n\r\n            <vdr-labeled-data [label]=\"'asset.focal-point' | translate\">\r\n                <span *ngIf=\"fpx\"\r\n                    ><clr-icon shape=\"crosshairs\"></clr-icon> x: {{ fpx | number : '1.2-2' }}, y:\r\n                    {{ fpy | number : '1.2-2' }}</span\r\n                >\r\n                <span *ngIf=\"!fpx\">{{ 'common.not-set' | translate }}</span>\r\n                <div class=\"flex mt-1\">\r\n                    <button\r\n                        class=\"button-small mr-1\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        (click)=\"setFocalPointStart()\"\r\n                    >\r\n                        <ng-container *ngIf=\"!fpx\">{{ 'asset.set-focal-point' | translate }}</ng-container>\r\n                        <ng-container *ngIf=\"fpx\">{{ 'asset.update-focal-point' | translate }}</ng-container>\r\n                    </button>\r\n                    <button\r\n                        class=\"button-small\"\r\n                        [disabled]=\"settingFocalPoint\"\r\n                        *ngIf=\"!!fpx\"\r\n                        (click)=\"removeFocalPoint()\"\r\n                    >\r\n                        {{ 'asset.unset-focal-point' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-labeled-data>\r\n            <vdr-labeled-data [label]=\"'common.tags' | translate\">\r\n                <ng-container *ngIf=\"editable\">\r\n                    <vdr-tag-selector [formControl]=\"form.get('tags')\"></vdr-tag-selector>\r\n                    <button class=\"button-small mt-1\" (click)=\"manageTags()\">\r\n                        <clr-icon shape=\"tags\"></clr-icon>\r\n                        {{ 'common.manage-tags' | translate }}\r\n                    </button>\r\n                </ng-container>\r\n                <div *ngIf=\"!editable\">\r\n                    <vdr-chip *ngFor=\"let tag of asset.tags\" [colorFrom]=\"tag.value\">\r\n                        <clr-icon shape=\"tag\" class=\"mr2\"></clr-icon>\r\n                        {{ tag.value }}</vdr-chip\r\n                    >\r\n                </div>\r\n            </vdr-labeled-data>\r\n        </vdr-card>\r\n        <vdr-card *ngIf=\"customFields.length\" [title]=\"'common.custom-fields' | translate\">\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Asset\"\r\n                [compact]=\"true\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"customFieldsForm\"\r\n                [readonly]=\"!(['UpdateCatalog', 'UpdateAsset'] | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </vdr-card>\r\n        <vdr-card [title]=\"'asset.preview' | translate\">\r\n            <vdr-form-field>\r\n                <select name=\"options\" [(ngModel)]=\"size\" [disabled]=\"settingFocalPoint\">\r\n                    <option value=\"tiny\">tiny</option>\r\n                    <option value=\"thumb\">thumb</option>\r\n                    <option value=\"small\">small</option>\r\n                    <option value=\"medium\">medium</option>\r\n                    <option value=\"large\">large</option>\r\n                    <option value=\"\">full size</option>\r\n                </select>\r\n            </vdr-form-field>\r\n            <div class=\"asset-detail\">{{ width }} x {{ height }}</div>\r\n            <vdr-asset-preview-links [asset]=\"asset\"></vdr-asset-preview-links>\r\n        </vdr-card>\r\n        <vdr-card>\r\n            <vdr-page-entity-info *ngIf=\"asset as entity\" [entity]=\"entity\"></vdr-page-entity-info>\r\n        </vdr-card>\r\n    </vdr-page-detail-sidebar>\r\n    <div class=\"carousel-container\">\r\n    <button *ngIf=\"showSlideButtons\" (click)=\"previousImage()\" [class.disabled]=\"disablePreviousButton\"><clr-icon shape=\"caret left\" class=\"color-weight-800\"></clr-icon\r\n        ></button>\r\n    <div class=\"preview-image\" #previewDiv [class.centered]=\"centered\">\r\n        <div class=\"image-wrapper\">\r\n            <vdr-focal-point-control\r\n                [width]=\"width\"\r\n                [height]=\"height\"\r\n                [fpx]=\"fpx\"\r\n                [fpy]=\"fpy\"\r\n                [editable]=\"settingFocalPoint\"\r\n                (focalPointChange)=\"onFocalPointChange($event)\"\r\n            >\r\n                <img\r\n                    class=\"asset-image\"\r\n                    [src]=\"asset | assetPreview : size\"\r\n                    [ngClass]=\"size\"\r\n                    #imageElement\r\n                    (load)=\"onImageLoad()\"\r\n                />\r\n            </vdr-focal-point-control>\r\n            <div class=\"focal-point-info\" *ngIf=\"settingFocalPoint\">\r\n                <button class=\"icon-button\" (click)=\"setFocalPointCancel()\">\r\n                    <clr-icon shape=\"times\"></clr-icon>\r\n                </button>\r\n                <button\r\n                    class=\"btn btn-primary btn-sm\"\r\n                    (click)=\"setFocalPointEnd()\"\r\n                    [disabled]=\"!lastFocalPoint\"\r\n                >\r\n                    <clr-icon shape=\"crosshairs\"></clr-icon>\r\n                    {{ 'asset.set-focal-point' | translate }}\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button  *ngIf=\"showSlideButtons\" (click)=\"nextImage()\" [class.disabled]=\"disableNextButton\"><clr-icon shape=\"caret right\" class=\"color-weight-800\"></clr-icon\r\n        ></button>\r\n    </div>\r\n</vdr-page-detail-layout>\r\n", styles: [":host{height:100%}.preview-image{width:100%;max-width:750px;height:100%;min-height:60vh;overflow:auto;text-align:center;box-shadow:inset 0 0 5px #0000001a;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==);margin-top:var(--space-unit);flex:1}.preview-image.centered{display:flex;align-items:center;justify-content:center}.preview-image vdr-focal-point-control{position:relative;box-shadow:0 0 10px -3px #00000026}.preview-image .image-wrapper{position:relative}.preview-image .asset-image{width:100%}.preview-image .asset-image.tiny{max-width:50px;max-height:50px}.preview-image .asset-image.thumb{max-width:150px;max-height:150px}.preview-image .asset-image.small{max-width:300px;max-height:300px}.preview-image .asset-image.medium{max-width:500px;max-height:500px}.preview-image .asset-image.large{max-width:800px;max-height:800px}.preview-image .focal-point-info{position:absolute;display:flex;right:0}.controls{display:flex;flex-direction:column;margin-left:12px;min-width:15vw;max-width:25vw;transition:opacity .3s}.controls.fade{opacity:.5}.controls .name-input{margin-bottom:24px}.controls ::ng-deep .clr-control-container{width:100%}.controls ::ng-deep .clr-control-container .clr-input{width:100%}.controls .elide{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}.controls .source-link{direction:rtl}.controls .preview-select{display:flex;align-items:center}.controls .preview-select clr-select-container{margin-right:12px}.carousel-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.carousel-container button{cursor:pointer;width:30px;height:30px;border:none;border-radius:50%;text-align:center;background-color:var(--color-grey-300)}.carousel-container button:hover{background-color:var(--color-grey-400)}.carousel-container .disabled{pointer-events:none;opacity:.4}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$5.FormBuilder }, { type: DataService }, { type: NotificationService }, { type: i0.ChangeDetectorRef }, { type: ModalService }]; }, propDecorators: { asset: [{
                 type: Input
+            }], assets: [{
+                type: Input
             }], editable: [{
                 type: Input
             }], customFields: [{
@@ -13981,16 +14014,17 @@ class AssetPreviewDialogComponent {
                 return this.dataService.product.getAsset(asset.id).mapSingle(data => data.asset);
             }
         }));
+        this.assetsWithTags$ = of(this.assets ?? []);
     }
     hasTags(asset) {
         return asset.hasOwnProperty('tags');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPreviewDialogComponent, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPreviewDialogComponent, selector: "vdr-asset-preview-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        {{ asset.name }}\r\n    </div>\r\n</ng-template>\r\n\r\n<vdr-asset-preview\r\n    *ngIf=\"assetWithTags$ | async as assetWithTags\"\r\n    [asset]=\"assetWithTags\"\r\n    (assetChange)=\"assetChanges = $event\"\r\n    (editClick)=\"resolveWith()\"\r\n></vdr-asset-preview>\r\n", styles: [":host{height:70vh;overflow:auto}.update-button.hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: ["asset", "editable", "customFields", "customFieldsForm"], outputs: ["assetChange", "editClick"] }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPreviewDialogComponent, selector: "vdr-asset-preview-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        {{ asset.name }}\r\n    </div>\r\n</ng-template>\r\n\r\n<vdr-asset-preview\r\n    *ngIf=\"assetWithTags$ | async as assetWithTags\"\r\n    [asset]=\"assetWithTags\"\r\n    (assetChange)=\"assetChanges = $event\"\r\n    (editClick)=\"resolveWith()\"\r\n    [assets]=\"assetsWithTags$ | async\"\r\n></vdr-asset-preview>\r\n", styles: [":host{height:70vh;overflow:auto}.update-button.hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AssetPreviewComponent, selector: "vdr-asset-preview", inputs: ["asset", "assets", "editable", "customFields", "customFieldsForm"], outputs: ["assetChange", "editClick"] }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPreviewDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-asset-preview-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        {{ asset.name }}\r\n    </div>\r\n</ng-template>\r\n\r\n<vdr-asset-preview\r\n    *ngIf=\"assetWithTags$ | async as assetWithTags\"\r\n    [asset]=\"assetWithTags\"\r\n    (assetChange)=\"assetChanges = $event\"\r\n    (editClick)=\"resolveWith()\"\r\n></vdr-asset-preview>\r\n", styles: [":host{height:70vh;overflow:auto}.update-button.hidden{visibility:hidden}\n"] }]
+            args: [{ selector: 'vdr-asset-preview-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        {{ asset.name }}\r\n    </div>\r\n</ng-template>\r\n\r\n<vdr-asset-preview\r\n    *ngIf=\"assetWithTags$ | async as assetWithTags\"\r\n    [asset]=\"assetWithTags\"\r\n    (assetChange)=\"assetChanges = $event\"\r\n    (editClick)=\"resolveWith()\"\r\n    [assets]=\"assetsWithTags$ | async\"\r\n></vdr-asset-preview>\r\n", styles: [":host{height:70vh;overflow:auto}.update-button.hidden{visibility:hidden}\n"] }]
         }], ctorParameters: function () { return [{ type: DataService }]; } });
 class EntityInfoComponent {
@@ -14019,6 +14053,7 @@ class AssetGalleryComponent {
         this.canDelete = false;
         this.selectionChange = new EventEmitter();
         this.deleteAssets = new EventEmitter();
+        this.editAssetClick = new EventEmitter();
         this.selectionManager = new SelectionManager({
             multiSelect: this.multiSelect,
             itemsAreEqual: (a, b) => a.id === b.id,
@@ -14061,7 +14096,7 @@ class AssetGalleryComponent {
             .fromComponent(AssetPreviewDialogComponent, {
             size: 'xl',
             closable: true,
-            locals: { asset },
+            locals: { asset, assets: this.assets },
         })
             .subscribe();
     }
@@ -14070,11 +14105,11 @@ class AssetGalleryComponent {
         event.stopPropagation();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetGalleryComponent, deps: [{ token: ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"button-ghost\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </div>\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div *ngIf=\"canDelete\">\r\n                    <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}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}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:left;list-style-type:none;margin-left:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { 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: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: { assets: "assets", multiSelect: "multiSelect", canDelete: "canDelete" }, outputs: { selectionChange: "selectionChange", deleteAssets: "deleteAssets", editAssetClick: "editAssetClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n            </ng-container>\r\n            <div *ngIf=\"selectionManager.selection.length === 1\">\r\n                <a [routerLink]=\"['/catalog/assets/', lastSelected().id]\" (click)=\"editAssetClick.emit()\" class=\"button-ghost\">\r\n                    <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <div *ngIf=\"selectionManager.selection.length === 1\">\r\n                <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                    <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                </button>\r\n            </div>\r\n            <div *ngIf=\"canDelete\">\r\n                <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                    {{ 'common.delete' | translate }}\r\n                </button>\r\n            </div>\r\n            <div class=\"mt-1\" *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}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}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:left;list-style-type:none;margin-left:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { 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: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: SelectToggleComponent, selector: "vdr-select-toggle", inputs: ["size", "selected", "hiddenWhenOff", "disabled", "label"], outputs: ["selectedChange"] }, { kind: "component", type: EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "component", type: AssetPreviewLinksComponent, selector: "vdr-asset-preview-links", inputs: ["asset"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: FileSizePipe, name: "filesize" }, { kind: "pipe", type: AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetGalleryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-asset-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n                <div>\r\n                    <a [routerLink]=\"['./', lastSelected().id]\" class=\"button-ghost\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </div>\r\n                <div>\r\n                    <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div *ngIf=\"canDelete\">\r\n                    <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </div>\r\n                <div class=\"mt-1\">\r\n                    <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}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}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:left;list-style-type:none;margin-left:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"] }]
+            args: [{ selector: 'vdr-asset-gallery', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"gallery\">\r\n    <div\r\n        class=\"card\"\r\n        *ngFor=\"let asset of assets\"\r\n        (click)=\"toggleSelection(asset, $event)\"\r\n        [class.selected]=\"isSelected(asset)\"\r\n    >\r\n        <div class=\"card-img\">\r\n            <vdr-select-toggle\r\n                [selected]=\"isSelected(asset)\"\r\n                [disabled]=\"true\"\r\n                [hiddenWhenOff]=\"true\"\r\n            ></vdr-select-toggle>\r\n            <img class=\"asset-thumb\" [src]=\"asset | assetPreview : 'thumb'\" />\r\n        </div>\r\n        <div class=\"detail\">\r\n            <vdr-entity-info\r\n                [entity]=\"asset\"\r\n                [small]=\"true\"\r\n                (click)=\"entityInfoClick($event)\"\r\n            ></vdr-entity-info>\r\n            <span [title]=\"asset.name\">{{ asset.name }}</span>\r\n        </div>\r\n    </div>\r\n</div>\r\n<div class=\"info-bar\">\r\n    <div class=\"card\">\r\n        <div class=\"card-img\">\r\n            <div class=\"placeholder\" *ngIf=\"selectionManager.selection.length === 0\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-selection' | translate }}</div>\r\n            </div>\r\n            <img\r\n                class=\"preview\"\r\n                *ngIf=\"selectionManager.selection.length >= 1\"\r\n                [src]=\"lastSelected().preview + '?preset=medium'\"\r\n            />\r\n        </div>\r\n        <div class=\"card-block details\" *ngIf=\"selectionManager.selection.length >= 1\">\r\n            <div class=\"name\">{{ lastSelected().name }}</div>\r\n            <div>{{ 'asset.original-asset-size' | translate }}: {{ lastSelected().fileSize | filesize }}</div>\r\n\r\n            <ng-container *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-chip *ngFor=\"let tag of lastSelected().tags\" [colorFrom]=\"tag.value\"\r\n                    ><clr-icon shape=\"tag\" class=\"mr2\"></clr-icon> {{ tag.value }}</vdr-chip\r\n                >\r\n            </ng-container>\r\n            <div *ngIf=\"selectionManager.selection.length === 1\">\r\n                <a [routerLink]=\"['/catalog/assets/', lastSelected().id]\" (click)=\"editAssetClick.emit()\" class=\"button-ghost\">\r\n                    <clr-icon shape=\"pencil\"></clr-icon> {{ 'common.edit' | translate }}\r\n                    <clr-icon shape=\"arrow right\"></clr-icon>\r\n                </a>\r\n            </div>\r\n            <div *ngIf=\"selectionManager.selection.length === 1\">\r\n                <button (click)=\"previewAsset(lastSelected())\" class=\"button-small mt-1\">\r\n                    <clr-icon shape=\"eye\"></clr-icon> {{ 'asset.preview' | translate }}\r\n                </button>\r\n            </div>\r\n            <div *ngIf=\"canDelete\">\r\n                <button (click)=\"deleteAssets.emit(selectionManager.selection)\" class=\"button-small mt-1\">\r\n                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                    {{ 'common.delete' | translate }}\r\n                </button>\r\n            </div>\r\n            <div class=\"mt-1\" *ngIf=\"selectionManager.selection.length === 1\">\r\n                <vdr-asset-preview-links class=\"\" [asset]=\"lastSelected()\"></vdr-asset-preview-links>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card stack\" [class.visible]=\"selectionManager.selection.length > 1\"></div>\r\n    <div class=\"selection-count\" [class.visible]=\"selectionManager.selection.length > 1\">\r\n        {{ 'asset.assets-selected-count' | translate : { count: selectionManager.selection.length } }}\r\n        <ul>\r\n            <li *ngFor=\"let asset of selectionManager.selection\">{{ asset.name }}</li>\r\n        </ul>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column-reverse}@media screen and (min-width: 992px){:host{flex-direction:row}}.gallery{flex:1;display:grid;grid-template-columns:repeat(auto-fill,150px);grid-template-rows:repeat(auto-fill,180px);grid-gap:10px 20px}.gallery .card:hover{box-shadow:0 .125rem 0 0 var(--color-primary-500);border:1px solid var(--color-primary-500)}.card{margin-top:0;position:relative}img.asset-thumb{aspect-ratio:1}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}.detail{display:flex;align-items:center;gap:4px;font-size:12px;margin:3px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.detail vdr-entity-info{height:16px}.info-bar{padding:0 6px;overflow-y:auto}@media screen and (min-width: 992px){.info-bar{width:25%}}.info-bar .card{z-index:1}.info-bar .stack{z-index:0;opacity:0;transform:perspective(500px) translateZ(0) translateY(-16px);height:16px;transition:transform .3s,opacity 0s .3s;background-color:#fff}.info-bar .stack.visible{opacity:1;transform:perspective(500px) translateZ(-44px) translateY(0);background-color:var(--color-component-bg-100);transition:transform .3s,color .3s}.info-bar .selection-count{opacity:0;position:relative;text-align:center;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.info-bar .selection-count.visible{opacity:1;visibility:visible;transition:opacity .3s,visibility 0s}.info-bar .selection-count ul{text-align:left;list-style-type:none;margin-left:12px}.info-bar .selection-count ul li{font-size:12px}.info-bar .placeholder{text-align:center;color:var(--color-grey-300)}.info-bar .preview img{max-width:100%}.info-bar .details{font-size:12px;word-break:break-all}.info-bar .name{line-height:14px;font-weight:700}\n"] }]
         }], ctorParameters: function () { return [{ type: ModalService }]; }, propDecorators: { assets: [{
                 type: Input
             }], multiSelect: [{
@@ -14085,6 +14120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
                 type: Output
             }], deleteAssets: [{
                 type: Output
+            }], editAssetClick: [{
+                type: Output
             }] } });
 /**
@@ -14200,11 +14237,11 @@ class AssetPickerDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPickerDialogComponent, deps: [{ token: DataService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPickerDialogComponent, selector: "vdr-asset-picker-dialog", viewQueries: [{ propertyName: "assetSearchInputComponent", first: true, predicate: ["assetSearchInputComponent"], descendants: true }, { propertyName: "assetGalleryComponent", first: true, predicate: ["assetGalleryComponent"], descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb-2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\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 type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { kind: "component", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetPickerDialogComponent, selector: "vdr-asset-picker-dialog", viewQueries: [{ propertyName: "assetSearchInputComponent", first: true, predicate: ["assetSearchInputComponent"], descendants: true }, { propertyName: "assetGalleryComponent", first: true, predicate: ["assetGalleryComponent"], descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb-2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    (editAssetClick)=\"cancel()\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\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 type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { kind: "component", type: ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { kind: "component", type: AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets", "editAssetClick"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetPickerDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-asset-picker-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb-2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\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 type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"] }]
+            args: [{ selector: 'vdr-asset-picker-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <div class=\"title-row\">\r\n        <span>{{ 'asset.select-assets' | translate }}</span>\r\n        <div class=\"flex-spacer\"></div>\r\n        <vdr-asset-file-input\r\n            class=\"ml3\"\r\n            (selectFiles)=\"createAssets($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".modal-content\"\r\n        ></vdr-asset-file-input>\r\n    </div>\r\n</ng-template>\r\n<vdr-asset-search-input\r\n    class=\"mb-2\"\r\n    [tags]=\"allTags$ | async\"\r\n    (searchTermChange)=\"searchTerm$.next($event)\"\r\n    (tagsChange)=\"filterByTags$.next($event)\"\r\n    #assetSearchInputComponent\r\n></vdr-asset-search-input>\r\n<vdr-asset-gallery\r\n    [assets]=\"(assets$ | async)! | paginate: paginationConfig\"\r\n    [multiSelect]=\"multiSelect\"\r\n    (selectionChange)=\"selection = $event\"\r\n    (editAssetClick)=\"cancel()\"\r\n    #assetGalleryComponent\r\n></vdr-asset-gallery>\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 type=\"submit\" (click)=\"select()\" class=\"btn btn-primary\" [disabled]=\"selection.length === 0\">\r\n        {{ 'asset.add-asset-with-count' | translate: { count: selection.length } }}\r\n    </button>\r\n</ng-template>\r\n", styles: [":host{display:flex;flex-direction:column;height:70vh;overflow-y:auto}.title-row{display:flex;align-items:center;justify-content:space-between}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between;flex-shrink:0}\n"] }]
         }], ctorParameters: function () { return [{ type: DataService }, { type: NotificationService }]; }, propDecorators: { assetSearchInputComponent: [{
                 type: ViewChild,
                 args: ['assetSearchInputComponent']
@@ -17176,11 +17213,11 @@ class DataTableFilterLabelComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DataTableFilterLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DataTableFilterLabelComponent, selector: "vdr-data-table-filter-label", inputs: { filterWithValue: "filterWithValue" }, ngImport: i0, template: "<span><vdr-localized-text [text]=\"filterWithValue.filter.label\" />:</span>\r\n<div>\r\n    <ng-container *ngIf=\"filterWithValue.isSelect()\">\r\n        {{ filterWithValue.value?.join(', ') }}\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isText()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'contains'\">{{\r\n            'common.operator-contains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notContains'\">{{\r\n            'common.operator-notContains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\r\n            'common.operator-not-eq' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'regex'\">{{\r\n            'common.operator-regex' | translate\r\n        }}</span>\r\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isBoolean()\">\r\n        <span *ngIf=\"filterWithValue?.value\">{{ 'common.boolean-true' | translate }}</span>\r\n        <span *ngIf=\"!filterWithValue?.value\">{{ 'common.boolean-false' | translate }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isDateRange()\">\r\n        <span *ngIf=\"filterWithValue.value?.start && filterWithValue.value?.end\">\r\n            {{ filterWithValue.value?.start | localeDate : 'shortDate' }} -\r\n            {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n        </span>\r\n        <span *ngIf=\"filterWithValue.value?.start && !filterWithValue.value?.end\">\r\n            > {{ filterWithValue.value?.start | localeDate : 'shortDate' }}\r\n        </span>\r\n        <span *ngIf=\"filterWithValue.value?.end && !filterWithValue.value?.start\">\r\n            < {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n        </span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isNumber()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\"> = </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'gt'\"> > </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'lt'\"> < </span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType === 'currency'\">{{\r\n            +filterWithValue.value?.amount | localeCurrency\r\n        }}</span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType !== 'currency'\">{{\r\n            +filterWithValue.value?.amount\r\n        }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isCustom()\">\r\n        <span>{{ customFilterLabel$ | async }}</span>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;gap:calc(var(--space-unit) / 2)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LocalizedTextComponent, selector: "vdr-localized-text", inputs: ["text"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DataTableFilterLabelComponent, selector: "vdr-data-table-filter-label", inputs: { filterWithValue: "filterWithValue" }, ngImport: i0, template: "<span><vdr-localized-text [text]=\"filterWithValue.filter.label\" />:</span>\r\n<div>\r\n    <ng-container *ngIf=\"filterWithValue.isSelect()\">\r\n        {{ filterWithValue.value?.join(', ') }}\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isId()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\r\n            'common.operator-not-eq' | translate\r\n        }}</span>\r\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isText()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'contains'\">{{\r\n            'common.operator-contains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notContains'\">{{\r\n            'common.operator-notContains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\r\n            'common.operator-not-eq' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'regex'\">{{\r\n            'common.operator-regex' | translate\r\n        }}</span>\r\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isBoolean()\">\r\n        <span *ngIf=\"filterWithValue?.value\">{{ 'common.boolean-true' | translate }}</span>\r\n        <span *ngIf=\"!filterWithValue?.value\">{{ 'common.boolean-false' | translate }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isDateRange()\">\r\n        <span *ngIf=\"filterWithValue.value?.start && filterWithValue.value?.end\">\r\n            {{ filterWithValue.value?.start | localeDate : 'shortDate' }} -\r\n            {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n        </span>\r\n        <span *ngIf=\"filterWithValue.value?.start && !filterWithValue.value?.end\">\r\n            > {{ filterWithValue.value?.start | localeDate : 'shortDate' }}\r\n        </span>\r\n        <span *ngIf=\"filterWithValue.value?.end && !filterWithValue.value?.start\">\r\n            < {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n        </span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isNumber()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\"> = </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'gt'\"> > </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'lt'\"> < </span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType === 'currency'\">{{\r\n            +filterWithValue.value?.amount | localeCurrency\r\n        }}</span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType !== 'currency'\">{{\r\n            +filterWithValue.value?.amount\r\n        }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isCustom()\">\r\n        <span>{{ customFilterLabel$ | async }}</span>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;gap:calc(var(--space-unit) / 2)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LocalizedTextComponent, selector: "vdr-localized-text", inputs: ["text"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "pipe", type: LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DataTableFilterLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-data-table-filter-label', changeDetection: ChangeDetectionStrategy.Default, template: "<span><vdr-localized-text [text]=\"filterWithValue.filter.label\" />:</span>\r\n<div>\r\n    <ng-container *ngIf=\"filterWithValue.isSelect()\">\r\n        {{ filterWithValue.value?.join(', ') }}\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isText()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'contains'\">{{\r\n            'common.operator-contains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notContains'\">{{\r\n            'common.operator-notContains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\r\n            'common.operator-not-eq' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'regex'\">{{\r\n            'common.operator-regex' | translate\r\n        }}</span>\r\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isBoolean()\">\r\n        <span *ngIf=\"filterWithValue?.value\">{{ 'common.boolean-true' | translate }}</span>\r\n        <span *ngIf=\"!filterWithValue?.value\">{{ 'common.boolean-false' | translate }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isDateRange()\">\r\n        <span *ngIf=\"filterWithValue.value?.start && filterWithValue.value?.end\">\r\n            {{ filterWithValue.value?.start | localeDate : 'shortDate' }} -\r\n            {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n        </span>\r\n        <span *ngIf=\"filterWithValue.value?.start && !filterWithValue.value?.end\">\r\n            > {{ filterWithValue.value?.start | localeDate : 'shortDate' }}\r\n        </span>\r\n        <span *ngIf=\"filterWithValue.value?.end && !filterWithValue.value?.start\">\r\n            < {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n        </span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isNumber()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\"> = </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'gt'\"> > </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'lt'\"> < </span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType === 'currency'\">{{\r\n            +filterWithValue.value?.amount | localeCurrency\r\n        }}</span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType !== 'currency'\">{{\r\n            +filterWithValue.value?.amount\r\n        }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isCustom()\">\r\n        <span>{{ customFilterLabel$ | async }}</span>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;gap:calc(var(--space-unit) / 2)}\n"] }]
+            args: [{ selector: 'vdr-data-table-filter-label', changeDetection: ChangeDetectionStrategy.Default, template: "<span><vdr-localized-text [text]=\"filterWithValue.filter.label\" />:</span>\r\n<div>\r\n    <ng-container *ngIf=\"filterWithValue.isSelect()\">\r\n        {{ filterWithValue.value?.join(', ') }}\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isId()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\r\n            'common.operator-not-eq' | translate\r\n        }}</span>\r\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isText()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'contains'\">{{\r\n            'common.operator-contains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\">{{ 'common.operator-eq' | translate }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notContains'\">{{\r\n            'common.operator-notContains' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'notEq'\">{{\r\n            'common.operator-not-eq' | translate\r\n        }}</span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'regex'\">{{\r\n            'common.operator-regex' | translate\r\n        }}</span>\r\n        <span> \"{{ filterWithValue.value?.term }}\"</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isBoolean()\">\r\n        <span *ngIf=\"filterWithValue?.value\">{{ 'common.boolean-true' | translate }}</span>\r\n        <span *ngIf=\"!filterWithValue?.value\">{{ 'common.boolean-false' | translate }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isDateRange()\">\r\n        <span *ngIf=\"filterWithValue.value?.start && filterWithValue.value?.end\">\r\n            {{ filterWithValue.value?.start | localeDate : 'shortDate' }} -\r\n            {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n        </span>\r\n        <span *ngIf=\"filterWithValue.value?.start && !filterWithValue.value?.end\">\r\n            > {{ filterWithValue.value?.start | localeDate : 'shortDate' }}\r\n        </span>\r\n        <span *ngIf=\"filterWithValue.value?.end && !filterWithValue.value?.start\">\r\n            < {{ filterWithValue.value?.end | localeDate : 'shortDate' }}\r\n        </span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isNumber()\">\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'eq'\"> = </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'gt'\"> > </span>\r\n        <span *ngIf=\"filterWithValue.value?.operator === 'lt'\"> < </span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType === 'currency'\">{{\r\n            +filterWithValue.value?.amount | localeCurrency\r\n        }}</span>\r\n        <span *ngIf=\"$any(filterWithValue.filter.type).inputType !== 'currency'\">{{\r\n            +filterWithValue.value?.amount\r\n        }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"filterWithValue.isCustom()\">\r\n        <span>{{ customFilterLabel$ | async }}</span>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex;gap:calc(var(--space-unit) / 2)}\n"] }]
         }], propDecorators: { filterWithValue: [{
                 type: Input
             }] } });
@@ -17191,7 +17228,9 @@ class DataTableFiltersComponent {
     }
     onFKeyPress(event) {
         if (event.target instanceof HTMLElement) {
-            if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+            if (event.target.tagName === 'INPUT' ||
+                event.target.tagName === 'TEXTAREA' ||
+                event.target.classList.contains('vdr-prosemirror')) {
                 return;
             }
         }
@@ -17219,6 +17258,17 @@ class DataTableFiltersComponent {
     }
     selectFilter(filter, value) {
         this.selectedFilter = filter;
+        if (filter.isId()) {
+            this.formControl = new FormGroup({
+                operator: new FormControl(value?.operator ?? 'eq'),
+                term: new FormControl(value?.term ?? ''),
+            }, control => {
+                if (!control.value.term) {
+                    return { noSelection: true };
+                }
+                return null;
+            });
+        }
         if (filter.isText()) {
             this.formControl = new FormGroup({
                 operator: new FormControl(value?.operator ?? 'contains'),
@@ -17320,6 +17370,12 @@ class DataTableFiltersComponent {
                     term: this.formControl.value.term,
                 };
                 break;
+            case 'id':
+                value = {
+                    operator: this.formControl.value.operator,
+                    term: this.formControl.value.term,
+                };
+                break;
             case 'custom':
                 value = this.customComponent?.instance.formControl.value;
                 this.formControl.setValue(value);
@@ -17345,11 +17401,11 @@ class DataTableFiltersComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DataTableFiltersComponent, deps: [{ token: I18nService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: { filters: "filters", filterWithValue: "filterWithValue" }, host: { listeners: { "window:keydown.f": "onFKeyPress($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "customComponentHost", first: true, predicate: ["customComponentHost"], descendants: true, read: CustomFilterComponentDirective }], ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\r\n    <div class=\"filter-button\" [ngClass]=\"state\">\r\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\r\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <button vdrDropdownTrigger class=\"\">\r\n            <span *ngIf=\"state === 'new'\">{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span>\r\n            <span *ngIf=\"state === 'active'\">\r\n                <vdr-data-table-filter-label\r\n                    [filterWithValue]=\"filterWithValue\"\r\n                ></vdr-data-table-filter-label>\r\n            </span>\r\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div *ngIf=\"!selectedFilter\">\r\n            <div class=\"filter-heading\">Filter by:</div>\r\n            <div *ngFor=\"let filter of filters.getFilters()\">\r\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\r\n                    <vdr-localized-text [text]=\"filter?.label\" />\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\r\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\r\n        </div>\r\n        <div class=\"mx-2 mt-1\">\r\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\r\n        </div>\r\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\r\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\r\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\r\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\r\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\r\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\r\n                            <span>{{ option.label | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'boolean'\">\r\n                        <label\r\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\r\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\r\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'text'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"contains\">\r\n                                        {{ 'common.operator-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notContains\">\r\n                                        {{ 'common.operator-not-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'number'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\r\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\r\n                                type=\"text\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                            <vdr-currency-input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'dateRange'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <label>\r\n                                <div>{{ 'common.start-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\r\n                            <label>\r\n                                <div>{{ 'common.end-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"apply-wrapper mt-2\">\r\n                <button class=\"button\" (click)=\"activate()\" [disabled]=\"!formControl?.valid\">\r\n                    <span>{{ 'common.apply' | translate }}</span>\r\n                    <clr-icon shape=\"check\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-right:calc(var(--space-unit) * 2)}.filter-hotkey{font-size:var(--font-size-xs);color:var(--color-weight-500);border:1px solid var(--color-weight-200);background-color:var(--color-weight-100);border-radius:var(--border-radius);padding:0 3px;text-transform:uppercase;margin-inline-start:3px}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { 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: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }, { kind: "component", type: DataTableFilterLabelComponent, selector: "vdr-data-table-filter-label", inputs: ["filterWithValue"] }, { kind: "directive", type: CustomFilterComponentDirective, selector: "[vdrCustomFilterComponentHost]" }, { kind: "component", type: LocalizedTextComponent, selector: "vdr-localized-text", inputs: ["text"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: { filters: "filters", filterWithValue: "filterWithValue" }, host: { listeners: { "window:keydown.f": "onFKeyPress($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, static: true }, { propertyName: "customComponentHost", first: true, predicate: ["customComponentHost"], descendants: true, read: CustomFilterComponentDirective }], ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\r\n    <div class=\"filter-button\" [ngClass]=\"state\">\r\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\r\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <button vdrDropdownTrigger class=\"\">\r\n            <span *ngIf=\"state === 'new'\">{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span>\r\n            <span *ngIf=\"state === 'active'\">\r\n                <vdr-data-table-filter-label\r\n                    [filterWithValue]=\"filterWithValue\"\r\n                ></vdr-data-table-filter-label>\r\n            </span>\r\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div *ngIf=\"!selectedFilter\">\r\n            <div class=\"filter-heading\">Filter by:</div>\r\n            <div *ngFor=\"let filter of filters.getFilters()\">\r\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\r\n                    <vdr-localized-text [text]=\"filter?.label\" />\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\r\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\r\n        </div>\r\n        <div class=\"mx-2 mt-1\">\r\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\r\n        </div>\r\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\r\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\r\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\r\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\r\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\r\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\r\n                            <span>{{ option.label | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'boolean'\">\r\n                        <label\r\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\r\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\r\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'text'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"contains\">\r\n                                        {{ 'common.operator-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notContains\">\r\n                                        {{ 'common.operator-not-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'id'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'number'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\r\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\r\n                                type=\"text\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                            <vdr-currency-input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'dateRange'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <label>\r\n                                <div>{{ 'common.start-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\r\n                            <label>\r\n                                <div>{{ 'common.end-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"apply-wrapper mt-2\">\r\n                <button class=\"button\" (click)=\"activate()\" [disabled]=\"!formControl?.valid\">\r\n                    <span>{{ 'common.apply' | translate }}</span>\r\n                    <clr-icon shape=\"check\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-right:calc(var(--space-unit) * 2)}.filter-hotkey{font-size:var(--font-size-xs);color:var(--color-weight-500);border:1px solid var(--color-weight-200);background-color:var(--color-weight-100);border-radius:var(--border-radius);padding:0 3px;text-transform:uppercase;margin-inline-start:3px}\n"], dependencies: [{ kind: "directive", type: i1$4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1$4.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1$4.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { 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: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "component", type: DatetimePickerComponent, selector: "vdr-datetime-picker", inputs: ["yearRange", "weekStartDay", "timeGranularityInterval", "min", "max", "readonly"] }, { kind: "component", type: DataTableFilterLabelComponent, selector: "vdr-data-table-filter-label", inputs: ["filterWithValue"] }, { kind: "directive", type: CustomFilterComponentDirective, selector: "[vdrCustomFilterComponentHost]" }, { kind: "component", type: LocalizedTextComponent, selector: "vdr-localized-text", inputs: ["text"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: DataTableFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-data-table-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\r\n    <div class=\"filter-button\" [ngClass]=\"state\">\r\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\r\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <button vdrDropdownTrigger class=\"\">\r\n            <span *ngIf=\"state === 'new'\">{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span>\r\n            <span *ngIf=\"state === 'active'\">\r\n                <vdr-data-table-filter-label\r\n                    [filterWithValue]=\"filterWithValue\"\r\n                ></vdr-data-table-filter-label>\r\n            </span>\r\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div *ngIf=\"!selectedFilter\">\r\n            <div class=\"filter-heading\">Filter by:</div>\r\n            <div *ngFor=\"let filter of filters.getFilters()\">\r\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\r\n                    <vdr-localized-text [text]=\"filter?.label\" />\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\r\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\r\n        </div>\r\n        <div class=\"mx-2 mt-1\">\r\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\r\n        </div>\r\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\r\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\r\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\r\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\r\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\r\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\r\n                            <span>{{ option.label | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'boolean'\">\r\n                        <label\r\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\r\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\r\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'text'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"contains\">\r\n                                        {{ 'common.operator-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notContains\">\r\n                                        {{ 'common.operator-not-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'number'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\r\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\r\n                                type=\"text\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                            <vdr-currency-input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'dateRange'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <label>\r\n                                <div>{{ 'common.start-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\r\n                            <label>\r\n                                <div>{{ 'common.end-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"apply-wrapper mt-2\">\r\n                <button class=\"button\" (click)=\"activate()\" [disabled]=\"!formControl?.valid\">\r\n                    <span>{{ 'common.apply' | translate }}</span>\r\n                    <clr-icon shape=\"check\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-right:calc(var(--space-unit) * 2)}.filter-hotkey{font-size:var(--font-size-xs);color:var(--color-weight-500);border:1px solid var(--color-weight-200);background-color:var(--color-weight-100);border-radius:var(--border-radius);padding:0 3px;text-transform:uppercase;margin-inline-start:3px}\n"] }]
+            args: [{ selector: 'vdr-data-table-filters', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown [manualToggle]=\"true\" #dropdown>\r\n    <div class=\"filter-button\" [ngClass]=\"state\">\r\n        <clr-icon shape=\"plus\" size=\"12\" *ngIf=\"state === 'new'\"></clr-icon>\r\n        <button *ngIf=\"state === 'active'\" class=\"remove\" (click)=\"deactivate()\">\r\n            <clr-icon shape=\"times\" size=\"12\"></clr-icon>\r\n        </button>\r\n        <button vdrDropdownTrigger class=\"\">\r\n            <span *ngIf=\"state === 'new'\">{{ 'common.add-filter' | translate }} <span class=\"filter-hotkey\">f</span></span>\r\n            <span *ngIf=\"state === 'active'\">\r\n                <vdr-data-table-filter-label\r\n                    [filterWithValue]=\"filterWithValue\"\r\n                ></vdr-data-table-filter-label>\r\n            </span>\r\n            <clr-icon shape=\"ellipsis-vertical\" size=\"12\"></clr-icon>\r\n        </button>\r\n    </div>\r\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n        <div *ngIf=\"!selectedFilter\">\r\n            <div class=\"filter-heading\">Filter by:</div>\r\n            <div *ngFor=\"let filter of filters.getFilters()\">\r\n                <button vdrDropdownItem (click)=\"selectFilter(filter)\">\r\n                    <vdr-localized-text [text]=\"filter?.label\" />\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"filter-heading\" *ngIf=\"selectedFilter\">\r\n            Filter by <vdr-localized-text [text]=\"selectedFilter.label\" />:\r\n        </div>\r\n        <div class=\"mx-2 mt-1\">\r\n            <div vdrCustomFilterComponentHost #customComponentHost></div>\r\n        </div>\r\n        <form *ngIf=\"selectedFilter\" class=\"\" [cdkTrapFocus]=\"true\" [cdkTrapFocusAutoCapture]=\"true\">\r\n            <ng-container *ngIf=\"selectedFilter.type.kind !== 'custom'\">\r\n                <div class=\"mx-2 mt-1\" [ngSwitch]=\"selectedFilter.type.kind\">\r\n                    <div *ngSwitchCase=\"'select'\" [formGroup]=\"formControl\">\r\n                        <label *ngFor=\"let option of $any(selectedFilter.type).options; index as i\">\r\n                            <input type=\"checkbox\" [formControlName]=\"i\" />\r\n                            <span>{{ option.label | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'boolean'\">\r\n                        <label\r\n                            ><input type=\"checkbox\" [formControl]=\"formControl\" clrToggle />\r\n                            <span *ngIf=\"formControl.value\">{{ 'common.boolean-true' | translate }}</span>\r\n                            <span *ngIf=\"!formControl.value\">{{ 'common.boolean-false' | translate }}</span>\r\n                        </label>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'text'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"contains\">\r\n                                        {{ 'common.operator-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notContains\">\r\n                                        {{ 'common.operator-not-contains' | translate }}\r\n                                    </option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                    <option value=\"regex\">{{ 'common.operator-regex' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'id'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"notEq\">{{ 'common.operator-not-eq' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input type=\"text\" formControlName=\"term\" />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'number'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <div>\r\n                                <select name=\"options\" formControlName=\"operator\" class=\"mb-1\">\r\n                                    <option value=\"eq\">{{ 'common.operator-eq' | translate }}</option>\r\n                                    <option value=\"gt\">{{ 'common.operator-gt' | translate }}</option>\r\n                                    <option value=\"lt\">{{ 'common.operator-lt' | translate }}</option>\r\n                                </select>\r\n                            </div>\r\n                            <input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType !== 'currency'\"\r\n                                type=\"text\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                            <vdr-currency-input\r\n                                *ngIf=\"$any(selectedFilter.type).inputType === 'currency'\"\r\n                                formControlName=\"amount\"\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                    <div *ngSwitchCase=\"'dateRange'\">\r\n                        <div [formGroup]=\"formControl\">\r\n                            <label>\r\n                                <div>{{ 'common.start-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"start\"></vdr-datetime-picker>\r\n                            <label>\r\n                                <div>{{ 'common.end-date' | translate }}</div>\r\n                            </label>\r\n                            <vdr-datetime-picker formControlName=\"end\"></vdr-datetime-picker>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <div class=\"apply-wrapper mt-2\">\r\n                <button class=\"button\" (click)=\"activate()\" [disabled]=\"!formControl?.valid\">\r\n                    <span>{{ 'common.apply' | translate }}</span>\r\n                    <clr-icon shape=\"check\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </form>\r\n    </vdr-dropdown-menu>\r\n</vdr-dropdown>\r\n", styles: [":host{display:block}.filter-button{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;padding:0 var(--space-unit);height:calc(var(--space-unit) * 3);font-size:var(--font-size-xs);border-radius:var(--border-radius-lg);background-color:var(--color-button-small-bg);color:var(--color-button-small-text)}.filter-button>button{border:none;gap:12px;cursor:pointer;background-color:transparent;display:flex;align-items:center;height:calc(var(--space-unit) * 2);border-radius:var(--border-radius-lg);color:var(--color-button-small-text)}.filter-button.active{background-color:var(--color-primary-700);color:var(--color-primary-100)}.filter-button.active>button{color:var(--color-primary-100)}label{display:flex;align-items:center;gap:var(--space-unit);margin-bottom:calc(var(--space-unit) * .5)}.filter-heading{font-size:var(--font-size-xs);text-transform:uppercase;color:var(--color-weight-600);margin:0 calc(var(--space-unit) * 2)}.apply-wrapper{display:flex;justify-content:flex-end;padding-right:calc(var(--space-unit) * 2)}.filter-hotkey{font-size:var(--font-size-xs);color:var(--color-weight-500);border:1px solid var(--color-weight-200);background-color:var(--color-weight-100);border-radius:var(--border-radius);padding:0 3px;text-transform:uppercase;margin-inline-start:3px}\n"] }]
         }], ctorParameters: function () { return [{ type: I18nService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { filters: [{
                 type: Input
             }], filterWithValue: [{
@@ -20234,6 +20290,10 @@ class DataTableFilter {
                 return {
                     [value.operator]: value.term,
                 };
+            case 'id':
+                return {
+                    [value.operator]: value.term,
+                };
             case 'custom': {
                 return value;
             }
@@ -20257,6 +20317,9 @@ class DataTableFilter {
             this.onActivate(this, value);
         }
     }
+    isId() {
+        return this.type.kind === 'id';
+    }
     isText() {
         return this.type.kind === 'text';
     }
@@ -20295,6 +20358,9 @@ class FilterWithValue {
             fn(value);
         }
     }
+    isId() {
+        return this.filter.type.kind === 'id';
+    }
     isText() {
         return this.filter.type.kind === 'text';
     }
@@ -20326,7 +20392,7 @@ class DataTableFilterCollection {
         this.#activeFilters = [];
         this.#valueChanges$ = new Subject();
         this.#connectedToRouter = false;
-        this.valueChanges = this.#valueChanges$.asObservable();
+        this.valueChanges = this.#valueChanges$.asObservable().pipe(debounceTime(10));
         this.#filtersQueryParamName = 'filters';
     }
     get length() {
@@ -20348,6 +20414,15 @@ class DataTableFilterCollection {
         }
         return this;
     }
+    addIdFilter() {
+        this.addFilter({
+            name: 'id',
+            type: { kind: 'id' },
+            label: marker('common.id'),
+            filterField: 'id',
+        });
+        return this;
+    }
     addDateFilters() {
         this.addFilter({
             name: 'createdAt',
@@ -20422,29 +20497,46 @@ class DataTableFilterCollection {
         }, {});
     }
     connectToRoute(route) {
-        this.valueChanges.subscribe(value => {
+        this.valueChanges.subscribe(() => {
             this.router.navigate(['./'], {
                 queryParams: { [this.#filtersQueryParamName]: this.serialize(), page: 1 },
                 relativeTo: route,
                 queryParamsHandling: 'merge',
             });
         });
-        const filterQueryParams = (route.snapshot.queryParamMap.get(this.#filtersQueryParamName) ?? '')
-            .split(';')
-            .map(value => value.split(':'))
-            .map(([name, value]) => ({ name, value }));
-        for (const { name, value } of filterQueryParams) {
-            const filter = this.getFilter(name);
-            if (filter) {
-                const val = this.deserializeValue(filter, value);
-                this.#activeFilters.push(this.createFacetWithValue(filter, val));
+        route.queryParamMap
+            .pipe(map(params => params.get(this.#filtersQueryParamName)), distinctUntilChanged(), startWith(route.snapshot.queryParamMap.get(this.#filtersQueryParamName) ?? ''))
+            .subscribe(value => {
+            this.#activeFilters = [];
+            if (value === '') {
+                this.#valueChanges$.next(this.#activeFilters);
+                return;
             }
-        }
+            const filterQueryParams = (value ?? '')
+                .split(';')
+                .map(value => value.split(':'))
+                .map(([name, value]) => ({ name, value }));
+            for (const { name, value } of filterQueryParams) {
+                const filter = this.getFilter(name);
+                if (filter) {
+                    const val = this.deserializeValue(filter, value);
+                    filter.activate(val);
+                }
+            }
+        });
         this.#connectedToRouter = true;
         return this;
     }
+    serialize() {
+        return this.#activeFilters
+            .map((filterWithValue, i) => `${filterWithValue.filter.name}:${this.serializeValue(filterWithValue)}`)
+            .join(';');
+    }
     serializeValue(filterWithValue) {
-        const valueAsType = (_filter, _value) => _value;
+        if (filterWithValue.isId()) {
+            const val = filterWithValue.value;
+            return `${val?.operator},${val?.term}`;
+        }
         if (filterWithValue.isText()) {
             const val = filterWithValue.value;
             return `${val?.operator},${val?.term}`;
@@ -20473,6 +20565,10 @@ class DataTableFilterCollection {
     }
     deserializeValue(filter, value) {
         switch (filter.type.kind) {
+            case 'id': {
+                const [operator, term] = value.split(',');
+                return { operator, term };
+            }
             case 'text': {
                 const [operator, term] = value.split(',');
                 return { operator, term };
@@ -20496,16 +20592,11 @@ class DataTableFilterCollection {
                 assertNever(filter.type);
         }
     }
-    serialize() {
-        return this.#activeFilters
-            .map((filterWithValue, i) => `${filterWithValue.filter.name}:${this.serializeValue(filterWithValue)}`)
-            .join(';');
-    }
     onActivateFilter(filter, value) {
-        this.#activeFilters.push(this.createFacetWithValue(filter, value));
+        this.#activeFilters.push(this.createFilterWithValue(filter, value));
         this.#valueChanges$.next(this.#activeFilters);
     }
-    createFacetWithValue(filter, value) {
+    createFilterWithValue(filter, value) {
         return new FilterWithValue(filter, value, v => this.#valueChanges$.next(v));
     }
 }
@@ -21106,6 +21197,33 @@ function findTranslation(entity, languageCode) {
     return (entity?.translations || []).find(t => t.languageCode === languageCode);
 }
+function getCustomFieldsDefaults(customFieldConfig) {
+    return customFieldConfig.reduce((hash, field) => ({
+        ...hash,
+        [field.name]: getDefaultValue(field.type, field.nullable ?? undefined),
+    }), {});
+}
+function getDefaultValue(type, isNullable) {
+    switch (type) {
+        case 'localeString':
+        case 'string':
+        case 'text':
+        case 'localeText':
+            return isNullable ? null : '';
+        case 'boolean':
+            return isNullable ? null : false;
+        case 'float':
+        case 'int':
+            return isNullable ? null : 0;
+        case 'datetime':
+            return isNullable ? null : new Date();
+        case 'relation':
+            return null;
+        default:
+            assertNever(type);
+    }
+}
 /**
  * When updating an entity which has translations, the value from the form will pertain to the current
  * languageCode. This function ensures that the "translations" array is correctly set based on the
@@ -21126,7 +21244,9 @@ function createUpdatedTranslatable(options) {
             }
             else {
                 newCustomFields[field.name] =
-                    value === '' ? getDefaultValue(field.type) : value;
+                    value === ''
+                        ? getDefaultValue(field.type, field.nullable ?? true)
+                        : value;
             }
         }
         newTranslation.customFields = newTranslatedCustomFields;
@@ -21146,26 +21266,6 @@ function createUpdatedTranslatable(options) {
     }
     return newTranslatable;
 }
-function getDefaultValue(type) {
-    switch (type) {
-        case 'localeString':
-        case 'string':
-        case 'text':
-        case 'localeText':
-            return '';
-        case 'boolean':
-            return false;
-        case 'float':
-        case 'int':
-            return 0;
-        case 'datetime':
-            return new Date();
-        case 'relation':
-            return null;
-        default:
-            assertNever(type);
-    }
-}
 /**
  * Returns a shallow clone of `obj` with any properties contained in `patch` overwriting
  * those of `obj`.
@@ -21181,7 +21281,7 @@ function patchObject(obj, patch) {
 }
 // Auto-generated by the set-version.js script.
-const ADMIN_UI_VERSION = '2.0.6';
+const ADMIN_UI_VERSION = '2.0.8';
 /**
  * @description
@@ -21534,5 +21634,5 @@ function unicodePatternValidator(patternRe) {
  * Generated bundle index. Do not edit.
  */
-export { ADDRESS_FRAGMENT, ADD_CUSTOMERS_TO_GROUP, ADD_ITEM_TO_DRAFT_ORDER, ADD_MANUAL_PAYMENT_TO_ORDER, ADD_MEMBERS_TO_ZONE, ADD_NOTE_TO_CUSTOMER, ADD_NOTE_TO_ORDER, ADD_OPTION_GROUP_TO_PRODUCT, ADD_OPTION_TO_GROUP, ADJUST_DRAFT_ORDER_LINE, ADMINISTRATOR_FRAGMENT, ADMIN_UI_VERSION, ALL_CUSTOM_FIELDS_FRAGMENT, APPLY_COUPON_CODE_TO_DRAFT_ORDER, ASSET_FRAGMENT, ASSET_PREVIEW_QUERY, ASSIGN_COLLECTIONS_TO_CHANNEL, ASSIGN_FACETS_TO_CHANNEL, ASSIGN_PRODUCTS_TO_CHANNEL, ASSIGN_ROLE_TO_ADMINISTRATOR, ASSIGN_VARIANTS_TO_CHANNEL, ATTEMPT_LOGIN, AUTH_REDIRECT_PARAM, ActionBarComponent, ActionBarItemsComponent, ActionBarLeftComponent, ActionBarRightComponent, AddCustomersToGroupDocument, AddItemToDraftOrderDocument, AddManualPaymentDocument, AddMembersToZoneDocument, AddNoteToCustomerDocument, AddNoteToOrderDocument, AddOptionGroupToProductDocument, AddOptionToGroupDocument, AddressFormComponent, AddressFragmentDoc, AdjustDraftOrderLineDocument, AdjustmentType, AdministratorDataService, AdministratorFragmentDoc, AdministratorListItemFragmentDoc, AffixedInputComponent, Alert, AlertsComponent, AlertsService, AppComponent, AppComponentModule, AppShellComponent, ApplyCouponCodeToDraftOrderDocument, AssetDetailQueryDocument, AssetFileInputComponent, AssetFragmentDoc, AssetGalleryComponent, AssetPickerDialogComponent, AssetPreviewComponent, AssetPreviewDialogComponent, AssetPreviewLinksComponent, AssetPreviewPipe, AssetPreviewQueryDocument, AssetSearchInputComponent, AssetType, AssignCollectionsToChannelDocument, AssignFacetsToChannelDocument, AssignPaymentMethodsToChannelDocument, AssignProductsToChannelDocument, AssignPromotionsToChannelDocument, AssignRoleToAdministratorDocument, AssignShippingMethodsToChannelDocument, AssignStockLocationsToChannelDocument, AssignToChannelDialogComponent, AssignVariantsToChannelDocument, AttemptLoginDocument, AuthDataService, AuthGuard, AuthService, BOOLEAN_CUSTOM_FIELD_FRAGMENT, BaseCodeEditorFormInputComponent, BaseDataService, BaseDetailComponent, BaseEntityResolver, BaseListComponent, BaseNavComponent, BooleanCustomFieldFragmentDoc, BooleanFormInputComponent, BreadcrumbComponent, BreadcrumbService, BulkActionMenuComponent, BulkActionRegistryService, CANCEL_JOB, CANCEL_ORDER, CANCEL_PAYMENT, CHANNEL_FRAGMENT, COLLECTION_FOR_LIST_FRAGMENT, COLLECTION_FRAGMENT, CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT, COUNTRY_FRAGMENT, CREATE_ADMINISTRATOR, CREATE_ASSETS, CREATE_CHANNEL, CREATE_COLLECTION, CREATE_COUNTRY, CREATE_CUSTOMER, CREATE_CUSTOMER_ADDRESS, CREATE_CUSTOMER_GROUP, CREATE_DRAFT_ORDER, CREATE_FACET, CREATE_FACET_VALUES, CREATE_FULFILLMENT, CREATE_PAYMENT_METHOD, CREATE_PRODUCT, CREATE_PRODUCT_OPTION_GROUP, CREATE_PRODUCT_VARIANTS, CREATE_PROMOTION, CREATE_ROLE, CREATE_SELLER, CREATE_SHIPPING_METHOD, CREATE_TAG, CREATE_TAX_CATEGORY, CREATE_TAX_RATE, CREATE_ZONE, CURRENT_USER_FRAGMENT, CUSTOMER_FRAGMENT, CUSTOMER_GROUP_FRAGMENT, CUSTOM_FIELD_CONFIG_FRAGMENT, CanDeactivateDetailGuard, CancelJobDocument, CancelOrderDocument, CancelPaymentDocument, CardComponent, CardControlsDirective, ChannelAssignmentControlComponent, ChannelBadgeComponent, ChannelFragmentDoc, ChannelLabelPipe, ChannelService, ChannelSwitcherComponent, ChartComponent, CheckJobsLink, ChipComponent, ClientDataService, CollectionDataService, CollectionDetailQueryDocument, CollectionForListFragmentDoc, CollectionFragmentDoc, CombinationModeFormInputComponent, ComponentRegistryService, ConfigurableInputComponent, ConfigurableOperationDefFragmentDoc, ConfigurableOperationFragmentDoc, ContextMenuComponent, ContextMenuService, CoreModule, CountryFragmentDoc, CountryListItemFragmentDoc, CreateAdministratorDocument, CreateAssetsDocument, CreateChannelDocument, CreateCollectionDocument, CreateCountryDocument, CreateCustomerAddressDocument, CreateCustomerDocument, CreateCustomerGroupDocument, CreateDraftOrderDocument, CreateFacetDocument, CreateFacetValuesDocument, CreateFulfillmentDocument, CreatePaymentMethodDocument, CreateProductDocument, CreateProductOptionGroupDocument, CreateProductVariantsDocument, CreatePromotionDocument, CreateRoleDocument, CreateSellerDocument, CreateShippingMethodDocument, CreateStockLocationDocument, CreateTagDocument, CreateTaxCategoryDocument, CreateTaxRateDocument, CreateZoneDocument, CurrencyCode, CurrencyCodeSelectorComponent, CurrencyFormInputComponent, CurrencyInputComponent, CurrentUserFragmentDoc, CustomDetailComponentHostComponent, CustomDetailComponentService, CustomFieldComponentService, CustomFieldConfigFragmentDoc, CustomFieldControlComponent, CustomFieldDescriptionPipe, CustomFieldLabelPipe, CustomFieldsFragmentDoc, CustomFilterComponentDirective, CustomHttpTranslationLoader, CustomerDataService, CustomerDetailQueryDocument, CustomerFragmentDoc, CustomerGroupDetailFragmentDoc, CustomerGroupFormInputComponent, CustomerGroupFragmentDoc, CustomerLabelComponent, CustomerListItemFragmentDoc, CustomerListQueryDocument, DATE_TIME_CUSTOM_FIELD_FRAGMENT, DELETE_ADMINISTRATOR, DELETE_ADMINISTRATORS, DELETE_ASSETS, DELETE_CHANNEL, DELETE_CHANNELS, DELETE_COLLECTION, DELETE_COLLECTIONS, DELETE_COUNTRIES, DELETE_COUNTRY, DELETE_CUSTOMER, DELETE_CUSTOMERS, DELETE_CUSTOMER_ADDRESS, DELETE_CUSTOMER_GROUP, DELETE_CUSTOMER_GROUPS, DELETE_CUSTOMER_NOTE, DELETE_DRAFT_ORDER, DELETE_FACET, DELETE_FACETS, DELETE_FACET_VALUES, DELETE_ORDER_NOTE, DELETE_PAYMENT_METHOD, DELETE_PAYMENT_METHODS, DELETE_PRODUCT, DELETE_PRODUCTS, DELETE_PRODUCT_OPTION, DELETE_PRODUCT_VARIANT, DELETE_PRODUCT_VARIANTS, DELETE_PROMOTION, DELETE_PROMOTIONS, DELETE_ROLE, DELETE_ROLES, DELETE_SELLER, DELETE_SELLERS, DELETE_SHIPPING_METHOD, DELETE_SHIPPING_METHODS, DELETE_TAG, DELETE_TAX_CATEGORIES, DELETE_TAX_CATEGORY, DELETE_TAX_RATE, DELETE_TAX_RATES, DELETE_ZONE, DELETE_ZONES, DISCOUNT_FRAGMENT, DRAFT_ORDER_ELIGIBLE_SHIPPING_METHODS, DashboardWidgetService, DataModule, DataService, DataTable2ColumnComponent, DataTable2Component, DataTable2SearchComponent, DataTableColumnComponent, DataTableColumnPickerComponent, DataTableComponent, DataTableCustomFieldColumnComponent, DataTableFilter, DataTableFilterCollection, DataTableFilterLabelComponent, DataTableFiltersComponent, DataTableSort, DataTableSortCollection, DateFormInputComponent, DateTimeCustomFieldFragmentDoc, DatetimePickerComponent, DatetimePickerService, DefaultInterceptor, DeleteAdministratorDocument, DeleteAdministratorsDocument, DeleteAssetsDocument, DeleteChannelDocument, DeleteChannelsDocument, DeleteCollectionDocument, DeleteCollectionsDocument, DeleteCountriesDocument, DeleteCountryDocument, DeleteCustomerAddressDocument, DeleteCustomerDocument, DeleteCustomerGroupDocument, DeleteCustomerGroupsDocument, DeleteCustomerNoteDocument, DeleteCustomersDocument, DeleteDraftOrderDocument, DeleteFacetDocument, DeleteFacetValuesDocument, DeleteFacetsDocument, DeleteOrderNoteDocument, DeletePaymentMethodDocument, DeletePaymentMethodsDocument, DeleteProductDocument, DeleteProductOptionDocument, DeleteProductVariantDocument, DeleteProductVariantsDocument, DeleteProductsDocument, DeletePromotionDocument, DeletePromotionsDocument, DeleteRoleDocument, DeleteRolesDocument, DeleteSellerDocument, DeleteSellersDocument, DeleteShippingMethodDocument, DeleteShippingMethodsDocument, DeleteStockLocationsDocument, DeleteTagDocument, DeleteTaxCategoriesDocument, DeleteTaxCategoryDocument, DeleteTaxRateDocument, DeleteTaxRatesDocument, DeleteZoneDocument, DeleteZonesDocument, DeletionResult, DialogButtonsDirective, DialogComponentOutletComponent, DialogTitleDirective, DisabledDirective, DiscountFragmentDoc, DraftOrderEligibleShippingMethodsDocument, DropdownComponent, DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, DurationPipe, DynamicFormInputComponent, ERROR_RESULT_FRAGMENT, EditNoteDialogComponent, EmptyPlaceholderComponent, EntityInfoComponent, ErrorCode, ErrorResultFragmentDoc, ExtensionHostComponent, ExtensionHostConfig, ExtensionHostService, ExternalImageDialogComponent, FACET_VALUE_FRAGMENT, FACET_WITH_VALUES_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueFragmentDoc, FacetValueSelectorComponent, FacetWithValuesFragmentDoc, FetchAdapter, FileSizePipe, FilterWithValue, FloatCustomFieldFragmentDoc, FocalPointControlComponent, FormFieldComponent, FormFieldControlDirective, FormItemComponent, FormattedAddressComponent, FulfillmentFragmentDoc, GET_ACTIVE_ADMINISTRATOR, GET_ACTIVE_CHANNEL, GET_ADJUSTMENT_OPERATIONS, GET_ASSET, GET_ASSET_LIST, GET_AVAILABLE_COUNTRIES, GET_CHANNELS, GET_CLIENT_STATE, GET_COLLECTION_CONTENTS, GET_COLLECTION_FILTERS, GET_COLLECTION_LIST, GET_CURRENT_USER, GET_CUSTOMER_GROUPS, GET_CUSTOMER_GROUP_WITH_CUSTOMERS, GET_CUSTOMER_HISTORY, GET_CUSTOMER_LIST, GET_FACET_VALUE_LIST, GET_GLOBAL_SETTINGS, GET_JOBS_BY_ID, GET_JOBS_LIST, GET_JOB_INFO, GET_JOB_QUEUE_LIST, GET_NEWTORK_STATUS, GET_ORDER, GET_ORDERS_LIST, GET_ORDER_HISTORY, GET_PAYMENT_METHOD_OPERATIONS, GET_PENDING_SEARCH_INDEX_UPDATES, GET_PRODUCT_LIST, GET_PRODUCT_OPTION_GROUP, GET_PRODUCT_OPTION_GROUPS, GET_PRODUCT_SIMPLE, GET_PRODUCT_VARIANT, GET_PRODUCT_VARIANTS_FOR_MULTI_SELECTOR, GET_PRODUCT_VARIANT_LIST, GET_PRODUCT_VARIANT_LIST_FOR_PRODUCT, GET_PRODUCT_VARIANT_LIST_SIMPLE, GET_PRODUCT_VARIANT_OPTIONS, GET_PRODUCT_WITH_VARIANTS, GET_ROLES, GET_SELLERS, GET_SERVER_CONFIG, GET_SHIPPING_METHOD_OPERATIONS, GET_TAG, GET_TAG_LIST, GET_TAX_CATEGORIES, GET_TAX_RATE_LIST_SIMPLE, GET_UI_STATE, GET_USER_STATUS, GET_ZONE, GET_ZONE_SELECTOR_LIST, GLOBAL_SETTINGS_FRAGMENT, GetActiveAdministratorDocument, GetActiveChannelDocument, GetAddManualPaymentMethodListDocument, GetAdjustmentOperationsDocument, GetAdministratorDetailDocument, GetAdministratorListDocument, GetAllJobsDocument, GetAssetDocument, GetAssetListDocument, GetAvailableCountriesDocument, GetChannelDetailDocument, GetChannelListDocument, GetChannelsDocument, GetClientStateDocument, GetCollectionContentsDocument, GetCollectionFiltersDocument, GetCollectionListDocument, GetCountryDetailDocument, GetCountryListDocument, GetCouponCodeSelectorPromotionListDocument, GetCurrentUserDocument, GetCustomerAddressesDocument, GetCustomerGroupDetailDocument, GetCustomerGroupListDocument, GetCustomerGroupWithCustomersDocument, GetCustomerGroupsDocument, GetCustomerHistoryDocument, GetCustomerListDocument, GetFacetDetailDocument, GetFacetListDocument, GetFacetValueListDocument, GetGlobalSettingsDetailDocument, GetGlobalSettingsDocument, GetJobInfoDocument, GetJobQueueListDocument, GetJobsByIdDocument, GetLatestOrdersDocument, GetNetworkStatusDocument, GetOrderChartDataDocument, GetOrderDocument, GetOrderHistoryDocument, GetOrderListDocument, GetOrderSummaryDocument, GetPaymentMethodDetailDocument, GetPaymentMethodListDocument, GetPaymentMethodOperationsDocument, GetPendingSearchIndexUpdatesDocument, GetProductDetailDocument, GetProductListDocument, GetProductOptionGroupDocument, GetProductOptionGroupsDocument, GetProductSimpleDocument, GetProductVariantDetailDocument, GetProductVariantDocument, GetProductVariantListDocument, GetProductVariantListForProductDocument, GetProductVariantListSimpleDocument, GetProductVariantOptionsDocument, GetProductVariantsForMultiSelectorDocument, GetProductVariantsQuickJumpDocument, GetProductWithVariantsDocument, GetProductsWithFacetValuesByIdsDocument, GetProfileDetailDocument, GetPromotionDetailDocument, GetPromotionListDocument, GetRoleDetailDocument, GetRoleListDocument, GetRolesDocument, GetSellerDetailDocument, GetSellerListDocument, GetSellerOrdersDocument, GetSellersDocument, GetServerConfigDocument, GetShippingMethodDetailDocument, GetShippingMethodListDocument, GetShippingMethodOperationsDocument, GetStockLocationDetailDocument, GetStockLocationListDocument, GetTagDocument, GetTagListDocument, GetTaxCategoriesDocument, GetTaxCategoryDetailDocument, GetTaxCategoryListDocument, GetTaxRateDetailDocument, GetTaxRateListDocument, GetTaxRateListSimpleDocument, GetUiStateDocument, GetUserStatusDocument, GetVariantsWithFacetValuesByIdsDocument, GetZoneDetailDocument, GetZoneDocument, GetZoneListDocument, GetZoneMembersDocument, GetZoneSelectorListDocument, GlobalFlag, GlobalSettingsDetailFragmentDoc, GlobalSettingsFragmentDoc, HasPermissionPipe, HealthCheckService, HelpTooltipComponent, HistoryEntryComponentService, HistoryEntryDetailComponent, HistoryEntryType, HtmlEditorFormInputComponent, HttpLoaderFactory, I18nService, INT_CUSTOM_FIELD_FRAGMENT, IconSize, IfDefaultChannelActiveDirective, IfDirectiveBase, IfMultichannelDirective, IfPermissionsDirective, InjectableTranslateMessageFormatCompiler, IntCustomFieldFragmentDoc, ItemsPerPageControlsComponent, JOB_INFO_FRAGMENT, JobInfoFragmentDoc, JobQueueService, JobState, JsonEditorFormInputComponent, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, LOCALE_TEXT_CUSTOM_FIELD_FRAGMENT, LOG_OUT, LabeledDataComponent, LanguageCode, LanguageCodeSelectorComponent, LanguageSelectorComponent, LinkDialogComponent, LocalStorageService, LocaleBasePipe, LocaleCurrencyNamePipe, LocaleCurrencyPipe, LocaleDatePipe, LocaleLanguageNamePipe, LocaleRegionNamePipe, LocaleStringCustomFieldFragmentDoc, LocaleTextCustomFieldFragmentDoc, LocalizedTextComponent, LogOutDocument, LogicalOperator, MODIFY_ORDER, MOVE_COLLECTION, MainNavComponent, ManageTagsDialogComponent, MetricInterval, MetricType, ModalDialogComponent, ModalService, ModifyOrderDocument, MoveCollectionDocument, NavBuilderService, NotificationComponent, NotificationService, NumberFormInputComponent, ORDER_ADDRESS_FRAGMENT, ORDER_DETAIL_FRAGMENT, ORDER_FRAGMENT, ORDER_LINE_FRAGMENT, ObjectTreeComponent, OmitTypenameLink, OrderAddressFragmentDoc, OrderDataService, OrderDetailFragmentDoc, OrderDetailQueryDocument, OrderFragmentDoc, OrderLineFragmentDoc, OrderStateLabelComponent, OrderType, OverlayHostComponent, OverlayHostService, PAYMENT_FRAGMENT, PAYMENT_METHOD_FRAGMENT, PAYMENT_WITH_REFUNDS_FRAGMENT, PREVIEW_COLLECTION_CONTENTS, PRODUCT_DETAIL_FRAGMENT, PRODUCT_FOR_LIST_FRAGMENT, PRODUCT_OPTION_FRAGMENT, PRODUCT_OPTION_GROUP_FRAGMENT, PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT, PRODUCT_SELECTOR_SEARCH, PRODUCT_VARIANT_FRAGMENT, PROMOTION_FRAGMENT, PageBlockComponent, PageBodyComponent, PageComponent, PageDetailLayoutComponent, PageDetailSidebarComponent, PageEntityInfoComponent, PageHeaderComponent, PageHeaderDescriptionComponent, PageHeaderTabsComponent, PageService, PageTitleComponent, PaginationControlsComponent, PasswordFormInputComponent, PaymentFragmentDoc, PaymentMethodFragmentDoc, PaymentMethodListItemFragmentDoc, PaymentWithRefundsFragmentDoc, PercentageSuffixInputComponent, Permission, PreviewCollectionContentsDocument, ProductDataService, ProductDetailFragmentDoc, ProductForListFragmentDoc, ProductListQueryDocument, ProductListQueryProductFragmentFragmentDoc, ProductMultiSelectorDialogComponent, ProductMultiSelectorFormInputComponent, ProductOptionFragmentDoc, ProductOptionGroupFragmentDoc, ProductOptionGroupWithOptionsFragmentDoc, ProductSearchInputComponent, ProductSelectorFormInputComponent, ProductSelectorSearchDocument, ProductVariantDetailQueryProductVariantFragmentFragmentDoc, ProductVariantFragmentDoc, ProductVariantListQueryDocument, ProductVariantListQueryProductVariantFragmentFragmentDoc, ProductVariantSelectorComponent, ProductVariantUpdateMutationDocument, ProfileDetailFragmentDoc, PromotionDataService, PromotionFragmentDoc, ProsemirrorService, QueryResult, REFUND_FRAGMENT, REFUND_ORDER, REINDEX, RELATION_ASSET_INPUT_QUERY, RELATION_CUSTOM_FIELD_FRAGMENT, REMOVE_COLLECTIONS_FROM_CHANNEL, REMOVE_COUPON_CODE_FROM_DRAFT_ORDER, REMOVE_CUSTOMERS_FROM_GROUP, REMOVE_DRAFT_ORDER_LINE, REMOVE_FACETS_FROM_CHANNEL, REMOVE_MEMBERS_FROM_ZONE, REMOVE_OPTION_GROUP_FROM_PRODUCT, REMOVE_PRODUCTS_FROM_CHANNEL, REMOVE_VARIANTS_FROM_CHANNEL, REQUEST_COMPLETED, REQUEST_STARTED, ROLE_FRAGMENT, RUN_PENDING_SEARCH_INDEX_UPDATES, RadioCardComponent, RadioCardFieldsetComponent, RawHtmlDialogComponent, RefundFragmentDoc, RefundOrderDocument, ReindexDocument, RelationAssetInputComponent, RelationAssetInputQueryDocument, RelationCardComponent, RelationCardDetailDirective, RelationCardPreviewDirective, RelationCustomFieldFragmentDoc, RelationCustomerInputComponent, RelationFormInputComponent, RelationGenericInputComponent, RelationProductInputComponent, RelationProductVariantInputComponent, RelationSelectorDialogComponent, RemoveCollectionsFromChannelDocument, RemoveCouponCodeFromDraftOrderDocument, RemoveCustomersFromGroupDocument, RemoveDraftOrderLineDocument, RemoveFacetsFromChannelDocument, RemoveMembersFromZoneDocument, RemoveOptionGroupFromProductDocument, RemovePaymentMethodsFromChannelDocument, RemoveProductsFromChannelDocument, RemovePromotionsFromChannelDocument, RemoveShippingMethodsFromChannelDocument, RemoveStockLocationsFromChannelDocument, RemoveVariantsFromChannelDocument, RequestCompletedDocument, RequestStartedDocument, RichTextEditorComponent, RichTextFormInputComponent, RoleFragmentDoc, RunPendingSearchIndexUpdatesDocument, SEARCH_PRODUCTS, SELLER_FRAGMENT, SETTLE_PAYMENT, SETTLE_REFUND, SET_ACTIVE_CHANNEL, SET_AS_LOGGED_IN, SET_AS_LOGGED_OUT, SET_BILLING_ADDRESS_FOR_DRAFT_ORDER, SET_CONTENT_LANGUAGE, SET_CUSTOMER_FOR_DRAFT_ORDER, SET_DISPLAY_UI_EXTENSION_POINTS, SET_DRAFT_ORDER_SHIPPING_METHOD, SET_MAIN_NAV_EXPANDED, SET_SHIPPING_ADDRESS_FOR_DRAFT_ORDER, SET_UI_LANGUAGE_AND_LOCALE, SET_UI_LOCALE, SET_UI_THEME, SHIPPING_METHOD_FRAGMENT, STRING_CUSTOM_FIELD_FRAGMENT, SearchProductsDocument, SelectFormInputComponent, SelectToggleComponent, SelectionManager, SellerDetailFragmentDoc, SellerFragmentDoc, SellerListItemFragmentDoc, SentenceCasePipe, ServerConfigService, SetActiveChannelDocument, SetAsLoggedInDocument, SetAsLoggedOutDocument, SetContentLanguageDocument, SetCustomerForDraftOrderDocument, SetDisplayUiExtensionPointsDocument, SetDraftOrderBillingAddressDocument, SetDraftOrderShippingAddressDocument, SetDraftOrderShippingMethodDocument, SetMainNavExpandedDocument, SetUiLanguageDocument, SetUiLocaleDocument, SetUiThemeDocument, SettingsDataService, SettingsNavComponent, SettlePaymentDocument, SettleRefundDocument, SharedModule, ShippingMethodDataService, ShippingMethodFragmentDoc, ShippingMethodListItemFragmentDoc, SimpleDialogComponent, SingleSearchSelectionModel, SingleSearchSelectionModelFactory, SortOrder, SortPipe, SplitViewComponent, SplitViewLeftDirective, SplitViewRightDirective, StateI18nTokenPipe, StatusBadgeComponent, StockLocationDetailFragmentDoc, StockLocationListItemFragmentDoc, StockMovementType, StringCustomFieldFragmentDoc, StringToColorPipe, SubMenuWithIcon, TAG_FRAGMENT, TAX_CATEGORY_FRAGMENT, TAX_RATE_FRAGMENT, TEST_ELIGIBLE_SHIPPING_METHODS, TEST_SHIPPING_METHOD, TEXT_CUSTOM_FIELD_FRAGMENT, TRANSITION_FULFILLMENT_TO_STATE, TRANSITION_ORDER_TO_STATE, TRANSITION_PAYMENT_TO_STATE, TabbedCustomFieldsComponent, TableRowActionComponent, TagFragmentDoc, TagSelectorComponent, TaxCategoryFragmentDoc, TaxRateFragmentDoc, TestEligibleShippingMethodsDocument, TestShippingMethodDocument, TextCustomFieldFragmentDoc, TextFormInputComponent, TextareaFormInputComponent, ThemeSwitcherComponent, TimeAgoPipe, TimelineEntryComponent, TitleInputComponent, TransitionFulfillmentToStateDocument, TransitionOrderToStateDocument, TransitionPaymentToStateDocument, TypedBaseDetailComponent, TypedBaseListComponent, UPDATE_ACTIVE_ADMINISTRATOR, UPDATE_ADMINISTRATOR, UPDATE_ASSET, UPDATE_CHANNEL, UPDATE_COLLECTION, UPDATE_COUNTRY, UPDATE_CUSTOMER, UPDATE_CUSTOMER_ADDRESS, UPDATE_CUSTOMER_GROUP, UPDATE_CUSTOMER_NOTE, UPDATE_FACET, UPDATE_FACET_VALUES, UPDATE_GLOBAL_SETTINGS, UPDATE_ORDER_CUSTOM_FIELDS, UPDATE_ORDER_NOTE, UPDATE_PAYMENT_METHOD, UPDATE_PRODUCT, UPDATE_PRODUCT_OPTION, UPDATE_PRODUCT_OPTION_GROUP, UPDATE_PRODUCT_VARIANTS, UPDATE_PROMOTION, UPDATE_ROLE, UPDATE_SELLER, UPDATE_SHIPPING_METHOD, UPDATE_TAG, UPDATE_TAX_CATEGORY, UPDATE_TAX_RATE, UPDATE_USER_CHANNELS, UPDATE_ZONE, USER_STATUS_FRAGMENT, UiExtensionPointComponent, UiLanguageSwitcherDialogComponent, UpdateActiveAdministratorDocument, UpdateAdministratorDocument, UpdateAssetDocument, UpdateChannelDocument, UpdateCollectionDocument, UpdateCountryDocument, UpdateCustomerAddressDocument, UpdateCustomerDocument, UpdateCustomerGroupDocument, UpdateCustomerNoteDocument, UpdateFacetDocument, UpdateFacetValuesDocument, UpdateGlobalSettingsDocument, UpdateOrderCustomFieldsDocument, UpdateOrderNoteDocument, UpdatePaymentMethodDocument, UpdateProductDocument, UpdateProductOptionDocument, UpdateProductOptionGroupDocument, UpdateProductVariantsDocument, UpdateProductsBulkDocument, UpdatePromotionDocument, UpdateRoleDocument, UpdateSellerDocument, UpdateShippingMethodDocument, UpdateStockLocationDocument, UpdateTagDocument, UpdateTaxCategoryDocument, UpdateTaxRateDocument, UpdateUserChannelsDocument, UpdateVariantsBulkDocument, UpdateZoneDocument, UserMenuComponent, UserStatusFragmentDoc, ZONE_FRAGMENT, ZoneDetailFragmentDoc, ZoneFragmentDoc, ZoneListItemFragmentDoc, ZoneSelectorComponent, addActionBarItem, addCustomFields, addNavMenuItem, addNavMenuSection, addTable, blockQuoteRule, buildInputRules, buildKeymap, buildMenuItems, bulletListRule, canInsert, clientResolvers, codeBlockRule, configurableDefinitionToInstance, configurableOperationValueIsValid, createApollo, createBulkAssignToChannelAction, createBulkDeleteAction, createBulkRemoveFromChannelAction, createResolveData, createUpdatedTranslatable, currentChannelIsNotDefault, customMenuPlugin, dayOfWeekIndex, defaultFormInputs, detailBreadcrumb, detailComponentWithResolver, encodeConfigArgValue, findTranslation, getAppConfig, getChannelCodeFromUserStatus, getClientDefaults, getConfigArgValue, getDefaultConfigArgValue, getDefaultUiLanguage, getDefaultUiLocale, getMarkRange, getOrderStateTranslationToken, getServerLocation, getTableMenu, getTableNodes, headingRule, hostExternalFrame, iframeNode, iframeNodeView, imageContextMenuPlugin, initializeServerConfigService, insertImageItem, interpolateDescription, result as introspectionResult, isEntityCreateOrUpdateMutation, isMultiChannel, jsonValidator, linkItem, linkMark, linkSelectPlugin, loadAppConfig, markActive, orderedListRule, rawEditorPlugin, registerBulkAction, registerCustomDetailComponent, registerDashboardWidget, registerDefaultFormInputs, registerFormInputComponent, registerHistoryEntryComponent, registerPageTab, removeReadonlyCustomFields, renderClarityIcon, setDashboardWidgetLayout, stringToColor, tableContextMenuPlugin, titleSetter, toConfigurableOperationInput, tooltipPlugin, transformRelationCustomFieldInputs, unicodePatternValidator, weekDayNames, wrapInMenuItemWithIcon };
+export { ADDRESS_FRAGMENT, ADD_CUSTOMERS_TO_GROUP, ADD_ITEM_TO_DRAFT_ORDER, ADD_MANUAL_PAYMENT_TO_ORDER, ADD_MEMBERS_TO_ZONE, ADD_NOTE_TO_CUSTOMER, ADD_NOTE_TO_ORDER, ADD_OPTION_GROUP_TO_PRODUCT, ADD_OPTION_TO_GROUP, ADJUST_DRAFT_ORDER_LINE, ADMINISTRATOR_FRAGMENT, ADMIN_UI_VERSION, ALL_CUSTOM_FIELDS_FRAGMENT, APPLY_COUPON_CODE_TO_DRAFT_ORDER, ASSET_FRAGMENT, ASSET_PREVIEW_QUERY, ASSIGN_COLLECTIONS_TO_CHANNEL, ASSIGN_FACETS_TO_CHANNEL, ASSIGN_PRODUCTS_TO_CHANNEL, ASSIGN_ROLE_TO_ADMINISTRATOR, ASSIGN_VARIANTS_TO_CHANNEL, ATTEMPT_LOGIN, AUTH_REDIRECT_PARAM, ActionBarComponent, ActionBarItemsComponent, ActionBarLeftComponent, ActionBarRightComponent, AddCustomersToGroupDocument, AddItemToDraftOrderDocument, AddManualPaymentDocument, AddMembersToZoneDocument, AddNoteToCustomerDocument, AddNoteToOrderDocument, AddOptionGroupToProductDocument, AddOptionToGroupDocument, AddressFormComponent, AddressFragmentDoc, AdjustDraftOrderLineDocument, AdjustmentType, AdministratorDataService, AdministratorFragmentDoc, AdministratorListItemFragmentDoc, AffixedInputComponent, Alert, AlertsComponent, AlertsService, AppComponent, AppComponentModule, AppShellComponent, ApplyCouponCodeToDraftOrderDocument, AssetDetailQueryDocument, AssetFileInputComponent, AssetFragmentDoc, AssetGalleryComponent, AssetPickerDialogComponent, AssetPreviewComponent, AssetPreviewDialogComponent, AssetPreviewLinksComponent, AssetPreviewPipe, AssetPreviewQueryDocument, AssetSearchInputComponent, AssetType, AssignCollectionsToChannelDocument, AssignFacetsToChannelDocument, AssignPaymentMethodsToChannelDocument, AssignProductsToChannelDocument, AssignPromotionsToChannelDocument, AssignRoleToAdministratorDocument, AssignShippingMethodsToChannelDocument, AssignStockLocationsToChannelDocument, AssignToChannelDialogComponent, AssignVariantsToChannelDocument, AttemptLoginDocument, AuthDataService, AuthGuard, AuthService, BOOLEAN_CUSTOM_FIELD_FRAGMENT, BaseCodeEditorFormInputComponent, BaseDataService, BaseDetailComponent, BaseEntityResolver, BaseListComponent, BaseNavComponent, BooleanCustomFieldFragmentDoc, BooleanFormInputComponent, BreadcrumbComponent, BreadcrumbService, BulkActionMenuComponent, BulkActionRegistryService, CANCEL_JOB, CANCEL_ORDER, CANCEL_PAYMENT, CHANNEL_FRAGMENT, COLLECTION_FOR_LIST_FRAGMENT, COLLECTION_FRAGMENT, CONFIGURABLE_OPERATION_DEF_FRAGMENT, CONFIGURABLE_OPERATION_FRAGMENT, COUNTRY_FRAGMENT, CREATE_ADMINISTRATOR, CREATE_ASSETS, CREATE_CHANNEL, CREATE_COLLECTION, CREATE_COUNTRY, CREATE_CUSTOMER, CREATE_CUSTOMER_ADDRESS, CREATE_CUSTOMER_GROUP, CREATE_DRAFT_ORDER, CREATE_FACET, CREATE_FACET_VALUES, CREATE_FULFILLMENT, CREATE_PAYMENT_METHOD, CREATE_PRODUCT, CREATE_PRODUCT_OPTION_GROUP, CREATE_PRODUCT_VARIANTS, CREATE_PROMOTION, CREATE_ROLE, CREATE_SELLER, CREATE_SHIPPING_METHOD, CREATE_TAG, CREATE_TAX_CATEGORY, CREATE_TAX_RATE, CREATE_ZONE, CURRENT_USER_FRAGMENT, CUSTOMER_FRAGMENT, CUSTOMER_GROUP_FRAGMENT, CUSTOM_FIELD_CONFIG_FRAGMENT, CanDeactivateDetailGuard, CancelJobDocument, CancelOrderDocument, CancelPaymentDocument, CardComponent, CardControlsDirective, ChannelAssignmentControlComponent, ChannelBadgeComponent, ChannelFragmentDoc, ChannelLabelPipe, ChannelService, ChannelSwitcherComponent, ChartComponent, CheckJobsLink, ChipComponent, ClientDataService, CollectionDataService, CollectionDetailQueryDocument, CollectionForListFragmentDoc, CollectionFragmentDoc, CombinationModeFormInputComponent, ComponentRegistryService, ConfigurableInputComponent, ConfigurableOperationDefFragmentDoc, ConfigurableOperationFragmentDoc, ContextMenuComponent, ContextMenuService, CoreModule, CountryFragmentDoc, CountryListItemFragmentDoc, CreateAdministratorDocument, CreateAssetsDocument, CreateChannelDocument, CreateCollectionDocument, CreateCountryDocument, CreateCustomerAddressDocument, CreateCustomerDocument, CreateCustomerGroupDocument, CreateDraftOrderDocument, CreateFacetDocument, CreateFacetValuesDocument, CreateFulfillmentDocument, CreatePaymentMethodDocument, CreateProductDocument, CreateProductOptionGroupDocument, CreateProductVariantsDocument, CreatePromotionDocument, CreateRoleDocument, CreateSellerDocument, CreateShippingMethodDocument, CreateStockLocationDocument, CreateTagDocument, CreateTaxCategoryDocument, CreateTaxRateDocument, CreateZoneDocument, CurrencyCode, CurrencyCodeSelectorComponent, CurrencyFormInputComponent, CurrencyInputComponent, CurrentUserFragmentDoc, CustomDetailComponentHostComponent, CustomDetailComponentService, CustomFieldComponentService, CustomFieldConfigFragmentDoc, CustomFieldControlComponent, CustomFieldDescriptionPipe, CustomFieldLabelPipe, CustomFieldsFragmentDoc, CustomFilterComponentDirective, CustomHttpTranslationLoader, CustomerDataService, CustomerDetailQueryDocument, CustomerFragmentDoc, CustomerGroupDetailFragmentDoc, CustomerGroupFormInputComponent, CustomerGroupFragmentDoc, CustomerLabelComponent, CustomerListItemFragmentDoc, CustomerListQueryDocument, DATE_TIME_CUSTOM_FIELD_FRAGMENT, DELETE_ADMINISTRATOR, DELETE_ADMINISTRATORS, DELETE_ASSETS, DELETE_CHANNEL, DELETE_CHANNELS, DELETE_COLLECTION, DELETE_COLLECTIONS, DELETE_COUNTRIES, DELETE_COUNTRY, DELETE_CUSTOMER, DELETE_CUSTOMERS, DELETE_CUSTOMER_ADDRESS, DELETE_CUSTOMER_GROUP, DELETE_CUSTOMER_GROUPS, DELETE_CUSTOMER_NOTE, DELETE_DRAFT_ORDER, DELETE_FACET, DELETE_FACETS, DELETE_FACET_VALUES, DELETE_ORDER_NOTE, DELETE_PAYMENT_METHOD, DELETE_PAYMENT_METHODS, DELETE_PRODUCT, DELETE_PRODUCTS, DELETE_PRODUCT_OPTION, DELETE_PRODUCT_VARIANT, DELETE_PRODUCT_VARIANTS, DELETE_PROMOTION, DELETE_PROMOTIONS, DELETE_ROLE, DELETE_ROLES, DELETE_SELLER, DELETE_SELLERS, DELETE_SHIPPING_METHOD, DELETE_SHIPPING_METHODS, DELETE_TAG, DELETE_TAX_CATEGORIES, DELETE_TAX_CATEGORY, DELETE_TAX_RATE, DELETE_TAX_RATES, DELETE_ZONE, DELETE_ZONES, DISCOUNT_FRAGMENT, DRAFT_ORDER_ELIGIBLE_SHIPPING_METHODS, DashboardWidgetService, DataModule, DataService, DataTable2ColumnComponent, DataTable2Component, DataTable2SearchComponent, DataTableColumnComponent, DataTableColumnPickerComponent, DataTableComponent, DataTableCustomFieldColumnComponent, DataTableFilter, DataTableFilterCollection, DataTableFilterLabelComponent, DataTableFiltersComponent, DataTableSort, DataTableSortCollection, DateFormInputComponent, DateTimeCustomFieldFragmentDoc, DatetimePickerComponent, DatetimePickerService, DefaultInterceptor, DeleteAdministratorDocument, DeleteAdministratorsDocument, DeleteAssetsDocument, DeleteChannelDocument, DeleteChannelsDocument, DeleteCollectionDocument, DeleteCollectionsDocument, DeleteCountriesDocument, DeleteCountryDocument, DeleteCustomerAddressDocument, DeleteCustomerDocument, DeleteCustomerGroupDocument, DeleteCustomerGroupsDocument, DeleteCustomerNoteDocument, DeleteCustomersDocument, DeleteDraftOrderDocument, DeleteFacetDocument, DeleteFacetValuesDocument, DeleteFacetsDocument, DeleteOrderNoteDocument, DeletePaymentMethodDocument, DeletePaymentMethodsDocument, DeleteProductDocument, DeleteProductOptionDocument, DeleteProductVariantDocument, DeleteProductVariantsDocument, DeleteProductsDocument, DeletePromotionDocument, DeletePromotionsDocument, DeleteRoleDocument, DeleteRolesDocument, DeleteSellerDocument, DeleteSellersDocument, DeleteShippingMethodDocument, DeleteShippingMethodsDocument, DeleteStockLocationsDocument, DeleteTagDocument, DeleteTaxCategoriesDocument, DeleteTaxCategoryDocument, DeleteTaxRateDocument, DeleteTaxRatesDocument, DeleteZoneDocument, DeleteZonesDocument, DeletionResult, DialogButtonsDirective, DialogComponentOutletComponent, DialogTitleDirective, DisabledDirective, DiscountFragmentDoc, DraftOrderEligibleShippingMethodsDocument, DropdownComponent, DropdownItemDirective, DropdownMenuComponent, DropdownTriggerDirective, DurationPipe, DynamicFormInputComponent, ERROR_RESULT_FRAGMENT, EditNoteDialogComponent, EmptyPlaceholderComponent, EntityInfoComponent, ErrorCode, ErrorResultFragmentDoc, ExtensionHostComponent, ExtensionHostConfig, ExtensionHostService, ExternalImageDialogComponent, FACET_VALUE_FRAGMENT, FACET_WITH_VALUES_FRAGMENT, FLOAT_CUSTOM_FIELD_FRAGMENT, FULFILLMENT_FRAGMENT, FacetDataService, FacetValueChipComponent, FacetValueFormInputComponent, FacetValueFragmentDoc, FacetValueSelectorComponent, FacetWithValuesFragmentDoc, FetchAdapter, FileSizePipe, FilterWithValue, FloatCustomFieldFragmentDoc, FocalPointControlComponent, FormFieldComponent, FormFieldControlDirective, FormItemComponent, FormattedAddressComponent, FulfillmentFragmentDoc, GET_ACTIVE_ADMINISTRATOR, GET_ACTIVE_CHANNEL, GET_ADJUSTMENT_OPERATIONS, GET_ASSET, GET_ASSET_LIST, GET_AVAILABLE_COUNTRIES, GET_CHANNELS, GET_CLIENT_STATE, GET_COLLECTION_CONTENTS, GET_COLLECTION_FILTERS, GET_COLLECTION_LIST, GET_CURRENT_USER, GET_CUSTOMER_GROUPS, GET_CUSTOMER_GROUP_WITH_CUSTOMERS, GET_CUSTOMER_HISTORY, GET_CUSTOMER_LIST, GET_FACET_VALUE_LIST, GET_GLOBAL_SETTINGS, GET_JOBS_BY_ID, GET_JOBS_LIST, GET_JOB_INFO, GET_JOB_QUEUE_LIST, GET_NEWTORK_STATUS, GET_ORDER, GET_ORDERS_LIST, GET_ORDER_HISTORY, GET_PAYMENT_METHOD_OPERATIONS, GET_PENDING_SEARCH_INDEX_UPDATES, GET_PRODUCT_LIST, GET_PRODUCT_OPTION_GROUP, GET_PRODUCT_OPTION_GROUPS, GET_PRODUCT_SIMPLE, GET_PRODUCT_VARIANT, GET_PRODUCT_VARIANTS_FOR_MULTI_SELECTOR, GET_PRODUCT_VARIANT_LIST, GET_PRODUCT_VARIANT_LIST_FOR_PRODUCT, GET_PRODUCT_VARIANT_LIST_SIMPLE, GET_PRODUCT_VARIANT_OPTIONS, GET_PRODUCT_WITH_VARIANTS, GET_ROLES, GET_SELLERS, GET_SERVER_CONFIG, GET_SHIPPING_METHOD_OPERATIONS, GET_TAG, GET_TAG_LIST, GET_TAX_CATEGORIES, GET_TAX_RATE_LIST_SIMPLE, GET_UI_STATE, GET_USER_STATUS, GET_ZONE, GET_ZONE_SELECTOR_LIST, GLOBAL_SETTINGS_FRAGMENT, GetActiveAdministratorDocument, GetActiveChannelDocument, GetAddManualPaymentMethodListDocument, GetAdjustmentOperationsDocument, GetAdministratorDetailDocument, GetAdministratorListDocument, GetAllJobsDocument, GetAssetDocument, GetAssetListDocument, GetAvailableCountriesDocument, GetChannelDetailDocument, GetChannelListDocument, GetChannelsDocument, GetClientStateDocument, GetCollectionContentsDocument, GetCollectionFiltersDocument, GetCollectionListDocument, GetCountryDetailDocument, GetCountryListDocument, GetCouponCodeSelectorPromotionListDocument, GetCurrentUserDocument, GetCustomerAddressesDocument, GetCustomerGroupDetailDocument, GetCustomerGroupListDocument, GetCustomerGroupWithCustomersDocument, GetCustomerGroupsDocument, GetCustomerHistoryDocument, GetCustomerListDocument, GetFacetDetailDocument, GetFacetListDocument, GetFacetValueListDocument, GetGlobalSettingsDetailDocument, GetGlobalSettingsDocument, GetJobInfoDocument, GetJobQueueListDocument, GetJobsByIdDocument, GetLatestOrdersDocument, GetNetworkStatusDocument, GetOrderChartDataDocument, GetOrderDocument, GetOrderHistoryDocument, GetOrderListDocument, GetOrderSummaryDocument, GetPaymentMethodDetailDocument, GetPaymentMethodListDocument, GetPaymentMethodOperationsDocument, GetPendingSearchIndexUpdatesDocument, GetProductDetailDocument, GetProductListDocument, GetProductOptionGroupDocument, GetProductOptionGroupsDocument, GetProductSimpleDocument, GetProductVariantDetailDocument, GetProductVariantDocument, GetProductVariantListDocument, GetProductVariantListForProductDocument, GetProductVariantListSimpleDocument, GetProductVariantOptionsDocument, GetProductVariantsForMultiSelectorDocument, GetProductVariantsQuickJumpDocument, GetProductWithVariantsDocument, GetProductsWithFacetValuesByIdsDocument, GetProfileDetailDocument, GetPromotionDetailDocument, GetPromotionListDocument, GetRoleDetailDocument, GetRoleListDocument, GetRolesDocument, GetSellerDetailDocument, GetSellerListDocument, GetSellerOrdersDocument, GetSellersDocument, GetServerConfigDocument, GetShippingMethodDetailDocument, GetShippingMethodListDocument, GetShippingMethodOperationsDocument, GetStockLocationDetailDocument, GetStockLocationListDocument, GetTagDocument, GetTagListDocument, GetTaxCategoriesDocument, GetTaxCategoryDetailDocument, GetTaxCategoryListDocument, GetTaxRateDetailDocument, GetTaxRateListDocument, GetTaxRateListSimpleDocument, GetUiStateDocument, GetUserStatusDocument, GetVariantsWithFacetValuesByIdsDocument, GetZoneDetailDocument, GetZoneDocument, GetZoneListDocument, GetZoneMembersDocument, GetZoneSelectorListDocument, GlobalFlag, GlobalSettingsDetailFragmentDoc, GlobalSettingsFragmentDoc, HasPermissionPipe, HealthCheckService, HelpTooltipComponent, HistoryEntryComponentService, HistoryEntryDetailComponent, HistoryEntryType, HtmlEditorFormInputComponent, HttpLoaderFactory, I18nService, INT_CUSTOM_FIELD_FRAGMENT, IconSize, IfDefaultChannelActiveDirective, IfDirectiveBase, IfMultichannelDirective, IfPermissionsDirective, InjectableTranslateMessageFormatCompiler, IntCustomFieldFragmentDoc, ItemsPerPageControlsComponent, JOB_INFO_FRAGMENT, JobInfoFragmentDoc, JobQueueService, JobState, JsonEditorFormInputComponent, LOCALE_STRING_CUSTOM_FIELD_FRAGMENT, LOCALE_TEXT_CUSTOM_FIELD_FRAGMENT, LOG_OUT, LabeledDataComponent, LanguageCode, LanguageCodeSelectorComponent, LanguageSelectorComponent, LinkDialogComponent, LocalStorageService, LocaleBasePipe, LocaleCurrencyNamePipe, LocaleCurrencyPipe, LocaleDatePipe, LocaleLanguageNamePipe, LocaleRegionNamePipe, LocaleStringCustomFieldFragmentDoc, LocaleTextCustomFieldFragmentDoc, LocalizedTextComponent, LogOutDocument, LogicalOperator, MODIFY_ORDER, MOVE_COLLECTION, MainNavComponent, ManageTagsDialogComponent, MetricInterval, MetricType, ModalDialogComponent, ModalService, ModifyOrderDocument, MoveCollectionDocument, NavBuilderService, NotificationComponent, NotificationService, NumberFormInputComponent, ORDER_ADDRESS_FRAGMENT, ORDER_DETAIL_FRAGMENT, ORDER_FRAGMENT, ORDER_LINE_FRAGMENT, ObjectTreeComponent, OmitTypenameLink, OrderAddressFragmentDoc, OrderDataService, OrderDetailFragmentDoc, OrderDetailQueryDocument, OrderFragmentDoc, OrderLineFragmentDoc, OrderStateLabelComponent, OrderType, OverlayHostComponent, OverlayHostService, PAYMENT_FRAGMENT, PAYMENT_METHOD_FRAGMENT, PAYMENT_WITH_REFUNDS_FRAGMENT, PREVIEW_COLLECTION_CONTENTS, PRODUCT_DETAIL_FRAGMENT, PRODUCT_FOR_LIST_FRAGMENT, PRODUCT_OPTION_FRAGMENT, PRODUCT_OPTION_GROUP_FRAGMENT, PRODUCT_OPTION_GROUP_WITH_OPTIONS_FRAGMENT, PRODUCT_SELECTOR_SEARCH, PRODUCT_VARIANT_FRAGMENT, PROMOTION_FRAGMENT, PageBlockComponent, PageBodyComponent, PageComponent, PageDetailLayoutComponent, PageDetailSidebarComponent, PageEntityInfoComponent, PageHeaderComponent, PageHeaderDescriptionComponent, PageHeaderTabsComponent, PageService, PageTitleComponent, PaginationControlsComponent, PasswordFormInputComponent, PaymentFragmentDoc, PaymentMethodFragmentDoc, PaymentMethodListItemFragmentDoc, PaymentWithRefundsFragmentDoc, PercentageSuffixInputComponent, Permission, PreviewCollectionContentsDocument, ProductDataService, ProductDetailFragmentDoc, ProductForListFragmentDoc, ProductListQueryDocument, ProductListQueryProductFragmentFragmentDoc, ProductMultiSelectorDialogComponent, ProductMultiSelectorFormInputComponent, ProductOptionFragmentDoc, ProductOptionGroupFragmentDoc, ProductOptionGroupWithOptionsFragmentDoc, ProductSearchInputComponent, ProductSelectorFormInputComponent, ProductSelectorSearchDocument, ProductVariantDetailQueryProductVariantFragmentFragmentDoc, ProductVariantFragmentDoc, ProductVariantListQueryDocument, ProductVariantListQueryProductVariantFragmentFragmentDoc, ProductVariantSelectorComponent, ProductVariantUpdateMutationDocument, ProfileDetailFragmentDoc, PromotionDataService, PromotionFragmentDoc, ProsemirrorService, QueryResult, REFUND_FRAGMENT, REFUND_ORDER, REINDEX, RELATION_ASSET_INPUT_QUERY, RELATION_CUSTOM_FIELD_FRAGMENT, REMOVE_COLLECTIONS_FROM_CHANNEL, REMOVE_COUPON_CODE_FROM_DRAFT_ORDER, REMOVE_CUSTOMERS_FROM_GROUP, REMOVE_DRAFT_ORDER_LINE, REMOVE_FACETS_FROM_CHANNEL, REMOVE_MEMBERS_FROM_ZONE, REMOVE_OPTION_GROUP_FROM_PRODUCT, REMOVE_PRODUCTS_FROM_CHANNEL, REMOVE_VARIANTS_FROM_CHANNEL, REQUEST_COMPLETED, REQUEST_STARTED, ROLE_FRAGMENT, RUN_PENDING_SEARCH_INDEX_UPDATES, RadioCardComponent, RadioCardFieldsetComponent, RawHtmlDialogComponent, RefundFragmentDoc, RefundOrderDocument, ReindexDocument, RelationAssetInputComponent, RelationAssetInputQueryDocument, RelationCardComponent, RelationCardDetailDirective, RelationCardPreviewDirective, RelationCustomFieldFragmentDoc, RelationCustomerInputComponent, RelationFormInputComponent, RelationGenericInputComponent, RelationProductInputComponent, RelationProductVariantInputComponent, RelationSelectorDialogComponent, RemoveCollectionsFromChannelDocument, RemoveCouponCodeFromDraftOrderDocument, RemoveCustomersFromGroupDocument, RemoveDraftOrderLineDocument, RemoveFacetsFromChannelDocument, RemoveMembersFromZoneDocument, RemoveOptionGroupFromProductDocument, RemovePaymentMethodsFromChannelDocument, RemoveProductsFromChannelDocument, RemovePromotionsFromChannelDocument, RemoveShippingMethodsFromChannelDocument, RemoveStockLocationsFromChannelDocument, RemoveVariantsFromChannelDocument, RequestCompletedDocument, RequestStartedDocument, RichTextEditorComponent, RichTextFormInputComponent, RoleFragmentDoc, RunPendingSearchIndexUpdatesDocument, SEARCH_PRODUCTS, SELLER_FRAGMENT, SETTLE_PAYMENT, SETTLE_REFUND, SET_ACTIVE_CHANNEL, SET_AS_LOGGED_IN, SET_AS_LOGGED_OUT, SET_BILLING_ADDRESS_FOR_DRAFT_ORDER, SET_CONTENT_LANGUAGE, SET_CUSTOMER_FOR_DRAFT_ORDER, SET_DISPLAY_UI_EXTENSION_POINTS, SET_DRAFT_ORDER_SHIPPING_METHOD, SET_MAIN_NAV_EXPANDED, SET_SHIPPING_ADDRESS_FOR_DRAFT_ORDER, SET_UI_LANGUAGE_AND_LOCALE, SET_UI_LOCALE, SET_UI_THEME, SHIPPING_METHOD_FRAGMENT, STRING_CUSTOM_FIELD_FRAGMENT, SearchProductsDocument, SelectFormInputComponent, SelectToggleComponent, SelectionManager, SellerDetailFragmentDoc, SellerFragmentDoc, SellerListItemFragmentDoc, SentenceCasePipe, ServerConfigService, SetActiveChannelDocument, SetAsLoggedInDocument, SetAsLoggedOutDocument, SetContentLanguageDocument, SetCustomerForDraftOrderDocument, SetDisplayUiExtensionPointsDocument, SetDraftOrderBillingAddressDocument, SetDraftOrderShippingAddressDocument, SetDraftOrderShippingMethodDocument, SetMainNavExpandedDocument, SetUiLanguageDocument, SetUiLocaleDocument, SetUiThemeDocument, SettingsDataService, SettingsNavComponent, SettlePaymentDocument, SettleRefundDocument, SharedModule, ShippingMethodDataService, ShippingMethodFragmentDoc, ShippingMethodListItemFragmentDoc, SimpleDialogComponent, SingleSearchSelectionModel, SingleSearchSelectionModelFactory, SortOrder, SortPipe, SplitViewComponent, SplitViewLeftDirective, SplitViewRightDirective, StateI18nTokenPipe, StatusBadgeComponent, StockLocationDetailFragmentDoc, StockLocationListItemFragmentDoc, StockMovementType, StringCustomFieldFragmentDoc, StringToColorPipe, SubMenuWithIcon, TAG_FRAGMENT, TAX_CATEGORY_FRAGMENT, TAX_RATE_FRAGMENT, TEST_ELIGIBLE_SHIPPING_METHODS, TEST_SHIPPING_METHOD, TEXT_CUSTOM_FIELD_FRAGMENT, TRANSITION_FULFILLMENT_TO_STATE, TRANSITION_ORDER_TO_STATE, TRANSITION_PAYMENT_TO_STATE, TabbedCustomFieldsComponent, TableRowActionComponent, TagFragmentDoc, TagSelectorComponent, TaxCategoryFragmentDoc, TaxRateFragmentDoc, TestEligibleShippingMethodsDocument, TestShippingMethodDocument, TextCustomFieldFragmentDoc, TextFormInputComponent, TextareaFormInputComponent, ThemeSwitcherComponent, TimeAgoPipe, TimelineEntryComponent, TitleInputComponent, TransitionFulfillmentToStateDocument, TransitionOrderToStateDocument, TransitionPaymentToStateDocument, TypedBaseDetailComponent, TypedBaseListComponent, UPDATE_ACTIVE_ADMINISTRATOR, UPDATE_ADMINISTRATOR, UPDATE_ASSET, UPDATE_CHANNEL, UPDATE_COLLECTION, UPDATE_COUNTRY, UPDATE_CUSTOMER, UPDATE_CUSTOMER_ADDRESS, UPDATE_CUSTOMER_GROUP, UPDATE_CUSTOMER_NOTE, UPDATE_FACET, UPDATE_FACET_VALUES, UPDATE_GLOBAL_SETTINGS, UPDATE_ORDER_CUSTOM_FIELDS, UPDATE_ORDER_NOTE, UPDATE_PAYMENT_METHOD, UPDATE_PRODUCT, UPDATE_PRODUCT_OPTION, UPDATE_PRODUCT_OPTION_GROUP, UPDATE_PRODUCT_VARIANTS, UPDATE_PROMOTION, UPDATE_ROLE, UPDATE_SELLER, UPDATE_SHIPPING_METHOD, UPDATE_TAG, UPDATE_TAX_CATEGORY, UPDATE_TAX_RATE, UPDATE_USER_CHANNELS, UPDATE_ZONE, USER_STATUS_FRAGMENT, UiExtensionPointComponent, UiLanguageSwitcherDialogComponent, UpdateActiveAdministratorDocument, UpdateAdministratorDocument, UpdateAssetDocument, UpdateChannelDocument, UpdateCollectionDocument, UpdateCountryDocument, UpdateCustomerAddressDocument, UpdateCustomerDocument, UpdateCustomerGroupDocument, UpdateCustomerNoteDocument, UpdateFacetDocument, UpdateFacetValuesDocument, UpdateGlobalSettingsDocument, UpdateOrderCustomFieldsDocument, UpdateOrderNoteDocument, UpdatePaymentMethodDocument, UpdateProductDocument, UpdateProductOptionDocument, UpdateProductOptionGroupDocument, UpdateProductVariantsDocument, UpdateProductsBulkDocument, UpdatePromotionDocument, UpdateRoleDocument, UpdateSellerDocument, UpdateShippingMethodDocument, UpdateStockLocationDocument, UpdateTagDocument, UpdateTaxCategoryDocument, UpdateTaxRateDocument, UpdateUserChannelsDocument, UpdateVariantsBulkDocument, UpdateZoneDocument, UserMenuComponent, UserStatusFragmentDoc, ZONE_FRAGMENT, ZoneDetailFragmentDoc, ZoneFragmentDoc, ZoneListItemFragmentDoc, ZoneSelectorComponent, addActionBarItem, addCustomFields, addNavMenuItem, addNavMenuSection, addTable, blockQuoteRule, buildInputRules, buildKeymap, buildMenuItems, bulletListRule, canInsert, clientResolvers, codeBlockRule, configurableDefinitionToInstance, configurableOperationValueIsValid, createApollo, createBulkAssignToChannelAction, createBulkDeleteAction, createBulkRemoveFromChannelAction, createResolveData, createUpdatedTranslatable, currentChannelIsNotDefault, customMenuPlugin, dayOfWeekIndex, defaultFormInputs, detailBreadcrumb, detailComponentWithResolver, encodeConfigArgValue, findTranslation, getAppConfig, getChannelCodeFromUserStatus, getClientDefaults, getConfigArgValue, getCustomFieldsDefaults, getDefaultConfigArgValue, getDefaultUiLanguage, getDefaultUiLocale, getDefaultValue, getMarkRange, getOrderStateTranslationToken, getServerLocation, getTableMenu, getTableNodes, headingRule, hostExternalFrame, iframeNode, iframeNodeView, imageContextMenuPlugin, initializeServerConfigService, insertImageItem, interpolateDescription, result as introspectionResult, isEntityCreateOrUpdateMutation, isMultiChannel, jsonValidator, linkItem, linkMark, linkSelectPlugin, loadAppConfig, markActive, orderedListRule, rawEditorPlugin, registerBulkAction, registerCustomDetailComponent, registerDashboardWidget, registerDefaultFormInputs, registerFormInputComponent, registerHistoryEntryComponent, registerPageTab, removeReadonlyCustomFields, renderClarityIcon, setDashboardWidgetLayout, stringToColor, tableContextMenuPlugin, titleSetter, toConfigurableOperationInput, tooltipPlugin, transformRelationCustomFieldInputs, unicodePatternValidator, weekDayNames, wrapInMenuItemWithIcon };
 //# sourceMappingURL=vendure-admin-ui-core.mjs.map