@vendure/admin-ui 1.5.2 → 1.6.2

package/bundles/vendure-admin-ui-catalog.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router'), require('@vendure/admin-ui/core'), require('@biesbjerg/ngx-translate-extract-marker'), require('rxjs/operators'), require('@angular/forms'), require('rxjs'), require('@vendure/common/lib/normalize-string'), require('@vendure/common/lib/shared-utils'), require('@vendure/common/lib/generated-shop-types'), require('@angular/common'), require('@vendure/common/lib/shared-constants'), require('@vendure/common/lib/unique'), require('@vendure/common/lib/pick'), require('@angular/cdk/drag-drop'), require('@ng-select/ng-select')) :
-    typeof define === 'function' && define.amd ? define('@vendure/admin-ui/catalog', ['exports', '@angular/core', '@angular/router', '@vendure/admin-ui/core', '@biesbjerg/ngx-translate-extract-marker', 'rxjs/operators', '@angular/forms', 'rxjs', '@vendure/common/lib/normalize-string', '@vendure/common/lib/shared-utils', '@vendure/common/lib/generated-shop-types', '@angular/common', '@vendure/common/lib/shared-constants', '@vendure/common/lib/unique', '@vendure/common/lib/pick', '@angular/cdk/drag-drop', '@ng-select/ng-select'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.vendure = global.vendure || {}, global.vendure['admin-ui'] = global.vendure['admin-ui'] || {}, global.vendure['admin-ui'].catalog = {}), global.ng.core, global.ng.router, global.vendure['admin-ui'].core, global.ngxTranslateExtractMarker, global.rxjs.operators, global.ng.forms, global.rxjs, global.normalizeString, global.sharedUtils, global.generatedShopTypes, global.ng.common, global.sharedConstants, global.unique, global.pick, global.ng.cdk.dragDrop, global.ngSelect));
-}(this, (function (exports, i0, i1, i2, ngxTranslateExtractMarker, operators, forms, rxjs, normalizeString, sharedUtils, generatedShopTypes, common, sharedConstants, unique, pick, dragDrop, ngSelect) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/router'), require('@vendure/admin-ui/core'), require('@biesbjerg/ngx-translate-extract-marker'), require('rxjs/operators'), require('@angular/forms'), require('rxjs'), require('@vendure/common/lib/normalize-string'), require('@vendure/common/lib/shared-utils'), require('@vendure/common/lib/generated-shop-types'), require('@angular/common'), require('@vendure/common/lib/shared-constants'), require('@vendure/common/lib/unique'), require('@vendure/common/lib/pick'), require('@angular/cdk/drag-drop')) :
+    typeof define === 'function' && define.amd ? define('@vendure/admin-ui/catalog', ['exports', '@angular/core', '@angular/router', '@vendure/admin-ui/core', '@biesbjerg/ngx-translate-extract-marker', 'rxjs/operators', '@angular/forms', 'rxjs', '@vendure/common/lib/normalize-string', '@vendure/common/lib/shared-utils', '@vendure/common/lib/generated-shop-types', '@angular/common', '@vendure/common/lib/shared-constants', '@vendure/common/lib/unique', '@vendure/common/lib/pick', '@angular/cdk/drag-drop'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.vendure = global.vendure || {}, global.vendure['admin-ui'] = global.vendure['admin-ui'] || {}, global.vendure['admin-ui'].catalog = {}), global.ng.core, global.ng.router, global.vendure['admin-ui'].core, global.ngxTranslateExtractMarker, global.rxjs.operators, global.ng.forms, global.rxjs, global.normalizeString, global.sharedUtils, global.generatedShopTypes, global.ng.common, global.sharedConstants, global.unique, global.pick, global.ng.cdk.dragDrop));
+}(this, (function (exports, i0, i1, i2, ngxTranslateExtractMarker, operators, forms, rxjs, normalizeString, sharedUtils, generatedShopTypes, common, sharedConstants, unique, pick, dragDrop) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -564,17 +564,22 @@
 
     var CollectionDetailComponent = /** @class */ (function (_super) {
         __extends(CollectionDetailComponent, _super);
-        function CollectionDetailComponent(router, route, serverConfigService, changeDetector, dataService, formBuilder, notificationService, modalService) {
-            var _this = _super.call(this, route, router, serverConfigService, dataService) || this;
+        function CollectionDetailComponent(router, route, serverConfigService, changeDetector, dataService, formBuilder, notificationService, modalService, localStorageService) {
+            var _this = this;
+            var _a;
+            _this = _super.call(this, route, router, serverConfigService, dataService) || this;
             _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 = [i2.Permission.UpdateCatalog, i2.Permission.UpdateCollection];
+            _this.filterRemoved$ = new rxjs.Subject();
             _this.customFields = _this.getCustomFieldConfig('Collection');
             _this.detailForm = _this.formBuilder.group({
                 name: ['', forms.Validators.required],
@@ -587,6 +592,7 @@
                     return (Object.assign(Object.assign({}, hash), (_c = {}, _c[field.name] = '', _c)));
                 }, {})),
             });
+            _this.livePreview = (_a = _this.localStorageService.get('livePreviewCollectionContents')) !== null && _a !== void 0 ? _a : false;
             return _this;
         }
         CollectionDetailComponent.prototype.ngOnInit = function () {
@@ -595,12 +601,42 @@
             this.dataService.collection.getCollectionFilters().single$.subscribe(function (res) {
                 _this.allFilters = res.collectionFilters;
             });
+            var filtersFormArray = this.detailForm.get('filters');
+            this.updatedFilters$ = rxjs.merge(filtersFormArray.statusChanges, this.filterRemoved$).pipe(operators.debounceTime(200), operators.filter(function () { return filtersFormArray.touched; }), operators.map(function () { return _this.mapOperationsToInputs(_this.filters, filtersFormArray.value).filter(function (_filter) {
+                var e_1, _c;
+                try {
+                    // ensure all the arguments have valid values. E.g. a newly-added
+                    // filter will not yet have valid values
+                    for (var _d = __values(_filter.arguments), _e = _d.next(); !_e.done; _e = _d.next()) {
+                        var arg = _e.value;
+                        if (arg.value === '') {
+                            return false;
+                        }
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+                return true;
+            }); }));
+            this.parentId$ = this.route.paramMap.pipe(operators.map(function (pm) { return pm.get('parentId') || undefined; }), operators.switchMap(function (parentId) {
+                if (parentId) {
+                    return rxjs.of(parentId);
+                }
+                else {
+                    return _this.entity$.pipe(operators.map(function (collection) { var _a; return (_a = collection.parent) === null || _a === void 0 ? void 0 : _a.id; }));
+                }
+            }));
         };
         CollectionDetailComponent.prototype.ngOnDestroy = function () {
             this.destroy();
         };
-        CollectionDetailComponent.prototype.getFilterDefinition = function (filter) {
-            return this.allFilters.find(function (f) { return f.code === filter.code; });
+        CollectionDetailComponent.prototype.getFilterDefinition = function (_filter) {
+            return this.allFilters.find(function (f) { return f.code === _filter.code; });
         };
         CollectionDetailComponent.prototype.assetsChanged = function () {
             return !!Object.values(this.assetChanges).length;
@@ -624,28 +660,27 @@
         };
         CollectionDetailComponent.prototype.addFilter = function (collectionFilter) {
             var filtersArray = this.detailForm.get('filters');
-            var index = filtersArray.value.findIndex(function (o) { return o.code === collectionFilter.code; });
-            if (index === -1) {
-                var argsHash = collectionFilter.args.reduce(function (output, arg) {
-                    var _c;
-                    return (Object.assign(Object.assign({}, output), (_c = {}, _c[arg.name] = i2.getConfigArgValue(arg.value), _c)));
-                }, {});
-                filtersArray.push(this.formBuilder.control({
-                    code: collectionFilter.code,
-                    args: argsHash,
-                }));
-                this.filters.push({
-                    code: collectionFilter.code,
-                    args: collectionFilter.args.map(function (a) { return ({ name: a.name, value: i2.getConfigArgValue(a.value) }); }),
-                });
-            }
+            var argsHash = collectionFilter.args.reduce(function (output, arg) {
+                var _c;
+                return (Object.assign(Object.assign({}, output), (_c = {}, _c[arg.name] = i2.getConfigArgValue(arg.value), _c)));
+            }, {});
+            filtersArray.push(this.formBuilder.control({
+                code: collectionFilter.code,
+                args: argsHash,
+            }));
+            this.filters.push({
+                code: collectionFilter.code,
+                args: collectionFilter.args.map(function (a) { return ({ name: a.name, value: i2.getConfigArgValue(a.value) }); }),
+            });
         };
-        CollectionDetailComponent.prototype.removeFilter = function (collectionFilter) {
+        CollectionDetailComponent.prototype.removeFilter = function (index) {
             var filtersArray = this.detailForm.get('filters');
-            var index = filtersArray.value.findIndex(function (o) { return o.code === collectionFilter.code; });
             if (index !== -1) {
                 filtersArray.removeAt(index);
+                filtersArray.markAsDirty();
+                filtersArray.markAsTouched();
                 this.filters.splice(index, 1);
+                this.filterRemoved$.next();
             }
         };
         CollectionDetailComponent.prototype.create = function () {
@@ -702,6 +737,13 @@
         CollectionDetailComponent.prototype.canDeactivate = function () {
             return _super.prototype.canDeactivate.call(this) && !this.assetChanges.assets && !this.assetChanges.featuredAsset;
         };
+        CollectionDetailComponent.prototype.toggleLivePreview = function () {
+            this.livePreview = !this.livePreview;
+            this.localStorageService.set('livePreviewCollectionContents', this.livePreview);
+        };
+        CollectionDetailComponent.prototype.trackByFn = function (index, item) {
+            return JSON.stringify(item);
+        };
         /**
          * Sets the values of the form on changes to the category or current language.
          */
@@ -714,7 +756,12 @@
                 description: currentTranslation ? currentTranslation.description : '',
                 visible: !entity.isPrivate,
             });
-            entity.filters.forEach(function (f) { return _this.addFilter(f); });
+            var formArray = this.detailForm.get('filters');
+            if (formArray.length !== entity.filters.length) {
+                formArray.clear();
+                this.filters = [];
+                entity.filters.forEach(function (f) { return _this.addFilter(f); });
+            }
             if (this.customFields.length) {
                 this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), entity, currentTranslation);
             }
@@ -746,10 +793,13 @@
             return operations.map(function (o, i) {
                 return {
                     code: o.code,
-                    arguments: Object.values(formValueOperations[i].args).map(function (value, j) { return ({
-                        name: o.args[j].name,
-                        value: i2.encodeConfigArgValue(value),
-                    }); }),
+                    arguments: Object.entries(formValueOperations[i].args).map(function (_c, j) {
+                        var _d = __read(_c, 2), name = _d[0], value = _d[1];
+                        return {
+                            name: name,
+                            value: i2.encodeConfigArgValue(value),
+                        };
+                    }),
                 };
             });
         };
@@ -758,9 +808,9 @@
     CollectionDetailComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-collection-detail',
-                    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\">{{ 'catalog.public' | translate }}</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\" formArrayName=\"filters\">\r\n        <div class=\"clr-col\">\r\n            <label>{{ 'catalog.filters' | translate }}</label>\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\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",
+                    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\" formArrayName=\"filters\">\r\n        <div class=\"clr-col\">\r\n            <label>{{ 'catalog.filters' | translate }}</label>\r\n            <ng-container *ngFor=\"let filter of filters; index as i; trackBy:trackByFn\">\r\n                <vdr-configurable-input\r\n                    (remove)=\"removeFilter(i)\"\r\n                    [position]=\"i\"\r\n                    [operation]=\"filter\"\r\n                    [operationDefinition]=\"getFilterDefinition(filter)\"\r\n                    [formControlName]=\"i\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-configurable-input>\r\n            </ng-container>\r\n\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",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".visible-toggle{margin-top:-3px!important}\n"]
+                    styles: [".visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}\n"]
                 },] }
     ];
     CollectionDetailComponent.ctorParameters = function () { return [
@@ -771,7 +821,8 @@
         { type: i2.DataService },
         { type: forms.FormBuilder },
         { type: i2.NotificationService },
-        { type: i2.ModalService }
+        { type: i2.ModalService },
+        { type: i2.LocalStorageService }
     ]; };
     CollectionDetailComponent.propDecorators = {
         contentsComponent: [{ type: i0.ViewChild, args: ['collectionContents',] }]
@@ -787,15 +838,19 @@
             this.serverConfigService = serverConfigService;
             this.filterTermControl = new forms.FormControl('');
             this.expandAll = false;
+            this.expandedIds = [];
             this.destroy$ = new rxjs.Subject();
         }
         CollectionListComponent.prototype.ngOnInit = function () {
             var _this = this;
+            var _a, _b;
             this.queryResult = this.dataService.collection.getCollections(1000, 0).refetchOnChannelChange();
             this.items$ = this.queryResult.mapStream(function (data) { return data.collections.items; }).pipe(operators.shareReplay(1));
             this.activeCollectionId$ = this.route.paramMap.pipe(operators.map(function (pm) { return pm.get('contents'); }), operators.distinctUntilChanged());
-            this.activeCollectionTitle$ = rxjs.combineLatest(this.activeCollectionId$, this.items$).pipe(operators.map(function (_a) {
-                var _b = __read(_a, 2), id = _b[0], collections = _b[1];
+            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$ = rxjs.combineLatest(this.activeCollectionId$, this.items$).pipe(operators.map(function (_c) {
+                var _d = __read(_c, 2), id = _d[0], collections = _d[1];
                 if (id) {
                     var match = collections.find(function (c) { return c.id === id; });
                     return match ? match.name : '';
@@ -805,20 +860,41 @@
             this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
             this.contentLanguage$ = this.dataService.client
                 .uiState()
-                .mapStream(function (_a) {
-                var uiState = _a.uiState;
+                .mapStream(function (_c) {
+                var uiState = _c.uiState;
                 return uiState.contentLanguage;
             })
                 .pipe(operators.tap(function () { return _this.refresh(); }));
             this.filterTermControl.valueChanges
                 .pipe(operators.debounceTime(250), operators.takeUntil(this.destroy$))
+                .subscribe(function (term) {
+                _this.router.navigate(['./'], {
+                    queryParams: {
+                        q: term || undefined,
+                    },
+                    queryParamsHandling: 'merge',
+                    relativeTo: _this.route,
+                });
+            });
+            this.route.queryParamMap
+                .pipe(operators.map(function (qpm) { return qpm.get('q'); }), operators.distinctUntilChanged(), operators.takeUntil(this.destroy$))
                 .subscribe(function () { return _this.refresh(); });
+            this.filterTermControl.patchValue(this.route.snapshot.queryParamMap.get('q'));
         };
         CollectionListComponent.prototype.ngOnDestroy = function () {
             this.queryResult.completed$.next();
             this.destroy$.next(undefined);
             this.destroy$.complete();
         };
+        CollectionListComponent.prototype.toggleExpandAll = function () {
+            this.router.navigate(['./'], {
+                queryParams: {
+                    expanded: this.expandAll ? 'all' : undefined,
+                },
+                queryParamsHandling: 'merge',
+                relativeTo: this.route,
+            });
+        };
         CollectionListComponent.prototype.onRearrange = function (event) {
             var _this = this;
             this.dataService.collection.moveCollection([event]).subscribe({
@@ -866,12 +942,13 @@
             this.dataService.client.setContentLanguage(code).subscribe();
         };
         CollectionListComponent.prototype.refresh = function () {
+            var 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,
                             },
                         },
                     }
@@ -883,7 +960,7 @@
     CollectionListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-collection-list',
-                    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",
+                    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",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     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"]
                 },] }
@@ -2350,7 +2427,7 @@
                     selector: 'vdr-product-detail',
                     template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-flex-row\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrToggle\r\n                    name=\"enabled\"\r\n                    [formControl]=\"detailForm.get(['product', 'enabled'])\"\r\n                />\r\n                <label>{{ 'common.enabled' | translate }}</label>\r\n            </clr-toggle-wrapper>\r\n        </div>\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=\"product-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 || !variantsToCreateAreValid()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"\r\n                    (detailForm.invalid || detailForm.pristine) && !assetsChanged() && !variantAssetsChanged()\r\n                \"\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=\"product$ | async as product\">\r\n    <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n    <clr-tabs>\r\n        <clr-tab>\r\n            <button clrTabLink (click)=\"navigateToTab('details')\">\r\n                {{ 'catalog.product-details' | translate }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive=\"(activeTab$ | async) === 'details'\">\r\n                <div class=\"clr-row\">\r\n                    <div class=\"clr-col\">\r\n                        <section class=\"form-block\" formGroupName=\"product\">\r\n                            <ng-container *ngIf=\"!(isNew$ | async)\">\r\n                                <ng-container *vdrIfMultichannel>\r\n                                    <vdr-form-item\r\n                                        [label]=\"'common.channels' | translate\"\r\n                                        *vdrIfDefaultChannelActive\r\n                                    >\r\n                                        <div class=\"flex channel-assignment\">\r\n                                            <ng-container *ngFor=\"let channel of productChannels$ | async\">\r\n                                                <vdr-chip\r\n                                                    *ngIf=\"!isDefaultChannel(channel.code)\"\r\n                                                    icon=\"times-circle\"\r\n                                                    (iconClick)=\"removeFromChannel(channel.id)\"\r\n                                                >\r\n                                                    <vdr-channel-badge\r\n                                                        [channelCode]=\"channel.code\"\r\n                                                    ></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()\">\r\n                                                <clr-icon shape=\"layers\"></clr-icon>\r\n                                                {{ 'catalog.assign-to-channel' | translate }}\r\n                                            </button>\r\n                                        </div>\r\n                                    </vdr-form-item>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <vdr-form-field [label]=\"'catalog.product-name' | translate\" for=\"name\">\r\n                                <input\r\n                                    id=\"name\"\r\n                                    type=\"text\"\r\n                                    formControlName=\"name\"\r\n                                    [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                                    (input)=\"updateSlug($event.target.value)\"\r\n                                />\r\n                            </vdr-form-field>\r\n                            <div\r\n                                class=\"auto-rename-wrapper\"\r\n                                [class.visible]=\"\r\n                                    (isNew$ | async) === false && detailForm.get(['product', 'name'])?.dirty\r\n                                \"\r\n                            >\r\n                                <clr-checkbox-wrapper>\r\n                                    <input\r\n                                        clrCheckbox\r\n                                        type=\"checkbox\"\r\n                                        id=\"auto-update\"\r\n                                        formControlName=\"autoUpdateVariantNames\"\r\n                                    />\r\n                                    <label>{{\r\n                                        'catalog.auto-update-product-variant-name' | translate\r\n                                    }}</label>\r\n                                </clr-checkbox-wrapper>\r\n                            </div>\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]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                                />\r\n                            </vdr-form-field>\r\n                            <vdr-rich-text-editor\r\n                                formControlName=\"description\"\r\n                                [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | 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=\"Product\"\r\n                                    [customFields]=\"customFields\"\r\n                                    [customFieldsFormGroup]=\"detailForm.get(['product', 'customFields'])\"\r\n                                    [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </section>\r\n                            <vdr-custom-detail-component-host\r\n                                locationId=\"product-detail\"\r\n                                [entity$]=\"entity$\"\r\n                                [detailForm]=\"detailForm\"\r\n                            ></vdr-custom-detail-component-host>\r\n                        </section>\r\n                    </div>\r\n                    <div class=\"clr-col-md-auto\">\r\n                        <vdr-assets\r\n                            [assets]=\"assetChanges.assets || product.assets\"\r\n                            [featuredAsset]=\"assetChanges.featuredAsset || product.featuredAsset\"\r\n                            [updatePermissions]=\"updatePermissions\"\r\n                            (change)=\"assetChanges = $event\"\r\n                        ></vdr-assets>\r\n                        <div class=\"facets\">\r\n                            <vdr-facet-value-chip\r\n                                *ngFor=\"let facetValue of facetValues$ | async\"\r\n                                [facetValue]=\"facetValue\"\r\n                                [removable]=\"['UpdateCatalog', 'UpdateProduct'] | hasPermission\"\r\n                                (remove)=\"removeProductFacetValue(facetValue.id)\"\r\n                            ></vdr-facet-value-chip>\r\n                            <button\r\n                                class=\"btn btn-sm btn-secondary\"\r\n                                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                                (click)=\"selectProductFacetValue()\"\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\r\n                <div *ngIf=\"isNew$ | async\">\r\n                    <h4>{{ 'catalog.product-variants' | translate }}</h4>\r\n                    <vdr-generate-product-variants\r\n                        (variantsChange)=\"createVariantsConfig = $event\"\r\n                    ></vdr-generate-product-variants>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n        <clr-tab *ngIf=\"!(isNew$ | async)\">\r\n            <button clrTabLink (click)=\"navigateToTab('variants')\">\r\n                {{ 'catalog.product-variants' | translate }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive=\"(activeTab$ | async) === 'variants'\">\r\n                <section class=\"form-block\">\r\n                    <div class=\"view-mode\">\r\n                        <div class=\"btn-group\">\r\n                            <button\r\n                                class=\"btn btn-secondary-outline\"\r\n                                (click)=\"variantDisplayMode = 'card'\"\r\n                                [class.btn-primary]=\"variantDisplayMode === 'card'\"\r\n                            >\r\n                                <clr-icon shape=\"list\"></clr-icon>\r\n                                {{ 'catalog.display-variant-cards' | translate }}\r\n                            </button>\r\n                            <button\r\n                                class=\"btn\"\r\n                                (click)=\"variantDisplayMode = 'table'\"\r\n                                [class.btn-primary]=\"variantDisplayMode === 'table'\"\r\n                            >\r\n                                <clr-icon shape=\"table\"></clr-icon>\r\n                                {{ 'catalog.display-variant-table' | translate }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"variant-filter\">\r\n                            <input\r\n                                [formControl]=\"filterInput\"\r\n                                [placeholder]=\"'catalog.filter-by-name-or-sku' | translate\"\r\n                            />\r\n                            <button class=\"icon-button\" (click)=\"filterInput.setValue('')\">\r\n                                <clr-icon shape=\"times\"></clr-icon>\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"flex-spacer\"></div>\r\n                        <a\r\n                            *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                            [routerLink]=\"['./', 'manage-variants']\"\r\n                            class=\"btn btn-secondary edit-variants-btn\"\r\n                        >\r\n                            <clr-icon shape=\"add-text\"></clr-icon>\r\n                            {{ 'catalog.manage-variants' | translate }}\r\n                        </a>\r\n                    </div>\r\n\r\n                    <div class=\"pagination-row mt4\" *ngIf=\"10 < (paginationConfig$ | async)?.totalItems\">\r\n                        <vdr-items-per-page-controls\r\n                            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n                        ></vdr-items-per-page-controls>\r\n\r\n                        <vdr-pagination-controls\r\n                            [id]=\"(paginationConfig$ | async)?.id\"\r\n                            [currentPage]=\"currentPage$ | async\"\r\n                            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                            (pageChange)=\"setPage($event)\"\r\n                        ></vdr-pagination-controls>\r\n                    </div>\r\n\r\n                    <vdr-product-variants-table\r\n                        *ngIf=\"variantDisplayMode === 'table'\"\r\n                        [variants]=\"variants$ | async\"\r\n                        [paginationConfig]=\"paginationConfig$ | async\"\r\n                        [optionGroups]=\"product.optionGroups\"\r\n                        [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [productVariantsFormArray]=\"detailForm.get('variants')\"\r\n                        [pendingAssetChanges]=\"variantAssetChanges\"\r\n                    ></vdr-product-variants-table>\r\n                    <vdr-product-variants-list\r\n                        *ngIf=\"variantDisplayMode === 'card'\"\r\n                        [variants]=\"variants$ | async\"\r\n                        [paginationConfig]=\"paginationConfig$ | async\"\r\n                        [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [facets]=\"facets$ | async\"\r\n                        [optionGroups]=\"product.optionGroups\"\r\n                        [productVariantsFormArray]=\"detailForm.get('variants')\"\r\n                        [taxCategories]=\"taxCategories$ | async\"\r\n                        [customFields]=\"customVariantFields\"\r\n                        [customOptionFields]=\"customOptionFields\"\r\n                        [activeLanguage]=\"languageCode$ | async\"\r\n                        [pendingAssetChanges]=\"variantAssetChanges\"\r\n                        (assignToChannel)=\"assignVariantToChannel($event)\"\r\n                        (removeFromChannel)=\"removeVariantFromChannel($event)\"\r\n                        (assetChange)=\"variantAssetChange($event)\"\r\n                        (updateProductOption)=\"updateProductOption($event)\"\r\n                        (selectionChange)=\"selectedVariantIds = $event\"\r\n                        (selectFacetValueClick)=\"selectVariantFacetValue($event)\"\r\n                    ></vdr-product-variants-list>\r\n                </section>\r\n                <div class=\"pagination-row mt4\" *ngIf=\"10 < (paginationConfig$ | async)?.totalItems\">\r\n                    <vdr-items-per-page-controls\r\n                        [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                        (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n                    ></vdr-items-per-page-controls>\r\n\r\n                    <vdr-pagination-controls\r\n                        [id]=\"(paginationConfig$ | async)?.id\"\r\n                        [currentPage]=\"currentPage$ | async\"\r\n                        [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                        (pageChange)=\"setPage($event)\"\r\n                    ></vdr-pagination-controls>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</form>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host ::ng-deep trix-toolbar{top:24px}.facets{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center}@media screen and (min-width: 768px){.facets{max-width:340px}}vdr-action-bar clr-toggle-wrapper{margin-top:12px}.variant-filter{flex:1;display:flex}.variant-filter input{flex:1;max-width:initial;border-radius:3px 0 0 3px!important}.variant-filter .icon-button{border:1px solid var(--color-component-border-300);background-color:var(--color-component-bg-100);border-radius:0 3px 3px 0;border-left:none}.group-name{padding-right:6px}.view-mode{display:flex;justify-content:flex-end;align-items:center}.edit-variants-btn{margin-top:0}.channel-assignment{flex-wrap:wrap}.auto-rename-wrapper{overflow:hidden;max-height:0;padding-left:9.5rem;margin-bottom:0;transition:max-height .2s,margin-bottom .2s}.auto-rename-wrapper.visible{max-height:24px;margin-bottom:12px}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"]
+                    styles: [":host ::ng-deep trix-toolbar{top:24px}.facets{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center}@media screen and (min-width: 768px){.facets{max-width:340px}}vdr-action-bar clr-toggle-wrapper{margin-top:12px}.variant-filter{flex:1;display:flex}.variant-filter input{flex:1;max-width:initial;border-radius:3px 0 0 3px!important}.variant-filter .icon-button{border:1px solid var(--color-component-border-300);background-color:var(--color-component-bg-100);border-radius:0 3px 3px 0;border-left:none}.group-name{padding-right:6px}.view-mode{display:flex;justify-content:flex-end;align-items:center}.edit-variants-btn{margin-top:0}.channel-assignment{flex-wrap:wrap;max-height:144px;overflow-y:auto}.auto-rename-wrapper{overflow:hidden;max-height:0;padding-left:9.5rem;margin-bottom:0;transition:max-height .2s,margin-bottom .2s}.auto-rename-wrapper.visible{max-height:24px;margin-bottom:12px}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"]
                 },] }
     ];
     ProductDetailComponent.ctorParameters = function () { return [
@@ -2519,8 +2596,8 @@
     ProductListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-products-list',
-                    template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <div class=\"search-form\">\r\n            <vdr-product-search-input\r\n                #productSearchInputComponent\r\n                [facetValueResults]=\"facetValues$ | async\"\r\n                (searchTermChange)=\"setSearchTerm($event)\"\r\n                (facetValueChange)=\"setFacetValueIds($event)\"\r\n            ></vdr-product-search-input>\r\n            <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"icon-button search-index-button\"\r\n                    [title]=\"\r\n                        (pendingSearchIndexUpdates\r\n                            ? 'catalog.pending-search-index-updates'\r\n                            : 'catalog.search-index-controls'\r\n                        ) | translate\r\n                    \"\r\n                    vdrDropdownTrigger\r\n                >\r\n                    <clr-icon shape=\"cog\"></clr-icon>\r\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"> </vdr-status-badge>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"run-updates-button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"runPendingSearchIndexUpdates()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            <vdr-status-badge type=\"warning\"> </vdr-status-badge>\r\n                            {{\r\n                                'catalog.run-pending-search-index-updates'\r\n                                    | translate: { count: pendingSearchIndexUpdates }\r\n                            }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"rebuildSearchIndex()\"\r\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                    >\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <div class=\"flex wrap\">\r\n            <clr-checkbox-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\" />\r\n                <label>{{ 'catalog.group-by-product' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            [routerLink]=\"['./create']\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            <span class=\"full-label\">{{ 'catalog.create-new-product' | translate }}</span>\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <ng-template let-result=\"item\">\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"\r\n                        groupByProduct\r\n                            ? result.productAsset\r\n                            : result.productVariantAsset || result.productAsset as asset;\r\n                        else imagePlaceholder\r\n                    \"\r\n                    [src]=\"asset | assetPreview: 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            {{ groupByProduct ? result.productName : result.productVariantName }}\r\n        </td>\r\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', result.productId]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteProduct(result.productId)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
-                    styles: [".image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%;margin-bottom:6px}.search-input{min-width:300px}@media screen and (max-width: 768px){.search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}\n"]
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <div class=\"search-form\">\r\n            <vdr-product-search-input\r\n                #productSearchInputComponent\r\n                [facetValueResults]=\"facetValues$ | async\"\r\n                (searchTermChange)=\"setSearchTerm($event)\"\r\n                (facetValueChange)=\"setFacetValueIds($event)\"\r\n            ></vdr-product-search-input>\r\n            <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"icon-button search-index-button\"\r\n                    [title]=\"\r\n                        (pendingSearchIndexUpdates\r\n                            ? 'catalog.pending-search-index-updates'\r\n                            : 'catalog.search-index-controls'\r\n                        ) | translate\r\n                    \"\r\n                    vdrDropdownTrigger\r\n                >\r\n                    <clr-icon shape=\"cog\"></clr-icon>\r\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"run-updates-button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"runPendingSearchIndexUpdates()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                            {{\r\n                            'catalog.run-pending-search-index-updates'\r\n                                | translate: {count: pendingSearchIndexUpdates}\r\n                            }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"rebuildSearchIndex()\"\r\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                    >\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <div class=\"flex wrap\">\r\n            <clr-checkbox-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\"/>\r\n                <label>{{ 'catalog.group-by-product' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            [routerLink]=\"['./create']\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            <span class=\"full-label\">{{ 'catalog.create-new-product' | translate }}</span>\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <ng-template let-result=\"item\">\r\n        <td class=\"left align-middle image-col\" [class.disabled]=\"!result.enabled\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"\r\n                        groupByProduct\r\n                            ? result.productAsset\r\n                            : result.productVariantAsset || result.productAsset as asset;\r\n                        else imagePlaceholder\r\n                    \"\r\n                    [src]=\"asset | assetPreview: 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            {{ groupByProduct ? result.productName : result.productVariantName }}\r\n        </td>\r\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-table-row-action\r\n                class=\"edit-button\"\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', result.productId]\"\r\n            ></vdr-table-row-action>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteProduct(result.productId)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
+                    styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%;margin-bottom:6px}.search-input{min-width:300px}@media screen and (max-width: 768px){.search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}\n"]
                 },] }
     ];
     ProductListComponent.ctorParameters = function () { return [
@@ -2820,6 +2897,10 @@
                 values: [],
             });
         };
