@vendure/admin-ui 1.7.4 → 1.8.1

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')) :
-    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';
+    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('apollo-angular')) :
+    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', 'apollo-angular'], 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.apolloAngular));
+}(this, (function (exports, i0, i1, i2, ngxTranslateExtractMarker, operators, forms, rxjs, normalizeString, sharedUtils, generatedShopTypes, common, sharedConstants, unique, pick, dragDrop, apolloAngular) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -808,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\">{{\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",
+                    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<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as collection\">\r\n\r\n    <nav role=\"navigation\">\r\n        <ul class=\"collection-breadcrumbs\">\r\n            <li *ngFor=\"let breadcrumb of collection.breadcrumbs; let isFirst = first; let isLast = last\">\r\n                <a [routerLink]=\"['/catalog/collections']\" *ngIf=\"isFirst\">{{ 'catalog.root-collection' | translate }}</a>\r\n                <a [routerLink]=\"['/catalog/collections', breadcrumb.id]\" *ngIf=\"!isFirst && !isLast\">{{ breadcrumb.name | translate }}</a>\r\n                <ng-container *ngIf=\"isLast\">{{ breadcrumb.name | translate }}</ng-container>\r\n            </li>\r\n        </ul>\r\n    </nav>\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]=\"collection.assets\"\r\n                [featuredAsset]=\"collection.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}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}\n"]
+                    styles: ["@charset \"UTF-8\";.visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}.collection-breadcrumbs{list-style-type:none;background-color:var(--color-component-bg-200);padding:2px 6px;margin-bottom:6px;border-radius:var(--clr-global-borderradius)}.collection-breadcrumbs li{font-size:.65rem;display:inline-block;margin-right:10px}.collection-breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-left:10px}\n"]
                 },] }
     ];
     CollectionDetailComponent.ctorParameters = function () { return [
@@ -829,23 +829,31 @@
     };
 
     var CollectionListComponent = /** @class */ (function () {
-        function CollectionListComponent(dataService, notificationService, modalService, router, route, serverConfigService) {
+        function CollectionListComponent(dataService, notificationService, modalService, router, route, serverConfigService, changeDetectorRef) {
             this.dataService = dataService;
             this.notificationService = notificationService;
             this.modalService = modalService;
             this.router = router;
             this.route = route;
             this.serverConfigService = serverConfigService;
+            this.changeDetectorRef = changeDetectorRef;
             this.filterTermControl = new forms.FormControl('');
             this.expandAll = false;
             this.expandedIds = [];
             this.destroy$ = new rxjs.Subject();
+            this.selectionManager = new i2.SelectionManager({
+                additiveMode: true,
+                multiSelect: true,
+                itemsAreEqual: function (a, b) { return a.id === b.id; },
+            });
         }
         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.items$ = this.queryResult
+                .mapStream(function (data) { return data.collections.items; })
+                .pipe(operators.tap(function (items) { return _this.selectionManager.setCurrentItems(items); }), operators.shareReplay(1));
             this.activeCollectionId$ = this.route.paramMap.pipe(operators.map(function (pm) { return pm.get('contents'); }), operators.distinctUntilChanged());
             this.expandedIds = (_b = (_a = this.route.snapshot.queryParamMap.get('expanded')) === null || _a === void 0 ? void 0 : _a.split(',')) !== null && _b !== void 0 ? _b : [];
             this.expandAll = this.route.snapshot.queryParamMap.get('expanded') === 'all';
@@ -960,9 +968,9 @@
     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\" (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",
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"\">\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\"\r\n            />\r\n            <div class=\"flex center\">\r\n                <clr-toggle-wrapper\r\n                    class=\"expand-all-toggle mt2\"\r\n                >\r\n                    <input type=\"checkbox\" clrToggle [(ngModel)]=\"expandAll\" (change)=\"toggleExpandAll()\" />\r\n                    <label>\r\n                        {{ 'catalog.expand-all-collections' | translate }}\r\n                    </label>\r\n                </clr-toggle-wrapper>\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            </div>\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=\"bulk-select-controls\">\r\n    <input\r\n        type=\"checkbox\"\r\n        clrCheckbox\r\n        [checked]=\"selectionManager.areAllCurrentItemsSelected()\"\r\n        (click)=\"selectionManager.toggleSelectAll()\"\r\n    />\r\n    <vdr-bulk-action-menu\r\n        class=\"ml2\"\r\n        locationId=\"collection-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n</div>\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        [selectionManager]=\"selectionManager\"\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"]
+                    styles: [":host{height:100%;display:flex;flex-direction:column}.bulk-select-controls{min-height:36px;padding-left:14px;display:flex;align-items:center;border-bottom:1px solid var(--color-component-border-200)}.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"]
                 },] }
     ];
     CollectionListComponent.ctorParameters = function () { return [
@@ -971,7 +979,8 @@
         { type: i2.ModalService },
         { type: i1.Router },
         { type: i1.ActivatedRoute },
-        { type: i2.ServerConfigService }
+        { type: i2.ServerConfigService },
+        { type: i0.ChangeDetectorRef }
     ]; };
 
     var FacetDetailComponent = /** @class */ (function (_super) {
@@ -1360,6 +1369,11 @@
                     },
                 },
             }); });
+            _this.selectionManager = new i2.SelectionManager({
+                multiSelect: true,
+                itemsAreEqual: function (a, b) { return a.id === b.id; },
+                additiveMode: true,
+            });
             return _this;
         }
         FacetListComponent.prototype.ngOnInit = function () {
@@ -1420,7 +1434,11 @@
                 body: message,
                 buttons: [
                     { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
-                    { type: 'danger', label: ngxTranslateExtractMarker.marker('common.delete'), returnValue: true },
+                    {
+                        type: 'danger',
+                        label: message ? ngxTranslateExtractMarker.marker('common.force-delete') : ngxTranslateExtractMarker.marker('common.delete'),
+                        returnValue: true,
+                    },
                 ],
             })
                 .pipe(operators.switchMap(function (res) { return (res ? _this.dataService.facet.deleteFacet(facetId, !!message) : rxjs.EMPTY); }), operators.map(function (res) { return res.deleteFacet; }));
@@ -1430,7 +1448,7 @@
     FacetListComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-facet-list',
-                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex center wrap\">\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"filterTermControl\"\r\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                class=\"clr-input search-input ml4\"\r\n            />\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"facet-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-facet' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'catalog.values' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'catalog.visibility' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-facet=\"item\">\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.code }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.name }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-facet-value-chip\r\n                *ngFor=\"let value of facet.values | slice: 0:displayLimit[facet.id] || 3\"\r\n                [facetValue]=\"value\"\r\n                [removable]=\"false\"\r\n                [displayFacetName]=\"false\"\r\n            ></vdr-facet-value-chip>\r\n            <button\r\n                class=\"btn btn-sm btn-secondary btn-icon\"\r\n                *ngIf=\"facet.values.length > initialLimit\"\r\n                (click)=\"toggleDisplayLimit(facet)\"\r\n            >\r\n                <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.values.length; else collapse\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ facet.values.length - initialLimit }}\r\n                </ng-container>\r\n                <ng-template #collapse>\r\n                    <clr-icon shape=\"minus\"></clr-icon>\r\n                </ng-template>\r\n            </button>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-chip>\r\n                <ng-container *ngIf=\"!facet.isPrivate; else private\">{{\r\n                    'catalog.public' | translate\r\n                }}</ng-container>\r\n                <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n            </vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', facet.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteFacet(facet.id)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteFacet'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"\">\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\"\r\n            />\r\n            <div>\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        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"facet-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-facet' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    [selectionManager]=\"selectionManager\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"facet-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'catalog.values' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'catalog.visibility' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-facet=\"item\">\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.code }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.name }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-facet-value-chip\r\n                *ngFor=\"let value of facet.values | slice: 0:displayLimit[facet.id] || 3\"\r\n                [facetValue]=\"value\"\r\n                [removable]=\"false\"\r\n                [displayFacetName]=\"false\"\r\n            ></vdr-facet-value-chip>\r\n            <button\r\n                class=\"btn btn-sm btn-secondary btn-icon\"\r\n                *ngIf=\"facet.values.length > initialLimit\"\r\n                (click)=\"toggleDisplayLimit(facet)\"\r\n            >\r\n                <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.values.length; else collapse\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ facet.values.length - initialLimit }}\r\n                </ng-container>\r\n                <ng-template #collapse>\r\n                    <clr-icon shape=\"minus\"></clr-icon>\r\n                </ng-template>\r\n            </button>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-chip>\r\n                <ng-container *ngIf=\"!facet.isPrivate; else private\">{{\r\n                    'catalog.public' | translate\r\n                }}</ng-container>\r\n                <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n            </vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', facet.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteFacet(facet.id)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteFacet'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n",
                     styles: ["td.private{background-color:var(--color-component-bg-200)}\n"]
                 },] }
     ];
