npm - @vendure/admin-ui - Versions diffs - 2.0.0-next.10 → 2.0.0-next.13 - Mend

@vendure/admin-ui 2.0.0-next.10 → 2.0.0-next.13

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 (173) hide show

package/fesm2020/vendure-admin-ui-catalog.mjs CHANGED Viewed

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, EventEmitter, Input, HostBinding, Output, TemplateRef, ContentChild, ViewChild, Injectable, SkipSelf, Optional, forwardRef, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, EventEmitter, Input, HostBinding, Output, TemplateRef, ContentChild, ViewChild, Injectable, SkipSelf, Optional, forwardRef, ElementRef, ViewChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$1 from '@vendure/admin-ui/core';
 import { BaseDetailComponent, BaseListComponent, SortOrder, LogicalOperator, DeletionResult, AssetPickerDialogComponent, AssetPreviewDialogComponent, Permission, unicodePatternValidator, findTranslation, getConfigArgValue, createUpdatedTranslatable, encodeConfigArgValue, FacetValueSelectorComponent, GlobalFlag, flattenFacetValues, JobState, getDefaultUiLanguage, BaseEntityResolver, AssetType, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
-import { map, debounceTime, takeUntil, finalize, switchMap, startWith, distinctUntilChanged, tap, filter, catchError, take, mergeMap, shareReplay, mapTo, skipUntil, skip, withLatestFrom, delay } from 'rxjs/operators';
+import { map, debounceTime, takeUntil, finalize, switchMap, startWith, distinctUntilChanged, tap, filter, catchError, take, mergeMap, shareReplay, mapTo, skipUntil, skip, withLatestFrom, delay, defaultIfEmpty } from 'rxjs/operators';
 import * as i4 from '@angular/forms';
 import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, FormArray } from '@angular/forms';
 import * as i5 from '@angular/common';
@@ -258,7 +258,7 @@ class AssetsComponent {
     }
 }
 AssetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetsComponent, deps: [{ token: i1$1.ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AssetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetsComponent, selector: "vdr-assets", inputs: { assetsSetter: ["assets", "assetsSetter"], featuredAsset: "featuredAsset", compact: "compact", updatePermissions: "updatePermissions" }, outputs: { change: "change" }, host: { properties: { "class.compact": "this.compact" } }, ngImport: i0, template: "<div class=\"card\" *ngIf=\"!compact; else compactView\">\r\n    <div class=\"card-img\">\r\n        <div class=\"featured-asset\">\r\n            <img\r\n                *ngIf=\"featuredAsset\"\r\n                [src]=\"featuredAsset | assetPreview:'small'\"\r\n                (click)=\"previewAsset(featuredAsset)\"\r\n            />\r\n            <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-featured-asset' | translate }}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\"><ng-container *ngTemplateOutlet=\"assetList\"></ng-container></div>\r\n    <div class=\"card-footer\" *vdrIfPermissions=\"updatePermissions\">\r\n        <button class=\"btn\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"attachment\"></clr-icon>\r\n            {{ 'asset.add-asset' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #compactView>\r\n    <div class=\"featured-asset compact\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview:'thumb'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\"><clr-icon shape=\"image\" size=\"150\"></clr-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview:'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{width:340px;display:block}:host.compact{width:162px}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer;border-radius:var(--border-radius-img)}.featured-asset img{border-radius:var(--border-radius-img)}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);border-radius:var(--border-radius-img);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px;border-radius:var(--border-radius-img)}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500);border-radius:calc(var(--border-radius-img) + 2px)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"], components: [{ type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "assetPreview": i1$1.AssetPreviewPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AssetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetsComponent, selector: "vdr-assets", inputs: { assetsSetter: ["assets", "assetsSetter"], featuredAsset: "featuredAsset", compact: "compact", updatePermissions: "updatePermissions" }, outputs: { change: "change" }, host: { properties: { "class.compact": "this.compact" } }, ngImport: i0, template: "<div class=\"card\" *ngIf=\"!compact; else compactView\">\r\n    <div class=\"card-img\">\r\n        <div class=\"featured-asset\">\r\n            <img\r\n                *ngIf=\"featuredAsset\"\r\n                [src]=\"featuredAsset | assetPreview:'small'\"\r\n                (click)=\"previewAsset(featuredAsset)\"\r\n            />\r\n            <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-featured-asset' | translate }}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\"><ng-container *ngTemplateOutlet=\"assetList\"></ng-container></div>\r\n    <div class=\"card-footer\" *vdrIfPermissions=\"updatePermissions\">\r\n        <button class=\"btn\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"attachment\"></clr-icon>\r\n            {{ 'asset.add-asset' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #compactView>\r\n    <div class=\"featured-asset compact\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview:'thumb'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\"><clr-icon shape=\"image\" size=\"150\"></clr-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview:'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{width:340px;display:block}:host.compact{width:162px}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer;border-radius:var(--border-radius-img)}.featured-asset img{border-radius:var(--border-radius-img)}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);border-radius:var(--border-radius-img);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px;border-radius:var(--border-radius-img)}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500);border-radius:calc(var(--border-radius-img) + 2px)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"], components: [{ type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "assetPreview": i1$1.AssetPreviewPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-assets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\" *ngIf=\"!compact; else compactView\">\r\n    <div class=\"card-img\">\r\n        <div class=\"featured-asset\">\r\n            <img\r\n                *ngIf=\"featuredAsset\"\r\n                [src]=\"featuredAsset | assetPreview:'small'\"\r\n                (click)=\"previewAsset(featuredAsset)\"\r\n            />\r\n            <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-featured-asset' | translate }}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\"><ng-container *ngTemplateOutlet=\"assetList\"></ng-container></div>\r\n    <div class=\"card-footer\" *vdrIfPermissions=\"updatePermissions\">\r\n        <button class=\"btn\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"attachment\"></clr-icon>\r\n            {{ 'asset.add-asset' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #compactView>\r\n    <div class=\"featured-asset compact\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview:'thumb'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\"><clr-icon shape=\"image\" size=\"150\"></clr-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview:'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{width:340px;display:block}:host.compact{width:162px}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer;border-radius:var(--border-radius-img)}.featured-asset img{border-radius:var(--border-radius-img)}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);border-radius:var(--border-radius-img);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px;border-radius:var(--border-radius-img)}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500);border-radius:calc(var(--border-radius-img) + 2px)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"] }]
@@ -617,7 +617,7 @@ class CollectionDetailComponent extends BaseDetailComponent {
     }
 }
 CollectionDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionDetailComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i1$1.DataService }, { token: i4.FormBuilder }, { token: i1$1.NotificationService }, { token: i1$1.ModalService }, { token: i1$1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Component });
-CollectionDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionDetailComponent, selector: "vdr-collection-detail", viewQueries: [{ propertyName: "contentsComponent", first: true, predicate: ["collectionContents"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"collection-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as category\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col\">\r\n            <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                <clr-toggle-wrapper>\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrToggle\r\n                        formControlName=\"visible\"\r\n                        id=\"visibility\"\r\n                        [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    />\r\n                    <label class=\"visible-toggle\">\r\n                        <ng-container *ngIf=\"detailForm.value.visible; else private\">{{\r\n                            'catalog.public' | translate\r\n                        }}</ng-container>\r\n                        <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                    </label>\r\n                </clr-toggle-wrapper>\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                <input\r\n                    id=\"name\"\r\n                    type=\"text\"\r\n                    formControlName=\"name\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                    (input)=\"updateSlug($event.target.value)\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-form-field\r\n                [label]=\"'catalog.slug' | translate\"\r\n                for=\"slug\"\r\n                [errors]=\"{ pattern: ('catalog.slug-pattern-error' | translate) }\"\r\n            >\r\n                <input\r\n                    id=\"slug\"\r\n                    type=\"text\"\r\n                    formControlName=\"slug\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-rich-text-editor\r\n                formControlName=\"description\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                [label]=\"'common.description' | translate\"\r\n            ></vdr-rich-text-editor>\r\n\r\n            <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                <label>{{ 'common.custom-fields' | translate }}</label>\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Collection\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get(['customFields'])\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </section>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"collection-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </div>\r\n        <div class=\"clr-col-md-auto\">\r\n            <vdr-assets\r\n                [assets]=\"category.assets\"\r\n                [featuredAsset]=\"category.featuredAsset\"\r\n                [updatePermissions]=\"updatePermission\"\r\n                (change)=\"assetChanges = $event\"\r\n            ></vdr-assets>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col\">\r\n            <label>{{ 'catalog.filters' | translate }}</label>\r\n            <vdr-form-field [label]=\"'catalog.filter-inheritance' | translate\" for=\"inheritFilters\">\r\n                <clr-toggle-wrapper>\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrToggle\r\n                        formControlName=\"inheritFilters\"\r\n                        id=\"inheritFilters\"\r\n                        [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    />\r\n                    <label class=\"visible-toggle\">\r\n                        <ng-container *ngIf=\"detailForm.value.inheritFilters; else noInherit\">{{\r\n                            'catalog.inherit-filters-from-parent' | translate\r\n                        }}</ng-container>\r\n                        <ng-template #noInherit>{{\r\n                            'catalog.do-not-inherit-filters' | translate\r\n                        }}</ng-template>\r\n                    </label>\r\n                </clr-toggle-wrapper>\r\n            </vdr-form-field>\r\n            <div formArrayName=\"filters\">\r\n                <ng-container *ngFor=\"let filter of filters; index as i; trackBy:trackByFn\">\r\n                    <vdr-configurable-input\r\n                        (remove)=\"removeFilter(i)\"\r\n                        [position]=\"i\"\r\n                        [operation]=\"filter\"\r\n                        [operationDefinition]=\"getFilterDefinition(filter)\"\r\n                        [formControlName]=\"i\"\r\n                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                    ></vdr-configurable-input>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *vdrIfPermissions=\"updatePermission\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'marketing.add-condition' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let filter of allFilters\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"addFilter(filter)\"\r\n                        >\r\n                            {{ filter.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n        <div class=\"clr-col\">\r\n            <vdr-collection-contents\r\n                [collectionId]=\"id\"\r\n                [parentId]=\"parentId$ | async\"\r\n                [updatedFilters]=\"updatedFilters$ | async\"\r\n                [inheritFilters]=\"inheritFilters$ | async\"\r\n                [previewUpdatedFilters]=\"livePreview\"\r\n                #collectionContents\r\n            >\r\n                <ng-template let-count>\r\n                    <div class=\"contents-title\">\r\n                        {{ 'catalog.collection-contents' | translate }} ({{\r\n                            'common.results-count' | translate: { count: count }\r\n                        }})\r\n                    </div>\r\n                    <clr-checkbox-wrapper [class.disabled]=\"detailForm.get('filters')?.pristine\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            [ngModelOptions]=\"{ standalone: true }\"\r\n                            [disabled]=\"detailForm.get('filters')?.pristine\"\r\n                            [ngModel]=\"livePreview\"\r\n                            (ngModelChange)=\"toggleLivePreview()\"\r\n                        />\r\n                        <label>{{ 'catalog.live-preview-contents' | translate }}</label>\r\n                    </clr-checkbox-wrapper>\r\n                </ng-template>\r\n            </vdr-collection-contents>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { type: i1$1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CollectionDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionDetailComponent, selector: "vdr-collection-detail", viewQueries: [{ propertyName: "contentsComponent", first: true, predicate: ["collectionContents"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"collection-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as category\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col\">\r\n            <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                <clr-toggle-wrapper>\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrToggle\r\n                        formControlName=\"visible\"\r\n                        id=\"visibility\"\r\n                        [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    />\r\n                    <label class=\"visible-toggle\">\r\n                        <ng-container *ngIf=\"detailForm.value.visible; else private\">{{\r\n                            'catalog.public' | translate\r\n                        }}</ng-container>\r\n                        <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                    </label>\r\n                </clr-toggle-wrapper>\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                <input\r\n                    id=\"name\"\r\n                    type=\"text\"\r\n                    formControlName=\"name\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                    (input)=\"updateSlug($event.target.value)\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-form-field\r\n                [label]=\"'catalog.slug' | translate\"\r\n                for=\"slug\"\r\n                [errors]=\"{ pattern: ('catalog.slug-pattern-error' | translate) }\"\r\n            >\r\n                <input\r\n                    id=\"slug\"\r\n                    type=\"text\"\r\n                    formControlName=\"slug\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-rich-text-editor\r\n                formControlName=\"description\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                [label]=\"'common.description' | translate\"\r\n            ></vdr-rich-text-editor>\r\n\r\n            <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                <label>{{ 'common.custom-fields' | translate }}</label>\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Collection\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get(['customFields'])\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </section>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"collection-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </div>\r\n        <div class=\"clr-col-md-auto\">\r\n            <vdr-assets\r\n                [assets]=\"category.assets\"\r\n                [featuredAsset]=\"category.featuredAsset\"\r\n                [updatePermissions]=\"updatePermission\"\r\n                (change)=\"assetChanges = $event\"\r\n            ></vdr-assets>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col\">\r\n            <label>{{ 'catalog.filters' | translate }}</label>\r\n            <vdr-form-field [label]=\"'catalog.filter-inheritance' | translate\" for=\"inheritFilters\">\r\n                <clr-toggle-wrapper>\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrToggle\r\n                        formControlName=\"inheritFilters\"\r\n                        id=\"inheritFilters\"\r\n                        [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    />\r\n                    <label class=\"visible-toggle\">\r\n                        <ng-container *ngIf=\"detailForm.value.inheritFilters; else noInherit\">{{\r\n                            'catalog.inherit-filters-from-parent' | translate\r\n                        }}</ng-container>\r\n                        <ng-template #noInherit>{{\r\n                            'catalog.do-not-inherit-filters' | translate\r\n                        }}</ng-template>\r\n                    </label>\r\n                </clr-toggle-wrapper>\r\n            </vdr-form-field>\r\n            <div formArrayName=\"filters\">\r\n                <ng-container *ngFor=\"let filter of filters; index as i; trackBy:trackByFn\">\r\n                    <vdr-configurable-input\r\n                        (remove)=\"removeFilter(i)\"\r\n                        [position]=\"i\"\r\n                        [operation]=\"filter\"\r\n                        [operationDefinition]=\"getFilterDefinition(filter)\"\r\n                        [formControlName]=\"i\"\r\n                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                    ></vdr-configurable-input>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *vdrIfPermissions=\"updatePermission\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'marketing.add-condition' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let filter of allFilters\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"addFilter(filter)\"\r\n                        >\r\n                            {{ filter.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n        <div class=\"clr-col\">\r\n            <vdr-collection-contents\r\n                [collectionId]=\"id\"\r\n                [parentId]=\"parentId$ | async\"\r\n                [updatedFilters]=\"updatedFilters$ | async\"\r\n                [inheritFilters]=\"inheritFilters$ | async\"\r\n                [previewUpdatedFilters]=\"livePreview\"\r\n                #collectionContents\r\n            >\r\n                <ng-template let-count>\r\n                    <div class=\"contents-title\">\r\n                        {{ 'catalog.collection-contents' | translate }} ({{\r\n                            'common.results-count' | translate: { count: count }\r\n                        }})\r\n                    </div>\r\n                    <clr-checkbox-wrapper [class.disabled]=\"detailForm.get('filters')?.pristine\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            [ngModelOptions]=\"{ standalone: true }\"\r\n                            [disabled]=\"detailForm.get('filters')?.pristine\"\r\n                            [ngModel]=\"livePreview\"\r\n                            (ngModelChange)=\"toggleLivePreview()\"\r\n                        />\r\n                        <label>{{ 'catalog.live-preview-contents' | translate }}</label>\r\n                    </clr-checkbox-wrapper>\r\n                </ng-template>\r\n            </vdr-collection-contents>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { type: i1$1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-collection-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"collection-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as category\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col\">\r\n            <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                <clr-toggle-wrapper>\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrToggle\r\n                        formControlName=\"visible\"\r\n                        id=\"visibility\"\r\n                        [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    />\r\n                    <label class=\"visible-toggle\">\r\n                        <ng-container *ngIf=\"detailForm.value.visible; else private\">{{\r\n                            'catalog.public' | translate\r\n                        }}</ng-container>\r\n                        <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                    </label>\r\n                </clr-toggle-wrapper>\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                <input\r\n                    id=\"name\"\r\n                    type=\"text\"\r\n                    formControlName=\"name\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                    (input)=\"updateSlug($event.target.value)\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-form-field\r\n                [label]=\"'catalog.slug' | translate\"\r\n                for=\"slug\"\r\n                [errors]=\"{ pattern: ('catalog.slug-pattern-error' | translate) }\"\r\n            >\r\n                <input\r\n                    id=\"slug\"\r\n                    type=\"text\"\r\n                    formControlName=\"slug\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-rich-text-editor\r\n                formControlName=\"description\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                [label]=\"'common.description' | translate\"\r\n            ></vdr-rich-text-editor>\r\n\r\n            <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                <label>{{ 'common.custom-fields' | translate }}</label>\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Collection\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get(['customFields'])\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </section>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"collection-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </div>\r\n        <div class=\"clr-col-md-auto\">\r\n            <vdr-assets\r\n                [assets]=\"category.assets\"\r\n                [featuredAsset]=\"category.featuredAsset\"\r\n                [updatePermissions]=\"updatePermission\"\r\n                (change)=\"assetChanges = $event\"\r\n            ></vdr-assets>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col\">\r\n            <label>{{ 'catalog.filters' | translate }}</label>\r\n            <vdr-form-field [label]=\"'catalog.filter-inheritance' | translate\" for=\"inheritFilters\">\r\n                <clr-toggle-wrapper>\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrToggle\r\n                        formControlName=\"inheritFilters\"\r\n                        id=\"inheritFilters\"\r\n                        [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    />\r\n                    <label class=\"visible-toggle\">\r\n                        <ng-container *ngIf=\"detailForm.value.inheritFilters; else noInherit\">{{\r\n                            'catalog.inherit-filters-from-parent' | translate\r\n                        }}</ng-container>\r\n                        <ng-template #noInherit>{{\r\n                            'catalog.do-not-inherit-filters' | translate\r\n                        }}</ng-template>\r\n                    </label>\r\n                </clr-toggle-wrapper>\r\n            </vdr-form-field>\r\n            <div formArrayName=\"filters\">\r\n                <ng-container *ngFor=\"let filter of filters; index as i; trackBy:trackByFn\">\r\n                    <vdr-configurable-input\r\n                        (remove)=\"removeFilter(i)\"\r\n                        [position]=\"i\"\r\n                        [operation]=\"filter\"\r\n                        [operationDefinition]=\"getFilterDefinition(filter)\"\r\n                        [formControlName]=\"i\"\r\n                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                    ></vdr-configurable-input>\r\n                </ng-container>\r\n            </div>\r\n\r\n            <div *vdrIfPermissions=\"updatePermission\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'marketing.add-condition' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let filter of allFilters\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"addFilter(filter)\"\r\n                        >\r\n                            {{ filter.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n        <div class=\"clr-col\">\r\n            <vdr-collection-contents\r\n                [collectionId]=\"id\"\r\n                [parentId]=\"parentId$ | async\"\r\n                [updatedFilters]=\"updatedFilters$ | async\"\r\n                [inheritFilters]=\"inheritFilters$ | async\"\r\n                [previewUpdatedFilters]=\"livePreview\"\r\n                #collectionContents\r\n            >\r\n                <ng-template let-count>\r\n                    <div class=\"contents-title\">\r\n                        {{ 'catalog.collection-contents' | translate }} ({{\r\n                            'common.results-count' | translate: { count: count }\r\n                        }})\r\n                    </div>\r\n                    <clr-checkbox-wrapper [class.disabled]=\"detailForm.get('filters')?.pristine\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            [ngModelOptions]=\"{ standalone: true }\"\r\n                            [disabled]=\"detailForm.get('filters')?.pristine\"\r\n                            [ngModel]=\"livePreview\"\r\n                            (ngModelChange)=\"toggleLivePreview()\"\r\n                        />\r\n                        <label>{{ 'catalog.live-preview-contents' | translate }}</label>\r\n                    </clr-checkbox-wrapper>\r\n                </ng-template>\r\n            </vdr-collection-contents>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}\n"] }]
@@ -837,7 +837,7 @@ class CollectionTreeNodeComponent {
     }
 }
 CollectionTreeNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionTreeNodeComponent, deps: [{ token: CollectionTreeNodeComponent, optional: true, skipSelf: true }, { token: i1$1.DataService }, { token: CollectionTreeService }, { token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-CollectionTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: { collectionTree: "collectionTree", activeCollectionId: "activeCollectionId", expandAll: "expandAll" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    cdkDropList\r\n    class=\"tree-node\"\r\n    #dropList\r\n    [cdkDropListData]=\"collectionTree\"\r\n    [cdkDropListDisabled]=\"!(hasUpdatePermission$ | async)\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n    <div\r\n        class=\"collection\"\r\n        [class.private]=\"collection.isPrivate\"\r\n        *ngFor=\"let collection of collectionTree.children; index as i; trackBy: trackByFn\"\r\n        cdkDrag\r\n        [cdkDragData]=\"collection\"\r\n    >\r\n        <div\r\n            class=\"collection-detail\"\r\n            [ngClass]=\"'depth-' + depth\"\r\n            [class.active]=\"collection.id === activeCollectionId\"\r\n        >\r\n            <div class=\"name\">\r\n                <button\r\n                    class=\"icon-button folder-button\"\r\n                    [disabled]=\"expandAll\"\r\n                    *ngIf=\"collection.children?.length; else folderSpacer\"\r\n                    (click)=\"toggleExpanded(collection)\"\r\n                >\r\n                    <clr-icon shape=\"folder\" *ngIf=\"!collection.expanded && !expandAll\"></clr-icon>\r\n                    <clr-icon shape=\"folder-open\" *ngIf=\"collection.expanded || expandAll\"></clr-icon>\r\n                </button>\r\n                <ng-template #folderSpacer>\r\n                    <div class=\"folder-button-spacer\"></div>\r\n                </ng-template>\r\n                {{ collection.name }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <vdr-chip *ngIf=\"collection.isPrivate\">{{ 'catalog.private' | translate }}</vdr-chip>\r\n            <a\r\n                class=\"btn btn-link btn-sm\"\r\n                [routerLink]=\"['./', { contents: collection.id }]\"\r\n                queryParamsHandling=\"preserve\"\r\n            >\r\n                <clr-icon shape=\"view-list\"></clr-icon>\r\n                {{ 'catalog.view-contents' | translate }}\r\n            </a>\r\n            <a class=\"btn btn-link btn-sm\" [routerLink]=\"['/catalog/collections/', collection.id]\">\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n                {{ 'common.edit' | translate }}\r\n            </a>\r\n            <div class=\"drag-handle\" cdkDragHandle *vdrIfPermissions=\"['UpdateCatalog', 'UpdateCollection']\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger (click)=\"getMoveListItems(collection)\">\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <a\r\n                        class=\"dropdown-item\"\r\n                        [routerLink]=\"['./', 'create', { parentId: collection.id }]\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n                    >\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'catalog.create-new-collection' | translate }}\r\n                    </a>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"i === 0 || !(hasUpdatePermission$ | async)\"\r\n                        (click)=\"moveUp(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret up\"></clr-icon>\r\n                        {{ 'catalog.move-up' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"\r\n                            i === collectionTree.children.length - 1 || !(hasUpdatePermission$ | async)\r\n                        \"\r\n                        (click)=\"moveDown(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret down\"></clr-icon>\r\n                        {{ 'catalog.move-down' | translate }}\r\n                    </button>\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.move-to' | translate }}</h4>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngFor=\"let item of moveListItems\"\r\n                        (click)=\"move(collection, item.id)\"\r\n                        [disabled]=\"!(hasUpdatePermission$ | async)\"\r\n                    >\r\n                        <div class=\"move-to-item\">\r\n                            <div class=\"move-icon\">\r\n                                <clr-icon shape=\"child-arrow\"></clr-icon>\r\n                            </div>\r\n                            <div class=\"path\">\r\n                                {{ item.path }}\r\n                            </div>\r\n                        </div>\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        class=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"delete(collection.id)\"\r\n                        [disabled]=\"!(hasDeletePermission$ | async)\"\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <vdr-collection-tree-node\r\n            *ngIf=\"collection.expanded || expandAll\"\r\n            [expandAll]=\"expandAll\"\r\n            [collectionTree]=\"collection\"\r\n            [activeCollectionId]=\"activeCollectionId\"\r\n        ></vdr-collection-tree-node>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.collection{background-color:var(--color-component-bg-100);font-size:.65rem;transition:transform .25s cubic-bezier(0,0,.2,1);margin-bottom:2px;border-left:2px solid transparent;transition:border-left-color .2s}.collection.private{background-color:var(--color-component-bg-200)}.collection .collection-detail{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-component-border-100)}.collection .collection-detail.active{background-color:var(--clr-global-selection-color)}.collection .collection-detail.depth-1{padding-left:36px}.collection .collection-detail.depth-2{padding-left:60px}.collection .collection-detail.depth-3{padding-left:84px}.collection .collection-detail.depth-4{padding-left:108px}.collection .collection-detail .folder-button-spacer{display:inline-block;width:28px}.tree-node{display:block;background:var(--color-component-bg-100);overflow:hidden}.tree-node.cdk-drop-list-dragging>.collection{border-left-color:var(--color-primary-300)}.drag-placeholder{min-height:120px;background-color:var(--color-component-bg-300);transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.move-to-item{display:flex;white-space:normal;align-items:baseline}.move-to-item .move-icon{flex:none;margin-right:3px}.move-to-item .path{line-height:18px}\n"], components: [{ type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: ["collectionTree", "activeCollectionId", "expandAll"] }], directives: [{ type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CollectionTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: { collectionTree: "collectionTree", activeCollectionId: "activeCollectionId", expandAll: "expandAll" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    cdkDropList\r\n    class=\"tree-node\"\r\n    #dropList\r\n    [cdkDropListData]=\"collectionTree\"\r\n    [cdkDropListDisabled]=\"!(hasUpdatePermission$ | async)\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n    <div\r\n        class=\"collection\"\r\n        [class.private]=\"collection.isPrivate\"\r\n        *ngFor=\"let collection of collectionTree.children; index as i; trackBy: trackByFn\"\r\n        cdkDrag\r\n        [cdkDragData]=\"collection\"\r\n    >\r\n        <div\r\n            class=\"collection-detail\"\r\n            [ngClass]=\"'depth-' + depth\"\r\n            [class.active]=\"collection.id === activeCollectionId\"\r\n        >\r\n            <div class=\"name\">\r\n                <button\r\n                    class=\"icon-button folder-button\"\r\n                    [disabled]=\"expandAll\"\r\n                    *ngIf=\"collection.children?.length; else folderSpacer\"\r\n                    (click)=\"toggleExpanded(collection)\"\r\n                >\r\n                    <clr-icon shape=\"folder\" *ngIf=\"!collection.expanded && !expandAll\"></clr-icon>\r\n                    <clr-icon shape=\"folder-open\" *ngIf=\"collection.expanded || expandAll\"></clr-icon>\r\n                </button>\r\n                <ng-template #folderSpacer>\r\n                    <div class=\"folder-button-spacer\"></div>\r\n                </ng-template>\r\n                {{ collection.name }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <vdr-chip *ngIf=\"collection.isPrivate\">{{ 'catalog.private' | translate }}</vdr-chip>\r\n            <a\r\n                class=\"btn btn-link btn-sm\"\r\n                [routerLink]=\"['./', { contents: collection.id }]\"\r\n                queryParamsHandling=\"preserve\"\r\n            >\r\n                <clr-icon shape=\"view-list\"></clr-icon>\r\n                {{ 'catalog.view-contents' | translate }}\r\n            </a>\r\n            <a class=\"btn btn-link btn-sm\" [routerLink]=\"['/catalog/collections/', collection.id]\">\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n                {{ 'common.edit' | translate }}\r\n            </a>\r\n            <div class=\"drag-handle\" cdkDragHandle *vdrIfPermissions=\"['UpdateCatalog', 'UpdateCollection']\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger (click)=\"getMoveListItems(collection)\">\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <a\r\n                        class=\"dropdown-item\"\r\n                        [routerLink]=\"['./', 'create', { parentId: collection.id }]\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n                    >\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'catalog.create-new-collection' | translate }}\r\n                    </a>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"i === 0 || !(hasUpdatePermission$ | async)\"\r\n                        (click)=\"moveUp(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret up\"></clr-icon>\r\n                        {{ 'catalog.move-up' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"\r\n                            i === collectionTree.children.length - 1 || !(hasUpdatePermission$ | async)\r\n                        \"\r\n                        (click)=\"moveDown(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret down\"></clr-icon>\r\n                        {{ 'catalog.move-down' | translate }}\r\n                    </button>\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.move-to' | translate }}</h4>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngFor=\"let item of moveListItems\"\r\n                        (click)=\"move(collection, item.id)\"\r\n                        [disabled]=\"!(hasUpdatePermission$ | async)\"\r\n                    >\r\n                        <div class=\"move-to-item\">\r\n                            <div class=\"move-icon\">\r\n                                <clr-icon shape=\"child-arrow\"></clr-icon>\r\n                            </div>\r\n                            <div class=\"path\">\r\n                                {{ item.path }}\r\n                            </div>\r\n                        </div>\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        class=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"delete(collection.id)\"\r\n                        [disabled]=\"!(hasDeletePermission$ | async)\"\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <vdr-collection-tree-node\r\n            *ngIf=\"collection.expanded || expandAll\"\r\n            [expandAll]=\"expandAll\"\r\n            [collectionTree]=\"collection\"\r\n            [activeCollectionId]=\"activeCollectionId\"\r\n        ></vdr-collection-tree-node>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.collection{background-color:var(--color-component-bg-100);font-size:.65rem;transition:transform .25s cubic-bezier(0,0,.2,1);margin-bottom:2px;border-left:2px solid transparent;transition:border-left-color .2s}.collection.private{background-color:var(--color-component-bg-200)}.collection .collection-detail{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-component-border-100)}.collection .collection-detail.active{background-color:var(--clr-global-selection-color)}.collection .collection-detail.depth-1{padding-left:36px}.collection .collection-detail.depth-2{padding-left:60px}.collection .collection-detail.depth-3{padding-left:84px}.collection .collection-detail.depth-4{padding-left:108px}.collection .collection-detail .folder-button-spacer{display:inline-block;width:28px}.tree-node{display:block;background:var(--color-component-bg-100);overflow:hidden}.tree-node.cdk-drop-list-dragging>.collection{border-left-color:var(--color-primary-300)}.drag-placeholder{min-height:120px;background-color:var(--color-component-bg-300);transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.move-to-item{display:flex;white-space:normal;align-items:baseline}.move-to-item .move-icon{flex:none;margin-right:3px}.move-to-item .path{line-height:18px}\n"], components: [{ type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: ["collectionTree", "activeCollectionId", "expandAll"] }], directives: [{ type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionTreeNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-collection-tree-node', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    cdkDropList\r\n    class=\"tree-node\"\r\n    #dropList\r\n    [cdkDropListData]=\"collectionTree\"\r\n    [cdkDropListDisabled]=\"!(hasUpdatePermission$ | async)\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n    <div\r\n        class=\"collection\"\r\n        [class.private]=\"collection.isPrivate\"\r\n        *ngFor=\"let collection of collectionTree.children; index as i; trackBy: trackByFn\"\r\n        cdkDrag\r\n        [cdkDragData]=\"collection\"\r\n    >\r\n        <div\r\n            class=\"collection-detail\"\r\n            [ngClass]=\"'depth-' + depth\"\r\n            [class.active]=\"collection.id === activeCollectionId\"\r\n        >\r\n            <div class=\"name\">\r\n                <button\r\n                    class=\"icon-button folder-button\"\r\n                    [disabled]=\"expandAll\"\r\n                    *ngIf=\"collection.children?.length; else folderSpacer\"\r\n                    (click)=\"toggleExpanded(collection)\"\r\n                >\r\n                    <clr-icon shape=\"folder\" *ngIf=\"!collection.expanded && !expandAll\"></clr-icon>\r\n                    <clr-icon shape=\"folder-open\" *ngIf=\"collection.expanded || expandAll\"></clr-icon>\r\n                </button>\r\n                <ng-template #folderSpacer>\r\n                    <div class=\"folder-button-spacer\"></div>\r\n                </ng-template>\r\n                {{ collection.name }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <vdr-chip *ngIf=\"collection.isPrivate\">{{ 'catalog.private' | translate }}</vdr-chip>\r\n            <a\r\n                class=\"btn btn-link btn-sm\"\r\n                [routerLink]=\"['./', { contents: collection.id }]\"\r\n                queryParamsHandling=\"preserve\"\r\n            >\r\n                <clr-icon shape=\"view-list\"></clr-icon>\r\n                {{ 'catalog.view-contents' | translate }}\r\n            </a>\r\n            <a class=\"btn btn-link btn-sm\" [routerLink]=\"['/catalog/collections/', collection.id]\">\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n                {{ 'common.edit' | translate }}\r\n            </a>\r\n            <div class=\"drag-handle\" cdkDragHandle *vdrIfPermissions=\"['UpdateCatalog', 'UpdateCollection']\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger (click)=\"getMoveListItems(collection)\">\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <a\r\n                        class=\"dropdown-item\"\r\n                        [routerLink]=\"['./', 'create', { parentId: collection.id }]\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n                    >\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'catalog.create-new-collection' | translate }}\r\n                    </a>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"i === 0 || !(hasUpdatePermission$ | async)\"\r\n                        (click)=\"moveUp(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret up\"></clr-icon>\r\n                        {{ 'catalog.move-up' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"\r\n                            i === collectionTree.children.length - 1 || !(hasUpdatePermission$ | async)\r\n                        \"\r\n                        (click)=\"moveDown(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret down\"></clr-icon>\r\n                        {{ 'catalog.move-down' | translate }}\r\n                    </button>\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.move-to' | translate }}</h4>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngFor=\"let item of moveListItems\"\r\n                        (click)=\"move(collection, item.id)\"\r\n                        [disabled]=\"!(hasUpdatePermission$ | async)\"\r\n                    >\r\n                        <div class=\"move-to-item\">\r\n                            <div class=\"move-icon\">\r\n                                <clr-icon shape=\"child-arrow\"></clr-icon>\r\n                            </div>\r\n                            <div class=\"path\">\r\n                                {{ item.path }}\r\n                            </div>\r\n                        </div>\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        class=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"delete(collection.id)\"\r\n                        [disabled]=\"!(hasDeletePermission$ | async)\"\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <vdr-collection-tree-node\r\n            *ngIf=\"collection.expanded || expandAll\"\r\n            [expandAll]=\"expandAll\"\r\n            [collectionTree]=\"collection\"\r\n            [activeCollectionId]=\"activeCollectionId\"\r\n        ></vdr-collection-tree-node>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.collection{background-color:var(--color-component-bg-100);font-size:.65rem;transition:transform .25s cubic-bezier(0,0,.2,1);margin-bottom:2px;border-left:2px solid transparent;transition:border-left-color .2s}.collection.private{background-color:var(--color-component-bg-200)}.collection .collection-detail{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-component-border-100)}.collection .collection-detail.active{background-color:var(--clr-global-selection-color)}.collection .collection-detail.depth-1{padding-left:36px}.collection .collection-detail.depth-2{padding-left:60px}.collection .collection-detail.depth-3{padding-left:84px}.collection .collection-detail.depth-4{padding-left:108px}.collection .collection-detail .folder-button-spacer{display:inline-block;width:28px}.tree-node{display:block;background:var(--color-component-bg-100);overflow:hidden}.tree-node.cdk-drop-list-dragging>.collection{border-left-color:var(--color-primary-300)}.drag-placeholder{min-height:120px;background-color:var(--color-component-bg-300);transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.move-to-item{display:flex;white-space:normal;align-items:baseline}.move-to-item .move-icon{flex:none;margin-right:3px}.move-to-item .path{line-height:18px}\n"] }]
@@ -1323,7 +1323,7 @@ class FacetDetailComponent extends BaseDetailComponent {
     }
 }
 FacetDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetDetailComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i1$1.DataService }, { token: i4.FormBuilder }, { token: i1$1.NotificationService }, { token: i1$1.ModalService }], target: i0.ɵɵFactoryTarget.Component });
-FacetDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FacetDetailComponent, selector: "vdr-facet-detail", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"facet-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as facet\">\r\n    <section class=\"form-block\" formGroupName=\"facet\">\r\n        <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n            <clr-toggle-wrapper>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrToggle\r\n                    [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    formControlName=\"visible\"\r\n                    id=\"visibility\"\r\n                />\r\n                <label class=\"visible-toggle\">\r\n                    <ng-container *ngIf=\"detailForm.value.facet.visible; else private\">{{\r\n                        'catalog.public' | translate\r\n                    }}</ng-container>\r\n                    <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                </label>\r\n            </clr-toggle-wrapper>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n            <input\r\n                id=\"name\"\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                (input)=\"updateCode(facet.code, $event.target.value)\"\r\n            />\r\n        </vdr-form-field>\r\n        <vdr-form-field\r\n            [label]=\"'common.code' | translate\"\r\n            for=\"code\"\r\n            [readOnlyToggle]=\"updatePermission | hasPermission\"\r\n        >\r\n            <input\r\n                id=\"code\"\r\n                type=\"text\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                formControlName=\"code\"\r\n            />\r\n        </vdr-form-field>\r\n\r\n        <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n            <label>{{ 'common.custom-fields' | translate }}</label>\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Facet\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get(['facet', 'customFields'])\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </section>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"facet-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n    </section>\r\n\r\n    <section class=\"form-block\" *ngIf=\"!(isNew$ | async)\">\r\n        <label>{{ 'catalog.facet-values' | translate }}</label>\r\n\r\n        <table class=\"facet-values-list table\" formArrayName=\"values\" *ngIf=\"0 < getValuesFormArray().length\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'common.name' | translate }}</th>\r\n                    <th>{{ 'common.code' | translate }}</th>\r\n                    <ng-container *ngIf=\"customValueFields.length\">\r\n                        <th>{{ 'common.custom-fields' | translate }}</th>\r\n                    </ng-container>\r\n                    <th></th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr class=\"facet-value\" *ngFor=\"let value of values; let i = index\" [formGroupName]=\"i\">\r\n                    <td class=\"align-middle\">\r\n                        <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <input\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateValueCode(facet.values[i]?.code, $event.target.value, i)\"\r\n                        />\r\n                    </td>\r\n                    <td class=\"align-middle\"><input type=\"text\" formControlName=\"code\" readonly /></td>\r\n                    <td class=\"\" *ngIf=\"customValueFields.length\">\r\n                        <vdr-tabbed-custom-fields\r\n                            entityName=\"FacetValue\"\r\n                            [customFields]=\"customValueFields\"\r\n                            [compact]=\"true\"\r\n                            [customFieldsFormGroup]=\"detailForm.get(['values', i, 'customFields'])\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-tabbed-custom-fields>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <vdr-dropdown>\r\n                            <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                                {{ 'common.actions' | translate }}\r\n                                <clr-icon shape=\"caret down\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                <button\r\n                                    type=\"button\"\r\n                                    class=\"delete-button\"\r\n                                    (click)=\"deleteFacetValue(facet.values[i]?.id, i)\"\r\n                                    [disabled]=\"!(updatePermission | hasPermission)\"\r\n                                    vdrDropdownItem\r\n                                >\r\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                    {{ 'common.delete' | translate }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n\r\n        <div>\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-secondary\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n                (click)=\"addFacetValue()\"\r\n            >\r\n                <clr-icon shape=\"add\"></clr-icon>\r\n                {{ 'catalog.add-facet-value' | translate }}\r\n            </button>\r\n        </div>\r\n    </section>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FacetDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FacetDetailComponent, selector: "vdr-facet-detail", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"facet-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as facet\">\r\n    <section class=\"form-block\" formGroupName=\"facet\">\r\n        <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n            <clr-toggle-wrapper>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrToggle\r\n                    [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    formControlName=\"visible\"\r\n                    id=\"visibility\"\r\n                />\r\n                <label class=\"visible-toggle\">\r\n                    <ng-container *ngIf=\"detailForm.value.facet.visible; else private\">{{\r\n                        'catalog.public' | translate\r\n                    }}</ng-container>\r\n                    <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                </label>\r\n            </clr-toggle-wrapper>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n            <input\r\n                id=\"name\"\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                (input)=\"updateCode(facet.code, $event.target.value)\"\r\n            />\r\n        </vdr-form-field>\r\n        <vdr-form-field\r\n            [label]=\"'common.code' | translate\"\r\n            for=\"code\"\r\n            [readOnlyToggle]=\"updatePermission | hasPermission\"\r\n        >\r\n            <input\r\n                id=\"code\"\r\n                type=\"text\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                formControlName=\"code\"\r\n            />\r\n        </vdr-form-field>\r\n\r\n        <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n            <label>{{ 'common.custom-fields' | translate }}</label>\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Facet\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get(['facet', 'customFields'])\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </section>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"facet-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n    </section>\r\n\r\n    <section class=\"form-block\" *ngIf=\"!(isNew$ | async)\">\r\n        <label>{{ 'catalog.facet-values' | translate }}</label>\r\n\r\n        <table class=\"facet-values-list table\" formArrayName=\"values\" *ngIf=\"0 < getValuesFormArray().length\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'common.name' | translate }}</th>\r\n                    <th>{{ 'common.code' | translate }}</th>\r\n                    <ng-container *ngIf=\"customValueFields.length\">\r\n                        <th>{{ 'common.custom-fields' | translate }}</th>\r\n                    </ng-container>\r\n                    <th></th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr class=\"facet-value\" *ngFor=\"let value of values; let i = index\" [formGroupName]=\"i\">\r\n                    <td class=\"align-middle\">\r\n                        <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <input\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateValueCode(facet.values[i]?.code, $event.target.value, i)\"\r\n                        />\r\n                    </td>\r\n                    <td class=\"align-middle\"><input type=\"text\" formControlName=\"code\" readonly /></td>\r\n                    <td class=\"\" *ngIf=\"customValueFields.length\">\r\n                        <vdr-tabbed-custom-fields\r\n                            entityName=\"FacetValue\"\r\n                            [customFields]=\"customValueFields\"\r\n                            [compact]=\"true\"\r\n                            [customFieldsFormGroup]=\"detailForm.get(['values', i, 'customFields'])\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-tabbed-custom-fields>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <vdr-dropdown>\r\n                            <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                                {{ 'common.actions' | translate }}\r\n                                <clr-icon shape=\"caret down\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                <button\r\n                                    type=\"button\"\r\n                                    class=\"delete-button\"\r\n                                    (click)=\"deleteFacetValue(facet.values[i]?.id, i)\"\r\n                                    [disabled]=\"!(updatePermission | hasPermission)\"\r\n                                    vdrDropdownItem\r\n                                >\r\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                    {{ 'common.delete' | translate }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n\r\n        <div>\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-secondary\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n                (click)=\"addFacetValue()\"\r\n            >\r\n                <clr-icon shape=\"add\"></clr-icon>\r\n                {{ 'catalog.add-facet-value' | translate }}\r\n            </button>\r\n        </div>\r\n    </section>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-facet-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"facet-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as facet\">\r\n    <section class=\"form-block\" formGroupName=\"facet\">\r\n        <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n            <clr-toggle-wrapper>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrToggle\r\n                    [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    formControlName=\"visible\"\r\n                    id=\"visibility\"\r\n                />\r\n                <label class=\"visible-toggle\">\r\n                    <ng-container *ngIf=\"detailForm.value.facet.visible; else private\">{{\r\n                        'catalog.public' | translate\r\n                    }}</ng-container>\r\n                    <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                </label>\r\n            </clr-toggle-wrapper>\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n            <input\r\n                id=\"name\"\r\n                type=\"text\"\r\n                formControlName=\"name\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                (input)=\"updateCode(facet.code, $event.target.value)\"\r\n            />\r\n        </vdr-form-field>\r\n        <vdr-form-field\r\n            [label]=\"'common.code' | translate\"\r\n            for=\"code\"\r\n            [readOnlyToggle]=\"updatePermission | hasPermission\"\r\n        >\r\n            <input\r\n                id=\"code\"\r\n                type=\"text\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                formControlName=\"code\"\r\n            />\r\n        </vdr-form-field>\r\n\r\n        <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n            <label>{{ 'common.custom-fields' | translate }}</label>\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Facet\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get(['facet', 'customFields'])\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </section>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"facet-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n    </section>\r\n\r\n    <section class=\"form-block\" *ngIf=\"!(isNew$ | async)\">\r\n        <label>{{ 'catalog.facet-values' | translate }}</label>\r\n\r\n        <table class=\"facet-values-list table\" formArrayName=\"values\" *ngIf=\"0 < getValuesFormArray().length\">\r\n            <thead>\r\n                <tr>\r\n                    <th></th>\r\n                    <th>{{ 'common.name' | translate }}</th>\r\n                    <th>{{ 'common.code' | translate }}</th>\r\n                    <ng-container *ngIf=\"customValueFields.length\">\r\n                        <th>{{ 'common.custom-fields' | translate }}</th>\r\n                    </ng-container>\r\n                    <th></th>\r\n                </tr>\r\n            </thead>\r\n            <tbody>\r\n                <tr class=\"facet-value\" *ngFor=\"let value of values; let i = index\" [formGroupName]=\"i\">\r\n                    <td class=\"align-middle\">\r\n                        <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <input\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateValueCode(facet.values[i]?.code, $event.target.value, i)\"\r\n                        />\r\n                    </td>\r\n                    <td class=\"align-middle\"><input type=\"text\" formControlName=\"code\" readonly /></td>\r\n                    <td class=\"\" *ngIf=\"customValueFields.length\">\r\n                        <vdr-tabbed-custom-fields\r\n                            entityName=\"FacetValue\"\r\n                            [customFields]=\"customValueFields\"\r\n                            [compact]=\"true\"\r\n                            [customFieldsFormGroup]=\"detailForm.get(['values', i, 'customFields'])\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-tabbed-custom-fields>\r\n                    </td>\r\n                    <td class=\"align-middle\">\r\n                        <vdr-dropdown>\r\n                            <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                                {{ 'common.actions' | translate }}\r\n                                <clr-icon shape=\"caret down\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                <button\r\n                                    type=\"button\"\r\n                                    class=\"delete-button\"\r\n                                    (click)=\"deleteFacetValue(facet.values[i]?.id, i)\"\r\n                                    [disabled]=\"!(updatePermission | hasPermission)\"\r\n                                    vdrDropdownItem\r\n                                >\r\n                                    <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                    {{ 'common.delete' | translate }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </td>\r\n                </tr>\r\n            </tbody>\r\n        </table>\r\n\r\n        <div>\r\n            <button\r\n                type=\"button\"\r\n                class=\"btn btn-secondary\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n                (click)=\"addFacetValue()\"\r\n            >\r\n                <clr-icon shape=\"add\"></clr-icon>\r\n                {{ 'catalog.add-facet-value' | translate }}\r\n            </button>\r\n        </div>\r\n    </section>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}\n"] }]
@@ -1413,7 +1413,7 @@ class FacetListComponent extends BaseListComponent {
     }
 }
 FacetListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetListComponent, deps: [{ token: i1$1.DataService }, { token: i1$1.ModalService }, { token: i1$1.NotificationService }, { token: i1$1.ServerConfigService }, { token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-FacetListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FacetListComponent, selector: "vdr-facet-list", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex center wrap\">\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"filterTermControl\"\r\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                class=\"clr-input search-input ml4\"\r\n            />\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"facet-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-facet' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'catalog.values' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'catalog.visibility' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-facet=\"item\">\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.code }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.name }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-facet-value-chip\r\n                *ngFor=\"let value of facet.values | slice: 0:displayLimit[facet.id] || 3\"\r\n                [facetValue]=\"value\"\r\n                [removable]=\"false\"\r\n                [displayFacetName]=\"false\"\r\n            ></vdr-facet-value-chip>\r\n            <button\r\n                class=\"btn btn-sm btn-secondary btn-icon\"\r\n                *ngIf=\"facet.values.length > initialLimit\"\r\n                (click)=\"toggleDisplayLimit(facet)\"\r\n            >\r\n                <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.values.length; else collapse\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ facet.values.length - initialLimit }}\r\n                </ng-container>\r\n                <ng-template #collapse>\r\n                    <clr-icon shape=\"minus\"></clr-icon>\r\n                </ng-template>\r\n            </button>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-chip>\r\n                <ng-container *ngIf=\"!facet.isPrivate; else private\">{{\r\n                    'catalog.public' | translate\r\n                }}</ng-container>\r\n                <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n            </vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', facet.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteFacet(facet.id)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteFacet'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: ["td.private{background-color:var(--color-component-bg-200)}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1$1.DataTableColumnComponent, selector: "vdr-dt-column", inputs: ["expand"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "slice": i5.SlicePipe, "hasPermission": i1$1.HasPermissionPipe } });
+FacetListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FacetListComponent, selector: "vdr-facet-list", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex center wrap\">\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"filterTermControl\"\r\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                class=\"clr-input search-input ml4\"\r\n            />\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"facet-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-facet' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'catalog.values' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'catalog.visibility' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-facet=\"item\">\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.code }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.name }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-facet-value-chip\r\n                *ngFor=\"let value of facet.values | slice: 0:displayLimit[facet.id] || 3\"\r\n                [facetValue]=\"value\"\r\n                [removable]=\"false\"\r\n                [displayFacetName]=\"false\"\r\n            ></vdr-facet-value-chip>\r\n            <button\r\n                class=\"btn btn-sm btn-secondary btn-icon\"\r\n                *ngIf=\"facet.values.length > initialLimit\"\r\n                (click)=\"toggleDisplayLimit(facet)\"\r\n            >\r\n                <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.values.length; else collapse\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ facet.values.length - initialLimit }}\r\n                </ng-container>\r\n                <ng-template #collapse>\r\n                    <clr-icon shape=\"minus\"></clr-icon>\r\n                </ng-template>\r\n            </button>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-chip>\r\n                <ng-container *ngIf=\"!facet.isPrivate; else private\">{{\r\n                    'catalog.public' | translate\r\n                }}</ng-container>\r\n                <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n            </vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', facet.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteFacet(facet.id)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteFacet'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: ["td.private{background-color:var(--color-component-bg-200)}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1$1.DataTableColumnComponent, selector: "vdr-dt-column", inputs: ["expand"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }], directives: [{ type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "slice": i5.SlicePipe, "hasPermission": i1$1.HasPermissionPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-facet-list', template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex center wrap\">\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"filterTermControl\"\r\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                class=\"clr-input search-input ml4\"\r\n            />\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"facet-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-facet' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'catalog.values' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'catalog.visibility' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-facet=\"item\">\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.code }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.name }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-facet-value-chip\r\n                *ngFor=\"let value of facet.values | slice: 0:displayLimit[facet.id] || 3\"\r\n                [facetValue]=\"value\"\r\n                [removable]=\"false\"\r\n                [displayFacetName]=\"false\"\r\n            ></vdr-facet-value-chip>\r\n            <button\r\n                class=\"btn btn-sm btn-secondary btn-icon\"\r\n                *ngIf=\"facet.values.length > initialLimit\"\r\n                (click)=\"toggleDisplayLimit(facet)\"\r\n            >\r\n                <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.values.length; else collapse\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ facet.values.length - initialLimit }}\r\n                </ng-container>\r\n                <ng-template #collapse>\r\n                    <clr-icon shape=\"minus\"></clr-icon>\r\n                </ng-template>\r\n            </button>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-chip>\r\n                <ng-container *ngIf=\"!facet.isPrivate; else private\">{{\r\n                    'catalog.public' | translate\r\n                }}</ng-container>\r\n                <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n            </vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', facet.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteFacet(facet.id)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteFacet'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: ["td.private{background-color:var(--color-component-bg-200)}\n"] }]
@@ -1779,10 +1779,17 @@ class OptionValueInputComponent {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
         this.groupName = '';
+        this.add = new EventEmitter();
+        this.remove = new EventEmitter();
+        this.edit = new EventEmitter();
         this.disabled = false;
         this.input = '';
         this.isFocussed = false;
         this.lastSelected = false;
+        this.editingIndex = -1;
+    }
+    get optionValues() {
+        return this.formValue ?? this.options ?? [];
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -1795,15 +1802,40 @@ class OptionValueInputComponent {
         this.changeDetector.markForCheck();
     }
     writeValue(obj) {
-        this.options = obj || [];
+        this.formValue = obj || [];
     }
     focus() {
         this.textArea.nativeElement.focus();
     }
+    editName(index, event) {
+        const optionValue = this.optionValues[index];
+        if (!optionValue.locked && !optionValue.id) {
+            event.cancelBubble = true;
+            this.editingIndex = index;
+            const input = this.nameInputs.get(index)?.nativeElement;
+            setTimeout(() => input?.focus());
+        }
+    }
+    updateOption(index, event) {
+        const optionValue = this.optionValues[index];
+        const newName = event.target.value;
+        if (optionValue) {
+            if (newName) {
+                optionValue.name = newName;
+                this.edit.emit({ index, option: optionValue });
+            }
+            this.editingIndex = -1;
+        }
+    }
     removeOption(option) {
         if (!option.locked) {
-            this.options = this.options.filter(o => o.name !== option.name);
-            this.onChangeFn(this.options);
+            if (this.formValue) {
+                this.formValue = this.formValue?.filter(o => o.name !== option.name);
+                this.onChangeFn(this.formValue);
+            }
+            else {
+                this.remove.emit(option);
+            }
         }
     }
     handleKey(event) {
@@ -1831,9 +1863,17 @@ class OptionValueInputComponent {
         this.addOptionValue();
     }
     addOptionValue() {
-        this.options = unique([...this.options, ...this.parseInputIntoOptions(this.input)]);
+        const options = this.parseInputIntoOptions(this.input);
+        if (!this.formValue && this.options) {
+            for (const option of options) {
+                this.add.emit(option);
+            }
+        }
+        else {
+            this.formValue = unique([...this.formValue, ...options]);
+            this.onChangeFn(this.formValue);
+        }
         this.input = '';
-        this.onChangeFn(this.options);
     }
     parseInputIntoOptions(input) {
         return input
@@ -1843,21 +1883,35 @@ class OptionValueInputComponent {
             .map(s => ({ name: s, locked: false }));
     }
     removeLastOption() {
-        if (!this.options[this.options.length - 1].locked) {
-            this.options = this.options.slice(0, this.options.length - 1);
+        if (this.optionValues.length) {
+            const option = this.optionValues[this.optionValues.length - 1];
+            this.removeOption(option);
         }
     }
 }
 OptionValueInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OptionValueInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionValueInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: { groupName: "groupName" }, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < options.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of options; last as isLast\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            {{ option.name }}\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n", styles: [".input-wrapper{background-color:#fff;border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}\n"], components: [{ type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+OptionValueInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: { groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { add: "add", remove: "remove", edit: "edit" }, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }, { propertyName: "nameInputs", predicate: ["editNameInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < optionValues.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of optionValues; last as isLast; index as i\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            <span [hidden]=\"editingIndex !== i\">\r\n                <input\r\n                    #editNameInput\r\n                    type=\"text\"\r\n                    [ngModel]=\"option.name\"\r\n                    (blur)=\"updateOption(i, $event)\"\r\n                    (click)=\"$event.cancelBubble = true\"\r\n                />\r\n            </span>\r\n            <span\r\n                class=\"option-name\"\r\n                [class.editable]=\"!option.locked && !option.id\"\r\n                (click)=\"editName(i, $event)\" [hidden]=\"editingIndex === i\">{{ option.name }}</span>\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n", styles: [".input-wrapper{background-color:#fff;border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}vdr-chip .option-name.editable:hover{outline:1px solid var(--color-component-bg-300);outline-offset:1px;border-radius:1px}vdr-chip input{padding:0!important;margin-top:-2px;margin-bottom:-2px}\n"], components: [{ type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OptionValueInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-option-value-input', changeDetection: ChangeDetectionStrategy.Default, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < options.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of options; last as isLast\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            {{ option.name }}\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n", styles: [".input-wrapper{background-color:#fff;border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}\n"] }]
+            args: [{ selector: 'vdr-option-value-input', changeDetection: ChangeDetectionStrategy.Default, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < optionValues.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of optionValues; last as isLast; index as i\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            <span [hidden]=\"editingIndex !== i\">\r\n                <input\r\n                    #editNameInput\r\n                    type=\"text\"\r\n                    [ngModel]=\"option.name\"\r\n                    (blur)=\"updateOption(i, $event)\"\r\n                    (click)=\"$event.cancelBubble = true\"\r\n                />\r\n            </span>\r\n            <span\r\n                class=\"option-name\"\r\n                [class.editable]=\"!option.locked && !option.id\"\r\n                (click)=\"editName(i, $event)\" [hidden]=\"editingIndex === i\">{{ option.name }}</span>\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n", styles: [".input-wrapper{background-color:#fff;border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}vdr-chip .option-name.editable:hover{outline:1px solid var(--color-component-bg-300);outline-offset:1px;border-radius:1px}vdr-chip input{padding:0!important;margin-top:-2px;margin-bottom:-2px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { groupName: [{
                 type: Input
             }], textArea: [{
                 type: ViewChild,
                 args: ['textArea', { static: true }]
+            }], nameInputs: [{
+                type: ViewChildren,
+                args: ['editNameInput', { read: ElementRef }]
+            }], options: [{
+                type: Input
+            }], add: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }], edit: [{
+                type: Output
+            }], disabled: [{
+                type: Input
             }] } });
 const DEFAULT_VARIANT_CODE = '__DEFAULT_VARIANT__';
@@ -1876,6 +1930,11 @@ class GenerateProductVariantsComponent {
     }
     addOption() {
         this.optionGroups.push({ name: '', values: [] });
+        const index = this.optionGroups.length - 1;
+        setTimeout(() => {
+            const input = this.groupNameInputs.get(index)?.nativeElement;
+            input?.focus();
+        });
     }
     removeOption(name) {
         this.optionGroups = this.optionGroups.filter(g => g.name !== name);
@@ -1922,12 +1981,15 @@ class GenerateProductVariantsComponent {
     }
 }
 GenerateProductVariantsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: GenerateProductVariantsComponent, deps: [{ token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Component });
-GenerateProductVariantsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: { variantsChange: "variantsChange" }, ngImport: i0, template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            placeholder=\"e.g. Size\"\r\n            clrInput\r\n            [(ngModel)]=\"group.name\"\r\n            name=\"name\"\r\n            required\r\n            (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\r\n        />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div class=\"remove-group\">\r\n        <button\r\n            class=\"btn btn-icon btn-warning-outline\"\r\n            [title]=\"'catalog.remove-option' | translate\"\r\n            (click)=\"removeOption(group.name)\"\r\n        >\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"btn btn-primary-outline btn-sm\" (click)=\"addOption()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tr\r\n            *ngFor=\"let variant of variants; trackBy: trackByFn\"\r\n            [class.disabled]=\"!variantFormValues[variant.id].enabled\"\r\n        >\r\n            <td *ngIf=\"1 < variants.length\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    (change)=\"onFormChange()\"\r\n                    [(ngModel)]=\"variantFormValues[variant.id].enabled\"\r\n                    clrCheckbox\r\n                />\r\n            </td>\r\n            <td *ngIf=\"1 < variants.length\">\r\n                {{ variant.values.join(' ') }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        (change)=\"onFormChange()\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variantFormValues[variant.id].price\"\r\n                        (ngModelChange)=\"onFormChange()\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].stock\"\r\n                        (change)=\"onFormChange()\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:120px}.option-groups{display:flex}.values{flex:1;margin:0 6px}.remove-group{padding-top:18px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], components: [{ type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "translate": i5$1.TranslatePipe } });
+GenerateProductVariantsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: { variantsChange: "variantsChange" }, viewQueries: [{ propertyName: "groupNameInputs", predicate: ["optionGroupName"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            #optionGroupName\r\n            placeholder=\"e.g. Size\"\r\n            clrInput\r\n            [(ngModel)]=\"group.name\"\r\n            name=\"name\"\r\n            required\r\n            (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\r\n        />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            (edit)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div class=\"remove-group\">\r\n        <button\r\n            class=\"btn btn-icon btn-warning-outline\"\r\n            [title]=\"'catalog.remove-option' | translate\"\r\n            (click)=\"removeOption(group.name)\"\r\n        >\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"btn btn-primary-outline btn-sm\" (click)=\"addOption()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tr\r\n            *ngFor=\"let variant of variants; trackBy: trackByFn\"\r\n            [class.disabled]=\"!variantFormValues[variant.id].enabled\"\r\n        >\r\n            <td *ngIf=\"1 < variants.length\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    (change)=\"onFormChange()\"\r\n                    [(ngModel)]=\"variantFormValues[variant.id].enabled\"\r\n                    clrCheckbox\r\n                />\r\n            </td>\r\n            <td *ngIf=\"1 < variants.length\">\r\n                {{ variant.values.join(' ') }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        (change)=\"onFormChange()\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variantFormValues[variant.id].price\"\r\n                        (ngModelChange)=\"onFormChange()\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].stock\"\r\n                        (change)=\"onFormChange()\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:120px}.option-groups{display:flex}.values{flex:1;margin:0 6px}.remove-group{padding-top:18px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], components: [{ type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "translate": i5$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: GenerateProductVariantsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-generate-product-variants', template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            placeholder=\"e.g. Size\"\r\n            clrInput\r\n            [(ngModel)]=\"group.name\"\r\n            name=\"name\"\r\n            required\r\n            (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\r\n        />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div class=\"remove-group\">\r\n        <button\r\n            class=\"btn btn-icon btn-warning-outline\"\r\n            [title]=\"'catalog.remove-option' | translate\"\r\n            (click)=\"removeOption(group.name)\"\r\n        >\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"btn btn-primary-outline btn-sm\" (click)=\"addOption()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tr\r\n            *ngFor=\"let variant of variants; trackBy: trackByFn\"\r\n            [class.disabled]=\"!variantFormValues[variant.id].enabled\"\r\n        >\r\n            <td *ngIf=\"1 < variants.length\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    (change)=\"onFormChange()\"\r\n                    [(ngModel)]=\"variantFormValues[variant.id].enabled\"\r\n                    clrCheckbox\r\n                />\r\n            </td>\r\n            <td *ngIf=\"1 < variants.length\">\r\n                {{ variant.values.join(' ') }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        (change)=\"onFormChange()\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variantFormValues[variant.id].price\"\r\n                        (ngModelChange)=\"onFormChange()\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].stock\"\r\n                        (change)=\"onFormChange()\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:120px}.option-groups{display:flex}.values{flex:1;margin:0 6px}.remove-group{padding-top:18px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"] }]
+            args: [{ selector: 'vdr-generate-product-variants', template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            #optionGroupName\r\n            placeholder=\"e.g. Size\"\r\n            clrInput\r\n            [(ngModel)]=\"group.name\"\r\n            name=\"name\"\r\n            required\r\n            (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\r\n        />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            (edit)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div class=\"remove-group\">\r\n        <button\r\n            class=\"btn btn-icon btn-warning-outline\"\r\n            [title]=\"'catalog.remove-option' | translate\"\r\n            (click)=\"removeOption(group.name)\"\r\n        >\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"btn btn-primary-outline btn-sm\" (click)=\"addOption()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tr\r\n            *ngFor=\"let variant of variants; trackBy: trackByFn\"\r\n            [class.disabled]=\"!variantFormValues[variant.id].enabled\"\r\n        >\r\n            <td *ngIf=\"1 < variants.length\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    (change)=\"onFormChange()\"\r\n                    [(ngModel)]=\"variantFormValues[variant.id].enabled\"\r\n                    clrCheckbox\r\n                />\r\n            </td>\r\n            <td *ngIf=\"1 < variants.length\">\r\n                {{ variant.values.join(' ') }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        (change)=\"onFormChange()\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variantFormValues[variant.id].price\"\r\n                        (ngModelChange)=\"onFormChange()\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].stock\"\r\n                        (change)=\"onFormChange()\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:120px}.option-groups{display:flex}.values{flex:1;margin:0 6px}.remove-group{padding-top:18px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DataService }]; }, propDecorators: { variantsChange: [{
                 type: Output
+            }], groupNameInputs: [{
+                type: ViewChildren,
+                args: ['optionGroupName', { read: ElementRef }]
             }] } });
 class ProductVariantsTableComponent {
@@ -2939,7 +3001,7 @@ class ProductListComponent extends BaseListComponent {
     }
 }
 ProductListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductListComponent, deps: [{ token: i1$1.DataService }, { token: i1$1.ModalService }, { token: i1$1.NotificationService }, { token: i1$1.JobQueueService }, { token: i1$1.ServerConfigService }, { token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-ProductListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductListComponent, selector: "vdr-products-list", viewQueries: [{ propertyName: "productSearchInput", first: true, predicate: ["productSearchInputComponent"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <div class=\"search-form\">\r\n            <vdr-product-search-input\r\n                #productSearchInputComponent\r\n                [facetValueResults]=\"facetValues$ | async\"\r\n                (searchTermChange)=\"setSearchTerm($event)\"\r\n                (facetValueChange)=\"setFacetValueIds($event)\"\r\n            ></vdr-product-search-input>\r\n            <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"icon-button search-index-button\"\r\n                    [title]=\"\r\n                        (pendingSearchIndexUpdates\r\n                            ? 'catalog.pending-search-index-updates'\r\n                            : 'catalog.search-index-controls'\r\n                        ) | translate\r\n                    \"\r\n                    vdrDropdownTrigger\r\n                >\r\n                    <clr-icon shape=\"cog\"></clr-icon>\r\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"run-updates-button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"runPendingSearchIndexUpdates()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                            {{\r\n                            'catalog.run-pending-search-index-updates'\r\n                                | translate: {count: pendingSearchIndexUpdates}\r\n                            }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"rebuildSearchIndex()\"\r\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                    >\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <div class=\"flex wrap\">\r\n            <clr-checkbox-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\"/>\r\n                <label>{{ 'catalog.group-by-product' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            [routerLink]=\"['./create']\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            <span class=\"full-label\">{{ 'catalog.create-new-product' | translate }}</span>\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <ng-template let-result=\"item\">\r\n        <td class=\"left align-middle image-col\" [class.disabled]=\"!result.enabled\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"\r\n                        groupByProduct\r\n                            ? result.productAsset\r\n                            : result.productVariantAsset || result.productAsset as asset;\r\n                        else imagePlaceholder\r\n                    \"\r\n                    [src]=\"asset | assetPreview: 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            {{ groupByProduct ? result.productName : result.productVariantName }}\r\n        </td>\r\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-table-row-action\r\n                class=\"edit-button\"\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', result.productId]\"\r\n            ></vdr-table-row-action>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteProduct(result.productId)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%;margin-bottom:6px}.search-input{min-width:300px}@media screen and (max-width: 768px){.search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }], directives: [{ type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe, "assetPreview": i1$1.AssetPreviewPipe } });
+ProductListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductListComponent, selector: "vdr-products-list", viewQueries: [{ propertyName: "productSearchInput", first: true, predicate: ["productSearchInputComponent"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <div class=\"search-form\">\r\n            <vdr-product-search-input\r\n                #productSearchInputComponent\r\n                [facetValueResults]=\"facetValues$ | async\"\r\n                (searchTermChange)=\"setSearchTerm($event)\"\r\n                (facetValueChange)=\"setFacetValueIds($event)\"\r\n            ></vdr-product-search-input>\r\n            <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"icon-button search-index-button\"\r\n                    [title]=\"\r\n                        (pendingSearchIndexUpdates\r\n                            ? 'catalog.pending-search-index-updates'\r\n                            : 'catalog.search-index-controls'\r\n                        ) | translate\r\n                    \"\r\n                    vdrDropdownTrigger\r\n                >\r\n                    <clr-icon shape=\"cog\"></clr-icon>\r\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"run-updates-button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"runPendingSearchIndexUpdates()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                            {{\r\n                            'catalog.run-pending-search-index-updates'\r\n                                | translate: {count: pendingSearchIndexUpdates}\r\n                            }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"rebuildSearchIndex()\"\r\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                    >\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <div class=\"flex wrap\">\r\n            <clr-checkbox-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\"/>\r\n                <label>{{ 'catalog.group-by-product' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            [routerLink]=\"['./create']\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            <span class=\"full-label\">{{ 'catalog.create-new-product' | translate }}</span>\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <ng-template let-result=\"item\">\r\n        <td class=\"left align-middle image-col\" [class.disabled]=\"!result.enabled\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"\r\n                        groupByProduct\r\n                            ? result.productAsset\r\n                            : result.productVariantAsset || result.productAsset as asset;\r\n                        else imagePlaceholder\r\n                    \"\r\n                    [src]=\"asset | assetPreview: 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            {{ groupByProduct ? result.productName : result.productVariantName }}\r\n        </td>\r\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-table-row-action\r\n                class=\"edit-button\"\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', result.productId]\"\r\n            ></vdr-table-row-action>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteProduct(result.productId)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%;margin-bottom:6px}.search-input{min-width:300px}@media screen and (max-width: 768px){.search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }], directives: [{ type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe, "assetPreview": i1$1.AssetPreviewPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-products-list', template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <div class=\"search-form\">\r\n            <vdr-product-search-input\r\n                #productSearchInputComponent\r\n                [facetValueResults]=\"facetValues$ | async\"\r\n                (searchTermChange)=\"setSearchTerm($event)\"\r\n                (facetValueChange)=\"setFacetValueIds($event)\"\r\n            ></vdr-product-search-input>\r\n            <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"icon-button search-index-button\"\r\n                    [title]=\"\r\n                        (pendingSearchIndexUpdates\r\n                            ? 'catalog.pending-search-index-updates'\r\n                            : 'catalog.search-index-controls'\r\n                        ) | translate\r\n                    \"\r\n                    vdrDropdownTrigger\r\n                >\r\n                    <clr-icon shape=\"cog\"></clr-icon>\r\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"run-updates-button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"runPendingSearchIndexUpdates()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                            {{\r\n                            'catalog.run-pending-search-index-updates'\r\n                                | translate: {count: pendingSearchIndexUpdates}\r\n                            }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"rebuildSearchIndex()\"\r\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                    >\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <div class=\"flex wrap\">\r\n            <clr-checkbox-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\"/>\r\n                <label>{{ 'catalog.group-by-product' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            [routerLink]=\"['./create']\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            <span class=\"full-label\">{{ 'catalog.create-new-product' | translate }}</span>\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <ng-template let-result=\"item\">\r\n        <td class=\"left align-middle image-col\" [class.disabled]=\"!result.enabled\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"\r\n                        groupByProduct\r\n                            ? result.productAsset\r\n                            : result.productVariantAsset || result.productAsset as asset;\r\n                        else imagePlaceholder\r\n                    \"\r\n                    [src]=\"asset | assetPreview: 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            {{ groupByProduct ? result.productName : result.productVariantName }}\r\n        </td>\r\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-table-row-action\r\n                class=\"edit-button\"\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', result.productId]\"\r\n            ></vdr-table-row-action>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteProduct(result.productId)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%;margin-bottom:6px}.search-input{min-width:300px}@media screen and (max-width: 768px){.search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}\n"] }]
@@ -3118,6 +3180,7 @@ class ProductVariantsEditorComponent {
         this.notificationService = notificationService;
         this.modalService = modalService;
         this.formValueChanged = false;
+        this.optionsChanged = false;
         this.generatedVariants = [];
     }
     ngOnInit() {
@@ -3143,16 +3206,102 @@ class ProductVariantsEditorComponent {
             ? marker('catalog.default-variant')
             : variant.options.map(o => o.name).join(' ');
     }
-    addOption() {
+    addOptionGroup() {
         this.optionGroups.push({
             isNew: true,
+            locked: false,
             name: '',
             values: [],
         });
+        this.optionsChanged = true;
     }
-    removeOption(optionGroup) {
-        this.optionGroups = this.optionGroups.filter(og => og !== optionGroup);
+    removeOptionGroup(optionGroup) {
+        const id = optionGroup.id;
+        if (optionGroup.isNew) {
+            this.optionGroups = this.optionGroups.filter(og => og !== optionGroup);
+            this.generateVariants();
+            this.optionsChanged = true;
+        }
+        else if (id) {
+            this.modalService
+                .dialog({
+                title: marker('catalog.confirm-delete-product-option-group'),
+                translationVars: { name: optionGroup.name },
+                buttons: [
+                    { type: 'secondary', label: marker('common.cancel') },
+                    { type: 'danger', label: marker('common.delete'), returnValue: true },
+                ],
+            })
+                .pipe(switchMap(val => {
+                if (val) {
+                    return this.dataService.product.removeOptionGroupFromProduct({
+                        optionGroupId: id,
+                        productId: this.product.id,
+                    });
+                }
+                else {
+                    return EMPTY;
+                }
+            }))
+                .subscribe(({ removeOptionGroupFromProduct }) => {
+                if (removeOptionGroupFromProduct.__typename === 'Product') {
+                    this.notificationService.success(marker('common.notify-delete-success'), {
+                        entity: 'ProductOptionGroup',
+                    });
+                    this.initOptionsAndVariants();
+                    this.optionsChanged = true;
+                }
+                else if (removeOptionGroupFromProduct.__typename === 'ProductOptionInUseError') {
+                    this.notificationService.error(removeOptionGroupFromProduct.message ?? '');
+                }
+            });
+        }
+    }
+    addOption(groupId, optionName) {
+        this.optionGroups.find(g => g.id === groupId)?.values.push({ name: optionName, locked: false });
         this.generateVariants();
+        this.optionsChanged = true;
+    }
+    removeOption(groupId, { id, name }) {
+        const optionGroup = this.optionGroups.find(g => g.id === groupId);
+        if (optionGroup) {
+            if (!id) {
+                optionGroup.values = optionGroup.values.filter(v => v.name !== name);
+                this.generateVariants();
+            }
+            else {
+                this.modalService
+                    .dialog({
+                    title: marker('catalog.confirm-delete-product-option'),
+                    translationVars: { name },
+                    buttons: [
+                        { type: 'secondary', label: marker('common.cancel') },
+                        { type: 'danger', label: marker('common.delete'), returnValue: true },
+                    ],
+                })
+                    .pipe(switchMap(val => {
+                    if (val) {
+                        return this.dataService.product.deleteProductOption(id);
+                    }
+                    else {
+                        return EMPTY;
+                    }
+                }))
+                    .subscribe(({ deleteProductOption }) => {
+                    if (deleteProductOption.result === DeletionResult.DELETED) {
+                        this.notificationService.success(marker('common.notify-delete-success'), {
+                            entity: 'ProductOption',
+                        });
+                        optionGroup.values = optionGroup.values.filter(v => v.id !== id);
+                        this.generateVariants();
+                        this.optionsChanged = true;
+                    }
+                    else {
+                        this.notificationService.error(deleteProductOption.message ?? '');
+                    }
+                });
+            }
+        }
     }
     generateVariants() {
         const groups = this.optionGroups.map(g => g.values);
@@ -3193,10 +3342,11 @@ class ProductVariantsEditorComponent {
             stock: 0,
         };
     }
-    deleteVariant(id) {
+    deleteVariant(id, options) {
         this.modalService
             .dialog({
             title: marker('catalog.confirm-delete-product-variant'),
+            translationVars: { name: options.map(o => o.name).join(' ') },
             buttons: [
                 { type: 'secondary', label: marker('common.cancel') },
                 { type: 'danger', label: marker('common.delete'), returnValue: true },
@@ -3231,12 +3381,14 @@ class ProductVariantsEditorComponent {
                     count: variants.length,
                 });
                 this.initOptionsAndVariants();
+                this.optionsChanged = false;
             },
         });
     }
     checkUniqueSkus() {
         const withDuplicateSkus = this.generatedVariants.filter((variant, index) => {
-            return this.generatedVariants.find(gv => gv.sku.trim() === variant.sku.trim() && gv !== variant);
+            return (variant.enabled &&
+                this.generatedVariants.find(gv => gv.sku.trim() === variant.sku.trim() && gv !== variant));
         });
         if (withDuplicateSkus.length) {
             return this.modalService
@@ -3319,7 +3471,7 @@ class ProductVariantsEditorComponent {
         return forkJoin(groupsIds.map(id => this.dataService.product
             .getProductOptionGroup(id)
             .mapSingle(data => data.productOptionGroup)
-            .pipe(filter(notNullOrUndefined))));
+            .pipe(filter(notNullOrUndefined)))).pipe(defaultIfEmpty([]));
     }
     createNewProductVariants(groups) {
         const options = groups
@@ -3367,15 +3519,20 @@ class ProductVariantsEditorComponent {
             .mapSingle(({ product }) => product)
             .subscribe(p => {
             this.product = p;
+            const allUsedOptionIds = p.variants.map(v => v.options.map(option => option.id)).flat();
+            const allUsedOptionGroupIds = p.variants
+                .map(v => v.options.map(option => option.groupId))
+                .flat();
             this.optionGroups = p.optionGroups.map(og => {
                 return {
                     id: og.id,
                     isNew: false,
                     name: og.name,
+                    locked: allUsedOptionGroupIds.includes(og.id),
                     values: og.options.map(o => ({
                         id: o.id,
                         name: o.name,
-                        locked: true,
+                        locked: allUsedOptionIds.includes(o.id),
                     })),
                 };
             });
@@ -3396,10 +3553,10 @@ class ProductVariantsEditorComponent {
     }
 }
 ProductVariantsEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsEditorComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1$1.DataService }, { token: ProductDetailService }, { token: i1$1.NotificationService }, { token: i1$1.ModalService }], target: i0.ɵɵFactoryTarget.Component });
-ProductVariantsEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantsEditorComponent, selector: "vdr-product-variants-editor", ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"!formValueChanged || getVariantsToAdd().length === 0\"\r\n        >\r\n            {{ 'common.add-new-variants' | translate: { count: getVariantsToAdd().length } }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div>\r\n        <button *ngIf=\"group.isNew\" class=\"btn btn-icon btn-danger-outline mt5\" (click)=\"removeOption(group)\">\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button\r\n    class=\"btn btn-primary-outline btn-sm\"\r\n    (click)=\"addOption()\"\r\n>\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.create' | translate }}</th>\r\n                <th>{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                <th></th>\r\n            </tr>\r\n        </thead>\r\n        <tr *ngFor=\"let variant of generatedVariants\" [class.disabled]=\"!variant.enabled || variant.existing\">\r\n            <td>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    *ngIf=\"!variant.existing\"\r\n                    [(ngModel)]=\"variant.enabled\"\r\n                    name=\"enabled\"\r\n                    clrCheckbox\r\n                    (ngModelChange)=\"formValueChanged = true\"\r\n                />\r\n            </td>\r\n            <td>\r\n                {{ getVariantName(variant) | translate }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        [(ngModel)]=\"variant.sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                        name=\"sku\"\r\n                        required\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.sku }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variant.price\"\r\n                        name=\"price\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.price | localeCurrency: currencyCode }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variant.stock\"\r\n                        name=\"stock\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.stock }}</span>\r\n            </td>\r\n            <td>\r\n                <vdr-dropdown *ngIf=\"variant.productVariantId as productVariantId\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"deleteVariant(productVariantId)\"\r\n                            vdrDropdownItem\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.delete' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n", styles: [".option-groups{display:flex}.option-groups:first-of-type{margin-top:24px}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i5$1.TranslatePipe, "localeCurrency": i1$1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
+ProductVariantsEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantsEditorComponent, selector: "vdr-product-variants-editor", ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"(!formValueChanged && !optionsChanged) || getVariantsToAdd().length === 0\"\r\n        >\r\n            {{ 'common.add-new-variants' | translate: { count: getVariantsToAdd().length } }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [options]=\"group.values\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n            (add)=\"addOption(group.id, $event.name)\"\r\n            (remove)=\"removeOption(group.id, $event)\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div>\r\n        <button\r\n            [disabled]=\"group.locked\"\r\n            class=\"btn btn-icon btn-danger-outline mt5\" (click)=\"removeOptionGroup(group)\">\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"btn btn-primary-outline btn-sm\" (click)=\"addOptionGroup()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th></th>\r\n                <th>{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                <th></th>\r\n            </tr>\r\n        </thead>\r\n        <tr *ngFor=\"let variant of generatedVariants\" [class.disabled]=\"!variant.enabled || variant.existing\">\r\n            <td class=\"left\">\r\n                <clr-checkbox-wrapper *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        [(ngModel)]=\"variant.enabled\"\r\n                        name=\"enabled\"\r\n                        clrCheckbox\r\n                        (ngModelChange)=\"formValueChanged = true\"\r\n                    />\r\n                    <label>{{ 'common.create' | translate }}</label>\r\n                </clr-checkbox-wrapper>\r\n            </td>\r\n            <td>\r\n                {{ getVariantName(variant) | translate }}\r\n            </td>\r\n            <td>\r\n                <div class=\"flex center\">\r\n                    <clr-input-container *ngIf=\"!variant.existing\">\r\n                        <input\r\n                            clrInput\r\n                            type=\"text\"\r\n                            [(ngModel)]=\"variant.sku\"\r\n                            [placeholder]=\"'catalog.sku' | translate\"\r\n                            name=\"sku\"\r\n                            required\r\n                            (ngModelChange)=\"onFormChanged(variant)\"\r\n                        />\r\n                    </clr-input-container>\r\n                    <span *ngIf=\"variant.existing\">{{ variant.sku }}</span>\r\n                </div>\r\n            </td>\r\n            <td>\r\n                <div class=\"flex center\">\r\n                    <clr-input-container *ngIf=\"!variant.existing\">\r\n                        <vdr-currency-input\r\n                            clrInput\r\n                            [(ngModel)]=\"variant.price\"\r\n                            name=\"price\"\r\n                            [currencyCode]=\"currencyCode\"\r\n                            (ngModelChange)=\"onFormChanged(variant)\"\r\n                        ></vdr-currency-input>\r\n                    </clr-input-container>\r\n                    <span *ngIf=\"variant.existing\">{{ variant.price | localeCurrency: currencyCode }}</span>\r\n                </div>\r\n            </td>\r\n            <td>\r\n                <div class=\"flex center\">\r\n                    <clr-input-container *ngIf=\"!variant.existing\">\r\n                        <input\r\n                            clrInput\r\n                            type=\"number\"\r\n                            [(ngModel)]=\"variant.stock\"\r\n                            name=\"stock\"\r\n                            min=\"0\"\r\n                            step=\"1\"\r\n                            (ngModelChange)=\"onFormChanged(variant)\"\r\n                        />\r\n                    </clr-input-container>\r\n                    <span *ngIf=\"variant.existing\">{{ variant.stock }}</span>\r\n                </div>\r\n            </td>\r\n            <td>\r\n                <vdr-dropdown *ngIf=\"variant.productVariantId as productVariantId\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"deleteVariant(productVariantId, variant.options)\"\r\n                            vdrDropdownItem\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.delete' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n", styles: [".option-groups{display:flex}.option-groups:first-of-type{margin-top:24px}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i5$1.TranslatePipe, "localeCurrency": i1$1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-variants-editor', changeDetection: ChangeDetectionStrategy.Default, template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"!formValueChanged || getVariantsToAdd().length === 0\"\r\n        >\r\n            {{ 'common.add-new-variants' | translate: { count: getVariantsToAdd().length } }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div>\r\n        <button *ngIf=\"group.isNew\" class=\"btn btn-icon btn-danger-outline mt5\" (click)=\"removeOption(group)\">\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button\r\n    class=\"btn btn-primary-outline btn-sm\"\r\n    (click)=\"addOption()\"\r\n>\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.create' | translate }}</th>\r\n                <th>{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                <th></th>\r\n            </tr>\r\n        </thead>\r\n        <tr *ngFor=\"let variant of generatedVariants\" [class.disabled]=\"!variant.enabled || variant.existing\">\r\n            <td>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    *ngIf=\"!variant.existing\"\r\n                    [(ngModel)]=\"variant.enabled\"\r\n                    name=\"enabled\"\r\n                    clrCheckbox\r\n                    (ngModelChange)=\"formValueChanged = true\"\r\n                />\r\n            </td>\r\n            <td>\r\n                {{ getVariantName(variant) | translate }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        [(ngModel)]=\"variant.sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                        name=\"sku\"\r\n                        required\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.sku }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variant.price\"\r\n                        name=\"price\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.price | localeCurrency: currencyCode }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variant.stock\"\r\n                        name=\"stock\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.stock }}</span>\r\n            </td>\r\n            <td>\r\n                <vdr-dropdown *ngIf=\"variant.productVariantId as productVariantId\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"deleteVariant(productVariantId)\"\r\n                            vdrDropdownItem\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.delete' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n", styles: [".option-groups{display:flex}.option-groups:first-of-type{margin-top:24px}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"] }]
+            args: [{ selector: 'vdr-product-variants-editor', changeDetection: ChangeDetectionStrategy.Default, template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"(!formValueChanged && !optionsChanged) || getVariantsToAdd().length === 0\"\r\n        >\r\n            {{ 'common.add-new-variants' | translate: { count: getVariantsToAdd().length } }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [options]=\"group.values\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n            (add)=\"addOption(group.id, $event.name)\"\r\n            (remove)=\"removeOption(group.id, $event)\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div>\r\n        <button\r\n            [disabled]=\"group.locked\"\r\n            class=\"btn btn-icon btn-danger-outline mt5\" (click)=\"removeOptionGroup(group)\">\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"btn btn-primary-outline btn-sm\" (click)=\"addOptionGroup()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th></th>\r\n                <th>{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                <th></th>\r\n            </tr>\r\n        </thead>\r\n        <tr *ngFor=\"let variant of generatedVariants\" [class.disabled]=\"!variant.enabled || variant.existing\">\r\n            <td class=\"left\">\r\n                <clr-checkbox-wrapper *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        [(ngModel)]=\"variant.enabled\"\r\n                        name=\"enabled\"\r\n                        clrCheckbox\r\n                        (ngModelChange)=\"formValueChanged = true\"\r\n                    />\r\n                    <label>{{ 'common.create' | translate }}</label>\r\n                </clr-checkbox-wrapper>\r\n            </td>\r\n            <td>\r\n                {{ getVariantName(variant) | translate }}\r\n            </td>\r\n            <td>\r\n                <div class=\"flex center\">\r\n                    <clr-input-container *ngIf=\"!variant.existing\">\r\n                        <input\r\n                            clrInput\r\n                            type=\"text\"\r\n                            [(ngModel)]=\"variant.sku\"\r\n                            [placeholder]=\"'catalog.sku' | translate\"\r\n                            name=\"sku\"\r\n                            required\r\n                            (ngModelChange)=\"onFormChanged(variant)\"\r\n                        />\r\n                    </clr-input-container>\r\n                    <span *ngIf=\"variant.existing\">{{ variant.sku }}</span>\r\n                </div>\r\n            </td>\r\n            <td>\r\n                <div class=\"flex center\">\r\n                    <clr-input-container *ngIf=\"!variant.existing\">\r\n                        <vdr-currency-input\r\n                            clrInput\r\n                            [(ngModel)]=\"variant.price\"\r\n                            name=\"price\"\r\n                            [currencyCode]=\"currencyCode\"\r\n                            (ngModelChange)=\"onFormChanged(variant)\"\r\n                        ></vdr-currency-input>\r\n                    </clr-input-container>\r\n                    <span *ngIf=\"variant.existing\">{{ variant.price | localeCurrency: currencyCode }}</span>\r\n                </div>\r\n            </td>\r\n            <td>\r\n                <div class=\"flex center\">\r\n                    <clr-input-container *ngIf=\"!variant.existing\">\r\n                        <input\r\n                            clrInput\r\n                            type=\"number\"\r\n                            [(ngModel)]=\"variant.stock\"\r\n                            name=\"stock\"\r\n                            min=\"0\"\r\n                            step=\"1\"\r\n                            (ngModelChange)=\"onFormChanged(variant)\"\r\n                        />\r\n                    </clr-input-container>\r\n                    <span *ngIf=\"variant.existing\">{{ variant.stock }}</span>\r\n                </div>\r\n            </td>\r\n            <td>\r\n                <vdr-dropdown *ngIf=\"variant.productVariantId as productVariantId\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"deleteVariant(productVariantId, variant.options)\"\r\n                            vdrDropdownItem\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.delete' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n", styles: [".option-groups{display:flex}.option-groups:first-of-type{margin-top:24px}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1$1.DataService }, { type: ProductDetailService }, { type: i1$1.NotificationService }, { type: i1$1.ModalService }]; } });
 class AssetResolver extends BaseEntityResolver {