@vendure/admin-ui 2.0.0-next.1 → 2.0.0-next.4

package/fesm2015/vendure-admin-ui-catalog.mjs

@@ -5,7 +5,7 @@ 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, SingleSearchSelectionModelFactory, 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, take, mergeMap, shareReplay, mapTo, filter, 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 } 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,10 +258,10 @@ 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}.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);cursor:pointer}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500)}.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}.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);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500)}.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 });
 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}.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);cursor:pointer}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500)}.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"] }]
+            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}.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);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500)}.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"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ModalService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { assetsSetter: [{
                 type: Input,
                 args: ['assets']
@@ -283,34 +283,64 @@ class CollectionContentsComponent {
         this.route = route;
         this.router = router;
         this.dataService = dataService;
+        this.previewUpdatedFilters = false;
         this.filterTermControl = new FormControl('');
+        this.isLoading = false;
         this.collectionIdChange$ = new BehaviorSubject('');
+        this.parentIdChange$ = new BehaviorSubject('');
+        this.filterChanges$ = new BehaviorSubject([]);
         this.refresh$ = new BehaviorSubject(true);
         this.destroy$ = new Subject();
     }
     ngOnInit() {
-        this.contentsCurrentPage$ = this.route.paramMap.pipe(map(qpm => qpm.get('contentsPage')), map(page => (!page ? 1 : +page)), startWith(1), distinctUntilChanged());
-        this.contentsItemsPerPage$ = this.route.paramMap.pipe(map(qpm => qpm.get('contentsPerPage')), map(perPage => (!perPage ? 10 : +perPage)), startWith(10), distinctUntilChanged());
+        this.contentsCurrentPage$ = this.route.queryParamMap.pipe(map(qpm => qpm.get('contentsPage')), map(page => (!page ? 1 : +page)), startWith(1), distinctUntilChanged());
+        this.contentsItemsPerPage$ = this.route.queryParamMap.pipe(map(qpm => qpm.get('contentsPerPage')), map(perPage => (!perPage ? 10 : +perPage)), startWith(10), distinctUntilChanged());
         const filterTerm$ = this.filterTermControl.valueChanges.pipe(debounceTime(250), tap(() => this.setContentsPageNumber(1)), startWith(''));
-        const collection$ = combineLatest(this.collectionIdChange$, this.contentsCurrentPage$, this.contentsItemsPerPage$, filterTerm$, this.refresh$).pipe(takeUntil(this.destroy$), switchMap(([id, currentPage, itemsPerPage, filterTerm]) => {
+        const filterChanges$ = this.filterChanges$.asObservable().pipe(filter(() => this.previewUpdatedFilters), tap(() => this.setContentsPageNumber(1)), startWith([]));
+        const fetchUpdate$ = combineLatest(this.collectionIdChange$, this.parentIdChange$, this.contentsCurrentPage$, this.contentsItemsPerPage$, filterTerm$, filterChanges$, this.refresh$);
+        const collection$ = fetchUpdate$.pipe(takeUntil(this.destroy$), tap(() => (this.isLoading = true)), debounceTime(50), switchMap(([id, parentId, currentPage, itemsPerPage, filterTerm, filters]) => {
             const take = itemsPerPage;
             const skip = (currentPage - 1) * itemsPerPage;
-            if (id) {
+            if (filters.length && this.previewUpdatedFilters) {
+                const filterClause = filterTerm
+                    ? { name: { contains: filterTerm } }
+                    : undefined;
+                return this.dataService.collection
+                    .previewCollectionVariants({
+                    parentId,
+                    filters,
+                }, {
+                    take,
+                    skip,
+                    filter: filterClause,
+                })
+                    .mapSingle(data => data.previewCollectionVariants)
+                    .pipe(catchError(() => of({ items: [], totalItems: 0 })));
+            }
+            else if (id) {
                 return this.dataService.collection
                     .getCollectionContents(id, take, skip, filterTerm)
-                    .mapSingle(data => data.collection);
+                    .mapSingle(data => { var _a; return (_a = data.collection) === null || _a === void 0 ? void 0 : _a.productVariants; });
             }
             else {
                 return of(null);
             }
-        }));
-        this.contents$ = collection$.pipe(map(result => (result ? result.productVariants.items : [])));
-        this.contentsTotalItems$ = collection$.pipe(map(result => (result ? result.productVariants.totalItems : 0)));
+        }), tap(() => (this.isLoading = false)), finalize(() => (this.isLoading = false)));
+        this.contents$ = collection$.pipe(map(result => (result ? result.items : [])));
+        this.contentsTotalItems$ = collection$.pipe(map(result => (result ? result.totalItems : 0)));
     }
     ngOnChanges(changes) {
         if ('collectionId' in changes) {
             this.collectionIdChange$.next(changes.collectionId.currentValue);
         }
+        if ('parentId' in changes) {
+            this.parentIdChange$.next(changes.parentId.currentValue);
+        }
+        if ('updatedFilters' in changes) {
+            if (this.updatedFilters) {
+                this.filterChanges$.next(this.updatedFilters);
+            }
+        }
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -326,35 +356,48 @@ class CollectionContentsComponent {
         this.refresh$.next(true);
     }
     setParam(key, value) {
-        this.router.navigate(['./', Object.assign(Object.assign({}, this.route.snapshot.params), { [key]: value })], {
+        this.router.navigate(['./'], {
             relativeTo: this.route,
+            queryParams: {
+                [key]: value,
+            },
             queryParamsHandling: 'merge',
+            replaceUrl: true,
         });
     }
 }
 CollectionContentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionContentsComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Component });
-CollectionContentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: { collectionId: "collectionId" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"contents-header\">\r\n    <div class=\"header-title-row\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\r\n        ></ng-container>\r\n    </div>\r\n    <input\r\n        type=\"text\"\r\n        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n        [formControl]=\"filterTermControl\"\r\n    />\r\n</div>\r\n<vdr-data-table\r\n    [items]=\"contents$ | async\"\r\n    [itemsPerPage]=\"contentsItemsPerPage$ | async\"\r\n    [totalItems]=\"contentsTotalItems$ | async\"\r\n    [currentPage]=\"contentsCurrentPage$ | async\"\r\n    (pageChange)=\"setContentsPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n>\r\n    <ng-template let-variant=\"item\">\r\n        <td class=\"left align-middle\">{{ variant.name }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['/catalog/products', variant.productId, { tab: 'variants' }]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".contents-header{background-color:var(--color-component-bg-100);position:sticky;top:0;padding:6px;z-index:1;border-bottom:1px solid var(--color-component-border-200)}.contents-header .header-title-row{display:flex;justify-content:space-between;align-items:center}.contents-header .clr-input{width:100%}:host ::ng-deep table{margin-top:-1px}\n"], components: [{ type: i1$1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1$1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CollectionContentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: { collectionId: "collectionId", parentId: "parentId", updatedFilters: "updatedFilters", previewUpdatedFilters: "previewUpdatedFilters" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"contents-header\">\r\n    <div class=\"header-title-row\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\r\n        ></ng-container>\r\n    </div>\r\n    <input\r\n        type=\"text\"\r\n        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n        [formControl]=\"filterTermControl\"\r\n    />\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <div class=\"progress loop\" [class.visible]=\"isLoading\"></div>\r\n    <vdr-data-table\r\n        [class.loading]=\"isLoading\"\r\n        [items]=\"contents$ | async\"\r\n        [itemsPerPage]=\"contentsItemsPerPage$ | async\"\r\n        [totalItems]=\"contentsTotalItems$ | async\"\r\n        [currentPage]=\"contentsCurrentPage$ | async\"\r\n        (pageChange)=\"setContentsPageNumber($event)\"\r\n        (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            <td class=\"left align-middle\">{{ variant.name }}</td>\r\n            <td class=\"left align-middle\"><small class=\"sku\">{{ variant.sku }}</small></td>\r\n            <td class=\"right align-middle\">\r\n                <vdr-table-row-action\r\n                    iconShape=\"edit\"\r\n                    [label]=\"'common.edit' | translate\"\r\n                    [linkTo]=\"['/catalog/products', variant.productId, { tab: 'variants' }]\"\r\n                ></vdr-table-row-action>\r\n            </td>\r\n        </ng-template>\r\n    </vdr-data-table>\r\n</div>\r\n", styles: [".contents-header{background-color:var(--color-component-bg-100);position:sticky;top:0;padding:6px;z-index:1;border-bottom:1px solid var(--color-component-border-200)}.contents-header .header-title-row{display:flex;justify-content:space-between;align-items:center}.contents-header .clr-input{width:100%}:host{display:block}:host ::ng-deep table{margin-top:-1px}vdr-data-table{opacity:1;transition:opacity .3s}vdr-data-table.loading{opacity:.5}.table-wrapper{position:relative}.progress{position:absolute;top:0;left:0;overflow:hidden;height:6px;opacity:0;transition:opacity .1s}.progress.visible{opacity:1}.sku{color:var(--color-text-200)}\n"], components: [{ type: i1$1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1$1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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"] }], 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: CollectionContentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-collection-contents', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contents-header\">\r\n    <div class=\"header-title-row\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\r\n        ></ng-container>\r\n    </div>\r\n    <input\r\n        type=\"text\"\r\n        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n        [formControl]=\"filterTermControl\"\r\n    />\r\n</div>\r\n<vdr-data-table\r\n    [items]=\"contents$ | async\"\r\n    [itemsPerPage]=\"contentsItemsPerPage$ | async\"\r\n    [totalItems]=\"contentsTotalItems$ | async\"\r\n    [currentPage]=\"contentsCurrentPage$ | async\"\r\n    (pageChange)=\"setContentsPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n>\r\n    <ng-template let-variant=\"item\">\r\n        <td class=\"left align-middle\">{{ variant.name }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['/catalog/products', variant.productId, { tab: 'variants' }]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".contents-header{background-color:var(--color-component-bg-100);position:sticky;top:0;padding:6px;z-index:1;border-bottom:1px solid var(--color-component-border-200)}.contents-header .header-title-row{display:flex;justify-content:space-between;align-items:center}.contents-header .clr-input{width:100%}:host ::ng-deep table{margin-top:-1px}\n"] }]
+            args: [{ selector: 'vdr-collection-contents', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contents-header\">\r\n    <div class=\"header-title-row\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\r\n        ></ng-container>\r\n    </div>\r\n    <input\r\n        type=\"text\"\r\n        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n        [formControl]=\"filterTermControl\"\r\n    />\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <div class=\"progress loop\" [class.visible]=\"isLoading\"></div>\r\n    <vdr-data-table\r\n        [class.loading]=\"isLoading\"\r\n        [items]=\"contents$ | async\"\r\n        [itemsPerPage]=\"contentsItemsPerPage$ | async\"\r\n        [totalItems]=\"contentsTotalItems$ | async\"\r\n        [currentPage]=\"contentsCurrentPage$ | async\"\r\n        (pageChange)=\"setContentsPageNumber($event)\"\r\n        (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            <td class=\"left align-middle\">{{ variant.name }}</td>\r\n            <td class=\"left align-middle\"><small class=\"sku\">{{ variant.sku }}</small></td>\r\n            <td class=\"right align-middle\">\r\n                <vdr-table-row-action\r\n                    iconShape=\"edit\"\r\n                    [label]=\"'common.edit' | translate\"\r\n                    [linkTo]=\"['/catalog/products', variant.productId, { tab: 'variants' }]\"\r\n                ></vdr-table-row-action>\r\n            </td>\r\n        </ng-template>\r\n    </vdr-data-table>\r\n</div>\r\n", styles: [".contents-header{background-color:var(--color-component-bg-100);position:sticky;top:0;padding:6px;z-index:1;border-bottom:1px solid var(--color-component-border-200)}.contents-header .header-title-row{display:flex;justify-content:space-between;align-items:center}.contents-header .clr-input{width:100%}:host{display:block}:host ::ng-deep table{margin-top:-1px}vdr-data-table{opacity:1;transition:opacity .3s}vdr-data-table.loading{opacity:.5}.table-wrapper{position:relative}.progress{position:absolute;top:0;left:0;overflow:hidden;height:6px;opacity:0;transition:opacity .1s}.progress.visible{opacity:1}.sku{color:var(--color-text-200)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i1$1.DataService }]; }, propDecorators: { collectionId: [{
                 type: Input
+            }], parentId: [{
+                type: Input
+            }], updatedFilters: [{
+                type: Input
+            }], previewUpdatedFilters: [{
+                type: Input
             }], headerTemplate: [{
                 type: ContentChild,
                 args: [TemplateRef, { static: true }]
             }] } });
 
 class CollectionDetailComponent extends BaseDetailComponent {
-    constructor(router, route, serverConfigService, changeDetector, dataService, formBuilder, notificationService, modalService) {
+    constructor(router, route, serverConfigService, changeDetector, dataService, formBuilder, notificationService, modalService, localStorageService) {
+        var _a;
         super(route, router, serverConfigService, dataService);
         this.changeDetector = changeDetector;
         this.dataService = dataService;
         this.formBuilder = formBuilder;
         this.notificationService = notificationService;
         this.modalService = modalService;
+        this.localStorageService = localStorageService;
         this.assetChanges = {};
         this.filters = [];
         this.allFilters = [];
+        this.livePreview = false;
         this.updatePermission = [Permission.UpdateCatalog, Permission.UpdateCollection];
         this.customFields = this.getCustomFieldConfig('Collection');
         this.detailForm = this.formBuilder.group({
@@ -366,18 +409,29 @@ class CollectionDetailComponent extends BaseDetailComponent {
             filters: this.formBuilder.array([]),
             customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => (Object.assign(Object.assign({}, hash), { [field.name]: '' })), {})),
         });
+        this.livePreview = (_a = this.localStorageService.get('livePreviewCollectionContents')) !== null && _a !== void 0 ? _a : false;
     }
     ngOnInit() {
         this.init();
         this.dataService.collection.getCollectionFilters().single$.subscribe(res => {
             this.allFilters = res.collectionFilters;
         });
+        const filtersFormArray = this.detailForm.get('filters');
+        this.updatedFilters$ = filtersFormArray.statusChanges.pipe(debounceTime(200), filter(() => filtersFormArray.touched), map(status => this.mapOperationsToInputs(this.filters, filtersFormArray.value)));
+        this.parentId$ = this.route.paramMap.pipe(map(pm => pm.get('parentId') || undefined), switchMap(parentId => {
+            if (parentId) {
+                return of(parentId);
+            }
+            else {
+                return this.entity$.pipe(map(collection => { var _a; return (_a = collection.parent) === null || _a === void 0 ? void 0 : _a.id; }));
+            }
+        }));
     }
     ngOnDestroy() {
         this.destroy();
     }
-    getFilterDefinition(filter) {
-        return this.allFilters.find(f => f.code === filter.code);
+    getFilterDefinition(_filter) {
+        return this.allFilters.find(f => f.code === _filter.code);
     }
     assetsChanged() {
         return !!Object.values(this.assetChanges).length;
@@ -399,22 +453,18 @@ class CollectionDetailComponent extends BaseDetailComponent {
     }
     addFilter(collectionFilter) {
         const filtersArray = this.detailForm.get('filters');
-        const index = filtersArray.value.findIndex(o => o.code === collectionFilter.code);
-        if (index === -1) {
-            const argsHash = collectionFilter.args.reduce((output, arg) => (Object.assign(Object.assign({}, output), { [arg.name]: getConfigArgValue(arg.value) })), {});
-            filtersArray.push(this.formBuilder.control({
-                code: collectionFilter.code,
-                args: argsHash,
-            }));
-            this.filters.push({
-                code: collectionFilter.code,
-                args: collectionFilter.args.map(a => ({ name: a.name, value: getConfigArgValue(a.value) })),
-            });
-        }
+        const argsHash = collectionFilter.args.reduce((output, arg) => (Object.assign(Object.assign({}, output), { [arg.name]: getConfigArgValue(arg.value) })), {});
+        filtersArray.push(this.formBuilder.control({
+            code: collectionFilter.code,
+            args: argsHash,
+        }));
+        this.filters.push({
+            code: collectionFilter.code,
+            args: collectionFilter.args.map(a => ({ name: a.name, value: getConfigArgValue(a.value) })),
+        });
     }
-    removeFilter(collectionFilter) {
+    removeFilter(index) {
         const filtersArray = this.detailForm.get('filters');
-        const index = filtersArray.value.findIndex(o => o.code === collectionFilter.code);
         if (index !== -1) {
             filtersArray.removeAt(index);
             this.filters.splice(index, 1);
@@ -470,6 +520,13 @@ class CollectionDetailComponent extends BaseDetailComponent {
     canDeactivate() {
         return super.canDeactivate() && !this.assetChanges.assets && !this.assetChanges.featuredAsset;
     }
+    toggleLivePreview() {
+        this.livePreview = !this.livePreview;
+        this.localStorageService.set('livePreviewCollectionContents', this.livePreview);
+    }
+    trackByFn(index, item) {
+        return JSON.stringify(item);
+    }
     /**
      * Sets the values of the form on changes to the category or current language.
      */
@@ -482,7 +539,12 @@ class CollectionDetailComponent extends BaseDetailComponent {
             visible: !entity.isPrivate,
             inheritFilters: entity.inheritFilters,
         });
-        entity.filters.forEach(f => this.addFilter(f));
+        const formArray = this.detailForm.get('filters');
+        if (formArray.length !== entity.filters.length) {
+            formArray.clear();
+            this.filters = [];
+            entity.filters.forEach(f => this.addFilter(f));
+        }
         if (this.customFields.length) {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), entity, currentTranslation);
         }
@@ -514,20 +576,22 @@ class CollectionDetailComponent extends BaseDetailComponent {
         return operations.map((o, i) => {
             return {
                 code: o.code,
-                arguments: Object.values(formValueOperations[i].args).map((value, j) => ({
-                    name: o.args[j].name,
-                    value: encodeConfigArgValue(value),
-                })),
+                arguments: Object.entries(formValueOperations[i].args).map(([name, value], j) => {
+                    return {
+                        name,
+                        value: encodeConfigArgValue(value),
+                    };
+                }),
             };
         });
     }
 }
-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 }], 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\">\r\n                    <vdr-configurable-input\r\n                        (remove)=\"removeFilter($event)\"\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 [collectionId]=\"id\" #collectionContents>\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                </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}\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"], 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"] }], 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: 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 });
+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                        [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                [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"], 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", "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\">\r\n                    <vdr-configurable-input\r\n                        (remove)=\"removeFilter($event)\"\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 [collectionId]=\"id\" #collectionContents>\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                </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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.ServerConfigService }, { type: i0.ChangeDetectorRef }, { type: i1$1.DataService }, { type: i4.FormBuilder }, { type: i1$1.NotificationService }, { type: i1$1.ModalService }]; }, propDecorators: { contentsComponent: [{
+            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                        [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                [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"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.ServerConfigService }, { type: i0.ChangeDetectorRef }, { type: i1$1.DataService }, { type: i4.FormBuilder }, { type: i1$1.NotificationService }, { type: i1$1.ModalService }, { type: i1$1.LocalStorageService }]; }, propDecorators: { contentsComponent: [{
                 type: ViewChild,
                 args: ['collectionContents']
             }] } });
@@ -536,7 +600,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
  * Builds a tree from an array of nodes which have a parent.
  * Based on https://stackoverflow.com/a/31247960/772859, modified to preserve ordering.
  */
-function arrayToTree(nodes, currentState) {
+function arrayToTree(nodes, currentState, expandedIds = []) {
     var _a, _b;
     const topLevelNodes = [];
     const mappedArr = {};
@@ -548,7 +612,7 @@ function arrayToTree(nodes, currentState) {
     for (const id of nodes.map(n => n.id)) {
         if (mappedArr.hasOwnProperty(id)) {
             const mappedElem = mappedArr[id];
-            mappedElem.expanded = (_b = (_a = currentStateMap.get(id)) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : false;
+            mappedElem.expanded = (_b = (_a = currentStateMap.get(id)) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : expandedIds.includes(id);
             const parent = mappedElem.parent;
             if (!parent) {
                 continue;
@@ -658,10 +722,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
         }], ctorParameters: function () { return []; } });
 
 class CollectionTreeNodeComponent {
-    constructor(parent, dataService, collectionTreeService) {
+    constructor(parent, dataService, collectionTreeService, router, route) {
         this.parent = parent;
         this.dataService = dataService;
         this.collectionTreeService = collectionTreeService;
+        this.router = router;
+        this.route = route;
         this.depth = 0;
         this.expandAll = false;
         this.moveListItems = [];
@@ -689,6 +755,24 @@ class CollectionTreeNodeComponent {
     trackByFn(index, item) {
         return item.id;
     }
+    toggleExpanded(collection) {
+        var _a, _b;
+        collection.expanded = !collection.expanded;
+        let expandedIds = (_b = (_a = this.route.snapshot.queryParamMap.get('expanded')) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+        if (collection.expanded) {
+            expandedIds.push(collection.id);
+        }
+        else {
+            expandedIds = expandedIds.filter(id => id !== collection.id);
+        }
+        this.router.navigate(['./'], {
+            queryParams: {
+                expanded: expandedIds.filter(id => !!id).join(','),
+            },
+            queryParamsHandling: 'merge',
+            relativeTo: this.route,
+        });
+    }
     getMoveListItems(collection) {
         this.moveListItems = this.collectionTreeService.getMoveListItems(collection);
     }
@@ -727,17 +811,17 @@ class CollectionTreeNodeComponent {
         this.collectionTreeService.onDelete(id);
     }
 }
-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 }], 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)=\"collection.expanded = !collection.expanded\"\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.ɵ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 });
 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)=\"collection.expanded = !collection.expanded\"\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"] }]
+            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"] }]
         }], ctorParameters: function () {
         return [{ type: CollectionTreeNodeComponent, decorators: [{
                         type: SkipSelf
                     }, {
                         type: Optional
-                    }] }, { type: i1$1.DataService }, { type: CollectionTreeService }];
+                    }] }, { type: i1$1.DataService }, { type: CollectionTreeService }, { type: i1.Router }, { type: i1.ActivatedRoute }];
     }, propDecorators: { collectionTree: [{
                 type: Input
             }], activeCollectionId: [{
@@ -750,12 +834,13 @@ class CollectionTreeComponent {
     constructor(collectionTreeService) {
         this.collectionTreeService = collectionTreeService;
         this.expandAll = false;
+        this.expandedIds = [];
         this.rearrange = new EventEmitter();
         this.deleteCollection = new EventEmitter();
     }
     ngOnChanges(changes) {
         if ('collections' in changes && this.collections) {
-            this.collectionTree = arrayToTree(this.collections, this.collectionTree);
+            this.collectionTree = arrayToTree(this.collections, this.collectionTree, this.expandedIds);
             this.collectionTreeService.setCollectionTree(this.collectionTree);
             this.collectionTreeService.resetMoveList();
         }
@@ -766,7 +851,7 @@ class CollectionTreeComponent {
     }
 }
 CollectionTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionTreeComponent, deps: [{ token: CollectionTreeService }], target: i0.ɵɵFactoryTarget.Component });
-CollectionTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionTreeComponent, selector: "vdr-collection-tree", inputs: { collections: "collections", activeCollectionId: "activeCollectionId", expandAll: "expandAll" }, outputs: { rearrange: "rearrange", deleteCollection: "deleteCollection" }, providers: [CollectionTreeService], usesOnChanges: true, ngImport: i0, template: "<vdr-collection-tree-node\r\n    *ngIf=\"collectionTree\"\r\n    cdkDropListGroup\r\n    [expandAll]=\"expandAll\"\r\n    [collectionTree]=\"collectionTree\"\r\n    [activeCollectionId]=\"activeCollectionId\"\r\n></vdr-collection-tree-node>\r\n", styles: [""], components: [{ type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: ["collectionTree", "activeCollectionId", "expandAll"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CollectionTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionTreeComponent, selector: "vdr-collection-tree", inputs: { collections: "collections", activeCollectionId: "activeCollectionId", expandAll: "expandAll", expandedIds: "expandedIds" }, outputs: { rearrange: "rearrange", deleteCollection: "deleteCollection" }, providers: [CollectionTreeService], usesOnChanges: true, ngImport: i0, template: "<vdr-collection-tree-node\r\n    *ngIf=\"collectionTree\"\r\n    cdkDropListGroup\r\n    [expandAll]=\"expandAll\"\r\n    [collectionTree]=\"collectionTree\"\r\n    [activeCollectionId]=\"activeCollectionId\"\r\n></vdr-collection-tree-node>\r\n", styles: [""], components: [{ type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: ["collectionTree", "activeCollectionId", "expandAll"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-collection-tree', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CollectionTreeService], template: "<vdr-collection-tree-node\r\n    *ngIf=\"collectionTree\"\r\n    cdkDropListGroup\r\n    [expandAll]=\"expandAll\"\r\n    [collectionTree]=\"collectionTree\"\r\n    [activeCollectionId]=\"activeCollectionId\"\r\n></vdr-collection-tree-node>\r\n", styles: [""] }]
@@ -776,6 +861,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }], expandAll: [{
                 type: Input
+            }], expandedIds: [{
+                type: Input
             }], rearrange: [{
                 type: Output
             }], deleteCollection: [{
@@ -792,12 +879,16 @@ class CollectionListComponent {
         this.serverConfigService = serverConfigService;
         this.filterTermControl = new FormControl('');
         this.expandAll = false;
+        this.expandedIds = [];
         this.destroy$ = new Subject();
     }
     ngOnInit() {
+        var _a, _b;
         this.queryResult = this.dataService.collection.getCollections(1000, 0).refetchOnChannelChange();
         this.items$ = this.queryResult.mapStream(data => data.collections.items).pipe(shareReplay(1));
         this.activeCollectionId$ = this.route.paramMap.pipe(map(pm => pm.get('contents')), distinctUntilChanged());
+        this.expandedIds = (_b = (_a = this.route.snapshot.queryParamMap.get('expanded')) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
+        this.expandAll = this.route.snapshot.queryParamMap.get('expanded') === 'all';
         this.activeCollectionTitle$ = combineLatest(this.activeCollectionId$, this.items$).pipe(map(([id, collections]) => {
             if (id) {
                 const match = collections.find(c => c.id === id);
@@ -812,13 +903,34 @@ class CollectionListComponent {
             .pipe(tap(() => this.refresh()));
         this.filterTermControl.valueChanges
             .pipe(debounceTime(250), takeUntil(this.destroy$))
+            .subscribe(term => {
+            this.router.navigate(['./'], {
+                queryParams: {
+                    q: term || undefined,
+                },
+                queryParamsHandling: 'merge',
+                relativeTo: this.route,
+            });
+        });
+        this.route.queryParamMap
+            .pipe(map(qpm => qpm.get('q')), distinctUntilChanged(), takeUntil(this.destroy$))
             .subscribe(() => this.refresh());
+        this.filterTermControl.patchValue(this.route.snapshot.queryParamMap.get('q'));
     }
     ngOnDestroy() {
         this.queryResult.completed$.next();
         this.destroy$.next(undefined);
         this.destroy$.complete();
     }
+    toggleExpandAll() {
+        this.router.navigate(['./'], {
+            queryParams: {
+                expanded: this.expandAll ? 'all' : undefined,
+            },
+            queryParamsHandling: 'merge',
+            relativeTo: this.route,
+        });
+    }
     onRearrange(event) {
         this.dataService.collection.moveCollection([event]).subscribe({
             next: () => {
@@ -864,12 +976,13 @@ class CollectionListComponent {
         this.dataService.client.setContentLanguage(code).subscribe();
     }
     refresh() {
+        const filterTerm = this.route.snapshot.queryParamMap.get('q');
         this.queryResult.ref.refetch({
-            options: Object.assign({ skip: 0, take: 1000 }, (this.filterTermControl.value
+            options: Object.assign({ skip: 0, take: 1000 }, (filterTerm
                 ? {
                     filter: {
                         name: {
-                            contains: this.filterTermControl.value,
+                            contains: filterTerm,
                         },
                     },
                 }
@@ -878,10 +991,10 @@ class CollectionListComponent {
     }
 }
 CollectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionListComponent, deps: [{ token: i1$1.DataService }, { token: i1$1.NotificationService }, { token: i1$1.ModalService }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.ServerConfigService }], target: i0.ɵɵFactoryTarget.Component });
-CollectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionListComponent, selector: "vdr-collection-list", 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                class=\"mt2\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <clr-checkbox-wrapper\r\n                class=\"expand-all-toggle ml3\"\r\n                [ngClass]=\"(availableLanguages$ | async)?.length === 1 ? 'mt3' : 'mt1'\"\r\n            >\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"expandAll\" />\r\n                <label>{{ 'catalog.expand-all-collections' | translate }}</label>\r\n            </clr-checkbox-wrapper>\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=\"collection-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-collection' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"collection-wrapper\">\r\n    <vdr-collection-tree\r\n        [collections]=\"items$ | async\"\r\n        [activeCollectionId]=\"activeCollectionId$ | async\"\r\n        [expandAll]=\"expandAll\"\r\n        (rearrange)=\"onRearrange($event)\"\r\n        (deleteCollection)=\"deleteCollection($event)\"\r\n    ></vdr-collection-tree>\r\n\r\n    <div class=\"collection-contents\" [class.expanded]=\"activeCollectionId$ | async\">\r\n        <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\">\r\n            <ng-template let-count>\r\n                <div class=\"collection-title\">\r\n                    {{ activeCollectionTitle$ | async }} ({{\r\n                        'common.results-count' | translate: { count: count }\r\n                    }})\r\n                </div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeContents()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n        </vdr-collection-contents>\r\n    </div>\r\n</div>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}.expand-all-toggle{display:block}.collection-wrapper{display:flex;height:calc(100% - 50px)}.collection-wrapper vdr-collection-tree{flex:1;height:100%;overflow:auto}.collection-wrapper .collection-contents{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.collection-wrapper .collection-contents.expanded{width:30vw;visibility:visible;opacity:1;padding-left:12px}.collection-wrapper .collection-contents .close-button{margin:0;background:none;border:none;cursor:pointer}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}\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: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: CollectionTreeComponent, selector: "vdr-collection-tree", inputs: ["collections", "activeCollectionId", "expandAll"], outputs: ["rearrange", "deleteCollection"] }, { type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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.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" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CollectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionListComponent, selector: "vdr-collection-list", 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                class=\"mt2\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <clr-checkbox-wrapper\r\n                class=\"expand-all-toggle ml3\"\r\n                [ngClass]=\"(availableLanguages$ | async)?.length === 1 ? 'mt3' : 'mt1'\"\r\n            >\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"expandAll\" (change)=\"toggleExpandAll()\"/>\r\n                <label>{{ 'catalog.expand-all-collections' | translate }}</label>\r\n            </clr-checkbox-wrapper>\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=\"collection-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-collection' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"collection-wrapper\">\r\n    <vdr-collection-tree\r\n        [collections]=\"items$ | async\"\r\n        [activeCollectionId]=\"activeCollectionId$ | async\"\r\n        [expandAll]=\"expandAll\"\r\n        [expandedIds]=\"expandedIds\"\r\n        (rearrange)=\"onRearrange($event)\"\r\n        (deleteCollection)=\"deleteCollection($event)\"\r\n    ></vdr-collection-tree>\r\n\r\n    <div class=\"collection-contents\" [class.expanded]=\"activeCollectionId$ | async\">\r\n        <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\">\r\n            <ng-template let-count>\r\n                <div class=\"collection-title\">\r\n                    {{ activeCollectionTitle$ | async }} ({{\r\n                        'common.results-count' | translate: { count: count }\r\n                    }})\r\n                </div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeContents()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n        </vdr-collection-contents>\r\n    </div>\r\n</div>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}.expand-all-toggle{display:block}.collection-wrapper{display:flex;height:calc(100% - 50px)}.collection-wrapper vdr-collection-tree{flex:1;height:100%;overflow:auto}.collection-wrapper .collection-contents{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.collection-wrapper .collection-contents.expanded{width:30vw;visibility:visible;opacity:1;padding-left:12px}.collection-wrapper .collection-contents .close-button{margin:0;background:none;border:none;cursor:pointer}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}\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: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: CollectionTreeComponent, selector: "vdr-collection-tree", inputs: ["collections", "activeCollectionId", "expandAll", "expandedIds"], outputs: ["rearrange", "deleteCollection"] }, { type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "updatedFilters", "previewUpdatedFilters"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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.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" }], 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: CollectionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-collection-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex center wrap\">\r\n            <vdr-language-selector\r\n                class=\"mt2\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <clr-checkbox-wrapper\r\n                class=\"expand-all-toggle ml3\"\r\n                [ngClass]=\"(availableLanguages$ | async)?.length === 1 ? 'mt3' : 'mt1'\"\r\n            >\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"expandAll\" />\r\n                <label>{{ 'catalog.expand-all-collections' | translate }}</label>\r\n            </clr-checkbox-wrapper>\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=\"collection-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-collection' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"collection-wrapper\">\r\n    <vdr-collection-tree\r\n        [collections]=\"items$ | async\"\r\n        [activeCollectionId]=\"activeCollectionId$ | async\"\r\n        [expandAll]=\"expandAll\"\r\n        (rearrange)=\"onRearrange($event)\"\r\n        (deleteCollection)=\"deleteCollection($event)\"\r\n    ></vdr-collection-tree>\r\n\r\n    <div class=\"collection-contents\" [class.expanded]=\"activeCollectionId$ | async\">\r\n        <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\">\r\n            <ng-template let-count>\r\n                <div class=\"collection-title\">\r\n                    {{ activeCollectionTitle$ | async }} ({{\r\n                        'common.results-count' | translate: { count: count }\r\n                    }})\r\n                </div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeContents()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n        </vdr-collection-contents>\r\n    </div>\r\n</div>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}.expand-all-toggle{display:block}.collection-wrapper{display:flex;height:calc(100% - 50px)}.collection-wrapper vdr-collection-tree{flex:1;height:100%;overflow:auto}.collection-wrapper .collection-contents{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.collection-wrapper .collection-contents.expanded{width:30vw;visibility:visible;opacity:1;padding-left:12px}.collection-wrapper .collection-contents .close-button{margin:0;background:none;border:none;cursor:pointer}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}\n"] }]
+            args: [{ selector: 'vdr-collection-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex center wrap\">\r\n            <vdr-language-selector\r\n                class=\"mt2\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <clr-checkbox-wrapper\r\n                class=\"expand-all-toggle ml3\"\r\n                [ngClass]=\"(availableLanguages$ | async)?.length === 1 ? 'mt3' : 'mt1'\"\r\n            >\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"expandAll\" (change)=\"toggleExpandAll()\"/>\r\n                <label>{{ 'catalog.expand-all-collections' | translate }}</label>\r\n            </clr-checkbox-wrapper>\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=\"collection-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-collection' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"collection-wrapper\">\r\n    <vdr-collection-tree\r\n        [collections]=\"items$ | async\"\r\n        [activeCollectionId]=\"activeCollectionId$ | async\"\r\n        [expandAll]=\"expandAll\"\r\n        [expandedIds]=\"expandedIds\"\r\n        (rearrange)=\"onRearrange($event)\"\r\n        (deleteCollection)=\"deleteCollection($event)\"\r\n    ></vdr-collection-tree>\r\n\r\n    <div class=\"collection-contents\" [class.expanded]=\"activeCollectionId$ | async\">\r\n        <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\">\r\n            <ng-template let-count>\r\n                <div class=\"collection-title\">\r\n                    {{ activeCollectionTitle$ | async }} ({{\r\n                        'common.results-count' | translate: { count: count }\r\n                    }})\r\n                </div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeContents()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n        </vdr-collection-contents>\r\n    </div>\r\n</div>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}.expand-all-toggle{display:block}.collection-wrapper{display:flex;height:calc(100% - 50px)}.collection-wrapper vdr-collection-tree{flex:1;height:100%;overflow:auto}.collection-wrapper .collection-contents{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.collection-wrapper .collection-contents.expanded{width:30vw;visibility:visible;opacity:1;padding-left:12px}.collection-wrapper .collection-contents .close-button{margin:0;background:none;border:none;cursor:pointer}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DataService }, { type: i1$1.NotificationService }, { type: i1$1.ModalService }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.ServerConfigService }]; } });
 
 class FacetDetailComponent extends BaseDetailComponent {
@@ -1073,7 +1186,7 @@ class FacetDetailComponent extends BaseDetailComponent {
         const currentValuesFormArray = this.detailForm.get('values');
         this.values = [...facet.values];
         facet.values.forEach((value, i) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             const valueTranslation = findTranslation(value, languageCode);
             const group = {
                 id: value.id,
@@ -1099,7 +1212,7 @@ class FacetDetailComponent extends BaseDetailComponent {
                     for (const fieldDef of this.customValueFields) {
                         const key = fieldDef.name;
                         const fieldValue = fieldDef.type === 'localeString'
-                            ? valueTranslation.customFields[key]
+                            ? (_d = valueTranslation === null || valueTranslation === void 0 ? void 0 : valueTranslation.customFields) === null || _d === void 0 ? void 0 : _d[key]
                             : value.customFields[key];
                         const control = customValueFieldsGroup.get(key);
                         if (control) {
@@ -2022,6 +2135,13 @@ class ProductVariantsListComponent {
         }
         return '';
     }
+    getStockOnHandMinValue(variant) {
+        var _a, _b;
+        const effectiveOutOfStockThreshold = ((_a = variant.get('useGlobalOutOfStockThreshold')) === null || _a === void 0 ? void 0 : _a.value)
+            ? this.globalOutOfStockThreshold
+            : (_b = variant.get('outOfStockThreshold')) === null || _b === void 0 ? void 0 : _b.value;
+        return effectiveOutOfStockThreshold;
+    }
     getSaleableStockLevel(variant) {
         const effectiveOutOfStockThreshold = variant.useGlobalOutOfStockThreshold
             ? this.globalOutOfStockThreshold
@@ -2131,10 +2251,10 @@ class ProductVariantsListComponent {
     }
 }
 ProductVariantsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.ModalService }, { token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Component });
-ProductVariantsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantsListComponent, selector: "vdr-product-variants-list", inputs: { formArray: ["productVariantsFormArray", "formArray"], variants: "variants", paginationConfig: "paginationConfig", channelPriceIncludesTax: "channelPriceIncludesTax", taxCategories: "taxCategories", facets: "facets", optionGroups: "optionGroups", customFields: "customFields", customOptionFields: "customOptionFields", activeLanguage: "activeLanguage", pendingAssetChanges: "pendingAssetChanges" }, outputs: { assignToChannel: "assignToChannel", removeFromChannel: "removeFromChannel", assetChange: "assetChange", selectionChange: "selectionChange", selectFacetValueClick: "selectFacetValueClick", updateProductOption: "updateProductOption" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"variants-list\">\r\n    <div\r\n        class=\"variant-container card\"\r\n        *ngFor=\"\r\n            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };\r\n            trackBy: trackById;\r\n            let i = index\r\n        \"\r\n        [class.disabled]=\"!formGroupMap.get(variant.id)?.get('enabled')?.value\"\r\n    >\r\n        <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n            <div class=\"card-block header-row\">\r\n                <div class=\"details\">\r\n                    <vdr-title-input class=\"sku\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"sku\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'catalog.sku' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                    <vdr-title-input class=\"name\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'common.name' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                </div>\r\n                <div class=\"right-controls\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermission\">\r\n                        <input type=\"checkbox\" clrToggle name=\"enabled\" formControlName=\"enabled\" />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"variant-body\">\r\n                    <div class=\"assets\">\r\n                        <vdr-assets\r\n                            [compact]=\"true\"\r\n                            [assets]=\"pendingAssetChanges[variant.id]?.assets || variant.assets\"\r\n                            [featuredAsset]=\"\r\n                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset\r\n                            \"\r\n                            [updatePermissions]=\"updatePermission\"\r\n                            (change)=\"onAssetChange(variant.id, $event)\"\r\n                        ></vdr-assets>\r\n                    </div>\r\n                    <div class=\"variant-form-inputs\">\r\n                        <div class=\"standard-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div class=\"tax-category\">\r\n                                    <clr-select-container\r\n                                        *vdrIfPermissions=\"updatePermission; else taxCategoryLabel\"\r\n                                    >\r\n                                        <label>{{ 'catalog.tax-category' | translate }}</label>\r\n                                        <select clrSelect name=\"options\" formControlName=\"taxCategoryId\">\r\n                                            <option\r\n                                                *ngFor=\"let taxCategory of taxCategories\"\r\n                                                [value]=\"taxCategory.id\"\r\n                                            >\r\n                                                {{ taxCategory.name }}\r\n                                            </option>\r\n                                        </select>\r\n                                    </clr-select-container>\r\n                                    <ng-template #taxCategoryLabel>\r\n                                        <label class=\"clr-control-label\">{{\r\n                                            'catalog.tax-category' | translate\r\n                                        }}</label>\r\n                                        <div class=\"tax-category-label\">\r\n                                            {{ getTaxCategoryName(formGroup) }}\r\n                                        </div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"price\">\r\n                                    <clr-input-container>\r\n                                        <label>{{ 'catalog.price' | translate }}</label>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"!channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"price\"\r\n                                        ></vdr-currency-input>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"priceWithTax\"\r\n                                        ></vdr-currency-input>\r\n                                    </clr-input-container>\r\n                                </div>\r\n                                <vdr-variant-price-detail\r\n                                    [price]=\"formGroup.get('price')!.value\"\r\n                                    [currencyCode]=\"variant.currencyCode\"\r\n                                    [priceIncludesTax]=\"channelPriceIncludesTax\"\r\n                                    [taxCategoryId]=\"formGroup.get('taxCategoryId')!.value\"\r\n                                ></vdr-variant-price-detail>\r\n                            </div>\r\n                            <div class=\"variant-form-input-row\">\r\n                                <clr-select-container *vdrIfPermissions=\"updatePermission\">\r\n                                    <label\r\n                                        >{{ 'catalog.track-inventory' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip>\r\n                                    </label>\r\n                                    <select clrSelect name=\"options\" formControlName=\"trackInventory\">\r\n                                        <option [value]=\"GlobalFlag.TRUE\">\r\n                                            {{ 'catalog.track-inventory-true' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.FALSE\">\r\n                                            {{ 'catalog.track-inventory-false' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.INHERIT\">\r\n                                            {{ 'catalog.track-inventory-inherit' | translate }}\r\n                                        </option>\r\n                                    </select>\r\n                                </clr-select-container>\r\n                                <clr-input-container>\r\n                                    <label\r\n                                        >{{ 'catalog.stock-on-hand' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-on-hand-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <input\r\n                                        [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                        clrInput\r\n                                        type=\"number\"\r\n                                        min=\"0\"\r\n                                        step=\"1\"\r\n                                        formControlName=\"stockOnHand\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        [vdrDisabled]=\"inventoryIsNotTracked(formGroup)\"\r\n                                    />\r\n                                </clr-input-container>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-allocated' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-allocated-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ variant.stockAllocated }}\r\n                                    </div>\r\n                                </div>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-saleable' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-saleable-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ getSaleableStockLevel(variant) }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div\r\n                                    class=\"out-of-stock-threshold-wrapper\"\r\n                                    [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                >\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.out-of-stock-threshold' | translate\r\n                                        }}<vdr-help-tooltip\r\n                                            [content]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"flex\">\r\n                                        <clr-input-container>\r\n                                            <input\r\n                                                clrInput\r\n                                                type=\"number\"\r\n                                                [formControl]=\"formGroup.get('outOfStockThreshold')\"\r\n                                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                                [vdrDisabled]=\"\r\n                                                    formGroup.get('useGlobalOutOfStockThreshold')?.value !==\r\n                                                        false || inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                        </clr-input-container>\r\n                                        <clr-toggle-wrapper>\r\n                                            <input\r\n                                                type=\"checkbox\"\r\n                                                clrToggle\r\n                                                name=\"useGlobalOutOfStockThreshold\"\r\n                                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                                [vdrDisabled]=\"\r\n                                                    !(updatePermission | hasPermission) ||\r\n                                                    inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                            <label\r\n                                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                                    globalOutOfStockThreshold\r\n                                                }})</label\r\n                                            >\r\n                                        </clr-toggle-wrapper>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"custom-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"ProductVariant\"\r\n                                        [customFields]=\"customFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"formGroup.get('customFields')\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </section>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"options-facets\">\r\n                    <vdr-entity-info [entity]=\"variant\"></vdr-entity-info>\r\n                    <div *ngIf=\"variant.options.length\">\r\n                        <div class=\"options\">\r\n                            <vdr-chip\r\n                                *ngFor=\"let option of variant.options | sort: 'groupId'\"\r\n                                [colorFrom]=\"optionGroupName(option.groupId)\"\r\n                                [invert]=\"true\"\r\n                                (iconClick)=\"editOption(option)\"\r\n                                [icon]=\"(updatePermission | hasPermission) && 'pencil'\"\r\n                            >\r\n                                <span class=\"option-group-name\">{{ optionGroupName(option.groupId) }}</span>\r\n                                {{ optionName(option) }}\r\n                            </vdr-chip>\r\n                            <a [routerLink]=\"['./', 'options']\" class=\"btn btn-link btn-sm\"\r\n                                >{{ 'catalog.edit-options' | translate }}...</a\r\n                            >\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex-spacer\"></div>\r\n                    <div class=\"facets\">\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of existingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of pendingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <button\r\n                            *vdrIfPermissions=\"updatePermission\"\r\n                            class=\"btn btn-sm btn-secondary\"\r\n                            (click)=\"selectFacetValueClick.emit([variant.id])\"\r\n                        >\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            {{ 'catalog.add-facets' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *vdrIfMultichannel>\r\n                <div class=\"card-block\" *vdrIfDefaultChannelActive>\r\n                    <div class=\"flex channel-assignment\">\r\n                        <ng-container *ngFor=\"let channel of variant.channels\">\r\n                            <vdr-chip\r\n                                *ngIf=\"!isDefaultChannel(channel.code)\"\r\n                                icon=\"times-circle\"\r\n                                [title]=\"'catalog.remove-from-channel' | translate\"\r\n                                (iconClick)=\"\r\n                                    removeFromChannel.emit({ channelId: channel.id, variant: variant })\r\n                                \"\r\n                            >\r\n                                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                {{ channel.code | channelCodeToLabel }}\r\n                            </vdr-chip>\r\n                        </ng-container>\r\n                        <button class=\"btn btn-sm\" (click)=\"assignToChannel.emit(variant)\">\r\n                            <clr-icon shape=\"layers\"></clr-icon>\r\n                            {{ 'catalog.assign-to-channel' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".with-selected{display:flex;min-height:52px;align-items:center;border:1px solid var(--color-component-border-100);border-radius:3px;padding:6px 18px}.with-selected vdr-select-toggle{margin-right:12px}.with-selected>label{margin-right:12px}.variant-container{transition:background-color .2s;min-height:330px}.variant-container.disabled{background-color:var(--color-component-bg-200)}.variant-container .header-row{display:flex;align-items:center;flex-wrap:wrap}.variant-container .variant-body{display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-body{flex-direction:row}}.variant-container .details{display:flex;flex-direction:column;flex:1;margin-right:12px}@media screen and (min-width: 768px){.variant-container .details{flex-direction:row;height:36px}}.variant-container .details .name{flex:1}.variant-container .details .name ::ng-deep .clr-control-container{width:100%}.variant-container .details .name ::ng-deep .clr-control-container input.clr-input{min-width:100%}.variant-container .details .sku{width:160px;margin-right:20px;flex:0}.variant-container .details ::ng-deep .name input{min-width:300px}.variant-container .right-controls{display:flex}.variant-container .tax-category-label{margin-top:3px}.variant-container .variant-form-inputs{flex:1;display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-form-inputs{flex-direction:row}}.variant-container .variant-form-input-row{display:flex;flex-wrap:wrap}@media screen and (min-width: 768px){.variant-container .variant-form-input-row{margin:0 6px 8px 24px}}.variant-container .variant-form-input-row>*{margin-right:24px;margin-bottom:24px}.variant-container .track-inventory-toggle{margin-top:22px}.variant-container .clr-form-control{margin-top:0}.variant-container .facets{display:flex;flex-wrap:wrap;align-items:center}.variant-container .pricing{display:flex}.variant-container .pricing>div{margin-right:12px}.variant-container .option-group-name{color:var(--color-text-200);text-transform:uppercase;font-size:10px;margin-right:3px;height:11px}.variant-container .options-facets{display:flex;color:var(--color-grey-400)}.variant-container ::ng-deep .clr-control-container{width:100%}.channel-assignment{justify-content:flex-end}.channel-assignment .btn{margin:6px 12px 6px 0}.out-of-stock-threshold-wrapper{display:flex;flex-direction:column}.out-of-stock-threshold-wrapper clr-toggle-wrapper{margin-left:24px}.inventory-untracked{opacity:.5}\n"], components: [{ type: i1$1.TitleInputComponent, selector: "vdr-title-input", inputs: ["readonly"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { type: i2.ClrSelectContainer, selector: "clr-select-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { type: i1$1.HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: i1$1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.ClrSelect, selector: "[clrSelect]" }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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: i1$1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }], pipes: { "paginate": i4$1.PaginatePipe, "hasPermission": i1$1.HasPermissionPipe, "translate": i5$1.TranslatePipe, "sort": i1$1.SortPipe, "channelCodeToLabel": i1$1.ChannelLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProductVariantsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantsListComponent, selector: "vdr-product-variants-list", inputs: { formArray: ["productVariantsFormArray", "formArray"], variants: "variants", paginationConfig: "paginationConfig", channelPriceIncludesTax: "channelPriceIncludesTax", taxCategories: "taxCategories", facets: "facets", optionGroups: "optionGroups", customFields: "customFields", customOptionFields: "customOptionFields", activeLanguage: "activeLanguage", pendingAssetChanges: "pendingAssetChanges" }, outputs: { assignToChannel: "assignToChannel", removeFromChannel: "removeFromChannel", assetChange: "assetChange", selectionChange: "selectionChange", selectFacetValueClick: "selectFacetValueClick", updateProductOption: "updateProductOption" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"variants-list\">\r\n    <div\r\n        class=\"variant-container card\"\r\n        *ngFor=\"\r\n            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };\r\n            trackBy: trackById;\r\n            let i = index\r\n        \"\r\n        [class.disabled]=\"!formGroupMap.get(variant.id)?.get('enabled')?.value\"\r\n    >\r\n        <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n            <div class=\"card-block header-row\">\r\n                <div class=\"details\">\r\n                    <vdr-title-input class=\"sku\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"sku\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'catalog.sku' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                    <vdr-title-input class=\"name\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'common.name' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                </div>\r\n                <div class=\"right-controls\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermission\">\r\n                        <input type=\"checkbox\" clrToggle name=\"enabled\" formControlName=\"enabled\" />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"variant-body\">\r\n                    <div class=\"assets\">\r\n                        <vdr-assets\r\n                            [compact]=\"true\"\r\n                            [assets]=\"pendingAssetChanges[variant.id]?.assets || variant.assets\"\r\n                            [featuredAsset]=\"\r\n                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset\r\n                            \"\r\n                            [updatePermissions]=\"updatePermission\"\r\n                            (change)=\"onAssetChange(variant.id, $event)\"\r\n                        ></vdr-assets>\r\n                    </div>\r\n                    <div class=\"variant-form-inputs\">\r\n                        <div class=\"standard-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div class=\"tax-category\">\r\n                                    <clr-select-container\r\n                                        *vdrIfPermissions=\"updatePermission; else taxCategoryLabel\"\r\n                                    >\r\n                                        <label>{{ 'catalog.tax-category' | translate }}</label>\r\n                                        <select clrSelect name=\"options\" formControlName=\"taxCategoryId\">\r\n                                            <option\r\n                                                *ngFor=\"let taxCategory of taxCategories\"\r\n                                                [value]=\"taxCategory.id\"\r\n                                            >\r\n                                                {{ taxCategory.name }}\r\n                                            </option>\r\n                                        </select>\r\n                                    </clr-select-container>\r\n                                    <ng-template #taxCategoryLabel>\r\n                                        <label class=\"clr-control-label\">{{\r\n                                            'catalog.tax-category' | translate\r\n                                        }}</label>\r\n                                        <div class=\"tax-category-label\">\r\n                                            {{ getTaxCategoryName(formGroup) }}\r\n                                        </div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"price\">\r\n                                    <clr-input-container>\r\n                                        <label>{{ 'catalog.price' | translate }}</label>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"!channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"price\"\r\n                                        ></vdr-currency-input>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"priceWithTax\"\r\n                                        ></vdr-currency-input>\r\n                                    </clr-input-container>\r\n                                </div>\r\n                                <vdr-variant-price-detail\r\n                                    [price]=\"formGroup.get('price')!.value\"\r\n                                    [currencyCode]=\"variant.currencyCode\"\r\n                                    [priceIncludesTax]=\"channelPriceIncludesTax\"\r\n                                    [taxCategoryId]=\"formGroup.get('taxCategoryId')!.value\"\r\n                                ></vdr-variant-price-detail>\r\n                            </div>\r\n                            <div class=\"variant-form-input-row\">\r\n                                <clr-select-container *vdrIfPermissions=\"updatePermission\">\r\n                                    <label\r\n                                        >{{ 'catalog.track-inventory' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip>\r\n                                    </label>\r\n                                    <select clrSelect name=\"options\" formControlName=\"trackInventory\">\r\n                                        <option [value]=\"GlobalFlag.TRUE\">\r\n                                            {{ 'catalog.track-inventory-true' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.FALSE\">\r\n                                            {{ 'catalog.track-inventory-false' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.INHERIT\">\r\n                                            {{ 'catalog.track-inventory-inherit' | translate }}\r\n                                        </option>\r\n                                    </select>\r\n                                </clr-select-container>\r\n                                <clr-input-container>\r\n                                    <label\r\n                                        >{{ 'catalog.stock-on-hand' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-on-hand-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <input\r\n                                        [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                        clrInput\r\n                                        type=\"number\"\r\n                                        [min]=\"getStockOnHandMinValue(formGroup)\"\r\n                                        step=\"1\"\r\n                                        formControlName=\"stockOnHand\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        [vdrDisabled]=\"inventoryIsNotTracked(formGroup)\"\r\n                                    />\r\n                                </clr-input-container>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-allocated' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-allocated-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ variant.stockAllocated }}\r\n                                    </div>\r\n                                </div>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-saleable' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-saleable-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ getSaleableStockLevel(variant) }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div\r\n                                    class=\"out-of-stock-threshold-wrapper\"\r\n                                    [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                >\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.out-of-stock-threshold' | translate\r\n                                        }}<vdr-help-tooltip\r\n                                            [content]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"flex\">\r\n                                        <clr-input-container>\r\n                                            <input\r\n                                                clrInput\r\n                                                type=\"number\"\r\n                                                [formControl]=\"formGroup.get('outOfStockThreshold')\"\r\n                                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                                [vdrDisabled]=\"\r\n                                                    formGroup.get('useGlobalOutOfStockThreshold')?.value !==\r\n                                                        false || inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                        </clr-input-container>\r\n                                        <clr-toggle-wrapper>\r\n                                            <input\r\n                                                type=\"checkbox\"\r\n                                                clrToggle\r\n                                                name=\"useGlobalOutOfStockThreshold\"\r\n                                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                                [vdrDisabled]=\"\r\n                                                    !(updatePermission | hasPermission) ||\r\n                                                    inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                            <label\r\n                                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                                    globalOutOfStockThreshold\r\n                                                }})</label\r\n                                            >\r\n                                        </clr-toggle-wrapper>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"custom-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"ProductVariant\"\r\n                                        [customFields]=\"customFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"formGroup.get('customFields')\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </section>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"options-facets\">\r\n                    <vdr-entity-info [entity]=\"variant\"></vdr-entity-info>\r\n                    <div *ngIf=\"variant.options.length\">\r\n                        <div class=\"options\">\r\n                            <vdr-chip\r\n                                *ngFor=\"let option of variant.options | sort: 'groupId'\"\r\n                                [colorFrom]=\"optionGroupName(option.groupId)\"\r\n                                [invert]=\"true\"\r\n                                (iconClick)=\"editOption(option)\"\r\n                                [icon]=\"(updatePermission | hasPermission) && 'pencil'\"\r\n                            >\r\n                                <span class=\"option-group-name\">{{ optionGroupName(option.groupId) }}</span>\r\n                                {{ optionName(option) }}\r\n                            </vdr-chip>\r\n                            <a [routerLink]=\"['./', 'options']\" class=\"btn btn-link btn-sm\"\r\n                                >{{ 'catalog.edit-options' | translate }}...</a\r\n                            >\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex-spacer\"></div>\r\n                    <div class=\"facets\">\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of existingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of pendingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <button\r\n                            *vdrIfPermissions=\"updatePermission\"\r\n                            class=\"btn btn-sm btn-secondary\"\r\n                            (click)=\"selectFacetValueClick.emit([variant.id])\"\r\n                        >\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            {{ 'catalog.add-facets' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *vdrIfMultichannel>\r\n                <div class=\"card-block\" *vdrIfDefaultChannelActive>\r\n                    <div class=\"flex channel-assignment\">\r\n                        <ng-container *ngFor=\"let channel of variant.channels\">\r\n                            <vdr-chip\r\n                                *ngIf=\"!isDefaultChannel(channel.code)\"\r\n                                icon=\"times-circle\"\r\n                                [title]=\"'catalog.remove-from-channel' | translate\"\r\n                                (iconClick)=\"\r\n                                    removeFromChannel.emit({ channelId: channel.id, variant: variant })\r\n                                \"\r\n                            >\r\n                                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                {{ channel.code | channelCodeToLabel }}\r\n                            </vdr-chip>\r\n                        </ng-container>\r\n                        <button class=\"btn btn-sm\" (click)=\"assignToChannel.emit(variant)\">\r\n                            <clr-icon shape=\"layers\"></clr-icon>\r\n                            {{ 'catalog.assign-to-channel' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".with-selected{display:flex;min-height:52px;align-items:center;border:1px solid var(--color-component-border-100);border-radius:3px;padding:6px 18px}.with-selected vdr-select-toggle{margin-right:12px}.with-selected>label{margin-right:12px}.variant-container{transition:background-color .2s;min-height:330px}.variant-container.disabled{background-color:var(--color-component-bg-200)}.variant-container .header-row{display:flex;align-items:center;flex-wrap:wrap}.variant-container .variant-body{display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-body{flex-direction:row}}.variant-container .details{display:flex;flex-direction:column;flex:1;margin-right:12px}@media screen and (min-width: 768px){.variant-container .details{flex-direction:row;height:36px}}.variant-container .details .name{flex:1}.variant-container .details .name ::ng-deep .clr-control-container{width:100%}.variant-container .details .name ::ng-deep .clr-control-container input.clr-input{min-width:100%}.variant-container .details .sku{width:160px;margin-right:20px;flex:0}.variant-container .details ::ng-deep .name input{min-width:300px}.variant-container .right-controls{display:flex}.variant-container .tax-category-label{margin-top:3px}.variant-container .variant-form-inputs{flex:1;display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-form-inputs{flex-direction:row}}.variant-container .variant-form-input-row{display:flex;flex-wrap:wrap}@media screen and (min-width: 768px){.variant-container .variant-form-input-row{margin:0 6px 8px 24px}}.variant-container .variant-form-input-row>*{margin-right:24px;margin-bottom:24px}.variant-container .track-inventory-toggle{margin-top:22px}.variant-container .clr-form-control{margin-top:0}.variant-container .facets{display:flex;flex-wrap:wrap;align-items:center}.variant-container .pricing{display:flex}.variant-container .pricing>div{margin-right:12px}.variant-container .option-group-name{color:var(--color-text-200);text-transform:uppercase;font-size:10px;margin-right:3px;height:11px}.variant-container .options-facets{display:flex;color:var(--color-grey-400)}.variant-container ::ng-deep .clr-control-container{width:100%}.channel-assignment{justify-content:flex-end}.channel-assignment .btn{margin:6px 12px 6px 0}.out-of-stock-threshold-wrapper{display:flex;flex-direction:column}.out-of-stock-threshold-wrapper clr-toggle-wrapper{margin-left:24px}.inventory-untracked{opacity:.5}\n"], components: [{ type: i1$1.TitleInputComponent, selector: "vdr-title-input", inputs: ["readonly"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { type: i2.ClrSelectContainer, selector: "clr-select-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { type: i1$1.HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: i1$1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.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.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.ClrSelect, selector: "[clrSelect]" }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1$1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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: i1$1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }], pipes: { "paginate": i4$1.PaginatePipe, "hasPermission": i1$1.HasPermissionPipe, "translate": i5$1.TranslatePipe, "sort": i1$1.SortPipe, "channelCodeToLabel": i1$1.ChannelLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-variants-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"variants-list\">\r\n    <div\r\n        class=\"variant-container card\"\r\n        *ngFor=\"\r\n            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };\r\n            trackBy: trackById;\r\n            let i = index\r\n        \"\r\n        [class.disabled]=\"!formGroupMap.get(variant.id)?.get('enabled')?.value\"\r\n    >\r\n        <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n            <div class=\"card-block header-row\">\r\n                <div class=\"details\">\r\n                    <vdr-title-input class=\"sku\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"sku\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'catalog.sku' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                    <vdr-title-input class=\"name\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'common.name' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                </div>\r\n                <div class=\"right-controls\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermission\">\r\n                        <input type=\"checkbox\" clrToggle name=\"enabled\" formControlName=\"enabled\" />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"variant-body\">\r\n                    <div class=\"assets\">\r\n                        <vdr-assets\r\n                            [compact]=\"true\"\r\n                            [assets]=\"pendingAssetChanges[variant.id]?.assets || variant.assets\"\r\n                            [featuredAsset]=\"\r\n                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset\r\n                            \"\r\n                            [updatePermissions]=\"updatePermission\"\r\n                            (change)=\"onAssetChange(variant.id, $event)\"\r\n                        ></vdr-assets>\r\n                    </div>\r\n                    <div class=\"variant-form-inputs\">\r\n                        <div class=\"standard-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div class=\"tax-category\">\r\n                                    <clr-select-container\r\n                                        *vdrIfPermissions=\"updatePermission; else taxCategoryLabel\"\r\n                                    >\r\n                                        <label>{{ 'catalog.tax-category' | translate }}</label>\r\n                                        <select clrSelect name=\"options\" formControlName=\"taxCategoryId\">\r\n                                            <option\r\n                                                *ngFor=\"let taxCategory of taxCategories\"\r\n                                                [value]=\"taxCategory.id\"\r\n                                            >\r\n                                                {{ taxCategory.name }}\r\n                                            </option>\r\n                                        </select>\r\n                                    </clr-select-container>\r\n                                    <ng-template #taxCategoryLabel>\r\n                                        <label class=\"clr-control-label\">{{\r\n                                            'catalog.tax-category' | translate\r\n                                        }}</label>\r\n                                        <div class=\"tax-category-label\">\r\n                                            {{ getTaxCategoryName(formGroup) }}\r\n                                        </div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"price\">\r\n                                    <clr-input-container>\r\n                                        <label>{{ 'catalog.price' | translate }}</label>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"!channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"price\"\r\n                                        ></vdr-currency-input>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"priceWithTax\"\r\n                                        ></vdr-currency-input>\r\n                                    </clr-input-container>\r\n                                </div>\r\n                                <vdr-variant-price-detail\r\n                                    [price]=\"formGroup.get('price')!.value\"\r\n                                    [currencyCode]=\"variant.currencyCode\"\r\n                                    [priceIncludesTax]=\"channelPriceIncludesTax\"\r\n                                    [taxCategoryId]=\"formGroup.get('taxCategoryId')!.value\"\r\n                                ></vdr-variant-price-detail>\r\n                            </div>\r\n                            <div class=\"variant-form-input-row\">\r\n                                <clr-select-container *vdrIfPermissions=\"updatePermission\">\r\n                                    <label\r\n                                        >{{ 'catalog.track-inventory' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip>\r\n                                    </label>\r\n                                    <select clrSelect name=\"options\" formControlName=\"trackInventory\">\r\n                                        <option [value]=\"GlobalFlag.TRUE\">\r\n                                            {{ 'catalog.track-inventory-true' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.FALSE\">\r\n                                            {{ 'catalog.track-inventory-false' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.INHERIT\">\r\n                                            {{ 'catalog.track-inventory-inherit' | translate }}\r\n                                        </option>\r\n                                    </select>\r\n                                </clr-select-container>\r\n                                <clr-input-container>\r\n                                    <label\r\n                                        >{{ 'catalog.stock-on-hand' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-on-hand-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <input\r\n                                        [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                        clrInput\r\n                                        type=\"number\"\r\n                                        min=\"0\"\r\n                                        step=\"1\"\r\n                                        formControlName=\"stockOnHand\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        [vdrDisabled]=\"inventoryIsNotTracked(formGroup)\"\r\n                                    />\r\n                                </clr-input-container>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-allocated' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-allocated-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ variant.stockAllocated }}\r\n                                    </div>\r\n                                </div>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-saleable' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-saleable-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ getSaleableStockLevel(variant) }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div\r\n                                    class=\"out-of-stock-threshold-wrapper\"\r\n                                    [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                >\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.out-of-stock-threshold' | translate\r\n                                        }}<vdr-help-tooltip\r\n                                            [content]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"flex\">\r\n                                        <clr-input-container>\r\n                                            <input\r\n                                                clrInput\r\n                                                type=\"number\"\r\n                                                [formControl]=\"formGroup.get('outOfStockThreshold')\"\r\n                                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                                [vdrDisabled]=\"\r\n                                                    formGroup.get('useGlobalOutOfStockThreshold')?.value !==\r\n                                                        false || inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                        </clr-input-container>\r\n                                        <clr-toggle-wrapper>\r\n                                            <input\r\n                                                type=\"checkbox\"\r\n                                                clrToggle\r\n                                                name=\"useGlobalOutOfStockThreshold\"\r\n                                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                                [vdrDisabled]=\"\r\n                                                    !(updatePermission | hasPermission) ||\r\n                                                    inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                            <label\r\n                                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                                    globalOutOfStockThreshold\r\n                                                }})</label\r\n                                            >\r\n                                        </clr-toggle-wrapper>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"custom-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"ProductVariant\"\r\n                                        [customFields]=\"customFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"formGroup.get('customFields')\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </section>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"options-facets\">\r\n                    <vdr-entity-info [entity]=\"variant\"></vdr-entity-info>\r\n                    <div *ngIf=\"variant.options.length\">\r\n                        <div class=\"options\">\r\n                            <vdr-chip\r\n                                *ngFor=\"let option of variant.options | sort: 'groupId'\"\r\n                                [colorFrom]=\"optionGroupName(option.groupId)\"\r\n                                [invert]=\"true\"\r\n                                (iconClick)=\"editOption(option)\"\r\n                                [icon]=\"(updatePermission | hasPermission) && 'pencil'\"\r\n                            >\r\n                                <span class=\"option-group-name\">{{ optionGroupName(option.groupId) }}</span>\r\n                                {{ optionName(option) }}\r\n                            </vdr-chip>\r\n                            <a [routerLink]=\"['./', 'options']\" class=\"btn btn-link btn-sm\"\r\n                                >{{ 'catalog.edit-options' | translate }}...</a\r\n                            >\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex-spacer\"></div>\r\n                    <div class=\"facets\">\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of existingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of pendingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <button\r\n                            *vdrIfPermissions=\"updatePermission\"\r\n                            class=\"btn btn-sm btn-secondary\"\r\n                            (click)=\"selectFacetValueClick.emit([variant.id])\"\r\n                        >\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            {{ 'catalog.add-facets' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *vdrIfMultichannel>\r\n                <div class=\"card-block\" *vdrIfDefaultChannelActive>\r\n                    <div class=\"flex channel-assignment\">\r\n                        <ng-container *ngFor=\"let channel of variant.channels\">\r\n                            <vdr-chip\r\n                                *ngIf=\"!isDefaultChannel(channel.code)\"\r\n                                icon=\"times-circle\"\r\n                                [title]=\"'catalog.remove-from-channel' | translate\"\r\n                                (iconClick)=\"\r\n                                    removeFromChannel.emit({ channelId: channel.id, variant: variant })\r\n                                \"\r\n                            >\r\n                                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                {{ channel.code | channelCodeToLabel }}\r\n                            </vdr-chip>\r\n                        </ng-container>\r\n                        <button class=\"btn btn-sm\" (click)=\"assignToChannel.emit(variant)\">\r\n                            <clr-icon shape=\"layers\"></clr-icon>\r\n                            {{ 'catalog.assign-to-channel' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".with-selected{display:flex;min-height:52px;align-items:center;border:1px solid var(--color-component-border-100);border-radius:3px;padding:6px 18px}.with-selected vdr-select-toggle{margin-right:12px}.with-selected>label{margin-right:12px}.variant-container{transition:background-color .2s;min-height:330px}.variant-container.disabled{background-color:var(--color-component-bg-200)}.variant-container .header-row{display:flex;align-items:center;flex-wrap:wrap}.variant-container .variant-body{display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-body{flex-direction:row}}.variant-container .details{display:flex;flex-direction:column;flex:1;margin-right:12px}@media screen and (min-width: 768px){.variant-container .details{flex-direction:row;height:36px}}.variant-container .details .name{flex:1}.variant-container .details .name ::ng-deep .clr-control-container{width:100%}.variant-container .details .name ::ng-deep .clr-control-container input.clr-input{min-width:100%}.variant-container .details .sku{width:160px;margin-right:20px;flex:0}.variant-container .details ::ng-deep .name input{min-width:300px}.variant-container .right-controls{display:flex}.variant-container .tax-category-label{margin-top:3px}.variant-container .variant-form-inputs{flex:1;display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-form-inputs{flex-direction:row}}.variant-container .variant-form-input-row{display:flex;flex-wrap:wrap}@media screen and (min-width: 768px){.variant-container .variant-form-input-row{margin:0 6px 8px 24px}}.variant-container .variant-form-input-row>*{margin-right:24px;margin-bottom:24px}.variant-container .track-inventory-toggle{margin-top:22px}.variant-container .clr-form-control{margin-top:0}.variant-container .facets{display:flex;flex-wrap:wrap;align-items:center}.variant-container .pricing{display:flex}.variant-container .pricing>div{margin-right:12px}.variant-container .option-group-name{color:var(--color-text-200);text-transform:uppercase;font-size:10px;margin-right:3px;height:11px}.variant-container .options-facets{display:flex;color:var(--color-grey-400)}.variant-container ::ng-deep .clr-control-container{width:100%}.channel-assignment{justify-content:flex-end}.channel-assignment .btn{margin:6px 12px 6px 0}.out-of-stock-threshold-wrapper{display:flex;flex-direction:column}.out-of-stock-threshold-wrapper clr-toggle-wrapper{margin-left:24px}.inventory-untracked{opacity:.5}\n"] }]
+            args: [{ selector: 'vdr-product-variants-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"variants-list\">\r\n    <div\r\n        class=\"variant-container card\"\r\n        *ngFor=\"\r\n            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };\r\n            trackBy: trackById;\r\n            let i = index\r\n        \"\r\n        [class.disabled]=\"!formGroupMap.get(variant.id)?.get('enabled')?.value\"\r\n    >\r\n        <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n            <div class=\"card-block header-row\">\r\n                <div class=\"details\">\r\n                    <vdr-title-input class=\"sku\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"sku\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'catalog.sku' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                    <vdr-title-input class=\"name\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'common.name' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                </div>\r\n                <div class=\"right-controls\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermission\">\r\n                        <input type=\"checkbox\" clrToggle name=\"enabled\" formControlName=\"enabled\" />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"variant-body\">\r\n                    <div class=\"assets\">\r\n                        <vdr-assets\r\n                            [compact]=\"true\"\r\n                            [assets]=\"pendingAssetChanges[variant.id]?.assets || variant.assets\"\r\n                            [featuredAsset]=\"\r\n                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset\r\n                            \"\r\n                            [updatePermissions]=\"updatePermission\"\r\n                            (change)=\"onAssetChange(variant.id, $event)\"\r\n                        ></vdr-assets>\r\n                    </div>\r\n                    <div class=\"variant-form-inputs\">\r\n                        <div class=\"standard-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div class=\"tax-category\">\r\n                                    <clr-select-container\r\n                                        *vdrIfPermissions=\"updatePermission; else taxCategoryLabel\"\r\n                                    >\r\n                                        <label>{{ 'catalog.tax-category' | translate }}</label>\r\n                                        <select clrSelect name=\"options\" formControlName=\"taxCategoryId\">\r\n                                            <option\r\n                                                *ngFor=\"let taxCategory of taxCategories\"\r\n                                                [value]=\"taxCategory.id\"\r\n                                            >\r\n                                                {{ taxCategory.name }}\r\n                                            </option>\r\n                                        </select>\r\n                                    </clr-select-container>\r\n                                    <ng-template #taxCategoryLabel>\r\n                                        <label class=\"clr-control-label\">{{\r\n                                            'catalog.tax-category' | translate\r\n                                        }}</label>\r\n                                        <div class=\"tax-category-label\">\r\n                                            {{ getTaxCategoryName(formGroup) }}\r\n                                        </div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"price\">\r\n                                    <clr-input-container>\r\n                                        <label>{{ 'catalog.price' | translate }}</label>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"!channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"price\"\r\n                                        ></vdr-currency-input>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"priceWithTax\"\r\n                                        ></vdr-currency-input>\r\n                                    </clr-input-container>\r\n                                </div>\r\n                                <vdr-variant-price-detail\r\n                                    [price]=\"formGroup.get('price')!.value\"\r\n                                    [currencyCode]=\"variant.currencyCode\"\r\n                                    [priceIncludesTax]=\"channelPriceIncludesTax\"\r\n                                    [taxCategoryId]=\"formGroup.get('taxCategoryId')!.value\"\r\n                                ></vdr-variant-price-detail>\r\n                            </div>\r\n                            <div class=\"variant-form-input-row\">\r\n                                <clr-select-container *vdrIfPermissions=\"updatePermission\">\r\n                                    <label\r\n                                        >{{ 'catalog.track-inventory' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip>\r\n                                    </label>\r\n                                    <select clrSelect name=\"options\" formControlName=\"trackInventory\">\r\n                                        <option [value]=\"GlobalFlag.TRUE\">\r\n                                            {{ 'catalog.track-inventory-true' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.FALSE\">\r\n                                            {{ 'catalog.track-inventory-false' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.INHERIT\">\r\n                                            {{ 'catalog.track-inventory-inherit' | translate }}\r\n                                        </option>\r\n                                    </select>\r\n                                </clr-select-container>\r\n                                <clr-input-container>\r\n                                    <label\r\n                                        >{{ 'catalog.stock-on-hand' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-on-hand-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <input\r\n                                        [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                        clrInput\r\n                                        type=\"number\"\r\n                                        [min]=\"getStockOnHandMinValue(formGroup)\"\r\n                                        step=\"1\"\r\n                                        formControlName=\"stockOnHand\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        [vdrDisabled]=\"inventoryIsNotTracked(formGroup)\"\r\n                                    />\r\n                                </clr-input-container>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-allocated' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-allocated-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ variant.stockAllocated }}\r\n                                    </div>\r\n                                </div>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-saleable' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-saleable-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ getSaleableStockLevel(variant) }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div\r\n                                    class=\"out-of-stock-threshold-wrapper\"\r\n                                    [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                >\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.out-of-stock-threshold' | translate\r\n                                        }}<vdr-help-tooltip\r\n                                            [content]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"flex\">\r\n                                        <clr-input-container>\r\n                                            <input\r\n                                                clrInput\r\n                                                type=\"number\"\r\n                                                [formControl]=\"formGroup.get('outOfStockThreshold')\"\r\n                                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                                [vdrDisabled]=\"\r\n                                                    formGroup.get('useGlobalOutOfStockThreshold')?.value !==\r\n                                                        false || inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                        </clr-input-container>\r\n                                        <clr-toggle-wrapper>\r\n                                            <input\r\n                                                type=\"checkbox\"\r\n                                                clrToggle\r\n                                                name=\"useGlobalOutOfStockThreshold\"\r\n                                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                                [vdrDisabled]=\"\r\n                                                    !(updatePermission | hasPermission) ||\r\n                                                    inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                            <label\r\n                                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                                    globalOutOfStockThreshold\r\n                                                }})</label\r\n                                            >\r\n                                        </clr-toggle-wrapper>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"custom-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"ProductVariant\"\r\n                                        [customFields]=\"customFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"formGroup.get('customFields')\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </section>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"options-facets\">\r\n                    <vdr-entity-info [entity]=\"variant\"></vdr-entity-info>\r\n                    <div *ngIf=\"variant.options.length\">\r\n                        <div class=\"options\">\r\n                            <vdr-chip\r\n                                *ngFor=\"let option of variant.options | sort: 'groupId'\"\r\n                                [colorFrom]=\"optionGroupName(option.groupId)\"\r\n                                [invert]=\"true\"\r\n                                (iconClick)=\"editOption(option)\"\r\n                                [icon]=\"(updatePermission | hasPermission) && 'pencil'\"\r\n                            >\r\n                                <span class=\"option-group-name\">{{ optionGroupName(option.groupId) }}</span>\r\n                                {{ optionName(option) }}\r\n                            </vdr-chip>\r\n                            <a [routerLink]=\"['./', 'options']\" class=\"btn btn-link btn-sm\"\r\n                                >{{ 'catalog.edit-options' | translate }}...</a\r\n                            >\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex-spacer\"></div>\r\n                    <div class=\"facets\">\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of existingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of pendingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <button\r\n                            *vdrIfPermissions=\"updatePermission\"\r\n                            class=\"btn btn-sm btn-secondary\"\r\n                            (click)=\"selectFacetValueClick.emit([variant.id])\"\r\n                        >\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            {{ 'catalog.add-facets' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *vdrIfMultichannel>\r\n                <div class=\"card-block\" *vdrIfDefaultChannelActive>\r\n                    <div class=\"flex channel-assignment\">\r\n                        <ng-container *ngFor=\"let channel of variant.channels\">\r\n                            <vdr-chip\r\n                                *ngIf=\"!isDefaultChannel(channel.code)\"\r\n                                icon=\"times-circle\"\r\n                                [title]=\"'catalog.remove-from-channel' | translate\"\r\n                                (iconClick)=\"\r\n                                    removeFromChannel.emit({ channelId: channel.id, variant: variant })\r\n                                \"\r\n                            >\r\n                                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                {{ channel.code | channelCodeToLabel }}\r\n                            </vdr-chip>\r\n                        </ng-container>\r\n                        <button class=\"btn btn-sm\" (click)=\"assignToChannel.emit(variant)\">\r\n                            <clr-icon shape=\"layers\"></clr-icon>\r\n                            {{ 'catalog.assign-to-channel' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".with-selected{display:flex;min-height:52px;align-items:center;border:1px solid var(--color-component-border-100);border-radius:3px;padding:6px 18px}.with-selected vdr-select-toggle{margin-right:12px}.with-selected>label{margin-right:12px}.variant-container{transition:background-color .2s;min-height:330px}.variant-container.disabled{background-color:var(--color-component-bg-200)}.variant-container .header-row{display:flex;align-items:center;flex-wrap:wrap}.variant-container .variant-body{display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-body{flex-direction:row}}.variant-container .details{display:flex;flex-direction:column;flex:1;margin-right:12px}@media screen and (min-width: 768px){.variant-container .details{flex-direction:row;height:36px}}.variant-container .details .name{flex:1}.variant-container .details .name ::ng-deep .clr-control-container{width:100%}.variant-container .details .name ::ng-deep .clr-control-container input.clr-input{min-width:100%}.variant-container .details .sku{width:160px;margin-right:20px;flex:0}.variant-container .details ::ng-deep .name input{min-width:300px}.variant-container .right-controls{display:flex}.variant-container .tax-category-label{margin-top:3px}.variant-container .variant-form-inputs{flex:1;display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-form-inputs{flex-direction:row}}.variant-container .variant-form-input-row{display:flex;flex-wrap:wrap}@media screen and (min-width: 768px){.variant-container .variant-form-input-row{margin:0 6px 8px 24px}}.variant-container .variant-form-input-row>*{margin-right:24px;margin-bottom:24px}.variant-container .track-inventory-toggle{margin-top:22px}.variant-container .clr-form-control{margin-top:0}.variant-container .facets{display:flex;flex-wrap:wrap;align-items:center}.variant-container .pricing{display:flex}.variant-container .pricing>div{margin-right:12px}.variant-container .option-group-name{color:var(--color-text-200);text-transform:uppercase;font-size:10px;margin-right:3px;height:11px}.variant-container .options-facets{display:flex;color:var(--color-grey-400)}.variant-container ::ng-deep .clr-control-container{width:100%}.channel-assignment{justify-content:flex-end}.channel-assignment .btn{margin:6px 12px 6px 0}.out-of-stock-threshold-wrapper{display:flex;flex-direction:column}.out-of-stock-threshold-wrapper clr-toggle-wrapper{margin-left:24px}.inventory-untracked{opacity:.5}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.ModalService }, { type: i1$1.DataService }]; }, propDecorators: { formArray: [{
                 type: Input,
                 args: ['productVariantsFormArray']