+        ProductVariantsEditorComponent.prototype.removeOption = function (optionGroup) {
+            this.optionGroups = this.optionGroups.filter(function (og) { return og !== optionGroup; });
+            this.generateVariants();
+        };
         ProductVariantsEditorComponent.prototype.generateVariants = function () {
             var _this = this;
             var groups = this.optionGroups.map(function (g) { return g.values; });
@@ -2885,6 +2966,7 @@
         };
         ProductVariantsEditorComponent.prototype.save = function () {
             var _this = this;
+            this.optionGroups = this.optionGroups.filter(function (g) { return g.values.length; });
             var newOptionGroups = this.optionGroups
                 .filter(function (og) { return og.isNew; })
                 .map(function (og) { return ({
@@ -3075,7 +3157,7 @@
     ProductVariantsEditorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-product-variants-editor',
-                    template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"!formValueChanged || getVariantsToAdd().length === 0\"\r\n        >\r\n            {{ 'common.add-new-variants' | translate: { count: getVariantsToAdd().length } }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n</div>\r\n<button\r\n    class=\"btn btn-primary-outline btn-sm\"\r\n    (click)=\"addOption()\"\r\n>\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.create' | translate }}</th>\r\n                <th>{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                <th></th>\r\n            </tr>\r\n        </thead>\r\n        <tr *ngFor=\"let variant of generatedVariants\" [class.disabled]=\"!variant.enabled || variant.existing\">\r\n            <td>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    *ngIf=\"!variant.existing\"\r\n                    [(ngModel)]=\"variant.enabled\"\r\n                    name=\"enabled\"\r\n                    clrCheckbox\r\n                    (ngModelChange)=\"formValueChanged = true\"\r\n                />\r\n            </td>\r\n            <td>\r\n                {{ getVariantName(variant) | translate }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        [(ngModel)]=\"variant.sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                        name=\"sku\"\r\n                        required\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.sku }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variant.price\"\r\n                        name=\"price\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.price | localeCurrency: currencyCode }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variant.stock\"\r\n                        name=\"stock\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.stock }}</span>\r\n            </td>\r\n            <td>\r\n                <vdr-dropdown *ngIf=\"variant.productVariantId as productVariantId\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"deleteVariant(productVariantId)\"\r\n                            vdrDropdownItem\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.delete' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n",
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"!formValueChanged || getVariantsToAdd().length === 0\"\r\n        >\r\n            {{ 'common.add-new-variants' | translate: { count: getVariantsToAdd().length } }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div>\r\n        <button *ngIf=\"group.isNew\" class=\"btn btn-icon btn-danger-outline mt5\" (click)=\"removeOption(group)\">\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button\r\n    class=\"btn btn-primary-outline btn-sm\"\r\n    (click)=\"addOption()\"\r\n>\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.create' | translate }}</th>\r\n                <th>{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                <th></th>\r\n            </tr>\r\n        </thead>\r\n        <tr *ngFor=\"let variant of generatedVariants\" [class.disabled]=\"!variant.enabled || variant.existing\">\r\n            <td>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    *ngIf=\"!variant.existing\"\r\n                    [(ngModel)]=\"variant.enabled\"\r\n                    name=\"enabled\"\r\n                    clrCheckbox\r\n                    (ngModelChange)=\"formValueChanged = true\"\r\n                />\r\n            </td>\r\n            <td>\r\n                {{ getVariantName(variant) | translate }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        [(ngModel)]=\"variant.sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                        name=\"sku\"\r\n                        required\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.sku }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variant.price\"\r\n                        name=\"price\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.price | localeCurrency: currencyCode }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variant.stock\"\r\n                        name=\"stock\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.stock }}</span>\r\n            </td>\r\n            <td>\r\n                <vdr-dropdown *ngIf=\"variant.productVariantId as productVariantId\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"deleteVariant(productVariantId)\"\r\n                            vdrDropdownItem\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.delete' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.Default,
                     styles: [".option-groups{display:flex}.option-groups:first-of-type{margin-top:24px}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"]
                 },] }
@@ -3247,7 +3329,7 @@
         { type: i2.DataService }
     ]; };
 