@@ -1808,6 +1826,7 @@
                         .subscribe(function () {
                         _this.notificationService.success(ngxTranslateExtractMarker.marker('catalog.assign-product-to-channel-success'), {
                             channel: selectedChannel.code,
+                            count: _this.productIds.length,
                         });
                         _this.resolveWith(true);
                     });
@@ -1822,6 +1841,8 @@
                         .subscribe(function () {
                         _this.notificationService.success(ngxTranslateExtractMarker.marker('catalog.assign-variant-to-channel-success'), {
                             channel: selectedChannel.code,
+                            // tslint:disable-next-line:no-non-null-assertion
+                            count: _this.productVariantIds.length,
                         });
                         _this.resolveWith(true);
                     });
@@ -2033,15 +2054,22 @@
         };
         ProductDetailComponent.prototype.removeFromChannel = function (channelId) {
             var _this = this;
-            this.modalService
-                .dialog({
-                title: ngxTranslateExtractMarker.marker('catalog.remove-product-from-channel'),
-                buttons: [
-                    { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
-                    { type: 'danger', label: ngxTranslateExtractMarker.marker('catalog.remove-from-channel'), returnValue: true },
-                ],
-            })
-                .pipe(operators.switchMap(function (response) { return response
+            rxjs.from(i2.getChannelCodeFromUserStatus(this.dataService, channelId))
+                .pipe(operators.switchMap(function (_c) {
+                var channelCode = _c.channelCode;
+                return _this.modalService.dialog({
+                    title: ngxTranslateExtractMarker.marker('catalog.remove-product-from-channel'),
+                    buttons: [
+                        { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
+                        {
+                            type: 'danger',
+                            label: ngxTranslateExtractMarker.marker('catalog.remove-from-channel'),
+                            translationVars: { channelCode: channelCode },
+                            returnValue: true,
+                        },
+                    ],
+                });
+            }), operators.switchMap(function (response) { return response
                 ? _this.dataService.product.removeProductsFromChannel({
                     channelId: channelId,
                     productIds: [_this.id],
@@ -2068,15 +2096,22 @@
         ProductDetailComponent.prototype.removeVariantFromChannel = function (_c) {
             var _this = this;
             var channelId = _c.channelId, variant = _c.variant;
-            this.modalService
-                .dialog({
-                title: ngxTranslateExtractMarker.marker('catalog.remove-product-variant-from-channel'),
-                buttons: [
-                    { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
-                    { type: 'danger', label: ngxTranslateExtractMarker.marker('catalog.remove-from-channel'), returnValue: true },
-                ],
-            })
-                .pipe(operators.switchMap(function (response) { return response
+            rxjs.from(i2.getChannelCodeFromUserStatus(this.dataService, channelId))
+                .pipe(operators.switchMap(function (_c) {
+                var channelCode = _c.channelCode;
+                return _this.modalService.dialog({
+                    title: ngxTranslateExtractMarker.marker('catalog.remove-product-variant-from-channel'),
+                    buttons: [
+                        { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
+                        {
+                            type: 'danger',
+                            label: ngxTranslateExtractMarker.marker('catalog.remove-from-channel'),
+                            translationVars: { channelCode: channelCode },
+                            returnValue: true,
+                        },
+                    ],
+                });
+            }), operators.switchMap(function (response) { return response
                 ? _this.dataService.product.removeVariantsFromChannel({
                     channelId: channelId,
                     productVariantIds: [variant.id],
@@ -2425,9 +2460,9 @@
     ProductDetailComponent.decorators = [
         { type: i0.Component, args: [{
                     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",
+                    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                                <span class=\"full-label\">{{ 'catalog.display-variant-cards' | translate }}</span>\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                                <span class=\"full-label\">{{ 'catalog.display-variant-table' | translate }}</span>\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 mb0 mr0\"\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;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"]
+                    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;flex-direction:column;justify-content:space-between}@media screen and (min-width: 768px){.view-mode{flex-direction:row}}.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 [
@@ -2490,6 +2525,11 @@
                     groupByProduct: _this.groupByProduct,
                 },
             }); });
+            _this.selectionManager = new i2.SelectionManager({
+                multiSelect: true,
+                itemsAreEqual: function (a, b) { return _this.groupByProduct ? a.productId === b.productId : a.productVariantId === b.productVariantId; },
+                additiveMode: true,
+            });
             return _this;
         }
         ProductListComponent.prototype.ngOnInit = function () {
@@ -2596,8 +2636,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 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"]
+                    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-toggle-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrToggle [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\" />\r\n                <label>\r\n                    {{ 'catalog.group-by-product' | translate }}\r\n                </label>\r\n            </clr-toggle-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            {{ 'catalog.create-new-product' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n    [selectionManager]=\"selectionManager\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt-column> </vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\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            <div>{{ groupByProduct ? result.productName : result.productVariantName }}</div>\r\n            <div *ngIf=\"!groupByProduct\" class=\"sku\">{{ result.sku }}</div>\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%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-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}.sku{color:var(--color-text-300)}\n"]
                 },] }
     ];
     ProductListComponent.ctorParameters = function () { return [
@@ -3327,6 +3367,7 @@
                 name: '',
                 slug: '',
                 isPrivate: false,
+                breadcrumbs: [],
                 description: '',
                 featuredAsset: null,
                 assets: [],
@@ -3442,88 +3483,88 @@
         { type: i2.DataService }
     ]; };
 
-    var ɵ0 = {
+    var ɵ0$3 = {
         breadcrumb: ngxTranslateExtractMarker.marker('breadcrumb.products'),
-    }, ɵ1 = {
+    }, ɵ1$3 = {
         breadcrumb: productBreadcrumb,
-    }, ɵ2 = {
+    }, ɵ2$3 = {
         breadcrumb: productVariantEditorBreadcrumb,
-    }, ɵ3 = {
+    }, ɵ3$3 = {
         breadcrumb: productOptionsEditorBreadcrumb,
-    }, ɵ4 = {
+    }, ɵ4$3 = {
         breadcrumb: ngxTranslateExtractMarker.marker('breadcrumb.facets'),
-    }, ɵ5 = {
+    }, ɵ5$3 = {
         breadcrumb: facetBreadcrumb,
-    }, ɵ6 = {
+    }, ɵ6$3 = {
         breadcrumb: ngxTranslateExtractMarker.marker('breadcrumb.collections'),
-    }, ɵ7 = {
+    }, ɵ7$3 = {
         breadcrumb: collectionBreadcrumb,
-    }, ɵ8 = {
+    }, ɵ8$3 = {
         breadcrumb: ngxTranslateExtractMarker.marker('breadcrumb.assets'),
-    }, ɵ9 = {
+    }, ɵ9$1 = {
         breadcrumb: assetBreadcrumb,
     };
     var catalogRoutes = [
         {
             path: 'products',
             component: ProductListComponent,
-            data: ɵ0,
+            data: ɵ0$3,
         },
         {
             path: 'products/:id',
             component: ProductDetailComponent,
             resolve: i2.createResolveData(ProductResolver),
             canDeactivate: [i2.CanDeactivateDetailGuard],
-            data: ɵ1,
+            data: ɵ1$3,
         },
         {
             path: 'products/:id/manage-variants',
             component: ProductVariantsEditorComponent,
             resolve: i2.createResolveData(ProductVariantsResolver),
             canDeactivate: [i2.CanDeactivateDetailGuard],
-            data: ɵ2,
+            data: ɵ2$3,
         },
         {
             path: 'products/:id/options',
             component: ProductOptionsEditorComponent,
             resolve: i2.createResolveData(ProductVariantsResolver),
             canDeactivate: [i2.CanDeactivateDetailGuard],
-            data: ɵ3,
+            data: ɵ3$3,
         },
         {
             path: 'facets',
             component: FacetListComponent,
-            data: ɵ4,
+            data: ɵ4$3,
         },
         {
             path: 'facets/:id',
             component: FacetDetailComponent,
             resolve: i2.createResolveData(FacetResolver),
             canDeactivate: [i2.CanDeactivateDetailGuard],
-            data: ɵ5,
+            data: ɵ5$3,
         },
         {
             path: 'collections',
             component: CollectionListComponent,
-            data: ɵ6,
+            data: ɵ6$3,
         },
         {
             path: 'collections/:id',
             component: CollectionDetailComponent,
             resolve: i2.createResolveData(CollectionResolver),
             canDeactivate: [i2.CanDeactivateDetailGuard],
-            data: ɵ7,
+            data: ɵ7$3,
         },
         {
             path: 'assets',
             component: AssetListComponent,
-            data: ɵ8,
+            data: ɵ8$3,
         },
         {
             path: 'assets/:id',
             component: AssetDetailComponent,
             resolve: i2.createResolveData(AssetResolver),
-            data: ɵ9,
+            data: ɵ9$1,
         },
     ];
     function productBreadcrumb(data, params) {
@@ -3694,6 +3735,153 @@
         updatePermissions: [{ type: i0.Input }]
     };
 
+    var AssignToChannelDialogComponent = /** @class */ (function () {
+        // assigned by ModalService.fromComponent() call
+        function AssignToChannelDialogComponent(dataService, notificationService) {
+            this.dataService = dataService;
+            this.notificationService = notificationService;
+            this.selectedChannelIdControl = new forms.FormControl();
+        }
+        AssignToChannelDialogComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var activeChannelId$ = this.dataService.client
+                .userStatus()
+                .mapSingle(function (_a) {
+                var userStatus = _a.userStatus;
+                return userStatus.activeChannelId;
+            });
+            var allChannels$ = this.dataService.settings.getChannels().mapSingle(function (data) { return data.channels; });
+            rxjs.combineLatest(activeChannelId$, allChannels$).subscribe(function (_a) {
+                var _b = __read(_a, 2), activeChannelId = _b[0], channels = _b[1];
+                // tslint:disable-next-line:no-non-null-assertion
+                _this.currentChannel = channels.find(function (c) { return c.id === activeChannelId; });
+                _this.availableChannels = channels;
+            });
+            this.selectedChannelIdControl.valueChanges.subscribe(function (ids) {
+                _this.selectChannel(ids);
+            });
+        };
+        AssignToChannelDialogComponent.prototype.selectChannel = function (channelIds) {
+            this.selectedChannel = this.availableChannels.find(function (c) { return c.id === channelIds[0]; });
+        };
+        AssignToChannelDialogComponent.prototype.assign = function () {
+            var selectedChannel = this.selectedChannel;
+            if (selectedChannel) {
+                this.resolveWith(selectedChannel);
+            }
+        };
+        AssignToChannelDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        return AssignToChannelDialogComponent;
+    }());
+    AssignToChannelDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-assign-to-channel-dialog',
+                    template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.assign-to-channel' | translate }}\r\n</ng-template>\r\n<clr-input-container class=\"mb4\">\r\n    <label>{{ 'common.channel' | translate }}</label>\r\n    <vdr-channel-assignment-control\r\n        clrInput\r\n        [multiple]=\"false\"\r\n        [includeDefaultChannel]=\"false\"\r\n        [formControl]=\"selectedChannelIdControl\"\r\n    ></vdr-channel-assignment-control>\r\n</clr-input-container>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\r\n        <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n            {{ 'catalog.assign-to-named-channel' | translate: { channelCode: selectedChannel?.code } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'catalog.no-channel-selected' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: ["vdr-channel-assignment-control{min-width:200px}\n"]
+                },] }
+    ];
+    AssignToChannelDialogComponent.ctorParameters = function () { return [
+        { type: i2.DataService },
+        { type: i2.NotificationService }
+    ]; };
+
+    var GET_PRODUCTS_WITH_FACET_VALUES_BY_IDS = apolloAngular.gql(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    query GetProductsWithFacetValuesByIds($ids: [String!]!) {\n        products(options: { filter: { id: { in: $ids } } }) {\n            items {\n                id\n                name\n                facetValues {\n                    id\n                    name\n                    code\n                    facet {\n                        id\n                        name\n                        code\n                    }\n                }\n            }\n        }\n    }\n"], ["\n    query GetProductsWithFacetValuesByIds($ids: [String!]!) {\n        products(options: { filter: { id: { in: $ids } } }) {\n            items {\n                id\n                name\n                facetValues {\n                    id\n                    name\n                    code\n                    facet {\n                        id\n                        name\n                        code\n                    }\n                }\n            }\n        }\n    }\n"])));
+    var GET_VARIANTS_WITH_FACET_VALUES_BY_IDS = apolloAngular.gql(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    query GetVariantsWithFacetValuesByIds($ids: [String!]!) {\n        productVariants(options: { filter: { id: { in: $ids } } }) {\n            items {\n                id\n                name\n                sku\n                facetValues {\n                    id\n                    name\n                    code\n                    facet {\n                        id\n                        name\n                        code\n                    }\n                }\n            }\n        }\n    }\n"], ["\n    query GetVariantsWithFacetValuesByIds($ids: [String!]!) {\n        productVariants(options: { filter: { id: { in: $ids } } }) {\n            items {\n                id\n                name\n                sku\n                facetValues {\n                    id\n                    name\n                    code\n                    facet {\n                        id\n                        name\n                        code\n                    }\n                }\n            }\n        }\n    }\n"])));
+    var UPDATE_PRODUCTS_BULK = apolloAngular.gql(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    mutation UpdateProductsBulk($input: [UpdateProductInput!]!) {\n        updateProducts(input: $input) {\n            id\n            name\n            facetValues {\n                id\n                name\n                code\n            }\n        }\n    }\n"], ["\n    mutation UpdateProductsBulk($input: [UpdateProductInput!]!) {\n        updateProducts(input: $input) {\n            id\n            name\n            facetValues {\n                id\n                name\n                code\n            }\n        }\n    }\n"])));
+    var UPDATE_VARIANTS_BULK = apolloAngular.gql(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    mutation UpdateVariantsBulk($input: [UpdateProductVariantInput!]!) {\n        updateProductVariants(input: $input) {\n            id\n            name\n            facetValues {\n                id\n                name\n                code\n            }\n        }\n    }\n"], ["\n    mutation UpdateVariantsBulk($input: [UpdateProductVariantInput!]!) {\n        updateProductVariants(input: $input) {\n            id\n            name\n            facetValues {\n                id\n                name\n                code\n            }\n        }\n    }\n"])));
+    var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+    var BulkAddFacetValuesDialogComponent = /** @class */ (function () {
+        function BulkAddFacetValuesDialogComponent(dataService, changeDetectorRef) {
+            this.dataService = dataService;
+            this.changeDetectorRef = changeDetectorRef;
+            /* provided by call to ModalService */
+            this.mode = 'product';
+            this.facets = [];
+            this.state = 'loading';
+            this.selectedValues = [];
+            this.items = [];
+            this.facetValuesRemoved = false;
+        }
+        BulkAddFacetValuesDialogComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a, _b;
+            var fetchData$ = this.mode === 'product'
+                ? this.dataService
+                    .query(GET_PRODUCTS_WITH_FACET_VALUES_BY_IDS, {
+                    ids: (_a = this.ids) !== null && _a !== void 0 ? _a : [],
+                })
+                    .mapSingle(function (_c) {
+                    var products = _c.products;
+                    return products.items.map(function (p) { return (Object.assign(Object.assign({}, p), { facetValues: __spreadArray([], __read(p.facetValues)) })); });
+                })
+                : this.dataService
+                    .query(GET_VARIANTS_WITH_FACET_VALUES_BY_IDS, {
+                    ids: (_b = this.ids) !== null && _b !== void 0 ? _b : [],
+                })
+                    .mapSingle(function (_c) {
+                    var productVariants = _c.productVariants;
+                    return productVariants.items.map(function (p) { return (Object.assign(Object.assign({}, p), { facetValues: __spreadArray([], __read(p.facetValues)) })); });
+                });
+            this.subscription = fetchData$.subscribe({
+                next: function (items) {
+                    _this.items = items;
+                    _this.state = 'ready';
+                    _this.changeDetectorRef.markForCheck();
+                },
+            });
+        };
+        BulkAddFacetValuesDialogComponent.prototype.ngOnDestroy = function () {
+            var _a;
+            (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        };
+        BulkAddFacetValuesDialogComponent.prototype.cancel = function () {
+            this.resolveWith();
+        };
+        BulkAddFacetValuesDialogComponent.prototype.removeFacetValue = function (item, facetValueId) {
+            item.facetValues = item.facetValues.filter(function (fv) { return fv.id !== facetValueId; });
+            this.facetValuesRemoved = true;
+        };
+        BulkAddFacetValuesDialogComponent.prototype.addFacetValues = function () {
+            var _this = this;
+            var _a, _b;
+            var selectedFacetValueIds = this.selectedValues.map(function (sv) { return sv.id; });
+            this.state = 'saving';
+            var save$ = this.mode === 'product'
+                ? this.dataService.mutate(UPDATE_PRODUCTS_BULK, {
+                    input: (_a = this.items) === null || _a === void 0 ? void 0 : _a.map(function (product) { return ({
+                        id: product.id,
+                        facetValueIds: unique.unique(__spreadArray(__spreadArray([], __read(product.facetValues.map(function (fv) { return fv.id; }))), __read(selectedFacetValueIds))),
+                    }); }),
+                })
+                : this.dataService.mutate(UPDATE_VARIANTS_BULK, {
+                    input: (_b = this.items) === null || _b === void 0 ? void 0 : _b.map(function (product) { return ({
+                        id: product.id,
+                        facetValueIds: unique.unique(__spreadArray(__spreadArray([], __read(product.facetValues.map(function (fv) { return fv.id; }))), __read(selectedFacetValueIds))),
+                    }); }),
+                });
+            return save$.subscribe(function (result) {
+                _this.resolveWith(_this.selectedValues);
+            });
+        };
+        return BulkAddFacetValuesDialogComponent;
+    }());
+    BulkAddFacetValuesDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'vdr-bulk-add-facet-values-dialog',
+                    template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.edit-facet-values' | translate }}\r\n</ng-template>\r\n\r\n<div class=\"flex\">\r\n    <div class=\"flex center\">\r\n        <div class=\"mr2\">\r\n            {{ 'catalog.add-facet-value' | translate }}\r\n        </div>\r\n        <vdr-facet-value-selector\r\n            [facets]=\"facets\"\r\n            (selectedValuesChange)=\"selectedValues = $event\"\r\n        ></vdr-facet-value-selector>\r\n    </div>\r\n</div>\r\n\r\n<table class=\"table\" *ngIf=\"state !== 'loading'; else placeholder\">\r\n    <tbody>\r\n        <tr *ngFor=\"let item of items\">\r\n            <td class=\"left align-middle\">\r\n                <div>{{ item.name }}</div>\r\n                <div *ngIf=\"item.sku\" class=\"sku\">{{ item.sku }}</div>\r\n            </td>\r\n            <td class=\"left\">\r\n                <vdr-facet-value-chip\r\n                    *ngFor=\"let facetValue of item.facetValues\"\r\n                    [facetValue]=\"facetValue\"\r\n                    (remove)=\"removeFacetValue(item, facetValue.id)\"\r\n                ></vdr-facet-value-chip>\r\n            </td>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n\r\n<ng-template #placeholder>\r\n    <div class=\"loading\">\r\n    <clr-spinner></clr-spinner>\r\n    </div>\r\n</ng-template>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"addFacetValues()\"\r\n        [disabled]=\"selectedValues.length === 0 && facetValuesRemoved === false\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'common.update' | translate }}\r\n    </button>\r\n</ng-template>\r\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".loading{min-height:25vh;display:flex;justify-content:center;align-items:center}.sku{color:var(--color-text-300)}\n"]
+                },] }
+    ];
+    BulkAddFacetValuesDialogComponent.ctorParameters = function () { return [
+        { type: i2.DataService },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
     var CollectionContentsComponent = /** @class */ (function () {
         function CollectionContentsComponent(route, router, dataService) {
             this.route = route;
@@ -3807,6 +3995,175 @@
         headerTemplate: [{ type: i0.ContentChild, args: [i0.TemplateRef, { static: true },] }]
     };
 
+    var ɵ0$2 = function (userPermissions) { return userPermissions.includes(i2.Permission.DeleteCollection) ||
+        userPermissions.includes(i2.Permission.DeleteCatalog); }, ɵ1$2 = function (_a) {
+        var injector = _a.injector, selection = _a.selection, hostComponent = _a.hostComponent, clearSelection = _a.clearSelection;
+        var modalService = injector.get(i2.ModalService);
+        var dataService = injector.get(i2.DataService);
+        var notificationService = injector.get(i2.NotificationService);
+        modalService
+            .dialog({
+            title: ngxTranslateExtractMarker.marker('catalog.confirm-bulk-delete-collections'),
+            translationVars: {
+                count: selection.length,
+            },
+            buttons: [
+                { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
+                { type: 'danger', label: ngxTranslateExtractMarker.marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(operators.switchMap(function (response) { return response
+            ? dataService.collection.deleteCollections(unique.unique(selection.map(function (c) { return c.id; })))
+            : rxjs.EMPTY; }))
+            .subscribe(function (result) {
+            var e_1, _a;
+            var deleted = 0;
+            var errors = [];
+            try {
+                for (var _b = __values(result.deleteCollections), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var item = _c.value;
+                    if (item.result === i2.DeletionResult.DELETED) {
+                        deleted++;
+                    }
+                    else if (item.message) {
+                        errors.push(item.message);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            if (0 < deleted) {
+                notificationService.success(ngxTranslateExtractMarker.marker('catalog.notify-bulk-delete-collections-success'), {
+                    count: deleted,
+                });
+            }
+            if (0 < errors.length) {
+                notificationService.error(errors.join('\n'));
+            }
+            hostComponent.refresh();
+            clearSelection();
+        });
+    };
+    var deleteCollectionsBulkAction = {
+        location: 'collection-list',
+        label: ngxTranslateExtractMarker.marker('common.delete'),
+        icon: 'trash',
+        iconClass: 'is-danger',
+        requiresPermission: ɵ0$2,
+        onClick: ɵ1$2,
+    };
+    var ɵ2$2 = function (userPermissions) { return userPermissions.includes(i2.Permission.UpdateCatalog) ||
+        userPermissions.includes(i2.Permission.UpdateProduct); }, ɵ3$2 = function (_a) {
+        var injector = _a.injector;
+        return i2.isMultiChannel(injector.get(i2.DataService));
+    }, ɵ4$2 = function (_a) {
+        var injector = _a.injector, selection = _a.selection, hostComponent = _a.hostComponent, clearSelection = _a.clearSelection;
+        var modalService = injector.get(i2.ModalService);
+        var dataService = injector.get(i2.DataService);
+        var notificationService = injector.get(i2.NotificationService);
+        modalService
+            .fromComponent(AssignToChannelDialogComponent, {
+            size: 'md',
+            locals: {},
+        })
+            .pipe(operators.switchMap(function (result) {
+            if (result) {
+                return dataService.collection
+                    .assignCollectionsToChannel({
+                    collectionIds: selection.map(function (c) { return c.id; }),
+                    channelId: result.id,
+                })
+                    .pipe(operators.mapTo(result));
+            }
+            else {
+                return rxjs.EMPTY;
+            }
+        }))
+            .subscribe(function (result) {
+            notificationService.success(ngxTranslateExtractMarker.marker('catalog.assign-collections-to-channel-success'), {
+                count: selection.length,
+                channelCode: result.code,
+            });
+            clearSelection();
+        });
+    };
+    var assignCollectionsToChannelBulkAction = {
+        location: 'collection-list',
+        label: ngxTranslateExtractMarker.marker('catalog.assign-to-channel'),
+        icon: 'layers',
+        requiresPermission: ɵ2$2,
+        isVisible: ɵ3$2,
+        onClick: ɵ4$2,
+    };
+    var ɵ5$2 = function (userPermissions) { return userPermissions.includes(i2.Permission.UpdateChannel) ||
+        userPermissions.includes(i2.Permission.UpdateProduct); }, ɵ6$2 = function (_a) {
+        var injector = _a.injector;
+        return i2.getChannelCodeFromUserStatus(injector.get(i2.DataService));
+    }, ɵ7$2 = function (_a) {
+        var injector = _a.injector;
+        return i2.currentChannelIsNotDefault(injector.get(i2.DataService));
+    }, ɵ8$2 = function (_a) {
+        var injector = _a.injector, selection = _a.selection, hostComponent = _a.hostComponent, clearSelection = _a.clearSelection;
+        var modalService = injector.get(i2.ModalService);
+        var dataService = injector.get(i2.DataService);
+        var notificationService = injector.get(i2.NotificationService);
+        var activeChannelId$ = dataService.client
+            .userStatus()
+            .mapSingle(function (_a) {
+            var userStatus = _a.userStatus;
+            return userStatus.activeChannelId;
+        });
+        rxjs.from(i2.getChannelCodeFromUserStatus(injector.get(i2.DataService)))
+            .pipe(operators.switchMap(function (_a) {
+            var channelCode = _a.channelCode;
+            return modalService.dialog({
+                title: ngxTranslateExtractMarker.marker('catalog.remove-from-channel'),
+                translationVars: {
+                    channelCode: channelCode,
+                },
+                buttons: [
+                    { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
+                    {
+                        type: 'danger',
+                        label: ngxTranslateExtractMarker.marker('common.remove'),
+                        returnValue: true,
+                    },
+                ],
+            });
+        }), operators.switchMap(function (res) { return res
+            ? activeChannelId$.pipe(operators.switchMap(function (activeChannelId) { return activeChannelId
+                ? dataService.collection.removeCollectionsFromChannel({
+                    channelId: activeChannelId,
+                    collectionIds: selection.map(function (c) { return c.id; }),
+                })
+                : rxjs.EMPTY; }), operators.mapTo(true))
+            : rxjs.of(false); }))
+            .subscribe(function (removed) {
+            if (removed) {
+                clearSelection();
+                notificationService.success(ngxTranslateExtractMarker.marker('catalog.notify-remove-collections-from-channel-success'), {
+                    count: selection.length,
+                });
+                hostComponent.refresh();
+            }
+        });
+    };
+    var removeCollectionsFromChannelBulkAction = {
+        location: 'collection-list',
+        label: ngxTranslateExtractMarker.marker('catalog.remove-from-channel'),
+        requiresPermission: ɵ5$2,
+        getTranslationVars: ɵ6$2,
+        icon: 'layers',
+        iconClass: 'is-warning',
+        isVisible: ɵ7$2,
+        onClick: ɵ8$2,
+    };
+
     /**
      * Builds a tree from an array of nodes which have a parent.
      * Based on https://stackoverflow.com/a/31247960/772859, modified to preserve ordering.
@@ -3947,7 +4304,7 @@
     CollectionTreeComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-collection-tree',
-                    template: "<vdr-collection-tree-node\r\n    *ngIf=\"collectionTree\"\r\n    cdkDropListGroup\r\n    [expandAll]=\"expandAll\"\r\n    [collectionTree]=\"collectionTree\"\r\n    [activeCollectionId]=\"activeCollectionId\"\r\n></vdr-collection-tree-node>\r\n",
+                    template: "<vdr-collection-tree-node\r\n    *ngIf=\"collectionTree\"\r\n    cdkDropListGroup\r\n    [expandAll]=\"expandAll\"\r\n    [collectionTree]=\"collectionTree\"\r\n    [selectionManager]=\"selectionManager\"\r\n    [activeCollectionId]=\"activeCollectionId\"\r\n></vdr-collection-tree-node>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
@@ -3957,17 +4314,19 @@
         activeCollectionId: [{ type: i0.Input }],
         expandAll: [{ type: i0.Input }],
         expandedIds: [{ type: i0.Input }],
+        selectionManager: [{ type: i0.Input }],
         rearrange: [{ type: i0.Output }],
         deleteCollection: [{ type: i0.Output }]
     };
 
     var CollectionTreeNodeComponent = /** @class */ (function () {
-        function CollectionTreeNodeComponent(parent, root, dataService, router, route) {
+        function CollectionTreeNodeComponent(parent, root, dataService, router, route, changeDetectorRef) {
             this.parent = parent;
             this.root = root;
             this.dataService = dataService;
             this.router = router;
             this.route = route;
+            this.changeDetectorRef = changeDetectorRef;
             this.depth = 0;
             this.expandAll = false;
             this.moveListItems = [];
@@ -3976,6 +4335,8 @@
             }
         }
         CollectionTreeNodeComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _a;
             this.parentName = this.collectionTree.name || '<root>';
             var permissions$ = this.dataService.client
                 .userStatus()
@@ -3983,6 +4344,7 @@
                 .pipe(operators.shareReplay(1));
             this.hasUpdatePermission$ = permissions$.pipe(operators.map(function (perms) { return perms.includes(i2.Permission.UpdateCatalog) || perms.includes(i2.Permission.UpdateCollection); }));
             this.hasDeletePermission$ = permissions$.pipe(operators.map(function (perms) { return perms.includes(i2.Permission.DeleteCatalog) || perms.includes(i2.Permission.DeleteCollection); }));
+            this.subscription = (_a = this.selectionManager) === null || _a === void 0 ? void 0 : _a.selectionChanges$.subscribe(function () { return _this.changeDetectorRef.markForCheck(); });
         };
         CollectionTreeNodeComponent.prototype.ngOnChanges = function (changes) {
             var expandAllChange = changes['expandAll'];
@@ -3992,6 +4354,10 @@
                 }
             }
         };
+        CollectionTreeNodeComponent.prototype.ngOnDestroy = function () {
+            var _a;
+            (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        };
         CollectionTreeNodeComponent.prototype.trackByFn = function (index, item) {
             return item.id;
         };
@@ -4055,9 +4421,9 @@
     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)=\"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",
+                    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>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    [checked]=\"selectionManager.isSelected(collection)\"\r\n                    (click)=\"selectionManager.toggleSelection(collection, $event)\"\r\n                />\r\n            </div>\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            [selectionManager]=\"selectionManager\"\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"]
+                    styles: [":host{display:block}.collection{background-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);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-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);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"]
                 },] }
     ];
     CollectionTreeNodeComponent.ctorParameters = function () { return [
@@ -4065,12 +4431,256 @@
         { type: CollectionTreeComponent },
         { type: i2.DataService },
         { type: i1.Router },
-        { type: i1.ActivatedRoute }
+        { type: i1.ActivatedRoute },
+        { type: i0.ChangeDetectorRef }
     ]; };
     CollectionTreeNodeComponent.propDecorators = {
         collectionTree: [{ type: i0.Input }],
         activeCollectionId: [{ type: i0.Input }],
-        expandAll: [{ type: i0.Input }]
+        expandAll: [{ type: i0.Input }],
+        selectionManager: [{ type: i0.Input }]
+    };
+
+    var ɵ0$1 = function (userPermissions) { return userPermissions.includes(i2.Permission.DeleteFacet) ||
+        userPermissions.includes(i2.Permission.DeleteCatalog); }, ɵ1$1 = function (_b) {
+        var injector = _b.injector, selection = _b.selection, hostComponent = _b.hostComponent, clearSelection = _b.clearSelection;
+        var modalService = injector.get(i2.ModalService);
+        var dataService = injector.get(i2.DataService);
+        var notificationService = injector.get(i2.NotificationService);
+        function showModalAndDelete(facetIds, message) {
+            return modalService
+                .dialog({
+                title: ngxTranslateExtractMarker.marker('catalog.confirm-bulk-delete-facets'),
+                translationVars: {
+                    count: selection.length,
+                },
+                size: message ? 'lg' : 'md',
+                body: message,
+                buttons: [
+                    { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
+                    {
+                        type: 'danger',
+                        label: message ? ngxTranslateExtractMarker.marker('common.force-delete') : ngxTranslateExtractMarker.marker('common.delete'),
+                        returnValue: true,
+                    },
+                ],
+            })
+                .pipe(operators.switchMap(function (res) { return res
+                ? dataService.facet
+                    .deleteFacets(facetIds, !!message)
+                    .pipe(operators.map(function (res2) { return res2.deleteFacets; }))
+                : rxjs.of([]); }));
+        }
+        showModalAndDelete(unique.unique(selection.map(function (f) { return f.id; })))
+            .pipe(operators.switchMap(function (result) {
+            var e_1, _b;
+            var _a;
+            var deletedCount = 0;
+            var errors = [];
+            var errorIds = [];
+            var i = 0;
+            try {
+                for (var result_1 = __values(result), result_1_1 = result_1.next(); !result_1_1.done; result_1_1 = result_1.next()) {
+                    var item = result_1_1.value;
+                    if (item.result === i2.DeletionResult.DELETED) {
+                        deletedCount++;
+                    }
+                    else if (item.message) {
+                        errors.push(item.message);
+                        errorIds.push((_a = selection[i]) === null || _a === void 0 ? void 0 : _a.id);
+                    }
+                    i++;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (result_1_1 && !result_1_1.done && (_b = result_1.return)) _b.call(result_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            if (0 < errorIds.length) {
+                return showModalAndDelete(errorIds, errors.join('\n')).pipe(operators.map(function (result2) {
+                    var deletedCount2 = result2.filter(function (r) { return r.result === i2.DeletionResult.DELETED; }).length;
+                    return deletedCount + deletedCount2;
+                }));
+            }
+            else {
+                return rxjs.of(deletedCount);
+            }
+        }))
+            .subscribe(function (deletedCount) {
+            if (deletedCount) {
+                hostComponent.refresh();
+                clearSelection();
+                notificationService.success(ngxTranslateExtractMarker.marker('catalog.notify-bulk-delete-facets-success'), {
+                    count: deletedCount,
+                });
+            }
+        });
+    };
+    var deleteFacetsBulkAction = {
+        location: 'facet-list',
+        label: ngxTranslateExtractMarker.marker('common.delete'),
+        icon: 'trash',
+        iconClass: 'is-danger',
+        requiresPermission: ɵ0$1,
+        onClick: ɵ1$1,
+    };
+    var ɵ2$1 = function (userPermissions) { return userPermissions.includes(i2.Permission.UpdateFacet) ||
+        userPermissions.includes(i2.Permission.UpdateCatalog); }, ɵ3$1 = function (_b) {
+        var injector = _b.injector;
+        return i2.isMultiChannel(injector.get(i2.DataService));
+    }, ɵ4$1 = function (_b) {
+        var injector = _b.injector, selection = _b.selection, hostComponent = _b.hostComponent, clearSelection = _b.clearSelection;
+        var modalService = injector.get(i2.ModalService);
+        var dataService = injector.get(i2.DataService);
+        var notificationService = injector.get(i2.NotificationService);
+        modalService
+            .fromComponent(AssignToChannelDialogComponent, {
+            size: 'md',
+            locals: {},
+        })
+            .pipe(operators.switchMap(function (result) {
+            if (result) {
+                return dataService.facet
+                    .assignFacetsToChannel({
+                    facetIds: selection.map(function (f) { return f.id; }),
+                    channelId: result.id,
+                })
+                    .pipe(operators.mapTo(result));
+            }
+            else {
+                return rxjs.EMPTY;
+            }
+        }))
+            .subscribe(function (result) {
+            notificationService.success(ngxTranslateExtractMarker.marker('catalog.assign-facets-to-channel-success'), {
+                count: selection.length,
+                channelCode: result.code,
+            });
+            clearSelection();
+        });
+    };
+    var assignFacetsToChannelBulkAction = {
+        location: 'facet-list',
+        label: ngxTranslateExtractMarker.marker('catalog.assign-to-channel'),
+        icon: 'layers',
+        requiresPermission: ɵ2$1,
+        isVisible: ɵ3$1,
+        onClick: ɵ4$1,
+    };
+    var ɵ5$1 = function (_b) {
+        var injector = _b.injector;
+        return i2.getChannelCodeFromUserStatus(injector.get(i2.DataService));
+    }, ɵ6$1 = function (userPermissions) { return userPermissions.includes(i2.Permission.UpdateFacet) ||
+        userPermissions.includes(i2.Permission.UpdateCatalog); }, ɵ7$1 = function (_b) {
+        var injector = _b.injector;
+        return i2.currentChannelIsNotDefault(injector.get(i2.DataService));
+    }, ɵ8$1 = function (_b) {
+        var injector = _b.injector, selection = _b.selection, hostComponent = _b.hostComponent, clearSelection = _b.clearSelection;
+        var modalService = injector.get(i2.ModalService);
+        var dataService = injector.get(i2.DataService);
+        var notificationService = injector.get(i2.NotificationService);
+        var activeChannelId$ = dataService.client
+            .userStatus()
+            .mapSingle(function (_b) {
+            var userStatus = _b.userStatus;
+            return userStatus.activeChannelId;
+        });
+        function showModalAndDelete(facetIds, message) {
+            return modalService
+                .dialog({
+                title: ngxTranslateExtractMarker.marker('catalog.remove-from-channel'),
+                translationVars: {
+                    count: selection.length,
+                },
+                size: message ? 'lg' : 'md',
+                body: message,
+                buttons: [
+                    { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
+                    {
+                        type: 'danger',
+                        label: message ? ngxTranslateExtractMarker.marker('common.force-remove') : ngxTranslateExtractMarker.marker('common.remove'),
+                        returnValue: true,
+                    },
+                ],
+            })
+                .pipe(operators.switchMap(function (res) { return res
+                ? activeChannelId$.pipe(operators.switchMap(function (activeChannelId) { return activeChannelId
+                    ? dataService.facet.removeFacetsFromChannel({
+                        channelId: activeChannelId,
+                        facetIds: facetIds,
+                        force: !!message,
+                    })
+                    : rxjs.EMPTY; }), operators.map(function (res2) { return res2.removeFacetsFromChannel; }))
+                : rxjs.EMPTY; }));
+        }
+        showModalAndDelete(unique.unique(selection.map(function (f) { return f.id; })))
+            .pipe(operators.switchMap(function (result) {
+            var e_2, _b;
+            var _a;
+            var removedCount = selection.length;
+            var errors = [];
+            var errorIds = [];
+            var i = 0;
+            try {
+                for (var result_2 = __values(result), result_2_1 = result_2.next(); !result_2_1.done; result_2_1 = result_2.next()) {
+                    var item = result_2_1.value;
+                    if (item.__typename === 'FacetInUseError') {
+                        errors.push(item.message);
+                        errorIds.push((_a = selection[i]) === null || _a === void 0 ? void 0 : _a.id);
+                        removedCount--;
+                    }
+                    i++;
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (result_2_1 && !result_2_1.done && (_b = result_2.return)) _b.call(result_2);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            if (0 < errorIds.length) {
+                return showModalAndDelete(errorIds, errors.join('\n')).pipe(operators.map(function (result2) {
+                    var notRemovedCount = result2.filter(function (r) { return r.__typename === 'FacetInUseError'; }).length;
+                    return selection.length - notRemovedCount;
+                }));
+            }
+            else {
+                return rxjs.of(removedCount);
+            }
+        }), operators.switchMap(function (removedCount) { return removedCount
+            ? i2.getChannelCodeFromUserStatus(dataService).then(function (_b) {
+                var channelCode = _b.channelCode;
+                return ({
+                    channelCode: channelCode,
+                    removedCount: removedCount,
+                });
+            })
+            : rxjs.EMPTY; }))
+            .subscribe(function (_b) {
+            var removedCount = _b.removedCount, channelCode = _b.channelCode;
+            if (removedCount) {
+                hostComponent.refresh();
+                clearSelection();
+                notificationService.success(ngxTranslateExtractMarker.marker('catalog.notify-remove-facets-from-channel-success'), {
+                    count: removedCount,
+                    channelCode: channelCode,
+                });
+            }
+        });
+    };
+    var removeFacetsFromChannelBulkAction = {
+        location: 'facet-list',
+        label: ngxTranslateExtractMarker.marker('catalog.remove-from-channel'),
+        getTranslationVars: ɵ5$1,
+        icon: 'layers',
+        iconClass: 'is-warning',
+        requiresPermission: ɵ6$1,
+        isVisible: ɵ7$1,
+        onClick: ɵ8$1,
     };
 
     var DEFAULT_VARIANT_CODE = '__DEFAULT_VARIANT__';
@@ -4328,6 +4938,201 @@
         disabled: [{ type: i0.Input }]
     };
 
+    var ɵ0 = function (userPermissions) { return userPermissions.includes(i2.Permission.DeleteProduct) ||
+        userPermissions.includes(i2.Permission.DeleteCatalog); }, ɵ1 = function (_a) {
+        var injector = _a.injector, selection = _a.selection, hostComponent = _a.hostComponent, clearSelection = _a.clearSelection;
+        var modalService = injector.get(i2.ModalService);
+        var dataService = injector.get(i2.DataService);
+        var notificationService = injector.get(i2.NotificationService);
+        modalService
+            .dialog({
+            title: ngxTranslateExtractMarker.marker('catalog.confirm-bulk-delete-products'),
+            translationVars: {
+                count: selection.length,
+            },
+            buttons: [
+                { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
+                { type: 'danger', label: ngxTranslateExtractMarker.marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(operators.switchMap(function (response) { return response
+            ? dataService.product.deleteProducts(unique.unique(selection.map(function (p) { return p.productId; })))
+            : rxjs.EMPTY; }))
+            .subscribe(function (result) {
+            var e_1, _a;
+            var deleted = 0;
+            var errors = [];
+            try {
+                for (var _b = __values(result.deleteProducts), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var item = _c.value;
+                    if (item.result === i2.DeletionResult.DELETED) {
+                        deleted++;
+                    }
+                    else if (item.message) {
+                        errors.push(item.message);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            if (0 < deleted) {
+                notificationService.success(ngxTranslateExtractMarker.marker('catalog.notify-bulk-delete-products-success'), {
+                    count: deleted,
+                });
+            }
+            if (0 < errors.length) {
+                notificationService.error(errors.join('\n'));
+            }
+            hostComponent.refresh();
+            clearSelection();
+        });
+    };
+    var deleteProductsBulkAction = {
+        location: 'product-list',
+        label: ngxTranslateExtractMarker.marker('common.delete'),
+        icon: 'trash',
+        iconClass: 'is-danger',
+        requiresPermission: ɵ0,
+        onClick: ɵ1,
+    };
+    var ɵ2 = function (userPermissions) { return userPermissions.includes(i2.Permission.UpdateCatalog) ||
+        userPermissions.includes(i2.Permission.UpdateProduct); }, ɵ3 = function (_a) {
+        var injector = _a.injector;
+        return i2.isMultiChannel(injector.get(i2.DataService));
+    }, ɵ4 = function (_a) {
+        var injector = _a.injector, selection = _a.selection, hostComponent = _a.hostComponent, clearSelection = _a.clearSelection;
+        var modalService = injector.get(i2.ModalService);
+        var dataService = injector.get(i2.DataService);
+        var notificationService = injector.get(i2.NotificationService);
+        modalService
+            .fromComponent(AssignProductsToChannelDialogComponent, {
+            size: 'lg',
+            locals: {
+                productIds: unique.unique(selection.map(function (p) { return p.productId; })),
+                currentChannelIds: [],
+            },
+        })
+            .subscribe(function (result) {
+            if (result) {
+                clearSelection();
+            }
+        });
+    };
+    var assignProductsToChannelBulkAction = {
+        location: 'product-list',
+        label: ngxTranslateExtractMarker.marker('catalog.assign-to-channel'),
+        icon: 'layers',
+        requiresPermission: ɵ2,
+        isVisible: ɵ3,
+        onClick: ɵ4,
+    };
+    var ɵ5 = function (userPermissions) { return userPermissions.includes(i2.Permission.UpdateChannel) ||
+        userPermissions.includes(i2.Permission.UpdateProduct); }, ɵ6 = function (_a) {
+        var injector = _a.injector;
+        return i2.getChannelCodeFromUserStatus(injector.get(i2.DataService));
+    }, ɵ7 = function (_a) {
+        var injector = _a.injector;
+        return i2.currentChannelIsNotDefault(injector.get(i2.DataService));
+    }, ɵ8 = function (_a) {
+        var injector = _a.injector, selection = _a.selection, hostComponent = _a.hostComponent, clearSelection = _a.clearSelection;
+        var modalService = injector.get(i2.ModalService);
+        var dataService = injector.get(i2.DataService);
+        var notificationService = injector.get(i2.NotificationService);
+        var activeChannelId$ = dataService.client
+            .userStatus()
+            .mapSingle(function (_a) {
+            var userStatus = _a.userStatus;
+            return userStatus.activeChannelId;
+        });
+        rxjs.from(i2.getChannelCodeFromUserStatus(injector.get(i2.DataService)))
+            .pipe(operators.switchMap(function (_a) {
+            var channelCode = _a.channelCode;
+            return modalService.dialog({
+                title: ngxTranslateExtractMarker.marker('catalog.remove-from-channel'),
+                translationVars: {
+                    channelCode: channelCode,
+                },
+                buttons: [
+                    { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
+                    {
+                        type: 'danger',
+                        label: ngxTranslateExtractMarker.marker('common.remove'),
+                        returnValue: true,
+                    },
+                ],
+            });
+        }), operators.switchMap(function (res) { return res
+            ? activeChannelId$.pipe(operators.switchMap(function (activeChannelId) { return activeChannelId
+                ? dataService.product.removeProductsFromChannel({
+                    channelId: activeChannelId,
+                    productIds: selection.map(function (p) { return p.productId; }),
+                })
+                : rxjs.EMPTY; }), operators.mapTo(true))
+            : rxjs.of(false); }))
+            .subscribe(function (removed) {
+            if (removed) {
+                clearSelection();
+                notificationService.success(ngxTranslateExtractMarker.marker('common.notify-remove-products-from-channel-success'), {
+                    count: selection.length,
+                });
+                setTimeout(function () { return hostComponent.refresh(); }, 1000);
+            }
+        });
+    };
+    var removeProductsFromChannelBulkAction = {
+        location: 'product-list',
+        label: ngxTranslateExtractMarker.marker('catalog.remove-from-channel'),
+        requiresPermission: ɵ5,
+        getTranslationVars: ɵ6,
+        icon: 'layers',
+        iconClass: 'is-warning',
+        isVisible: ɵ7,
+        onClick: ɵ8,
+    };
+    var ɵ9 = function (userPermissions) { return userPermissions.includes(i2.Permission.UpdateCatalog) ||
+        userPermissions.includes(i2.Permission.UpdateProduct); }, ɵ10 = function (_a) {
+        var injector = _a.injector, selection = _a.selection, hostComponent = _a.hostComponent, clearSelection = _a.clearSelection;
+        var modalService = injector.get(i2.ModalService);
+        var dataService = injector.get(i2.DataService);
+        var notificationService = injector.get(i2.NotificationService);
+        var mode = hostComponent.groupByProduct ? 'product' : 'variant';
+        var ids = mode === 'product'
+            ? unique.unique(selection.map(function (p) { return p.productId; }))
+            : unique.unique(selection.map(function (p) { return p.productVariantId; }));
+        return dataService.facet
+            .getAllFacets()
+            .mapSingle(function (data) { return data.facets.items; })
+            .pipe(operators.switchMap(function (facets) { return modalService.fromComponent(BulkAddFacetValuesDialogComponent, {
+            size: 'xl',
+            locals: {
+                facets: facets,
+                mode: mode,
+                ids: ids,
+            },
+        }); }))
+            .subscribe(function (result) {
+            if (result) {
+                notificationService.success(ngxTranslateExtractMarker.marker('common.notify-bulk-update-success'), {
+                    count: selection.length,
+                    entity: mode === 'product' ? 'Products' : 'ProductVariants',
+                });
+                clearSelection();
+            }
+        });
+    };
+    var assignFacetValuesToProductsBulkAction = {
+        location: 'product-list',
+        label: ngxTranslateExtractMarker.marker('catalog.edit-facet-values'),
+        icon: 'tag',
+        requiresPermission: ɵ9,
+        onClick: ɵ10,
+    };
+
     var UpdateProductOptionDialogComponent = /** @class */ (function () {
         function UpdateProductOptionDialogComponent() {
             this.updateVariantName = true;
@@ -4594,7 +5399,7 @@
     ProductVariantsListComponent.decorators = [
         { type: i0.Component, args: [{
                     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",
+                    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: { channelCode: channel.code }\"\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;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"]
                 },] }
@@ -4783,9 +5588,22 @@
         AssetDetailComponent,
         ConfirmVariantDeletionDialogComponent,
         ProductOptionsEditorComponent,
+        BulkAddFacetValuesDialogComponent,
+        AssignToChannelDialogComponent,
     ];
     var CatalogModule = /** @class */ (function () {
-        function CatalogModule() {
+        function CatalogModule(bulkActionRegistryService) {
+            this.bulkActionRegistryService = bulkActionRegistryService;
+            bulkActionRegistryService.registerBulkAction(assignFacetValuesToProductsBulkAction);
+            bulkActionRegistryService.registerBulkAction(assignProductsToChannelBulkAction);
+            bulkActionRegistryService.registerBulkAction(removeProductsFromChannelBulkAction);
+            bulkActionRegistryService.registerBulkAction(deleteProductsBulkAction);
+            bulkActionRegistryService.registerBulkAction(assignFacetsToChannelBulkAction);
+            bulkActionRegistryService.registerBulkAction(removeFacetsFromChannelBulkAction);
+            bulkActionRegistryService.registerBulkAction(deleteFacetsBulkAction);
+            bulkActionRegistryService.registerBulkAction(assignCollectionsToChannelBulkAction);
+            bulkActionRegistryService.registerBulkAction(removeCollectionsFromChannelBulkAction);
+            bulkActionRegistryService.registerBulkAction(deleteCollectionsBulkAction);
         }
         return CatalogModule;
     }());
@@ -4795,7 +5613,10 @@
                     exports: __spreadArray([], __read(CATALOG_COMPONENTS)),
                     declarations: __spreadArray([], __read(CATALOG_COMPONENTS)),
                 },] }
-    ];
+    ];
+    CatalogModule.ctorParameters = function () { return [
+        { type: i2.BulkActionRegistryService }
+    ]; };
 
     // This file was generated by the build-public-api.ts script
 
@@ -4809,6 +5630,8 @@
     exports.AssetResolver = AssetResolver;
     exports.AssetsComponent = AssetsComponent;
     exports.AssignProductsToChannelDialogComponent = AssignProductsToChannelDialogComponent;
+    exports.AssignToChannelDialogComponent = AssignToChannelDialogComponent;
+    exports.BulkAddFacetValuesDialogComponent = BulkAddFacetValuesDialogComponent;
     exports.CatalogModule = CatalogModule;
     exports.CollectionContentsComponent = CollectionContentsComponent;
     exports.CollectionDetailComponent = CollectionDetailComponent;
@@ -4820,6 +5643,8 @@
     exports.FacetDetailComponent = FacetDetailComponent;
     exports.FacetListComponent = FacetListComponent;
     exports.FacetResolver = FacetResolver;
+    exports.GET_PRODUCTS_WITH_FACET_VALUES_BY_IDS = GET_PRODUCTS_WITH_FACET_VALUES_BY_IDS;
+    exports.GET_VARIANTS_WITH_FACET_VALUES_BY_IDS = GET_VARIANTS_WITH_FACET_VALUES_BY_IDS;
     exports.GenerateProductVariantsComponent = GenerateProductVariantsComponent;
     exports.GeneratedVariant = GeneratedVariant;
     exports.OPTION_VALUE_INPUT_VALUE_ACCESSOR = OPTION_VALUE_INPUT_VALUE_ACCESSOR;
@@ -4833,27 +5658,30 @@
     exports.ProductVariantsListComponent = ProductVariantsListComponent;
     exports.ProductVariantsResolver = ProductVariantsResolver;
     exports.ProductVariantsTableComponent = ProductVariantsTableComponent;
+    exports.UPDATE_PRODUCTS_BULK = UPDATE_PRODUCTS_BULK;
+    exports.UPDATE_VARIANTS_BULK = UPDATE_VARIANTS_BULK;
     exports.UpdateProductOptionDialogComponent = UpdateProductOptionDialogComponent;
     exports.VariantPriceDetailComponent = VariantPriceDetailComponent;
     exports.arrayToTree = arrayToTree;
     exports.assetBreadcrumb = assetBreadcrumb;
+    exports.assignCollectionsToChannelBulkAction = assignCollectionsToChannelBulkAction;
+    exports.assignFacetValuesToProductsBulkAction = assignFacetValuesToProductsBulkAction;
+    exports.assignFacetsToChannelBulkAction = assignFacetsToChannelBulkAction;
+    exports.assignProductsToChannelBulkAction = assignProductsToChannelBulkAction;
     exports.catalogRoutes = catalogRoutes;
     exports.collectionBreadcrumb = collectionBreadcrumb;
+    exports.deleteCollectionsBulkAction = deleteCollectionsBulkAction;
+    exports.deleteFacetsBulkAction = deleteFacetsBulkAction;
+    exports.deleteProductsBulkAction = deleteProductsBulkAction;
     exports.facetBreadcrumb = facetBreadcrumb;
     exports.productBreadcrumb = productBreadcrumb;
     exports.productOptionsEditorBreadcrumb = productOptionsEditorBreadcrumb;
     exports.productVariantEditorBreadcrumb = productVariantEditorBreadcrumb;
+    exports.removeCollectionsFromChannelBulkAction = removeCollectionsFromChannelBulkAction;
+    exports.removeFacetsFromChannelBulkAction = removeFacetsFromChannelBulkAction;
+    exports.removeProductsFromChannelBulkAction = removeProductsFromChannelBulkAction;
     exports.replaceLast = replaceLast;
-    exports.ɵ0 = ɵ0;
-    exports.ɵ1 = ɵ1;
-    exports.ɵ2 = ɵ2;
-    exports.ɵ3 = ɵ3;
-    exports.ɵ4 = ɵ4;
-    exports.ɵ5 = ɵ5;
-    exports.ɵ6 = ɵ6;
-    exports.ɵ7 = ɵ7;
-    exports.ɵ8 = ɵ8;
-    exports.ɵ9 = ɵ9;
+    exports.ɵ10 = ɵ10;
 
     Object.defineProperty(exports, '__esModule', { value: true });