-    var ɵ0$1 = {
+    var ɵ0 = {
         breadcrumb: ngxTranslateExtractMarker.marker('breadcrumb.products'),
     }, ɵ1 = {
         breadcrumb: productBreadcrumb,
@@ -3272,7 +3354,7 @@
         {
             path: 'products',
             component: ProductListComponent,
-            data: ɵ0$1,
+            data: ɵ0,
         },
         {
             path: 'products/:id',
@@ -3484,7 +3566,7 @@
                     selector: 'vdr-assets',
                     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",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    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{width:50px}.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"]
+                    styles: [":host{width:340px;display:block}:host.compact{width:162px}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer;border-radius:var(--border-radius-img)}.featured-asset img{border-radius:var(--border-radius-img)}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);border-radius:var(--border-radius-img);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px;border-radius:var(--border-radius-img)}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500);border-radius:calc(var(--border-radius-img) + 2px)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder{width:50px}.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"]
                 },] }
     ];
     AssetsComponent.ctorParameters = function () { return [
@@ -3504,36 +3586,66 @@
             this.route = route;
             this.router = router;
             this.dataService = dataService;
+            this.previewUpdatedFilters = false;
             this.filterTermControl = new forms.FormControl('');
+            this.isLoading = false;
             this.collectionIdChange$ = new rxjs.BehaviorSubject('');
+            this.parentIdChange$ = new rxjs.BehaviorSubject('');
+            this.filterChanges$ = new rxjs.BehaviorSubject([]);
             this.refresh$ = new rxjs.BehaviorSubject(true);
             this.destroy$ = new rxjs.Subject();
         }
         CollectionContentsComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.contentsCurrentPage$ = this.route.paramMap.pipe(operators.map(function (qpm) { return qpm.get('contentsPage'); }), operators.map(function (page) { return (!page ? 1 : +page); }), operators.startWith(1), operators.distinctUntilChanged());
-            this.contentsItemsPerPage$ = this.route.paramMap.pipe(operators.map(function (qpm) { return qpm.get('contentsPerPage'); }), operators.map(function (perPage) { return (!perPage ? 10 : +perPage); }), operators.startWith(10), operators.distinctUntilChanged());
+            this.contentsCurrentPage$ = this.route.queryParamMap.pipe(operators.map(function (qpm) { return qpm.get('contentsPage'); }), operators.map(function (page) { return (!page ? 1 : +page); }), operators.startWith(1), operators.distinctUntilChanged());
+            this.contentsItemsPerPage$ = this.route.queryParamMap.pipe(operators.map(function (qpm) { return qpm.get('contentsPerPage'); }), operators.map(function (perPage) { return (!perPage ? 10 : +perPage); }), operators.startWith(10), operators.distinctUntilChanged());
             var filterTerm$ = this.filterTermControl.valueChanges.pipe(operators.debounceTime(250), operators.tap(function () { return _this.setContentsPageNumber(1); }), operators.startWith(''));
-            var collection$ = rxjs.combineLatest(this.collectionIdChange$, this.contentsCurrentPage$, this.contentsItemsPerPage$, filterTerm$, this.refresh$).pipe(operators.takeUntil(this.destroy$), operators.switchMap(function (_a) {
-                var _b = __read(_a, 4), id = _b[0], currentPage = _b[1], itemsPerPage = _b[2], filterTerm = _b[3];
+            var filterChanges$ = this.filterChanges$.asObservable().pipe(operators.filter(function () { return _this.previewUpdatedFilters; }), operators.tap(function () { return _this.setContentsPageNumber(1); }), operators.startWith([]));
+            var fetchUpdate$ = rxjs.combineLatest(this.collectionIdChange$, this.parentIdChange$, this.contentsCurrentPage$, this.contentsItemsPerPage$, filterTerm$, filterChanges$, this.refresh$);
+            var collection$ = fetchUpdate$.pipe(operators.takeUntil(this.destroy$), operators.tap(function () { return (_this.isLoading = true); }), operators.debounceTime(50), operators.switchMap(function (_b) {
+                var _c = __read(_b, 6), id = _c[0], parentId = _c[1], currentPage = _c[2], itemsPerPage = _c[3], filterTerm = _c[4], filters = _c[5];
                 var take = itemsPerPage;
                 var skip = (currentPage - 1) * itemsPerPage;
-                if (id) {
+                if (filters.length && _this.previewUpdatedFilters) {
+                    var filterClause = filterTerm
+                        ? { name: { contains: filterTerm } }
+                        : undefined;
+                    return _this.dataService.collection
+                        .previewCollectionVariants({
+                        parentId: parentId,
+                        filters: filters,
+                    }, {
+                        take: take,
+                        skip: skip,
+                        filter: filterClause,
+                    })
+                        .mapSingle(function (data) { return data.previewCollectionVariants; })
+                        .pipe(operators.catchError(function () { return rxjs.of({ items: [], totalItems: 0 }); }));
+                }
+                else if (id) {
                     return _this.dataService.collection
                         .getCollectionContents(id, take, skip, filterTerm)
-                        .mapSingle(function (data) { return data.collection; });
+                        .mapSingle(function (data) { var _a; return (_a = data.collection) === null || _a === void 0 ? void 0 : _a.productVariants; });
                 }
                 else {
                     return rxjs.of(null);
                 }
-            }));
-            this.contents$ = collection$.pipe(operators.map(function (result) { return (result ? result.productVariants.items : []); }));
-            this.contentsTotalItems$ = collection$.pipe(operators.map(function (result) { return (result ? result.productVariants.totalItems : 0); }));
+            }), operators.tap(function () { return (_this.isLoading = false); }), operators.finalize(function () { return (_this.isLoading = false); }));
+            this.contents$ = collection$.pipe(operators.map(function (result) { return (result ? result.items : []); }));
+            this.contentsTotalItems$ = collection$.pipe(operators.map(function (result) { return (result ? result.totalItems : 0); }));
         };
         CollectionContentsComponent.prototype.ngOnChanges = function (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);
+                }
+            }
         };
         CollectionContentsComponent.prototype.ngOnDestroy = function () {
             this.destroy$.next();
@@ -3549,10 +3661,14 @@
             this.refresh$.next(true);
         };
         CollectionContentsComponent.prototype.setParam = function (key, value) {
-            var _a;
-            this.router.navigate(['./', Object.assign(Object.assign({}, this.route.snapshot.params), (_a = {}, _a[key] = value, _a))], {
+            var _b;
+            this.router.navigate(['./'], {
                 relativeTo: this.route,
+                queryParams: (_b = {},
+                    _b[key] = value,
+                    _b),
                 queryParamsHandling: 'merge',
+                replaceUrl: true,
             });
         };
         return CollectionContentsComponent;
@@ -3560,9 +3676,9 @@
     CollectionContentsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-collection-contents',
-                    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",
+                    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",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    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"]
+                    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"]
                 },] }
     ];
     CollectionContentsComponent.ctorParameters = function () { return [
@@ -3572,6 +3688,9 @@
     ]; };
     CollectionContentsComponent.propDecorators = {
         collectionId: [{ type: i0.Input }],
+        parentId: [{ type: i0.Input }],
+        updatedFilters: [{ type: i0.Input }],
+        previewUpdatedFilters: [{ type: i0.Input }],
         headerTemplate: [{ type: i0.ContentChild, args: [i0.TemplateRef, { static: true },] }]
     };
 
@@ -3579,8 +3698,9 @@
      * 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 e_1, _c, e_2, _d;
+        if (expandedIds === void 0) { expandedIds = []; }
         var _a, _b;
         var topLevelNodes = [];
         var mappedArr = {};
@@ -3604,7 +3724,7 @@
                 var id = _f.value;
                 if (mappedArr.hasOwnProperty(id)) {
                     var 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);
                     var parent = mappedElem.parent;
                     if (!parent) {
                         continue;
@@ -3656,13 +3776,14 @@
     var CollectionTreeComponent = /** @class */ (function () {
         function CollectionTreeComponent() {
             this.expandAll = false;
+            this.expandedIds = [];
             this.rearrange = new i0.EventEmitter();
             this.deleteCollection = new i0.EventEmitter();
             this.allMoveListItems = [];
         }
         CollectionTreeComponent.prototype.ngOnChanges = function (changes) {
             if ('collections' in changes && this.collections) {
-                this.collectionTree = arrayToTree(this.collections, this.collectionTree);
+                this.collectionTree = arrayToTree(this.collections, this.collectionTree, this.expandedIds);
                 this.allMoveListItems = [];
             }
         };
@@ -3722,15 +3843,18 @@
         collections: [{ type: i0.Input }],
         activeCollectionId: [{ type: i0.Input }],
         expandAll: [{ type: i0.Input }],
+        expandedIds: [{ type: i0.Input }],
         rearrange: [{ type: i0.Output }],
         deleteCollection: [{ type: i0.Output }]
     };
 
     var CollectionTreeNodeComponent = /** @class */ (function () {
-        function CollectionTreeNodeComponent(parent, root, dataService) {
+        function CollectionTreeNodeComponent(parent, root, dataService, router, route) {
             this.parent = parent;
             this.root = root;
             this.dataService = dataService;
+            this.router = router;
+            this.route = route;
             this.depth = 0;
             this.expandAll = false;
             this.moveListItems = [];
@@ -3758,6 +3882,24 @@
         CollectionTreeNodeComponent.prototype.trackByFn = function (index, item) {
             return item.id;
         };
+        CollectionTreeNodeComponent.prototype.toggleExpanded = function (collection) {
+            var _a, _b;
+            collection.expanded = !collection.expanded;
+            var 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(function (id) { return id !== collection.id; });
+            }
+            this.router.navigate(['./'], {
+                queryParams: {
+                    expanded: expandedIds.filter(function (id) { return !!id; }).join(','),
+                },
+                queryParamsHandling: 'merge',
+                relativeTo: this.route,
+            });
+        };
         CollectionTreeNodeComponent.prototype.getMoveListItems = function (collection) {
             this.moveListItems = this.root.getMoveListItems(collection);
         };
@@ -3800,7 +3942,7 @@
     CollectionTreeNodeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-collection-tree-node',
-                    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",
+                    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",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     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"]
                 },] }
@@ -3808,7 +3950,9 @@
     CollectionTreeNodeComponent.ctorParameters = function () { return [
         { type: CollectionTreeNodeComponent, decorators: [{ type: i0.SkipSelf }, { type: i0.Optional }] },
         { type: CollectionTreeComponent },
-        { type: i2.DataService }
+        { type: i2.DataService },
+        { type: i1.Router },
+        { type: i1.ActivatedRoute }
     ]; };
     CollectionTreeNodeComponent.propDecorators = {
         collectionTree: [{ type: i0.Input }],
@@ -3991,110 +4135,6 @@
         textArea: [{ type: i0.ViewChild, args: ['textArea', { static: true },] }]
     };
 
-    var ɵ0 = i2.SingleSearchSelectionModelFactory;
-    var ProductSearchInputComponent = /** @class */ (function () {
-        function ProductSearchInputComponent() {
-            var _this = this;
-            this.searchTermChange = new i0.EventEmitter();
-            this.facetValueChange = new i0.EventEmitter();
-            this.lastTerm = '';
-            this.lastFacetValueIds = [];
-            this.filterFacetResults = function (term, item) {
-                if (!_this.isFacetValueItem(item)) {
-                    return false;
-                }
-                var cix = term.indexOf(':');
-                var facetName = cix > -1 ? term.toLowerCase().slice(0, cix) : null;
-                var facetVal = cix > -1 ? term.toLowerCase().slice(cix + 1) : term.toLowerCase();
-                if (facetName) {
-                    return (item.facetValue.facet.name.toLowerCase().includes(facetName) &&
-                        item.facetValue.name.toLocaleLowerCase().includes(facetVal));
-                }
-                return (item.facetValue.name.toLowerCase().includes(term.toLowerCase()) ||
-                    item.facetValue.facet.name.toLowerCase().includes(term.toLowerCase()));
-            };
-            this.isFacetValueItem = function (input) {
-                return typeof input === 'object' && !!input && input.hasOwnProperty('facetValue');
-            };
-        }
-        ProductSearchInputComponent.prototype.setSearchTerm = function (term) {
-            var _this = this;
-            if (term) {
-                this.selectComponent.select({ label: term, value: { label: term } });
-            }
-            else {
-                var currentTerm = this.selectComponent.selectedItems.find(function (i) { return !_this.isFacetValueItem(i.value); });
-                if (currentTerm) {
-                    this.selectComponent.unselect(currentTerm);
-                }
-            }
-        };
-        ProductSearchInputComponent.prototype.setFacetValues = function (ids) {
-            var _this = this;
-            var items = this.selectComponent.items;
-            this.selectComponent.selectedItems.forEach(function (item) {
-                if (_this.isFacetValueItem(item.value) && !ids.includes(item.value.facetValue.id)) {
-                    _this.selectComponent.unselect(item);
-                }
-            });
-            ids.map(function (id) {
-                return items === null || items === void 0 ? void 0 : items.find(function (item) { return _this.isFacetValueItem(item) && item.facetValue.id === id; });
-            })
-                .filter(sharedUtils.notNullOrUndefined)
-                .forEach(function (item) {
-                var isSelected = _this.selectComponent.selectedItems.find(function (i) {
-                    var val = i.value;
-                    if (_this.isFacetValueItem(val)) {
-                        return val.facetValue.id === item.facetValue.id;
-                    }
-                    return false;
-                });
-                if (!isSelected) {
-                    _this.selectComponent.select({ label: '', value: item });
-                }
-            });
-        };
-        ProductSearchInputComponent.prototype.onSelectChange = function (selectedItems) {
-            var _this = this;
-            if (!Array.isArray(selectedItems)) {
-                selectedItems = [selectedItems];
-            }
-            var searchTermItem = selectedItems.find(function (item) { return !_this.isFacetValueItem(item); });
-            var searchTerm = searchTermItem ? searchTermItem.label : '';
-            var facetValueIds = selectedItems.filter(this.isFacetValueItem).map(function (i) { return i.facetValue.id; });
-            if (searchTerm !== this.lastTerm) {
-                this.searchTermChange.emit(searchTerm);
-                this.lastTerm = searchTerm;
-            }
-            if (this.lastFacetValueIds.join(',') !== facetValueIds.join(',')) {
-                this.facetValueChange.emit(facetValueIds);
-                this.lastFacetValueIds = facetValueIds;
-            }
-        };
-        ProductSearchInputComponent.prototype.addTagFn = function (item) {
-            return { label: item };
-        };
-        ProductSearchInputComponent.prototype.isSearchHeaderSelected = function () {
-            return this.selectComponent.itemsList.markedIndex === -1;
-        };
-        return ProductSearchInputComponent;
-    }());
-    ProductSearchInputComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'vdr-product-search-input',
-                    template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: ngSelect.SELECTION_MODEL_FACTORY, useValue: ɵ0 }],
-                    styles: [":host{margin-top:6px;display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;min-width:300px;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"]
-                },] }
-    ];
-    ProductSearchInputComponent.propDecorators = {
-        facetValueResults: [{ type: i0.Input }],
-        searchTermChange: [{ type: i0.Output }],
-        facetValueChange: [{ type: i0.Output }],
-        selectComponent: [{ type: i0.ViewChild, args: ['selectComponent', { static: true },] }]
-    };
-
     var UpdateProductOptionDialogComponent = /** @class */ (function () {
         function UpdateProductOptionDialogComponent() {
             this.updateVariantName = true;
@@ -4363,7 +4403,7 @@
                     selector: 'vdr-product-variants-list',
                     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",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    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"]
+                    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;flex-wrap:wrap;max-height:110px;overflow-y:auto}.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"]
                 },] }
     ];
     ProductVariantsListComponent.ctorParameters = function () { return [
@@ -4543,7 +4583,6 @@
         CollectionTreeNodeComponent,
         CollectionContentsComponent,
         ProductVariantsTableComponent,
-        ProductSearchInputComponent,
         OptionValueInputComponent,
         UpdateProductOptionDialogComponent,
         ProductVariantsEditorComponent,
@@ -4597,7 +4636,6 @@
     exports.ProductListComponent = ProductListComponent;
     exports.ProductOptionsEditorComponent = ProductOptionsEditorComponent;
     exports.ProductResolver = ProductResolver;
-    exports.ProductSearchInputComponent = ProductSearchInputComponent;
     exports.ProductVariantsEditorComponent = ProductVariantsEditorComponent;
     exports.ProductVariantsListComponent = ProductVariantsListComponent;
     exports.ProductVariantsResolver = ProductVariantsResolver;
@@ -4613,6 +4651,7 @@
     exports.productOptionsEditorBreadcrumb = productOptionsEditorBreadcrumb;
     exports.productVariantEditorBreadcrumb = productVariantEditorBreadcrumb;
     exports.replaceLast = replaceLast;
+    exports.ɵ0 = ɵ0;
     exports.ɵ1 = ɵ1;
     exports.ɵ2 = ɵ2;
     exports.ɵ3 = ɵ3;