@vendure/admin-ui 2.0.0-next.21 → 2.0.0-next.23

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

@@ -3,14 +3,14 @@ import { Component, ChangeDetectionStrategy, EventEmitter, Input, HostBinding, O
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$1 from '@vendure/admin-ui/core';
-import { BaseDetailComponent, BaseListComponent, SortOrder, LogicalOperator, DeletionResult, AssetPickerDialogComponent, AssetPreviewDialogComponent, Permission, unicodePatternValidator, findTranslation, getConfigArgValue, createUpdatedTranslatable, encodeConfigArgValue, SelectionManager, FacetValueSelectorComponent, GlobalFlag, flattenFacetValues, getChannelCodeFromUserStatus, JobState, getDefaultUiLanguage, BaseEntityResolver, AssetType, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, ModalService, DataService, NotificationService, isMultiChannel, currentChannelIsNotDefault, SharedModule } from '@vendure/admin-ui/core';
+import { BaseDetailComponent, BaseListComponent, SortOrder, LogicalOperator, DeletionResult, AssetPickerDialogComponent, AssetPreviewDialogComponent, Permission, unicodePatternValidator, findTranslation, getConfigArgValue, createUpdatedTranslatable, encodeConfigArgValue, SelectionManager, FacetValueSelectorComponent, GlobalFlag, getChannelCodeFromUserStatus, JobState, getDefaultUiLanguage, BaseEntityResolver, AssetType, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, ModalService, DataService, NotificationService, isMultiChannel, currentChannelIsNotDefault, SharedModule } from '@vendure/admin-ui/core';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
-import { map, debounceTime, takeUntil, finalize, switchMap, startWith, distinctUntilChanged, tap, filter, catchError, take, mergeMap, shareReplay, mapTo, skipUntil, skip, withLatestFrom, delay, defaultIfEmpty } from 'rxjs/operators';
+import { map, debounceTime, takeUntil, finalize, switchMap, startWith, distinctUntilChanged, tap, filter, catchError, take, mergeMap, shareReplay, mapTo, skipUntil, skip, switchMapTo, delay, withLatestFrom, defaultIfEmpty } from 'rxjs/operators';
 import * as i4 from '@angular/forms';
 import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, FormArray } from '@angular/forms';
 import * as i5 from '@angular/common';
 import * as i5$1 from '@ngx-translate/core';
-import { BehaviorSubject, combineLatest, EMPTY, Subject, of, merge, forkJoin, from, throwError } from 'rxjs';
+import { BehaviorSubject, combineLatest, EMPTY, Subject, of, merge, forkJoin, from, throwError, concat } from 'rxjs';
 import * as i4$1 from 'ngx-pagination';
 import { normalizeString } from '@vendure/common/lib/normalize-string';
 import * as i2 from '@clr/angular';
@@ -1186,6 +1186,10 @@ class FacetDetailComponent extends BaseDetailComponent {
             }
         }), switchMap(deleted => (deleted ? this.dataService.facet.getFacet(this.id).single$ : [])))
             .subscribe(() => {
+            const valuesFormArray = this.detailForm.get('values');
+            if (valuesFormArray) {
+                valuesFormArray.removeAt(index);
+            }
             this.notificationService.success(marker('common.notify-delete-success'), {
                 entity: 'FacetValue',
             });
@@ -1226,7 +1230,7 @@ class FacetDetailComponent extends BaseDetailComponent {
         }
         const currentValuesFormArray = this.detailForm.get('values');
         this.values = [...facet.values];
-        facet.values.forEach((value, i) => {
+        facet.values.forEach(value => {
             var _a, _b, _c, _d;
             const valueTranslation = findTranslation(value, languageCode);
             const group = {
@@ -1234,20 +1238,21 @@ class FacetDetailComponent extends BaseDetailComponent {
                 code: value.code,
                 name: valueTranslation ? valueTranslation.name : '',
             };
-            const valueControl = currentValuesFormArray.at(i);
+            let valueControl = currentValuesFormArray.controls.find(control => control.value.id === value.id);
             if (valueControl) {
                 (_a = valueControl.get('id')) === null || _a === void 0 ? void 0 : _a.setValue(group.id);
                 (_b = valueControl.get('code')) === null || _b === void 0 ? void 0 : _b.setValue(group.code);
                 (_c = valueControl.get('name')) === null || _c === void 0 ? void 0 : _c.setValue(group.name);
             }
             else {
-                currentValuesFormArray.insert(i, this.formBuilder.group(group));
+                valueControl = this.formBuilder.group(group);
+                currentValuesFormArray.push(valueControl);
             }
             if (this.customValueFields.length) {
-                let customValueFieldsGroup = this.detailForm.get(['values', i, 'customFields']);
+                let customValueFieldsGroup = valueControl.get(['customFields']);
                 if (!customValueFieldsGroup) {
                     customValueFieldsGroup = new FormGroup({});
-                    this.detailForm.get(['values', i]).addControl('customFields', customValueFieldsGroup);
+                    valueControl.addControl('customFields', customValueFieldsGroup);
                 }
                 if (customValueFieldsGroup) {
                     for (const fieldDef of this.customValueFields) {
@@ -1458,10 +1463,10 @@ class ApplyFacetDialogComponent {
     }
 }
 ApplyFacetDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ApplyFacetDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ApplyFacetDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ApplyFacetDialogComponent, selector: "vdr-apply-facet-dialog", viewQueries: [{ propertyName: "selector", first: true, predicate: FacetValueSelectorComponent, descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'catalog.add-facets' | translate }}</ng-template>\r\n\r\n<vdr-facet-value-selector\r\n    [facets]=\"facets\"\r\n    (selectedValuesChange)=\"selectedValues = $event\"\r\n></vdr-facet-value-selector>\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)=\"selectValues()\"\r\n        [disabled]=\"selectedValues.length === 0\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'catalog.add-facets' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i1$1.FacetValueSelectorComponent, selector: "vdr-facet-value-selector", inputs: ["facets", "readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }], directives: [{ type: i1$1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i1$1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ApplyFacetDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ApplyFacetDialogComponent, selector: "vdr-apply-facet-dialog", viewQueries: [{ propertyName: "selector", first: true, predicate: FacetValueSelectorComponent, descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'catalog.add-facets' | translate }}</ng-template>\r\n\r\n<vdr-facet-value-selector\r\n    (selectedValuesChange)=\"selectedValues = $event\"\r\n></vdr-facet-value-selector>\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)=\"selectValues()\"\r\n        [disabled]=\"selectedValues.length === 0\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'catalog.add-facets' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i1$1.FacetValueSelectorComponent, selector: "vdr-facet-value-selector", inputs: ["readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }], directives: [{ type: i1$1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i1$1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ApplyFacetDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-apply-facet-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'catalog.add-facets' | translate }}</ng-template>\r\n\r\n<vdr-facet-value-selector\r\n    [facets]=\"facets\"\r\n    (selectedValuesChange)=\"selectedValues = $event\"\r\n></vdr-facet-value-selector>\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)=\"selectValues()\"\r\n        [disabled]=\"selectedValues.length === 0\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'catalog.add-facets' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""] }]
+            args: [{ selector: 'vdr-apply-facet-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'catalog.add-facets' | translate }}</ng-template>\r\n\r\n<vdr-facet-value-selector\r\n    (selectedValuesChange)=\"selectedValues = $event\"\r\n></vdr-facet-value-selector>\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)=\"selectValues()\"\r\n        [disabled]=\"selectedValues.length === 0\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'catalog.add-facets' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selector: [{
                 type: ViewChild,
                 args: [FacetValueSelectorComponent]
@@ -1591,9 +1596,6 @@ class ProductDetailService {
     constructor(dataService) {
         this.dataService = dataService;
     }
-    getFacets() {
-        return this.dataService.facet.getAllFacets().mapSingle(data => data.facets.items);
-    }
     getTaxCategories() {
         return this.dataService.settings
             .getTaxCategories()
@@ -2209,7 +2211,6 @@ class ProductVariantsListComponent {
         this.removeFromChannel = new EventEmitter();
         this.assetChange = new EventEmitter();
         this.selectionChange = new EventEmitter();
-        this.selectFacetValueClick = new EventEmitter();
         this.updateProductOption = new EventEmitter();
         this.selectedVariantIds = [];
         this.formGroupMap = new Map();
@@ -2230,11 +2231,6 @@ class ProductVariantsListComponent {
         }));
         this.buildFormGroupMap();
     }
-    ngOnChanges(changes) {
-        if ('facets' in changes && !!changes['facets'].currentValue) {
-            this.facetValues = flattenFacetValues(this.facets);
-        }
-    }
     ngOnDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
@@ -2313,25 +2309,35 @@ class ProductVariantsListComponent {
         const translation = (_a = option.translations.find(t => t.languageCode === this.activeLanguage)) !== null && _a !== void 0 ? _a : option.translations[0];
         return translation.name;
     }
-    pendingFacetValues(variant) {
-        if (this.facets) {
-            const formFacetValueIds = this.getFacetValueIds(variant.id);
-            const variantFacetValueIds = variant.facetValues.map(fv => fv.id);
-            return formFacetValueIds
-                .filter(x => !variantFacetValueIds.includes(x))
-                .map(id => this.facetValues.find(fv => fv.id === id))
-                .filter(notNullOrUndefined);
-        }
-        else {
-            return [];
-        }
+    currentOrPendingFacetValues(variant) {
+        var _a;
+        return (_a = this.pendingFacetValueChanges[variant.id]) !== null && _a !== void 0 ? _a : variant.facetValues;
     }
-    existingFacetValues(variant) {
-        const formFacetValueIds = this.getFacetValueIds(variant.id);
-        const intersection = [...formFacetValueIds].filter(x => variant.facetValues.map(fv => fv.id).includes(x));
-        return intersection
-            .map(id => variant.facetValues.find(fv => fv.id === id))
-            .filter(notNullOrUndefined);
+    selectFacetValue(variant) {
+        return this.modalService
+            .fromComponent(ApplyFacetDialogComponent, {
+            size: 'md',
+            closable: true,
+        })
+            .subscribe(facetValues => {
+            if (facetValues) {
+                const existingFacetValueIds = variant ? variant.facetValues.map(fv => fv.id) : [];
+                const variantFormGroup = this.formArray.controls.find(c => c.value.id === variant.id);
+                if (variantFormGroup) {
+                    const uniqueFacetValueIds = unique([
+                        ...existingFacetValueIds,
+                        ...facetValues.map(fv => fv.id),
+                    ]);
+                    variantFormGroup.patchValue({ facetValueIds: uniqueFacetValueIds });
+                    variantFormGroup.markAsDirty();
+                    if (!this.pendingFacetValueChanges[variant.id]) {
+                        this.pendingFacetValueChanges[variant.id] = variant.facetValues.slice(0);
+                    }
+                    this.pendingFacetValueChanges[variant.id].push(...facetValues);
+                }
+                this.changeDetector.markForCheck();
+            }
+        });
     }
     removeFacetValue(variant, facetValueId) {
         const formGroup = this.formGroupMap.get(variant.id);
@@ -2341,6 +2347,10 @@ class ProductVariantsListComponent {
                 facetValueIds: newValue,
             });
             formGroup.markAsDirty();
+            if (!this.pendingFacetValueChanges[variant.id]) {
+                this.pendingFacetValueChanges[variant.id] = variant.facetValues.slice(0);
+            }
+            this.pendingFacetValueChanges[variant.id] = this.pendingFacetValueChanges[variant.id].filter(fv => fv.id !== facetValueId);
         }
     }
     isVariantSelected(variantId) {
@@ -2376,10 +2386,10 @@ class ProductVariantsListComponent {
     }
 }
 ProductVariantsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.ModalService }, { token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Component });
-ProductVariantsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantsListComponent, selector: "vdr-product-variants-list", inputs: { formArray: ["productVariantsFormArray", "formArray"], variants: "variants", paginationConfig: "paginationConfig", channelPriceIncludesTax: "channelPriceIncludesTax", taxCategories: "taxCategories", facets: "facets", optionGroups: "optionGroups", customFields: "customFields", customOptionFields: "customOptionFields", activeLanguage: "activeLanguage", pendingAssetChanges: "pendingAssetChanges" }, outputs: { assignToChannel: "assignToChannel", removeFromChannel: "removeFromChannel", assetChange: "assetChange", selectionChange: "selectionChange", selectFacetValueClick: "selectFacetValueClick", updateProductOption: "updateProductOption" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"variants-list\">\r\n    <div\r\n        class=\"variant-container card\"\r\n        *ngFor=\"\r\n            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };\r\n            trackBy: trackById;\r\n            let i = index\r\n        \"\r\n        [class.disabled]=\"!formGroupMap.get(variant.id)?.get('enabled')?.value\"\r\n    >\r\n        <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n            <div class=\"card-block header-row\">\r\n                <div class=\"details\">\r\n                    <vdr-title-input class=\"sku\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"sku\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'catalog.sku' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                    <vdr-title-input class=\"name\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'common.name' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                </div>\r\n                <div class=\"right-controls\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermission\">\r\n                        <input type=\"checkbox\" clrToggle name=\"enabled\" formControlName=\"enabled\" />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"variant-body\">\r\n                    <div class=\"assets\">\r\n                        <vdr-assets\r\n                            [compact]=\"true\"\r\n                            [assets]=\"pendingAssetChanges[variant.id]?.assets || variant.assets\"\r\n                            [featuredAsset]=\"\r\n                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset\r\n                            \"\r\n                            [updatePermissions]=\"updatePermission\"\r\n                            (change)=\"onAssetChange(variant.id, $event)\"\r\n                        ></vdr-assets>\r\n                    </div>\r\n                    <div class=\"variant-form-inputs\">\r\n                        <div class=\"standard-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div class=\"tax-category\">\r\n                                    <clr-select-container\r\n                                        *vdrIfPermissions=\"updatePermission; else taxCategoryLabel\"\r\n                                    >\r\n                                        <label>{{ 'catalog.tax-category' | translate }}</label>\r\n                                        <select clrSelect name=\"options\" formControlName=\"taxCategoryId\">\r\n                                            <option\r\n                                                *ngFor=\"let taxCategory of taxCategories\"\r\n                                                [value]=\"taxCategory.id\"\r\n                                            >\r\n                                                {{ taxCategory.name }}\r\n                                            </option>\r\n                                        </select>\r\n                                    </clr-select-container>\r\n                                    <ng-template #taxCategoryLabel>\r\n                                        <label class=\"clr-control-label\">{{\r\n                                            'catalog.tax-category' | translate\r\n                                        }}</label>\r\n                                        <div class=\"tax-category-label\">\r\n                                            {{ getTaxCategoryName(formGroup) }}\r\n                                        </div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"price\">\r\n                                    <clr-input-container>\r\n                                        <label>{{ 'catalog.price' | translate }}</label>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"!channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"price\"\r\n                                        ></vdr-currency-input>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"priceWithTax\"\r\n                                        ></vdr-currency-input>\r\n                                    </clr-input-container>\r\n                                </div>\r\n                                <vdr-variant-price-detail\r\n                                    [price]=\"formGroup.get('price')!.value\"\r\n                                    [currencyCode]=\"variant.currencyCode\"\r\n                                    [priceIncludesTax]=\"channelPriceIncludesTax\"\r\n                                    [taxCategoryId]=\"formGroup.get('taxCategoryId')!.value\"\r\n                                ></vdr-variant-price-detail>\r\n                            </div>\r\n                            <div class=\"variant-form-input-row\">\r\n                                <clr-select-container *vdrIfPermissions=\"updatePermission\">\r\n                                    <label\r\n                                        >{{ 'catalog.track-inventory' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip>\r\n                                    </label>\r\n                                    <select clrSelect name=\"options\" formControlName=\"trackInventory\">\r\n                                        <option [value]=\"GlobalFlag.TRUE\">\r\n                                            {{ 'catalog.track-inventory-true' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.FALSE\">\r\n                                            {{ 'catalog.track-inventory-false' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.INHERIT\">\r\n                                            {{ 'catalog.track-inventory-inherit' | translate }}\r\n                                        </option>\r\n                                    </select>\r\n                                </clr-select-container>\r\n                                <clr-input-container>\r\n                                    <label\r\n                                        >{{ 'catalog.stock-on-hand' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-on-hand-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <input\r\n                                        [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                        clrInput\r\n                                        type=\"number\"\r\n                                        [min]=\"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", 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"], components: [{ type: i1$1.TitleInputComponent, selector: "vdr-title-input", inputs: ["readonly"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { type: i2.ClrSelectContainer, selector: "clr-select-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { type: i1$1.HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: i1$1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.ClrSelect, selector: "[clrSelect]" }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1$1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }], pipes: { "paginate": i4$1.PaginatePipe, "hasPermission": i1$1.HasPermissionPipe, "translate": i5$1.TranslatePipe, "sort": i1$1.SortPipe, "channelCodeToLabel": i1$1.ChannelLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProductVariantsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantsListComponent, selector: "vdr-product-variants-list", inputs: { formArray: ["productVariantsFormArray", "formArray"], variants: "variants", paginationConfig: "paginationConfig", channelPriceIncludesTax: "channelPriceIncludesTax", taxCategories: "taxCategories", optionGroups: "optionGroups", customFields: "customFields", customOptionFields: "customOptionFields", activeLanguage: "activeLanguage", pendingAssetChanges: "pendingAssetChanges", pendingFacetValueChanges: "pendingFacetValueChanges" }, outputs: { assignToChannel: "assignToChannel", removeFromChannel: "removeFromChannel", assetChange: "assetChange", selectionChange: "selectionChange", updateProductOption: "updateProductOption" }, ngImport: i0, template: "<div class=\"variants-list\">\r\n    <div\r\n        class=\"variant-container card\"\r\n        *ngFor=\"\r\n            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };\r\n            trackBy: trackById;\r\n            let i = index\r\n        \"\r\n        [class.disabled]=\"!formGroupMap.get(variant.id)?.get('enabled')?.value\"\r\n    >\r\n        <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n            <div class=\"card-block header-row\">\r\n                <div class=\"details\">\r\n                    <vdr-title-input class=\"sku\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"sku\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'catalog.sku' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                    <vdr-title-input class=\"name\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'common.name' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                </div>\r\n                <div class=\"right-controls\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermission\">\r\n                        <input type=\"checkbox\" clrToggle name=\"enabled\" formControlName=\"enabled\" />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"variant-body\">\r\n                    <div class=\"assets\">\r\n                        <vdr-assets\r\n                            [compact]=\"true\"\r\n                            [assets]=\"pendingAssetChanges[variant.id]?.assets || variant.assets\"\r\n                            [featuredAsset]=\"\r\n                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset\r\n                            \"\r\n                            [updatePermissions]=\"updatePermission\"\r\n                            (change)=\"onAssetChange(variant.id, $event)\"\r\n                        ></vdr-assets>\r\n                    </div>\r\n                    <div class=\"variant-form-inputs\">\r\n                        <div class=\"standard-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div class=\"tax-category\">\r\n                                    <clr-select-container\r\n                                        *vdrIfPermissions=\"updatePermission; else taxCategoryLabel\"\r\n                                    >\r\n                                        <label>{{ 'catalog.tax-category' | translate }}</label>\r\n                                        <select clrSelect name=\"options\" formControlName=\"taxCategoryId\">\r\n                                            <option\r\n                                                *ngFor=\"let taxCategory of taxCategories\"\r\n                                                [value]=\"taxCategory.id\"\r\n                                            >\r\n                                                {{ taxCategory.name }}\r\n                                            </option>\r\n                                        </select>\r\n                                    </clr-select-container>\r\n                                    <ng-template #taxCategoryLabel>\r\n                                        <label class=\"clr-control-label\">{{\r\n                                            'catalog.tax-category' | translate\r\n                                        }}</label>\r\n                                        <div class=\"tax-category-label\">\r\n                                            {{ getTaxCategoryName(formGroup) }}\r\n                                        </div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"price\">\r\n                                    <clr-input-container>\r\n                                        <label>{{ 'catalog.price' | translate }}</label>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"!channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"price\"\r\n                                        ></vdr-currency-input>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"priceWithTax\"\r\n                                        ></vdr-currency-input>\r\n                                    </clr-input-container>\r\n                                </div>\r\n                                <vdr-variant-price-detail\r\n                                    [price]=\"formGroup.get('price')!.value\"\r\n                                    [currencyCode]=\"variant.currencyCode\"\r\n                                    [priceIncludesTax]=\"channelPriceIncludesTax\"\r\n                                    [taxCategoryId]=\"formGroup.get('taxCategoryId')!.value\"\r\n                                ></vdr-variant-price-detail>\r\n                            </div>\r\n                            <div class=\"variant-form-input-row\">\r\n                                <clr-select-container *vdrIfPermissions=\"updatePermission\">\r\n                                    <label\r\n                                        >{{ 'catalog.track-inventory' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip>\r\n                                    </label>\r\n                                    <select clrSelect name=\"options\" formControlName=\"trackInventory\">\r\n                                        <option [value]=\"GlobalFlag.TRUE\">\r\n                                            {{ 'catalog.track-inventory-true' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.FALSE\">\r\n                                            {{ 'catalog.track-inventory-false' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.INHERIT\">\r\n                                            {{ 'catalog.track-inventory-inherit' | translate }}\r\n                                        </option>\r\n                                    </select>\r\n                                </clr-select-container>\r\n                                <clr-input-container>\r\n                                    <label\r\n                                        >{{ 'catalog.stock-on-hand' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-on-hand-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <input\r\n                                        [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                        clrInput\r\n                                        type=\"number\"\r\n                                        [min]=\"getStockOnHandMinValue(formGroup)\"\r\n                                        step=\"1\"\r\n                                        formControlName=\"stockOnHand\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        [vdrDisabled]=\"inventoryIsNotTracked(formGroup)\"\r\n                                    />\r\n                                </clr-input-container>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-allocated' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-allocated-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ variant.stockAllocated }}\r\n                                    </div>\r\n                                </div>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-saleable' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-saleable-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ getSaleableStockLevel(variant) }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div\r\n                                    class=\"out-of-stock-threshold-wrapper\"\r\n                                    [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                >\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.out-of-stock-threshold' | translate\r\n                                        }}<vdr-help-tooltip\r\n                                            [content]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"flex\">\r\n                                        <clr-input-container>\r\n                                            <input\r\n                                                clrInput\r\n                                                type=\"number\"\r\n                                                [formControl]=\"formGroup.get('outOfStockThreshold')\"\r\n                                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                                [vdrDisabled]=\"\r\n                                                    formGroup.get('useGlobalOutOfStockThreshold')?.value !==\r\n                                                        false || inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                        </clr-input-container>\r\n                                        <clr-toggle-wrapper>\r\n                                            <input\r\n                                                type=\"checkbox\"\r\n                                                clrToggle\r\n                                                name=\"useGlobalOutOfStockThreshold\"\r\n                                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                                [vdrDisabled]=\"\r\n                                                    !(updatePermission | hasPermission) ||\r\n                                                    inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                            <label\r\n                                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                                    globalOutOfStockThreshold\r\n                                                }})</label\r\n                                            >\r\n                                        </clr-toggle-wrapper>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"custom-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"ProductVariant\"\r\n                                        [customFields]=\"customFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"formGroup.get('customFields')\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </section>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"options-facets\">\r\n                    <vdr-entity-info [entity]=\"variant\"></vdr-entity-info>\r\n                    <div *ngIf=\"variant.options.length\">\r\n                        <div class=\"options\">\r\n                            <vdr-chip\r\n                                *ngFor=\"let option of variant.options | sort: 'groupId'\"\r\n                                [colorFrom]=\"optionGroupName(option.groupId)\"\r\n                                [invert]=\"true\"\r\n                                (iconClick)=\"editOption(option)\"\r\n                                [icon]=\"(updatePermission | hasPermission) && 'pencil'\"\r\n                            >\r\n                                <span class=\"option-group-name\">{{ optionGroupName(option.groupId) }}</span>\r\n                                {{ optionName(option) }}\r\n                            </vdr-chip>\r\n                            <a [routerLink]=\"['./', 'options']\" class=\"btn btn-link btn-sm\"\r\n                                >{{ 'catalog.edit-options' | translate }}...</a\r\n                            >\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex-spacer\"></div>\r\n                    <div class=\"facets\">\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of currentOrPendingFacetValues(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)=\"selectFacetValue(variant)\"\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", 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"], components: [{ type: i1$1.TitleInputComponent, selector: "vdr-title-input", inputs: ["readonly"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { type: i2.ClrSelectContainer, selector: "clr-select-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { type: i1$1.HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: i1$1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.ClrSelect, selector: "[clrSelect]" }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1$1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }], pipes: { "paginate": i4$1.PaginatePipe, "hasPermission": i1$1.HasPermissionPipe, "translate": i5$1.TranslatePipe, "sort": i1$1.SortPipe, "channelCodeToLabel": i1$1.ChannelLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-variants-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"variants-list\">\r\n    <div\r\n        class=\"variant-container card\"\r\n        *ngFor=\"\r\n            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };\r\n            trackBy: trackById;\r\n            let i = index\r\n        \"\r\n        [class.disabled]=\"!formGroupMap.get(variant.id)?.get('enabled')?.value\"\r\n    >\r\n        <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n            <div class=\"card-block header-row\">\r\n                <div class=\"details\">\r\n                    <vdr-title-input class=\"sku\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"sku\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'catalog.sku' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                    <vdr-title-input class=\"name\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'common.name' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                </div>\r\n                <div class=\"right-controls\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermission\">\r\n                        <input type=\"checkbox\" clrToggle name=\"enabled\" formControlName=\"enabled\" />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"variant-body\">\r\n                    <div class=\"assets\">\r\n                        <vdr-assets\r\n                            [compact]=\"true\"\r\n                            [assets]=\"pendingAssetChanges[variant.id]?.assets || variant.assets\"\r\n                            [featuredAsset]=\"\r\n                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset\r\n                            \"\r\n                            [updatePermissions]=\"updatePermission\"\r\n                            (change)=\"onAssetChange(variant.id, $event)\"\r\n                        ></vdr-assets>\r\n                    </div>\r\n                    <div class=\"variant-form-inputs\">\r\n                        <div class=\"standard-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div class=\"tax-category\">\r\n                                    <clr-select-container\r\n                                        *vdrIfPermissions=\"updatePermission; else taxCategoryLabel\"\r\n                                    >\r\n                                        <label>{{ 'catalog.tax-category' | translate }}</label>\r\n                                        <select clrSelect name=\"options\" formControlName=\"taxCategoryId\">\r\n                                            <option\r\n                                                *ngFor=\"let taxCategory of taxCategories\"\r\n                                                [value]=\"taxCategory.id\"\r\n                                            >\r\n                                                {{ taxCategory.name }}\r\n                                            </option>\r\n                                        </select>\r\n                                    </clr-select-container>\r\n                                    <ng-template #taxCategoryLabel>\r\n                                        <label class=\"clr-control-label\">{{\r\n                                            'catalog.tax-category' | translate\r\n                                        }}</label>\r\n                                        <div class=\"tax-category-label\">\r\n                                            {{ getTaxCategoryName(formGroup) }}\r\n                                        </div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"price\">\r\n                                    <clr-input-container>\r\n                                        <label>{{ 'catalog.price' | translate }}</label>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"!channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"price\"\r\n                                        ></vdr-currency-input>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"priceWithTax\"\r\n                                        ></vdr-currency-input>\r\n                                    </clr-input-container>\r\n                                </div>\r\n                                <vdr-variant-price-detail\r\n                                    [price]=\"formGroup.get('price')!.value\"\r\n                                    [currencyCode]=\"variant.currencyCode\"\r\n                                    [priceIncludesTax]=\"channelPriceIncludesTax\"\r\n                                    [taxCategoryId]=\"formGroup.get('taxCategoryId')!.value\"\r\n                                ></vdr-variant-price-detail>\r\n                            </div>\r\n                            <div class=\"variant-form-input-row\">\r\n                                <clr-select-container *vdrIfPermissions=\"updatePermission\">\r\n                                    <label\r\n                                        >{{ 'catalog.track-inventory' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip>\r\n                                    </label>\r\n                                    <select clrSelect name=\"options\" formControlName=\"trackInventory\">\r\n                                        <option [value]=\"GlobalFlag.TRUE\">\r\n                                            {{ 'catalog.track-inventory-true' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.FALSE\">\r\n                                            {{ 'catalog.track-inventory-false' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.INHERIT\">\r\n                                            {{ 'catalog.track-inventory-inherit' | translate }}\r\n                                        </option>\r\n                                    </select>\r\n                                </clr-select-container>\r\n                                <clr-input-container>\r\n                                    <label\r\n                                        >{{ 'catalog.stock-on-hand' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-on-hand-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <input\r\n                                        [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                        clrInput\r\n                                        type=\"number\"\r\n                                        [min]=\"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", 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"] }]
+            args: [{ selector: 'vdr-product-variants-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"variants-list\">\r\n    <div\r\n        class=\"variant-container card\"\r\n        *ngFor=\"\r\n            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };\r\n            trackBy: trackById;\r\n            let i = index\r\n        \"\r\n        [class.disabled]=\"!formGroupMap.get(variant.id)?.get('enabled')?.value\"\r\n    >\r\n        <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n            <div class=\"card-block header-row\">\r\n                <div class=\"details\">\r\n                    <vdr-title-input class=\"sku\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"sku\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'catalog.sku' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                    <vdr-title-input class=\"name\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'common.name' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                </div>\r\n                <div class=\"right-controls\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermission\">\r\n                        <input type=\"checkbox\" clrToggle name=\"enabled\" formControlName=\"enabled\" />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"variant-body\">\r\n                    <div class=\"assets\">\r\n                        <vdr-assets\r\n                            [compact]=\"true\"\r\n                            [assets]=\"pendingAssetChanges[variant.id]?.assets || variant.assets\"\r\n                            [featuredAsset]=\"\r\n                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset\r\n                            \"\r\n                            [updatePermissions]=\"updatePermission\"\r\n                            (change)=\"onAssetChange(variant.id, $event)\"\r\n                        ></vdr-assets>\r\n                    </div>\r\n                    <div class=\"variant-form-inputs\">\r\n                        <div class=\"standard-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div class=\"tax-category\">\r\n                                    <clr-select-container\r\n                                        *vdrIfPermissions=\"updatePermission; else taxCategoryLabel\"\r\n                                    >\r\n                                        <label>{{ 'catalog.tax-category' | translate }}</label>\r\n                                        <select clrSelect name=\"options\" formControlName=\"taxCategoryId\">\r\n                                            <option\r\n                                                *ngFor=\"let taxCategory of taxCategories\"\r\n                                                [value]=\"taxCategory.id\"\r\n                                            >\r\n                                                {{ taxCategory.name }}\r\n                                            </option>\r\n                                        </select>\r\n                                    </clr-select-container>\r\n                                    <ng-template #taxCategoryLabel>\r\n                                        <label class=\"clr-control-label\">{{\r\n                                            'catalog.tax-category' | translate\r\n                                        }}</label>\r\n                                        <div class=\"tax-category-label\">\r\n                                            {{ getTaxCategoryName(formGroup) }}\r\n                                        </div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"price\">\r\n                                    <clr-input-container>\r\n                                        <label>{{ 'catalog.price' | translate }}</label>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"!channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"price\"\r\n                                        ></vdr-currency-input>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"priceWithTax\"\r\n                                        ></vdr-currency-input>\r\n                                    </clr-input-container>\r\n                                </div>\r\n                                <vdr-variant-price-detail\r\n                                    [price]=\"formGroup.get('price')!.value\"\r\n                                    [currencyCode]=\"variant.currencyCode\"\r\n                                    [priceIncludesTax]=\"channelPriceIncludesTax\"\r\n                                    [taxCategoryId]=\"formGroup.get('taxCategoryId')!.value\"\r\n                                ></vdr-variant-price-detail>\r\n                            </div>\r\n                            <div class=\"variant-form-input-row\">\r\n                                <clr-select-container *vdrIfPermissions=\"updatePermission\">\r\n                                    <label\r\n                                        >{{ 'catalog.track-inventory' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip>\r\n                                    </label>\r\n                                    <select clrSelect name=\"options\" formControlName=\"trackInventory\">\r\n                                        <option [value]=\"GlobalFlag.TRUE\">\r\n                                            {{ 'catalog.track-inventory-true' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.FALSE\">\r\n                                            {{ 'catalog.track-inventory-false' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.INHERIT\">\r\n                                            {{ 'catalog.track-inventory-inherit' | translate }}\r\n                                        </option>\r\n                                    </select>\r\n                                </clr-select-container>\r\n                                <clr-input-container>\r\n                                    <label\r\n                                        >{{ 'catalog.stock-on-hand' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-on-hand-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <input\r\n                                        [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                        clrInput\r\n                                        type=\"number\"\r\n                                        [min]=\"getStockOnHandMinValue(formGroup)\"\r\n                                        step=\"1\"\r\n                                        formControlName=\"stockOnHand\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        [vdrDisabled]=\"inventoryIsNotTracked(formGroup)\"\r\n                                    />\r\n                                </clr-input-container>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-allocated' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-allocated-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ variant.stockAllocated }}\r\n                                    </div>\r\n                                </div>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-saleable' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-saleable-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ getSaleableStockLevel(variant) }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div\r\n                                    class=\"out-of-stock-threshold-wrapper\"\r\n                                    [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                >\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.out-of-stock-threshold' | translate\r\n                                        }}<vdr-help-tooltip\r\n                                            [content]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"flex\">\r\n                                        <clr-input-container>\r\n                                            <input\r\n                                                clrInput\r\n                                                type=\"number\"\r\n                                                [formControl]=\"formGroup.get('outOfStockThreshold')\"\r\n                                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                                [vdrDisabled]=\"\r\n                                                    formGroup.get('useGlobalOutOfStockThreshold')?.value !==\r\n                                                        false || inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                        </clr-input-container>\r\n                                        <clr-toggle-wrapper>\r\n                                            <input\r\n                                                type=\"checkbox\"\r\n                                                clrToggle\r\n                                                name=\"useGlobalOutOfStockThreshold\"\r\n                                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                                [vdrDisabled]=\"\r\n                                                    !(updatePermission | hasPermission) ||\r\n                                                    inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                            <label\r\n                                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                                    globalOutOfStockThreshold\r\n                                                }})</label\r\n                                            >\r\n                                        </clr-toggle-wrapper>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"custom-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"ProductVariant\"\r\n                                        [customFields]=\"customFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"formGroup.get('customFields')\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </section>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"options-facets\">\r\n                    <vdr-entity-info [entity]=\"variant\"></vdr-entity-info>\r\n                    <div *ngIf=\"variant.options.length\">\r\n                        <div class=\"options\">\r\n                            <vdr-chip\r\n                                *ngFor=\"let option of variant.options | sort: 'groupId'\"\r\n                                [colorFrom]=\"optionGroupName(option.groupId)\"\r\n                                [invert]=\"true\"\r\n                                (iconClick)=\"editOption(option)\"\r\n                                [icon]=\"(updatePermission | hasPermission) && 'pencil'\"\r\n                            >\r\n                                <span class=\"option-group-name\">{{ optionGroupName(option.groupId) }}</span>\r\n                                {{ optionName(option) }}\r\n                            </vdr-chip>\r\n                            <a [routerLink]=\"['./', 'options']\" class=\"btn btn-link btn-sm\"\r\n                                >{{ 'catalog.edit-options' | translate }}...</a\r\n                            >\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex-spacer\"></div>\r\n                    <div class=\"facets\">\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of currentOrPendingFacetValues(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)=\"selectFacetValue(variant)\"\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", 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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.ModalService }, { type: i1$1.DataService }]; }, propDecorators: { formArray: [{
                 type: Input,
                 args: ['productVariantsFormArray']
@@ -2391,8 +2401,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }], taxCategories: [{
                 type: Input
-            }], facets: [{
-                type: Input
             }], optionGroups: [{
                 type: Input
             }], customFields: [{
@@ -2403,6 +2411,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Input
             }], pendingAssetChanges: [{
                 type: Input
+            }], pendingFacetValueChanges: [{
+                type: Input
             }], assignToChannel: [{
                 type: Output
             }], removeFromChannel: [{
@@ -2411,8 +2421,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImpor
                 type: Output
             }], selectionChange: [{
                 type: Output
-            }], selectFacetValueClick: [{
-                type: Output
             }], updateProductOption: [{
                 type: Output
             }] } });
@@ -2488,20 +2496,13 @@ class ProductDetailComponent extends BaseDetailComponent {
             .subscribe(([variants, languageCode]) => {
             this.buildVariantFormArray(variants, languageCode);
         });
-        // FacetValues are provided initially by the nested array of the
-        // Product entity, but once a fetch to get all Facets is made (as when
-        // opening the FacetValue selector modal), then these additional values
-        // are concatenated onto the initial array.
-        this.facets$ = this.productDetailService.getFacets();
         const productFacetValues$ = this.product$.pipe(map(product => product.facetValues));
-        const allFacetValues$ = this.facets$.pipe(map(flattenFacetValues));
         const productGroup = this.getProductFormGroup();
-        const formFacetValueIdChanges$ = productGroup.valueChanges.pipe(map(val => val.facetValueIds), distinctUntilChanged());
-        const formChangeFacetValues$ = combineLatest(formFacetValueIdChanges$, productFacetValues$, allFacetValues$).pipe(map(([ids, productFacetValues, allFacetValues]) => {
-            const combined = [...productFacetValues, ...allFacetValues];
-            return ids.map(id => combined.find(fv => fv.id === id)).filter(notNullOrUndefined);
-        }));
-        this.facetValues$ = merge(productFacetValues$, formChangeFacetValues$);
+        // tslint:disable-next-line:no-non-null-assertion
+        const formFacetValueIdChanges$ = productGroup.get('facetValueIds').valueChanges.pipe(skip(1), distinctUntilChanged(), switchMap(ids => this.dataService.facet
+            .getFacetValues({ filter: { id: { in: ids } } })
+            .mapSingle(({ facetValues }) => facetValues.items)), shareReplay(1));
+        this.facetValues$ = concat(productFacetValues$.pipe(take(1)), productFacetValues$.pipe(switchMapTo(formFacetValueIdChanges$)));
         this.productChannels$ = this.product$.pipe(map(p => p.channels));
         this.channelPriceIncludesTax$ = this.dataService.settings
             .getActiveChannel('cache-first')
@@ -2666,32 +2667,6 @@ class ProductDetailComponent extends BaseDetailComponent {
         });
         productGroup.markAsDirty();
     }
-    /**
-     * Opens a dialog to select FacetValues to apply to the select ProductVariants.
-     */
-    selectVariantFacetValue(selectedVariantIds) {
-        this.displayFacetValueModal()
-            .pipe(withLatestFrom(this.variants$))
-            .subscribe(([facetValueIds, variants]) => {
-            if (facetValueIds) {
-                for (const variantId of selectedVariantIds) {
-                    const index = variants.findIndex(v => v.id === variantId);
-                    const variant = variants[index];
-                    const existingFacetValueIds = variant ? variant.facetValues.map(fv => fv.id) : [];
-                    const variantFormGroup = this.detailForm.get('variants').controls.find(c => c.value.id === variantId);
-                    if (variantFormGroup) {
-                        const uniqueFacetValueIds = unique([...existingFacetValueIds, ...facetValueIds]);
-                        variantFormGroup.patchValue({
-                            facetValueIds: uniqueFacetValueIds,
-                        });
-                        variantFormGroup.markAsDirty();
-                        this.variantFacetValueChanges[variantId] = uniqueFacetValueIds;
-                    }
-                }
-                this.changeDetector.markForCheck();
-            }
-        });
-    }
     variantsToCreateAreValid() {
         return (0 < this.createVariantsConfig.variants.length &&
             this.createVariantsConfig.variants.every(v => {
@@ -2699,11 +2674,12 @@ class ProductDetailComponent extends BaseDetailComponent {
             }));
     }
     displayFacetValueModal() {
-        return this.productDetailService.getFacets().pipe(mergeMap(facets => this.modalService.fromComponent(ApplyFacetDialogComponent, {
+        return this.modalService
+            .fromComponent(ApplyFacetDialogComponent, {
             size: 'md',
             closable: true,
-            locals: { facets },
-        })), map(facetValues => facetValues && facetValues.map(v => v.id)));
+        })
+            .pipe(map(facetValues => facetValues && facetValues.map(v => v.id)));
     }
     create() {
         const productGroup = this.getProductFormGroup();
@@ -2758,6 +2734,7 @@ class ProductDetailComponent extends BaseDetailComponent {
             this.detailForm.markAsPristine();
             this.assetChanges = {};
             this.variantAssetChanges = {};
+            this.variantFacetValueChanges = {};
             this.notificationService.success(marker('common.notify-update-success'), {
                 entity: 'Product',
             });
@@ -2796,7 +2773,7 @@ class ProductDetailComponent extends BaseDetailComponent {
             const variantTranslation = findTranslation(variant, languageCode);
             const pendingFacetValueChanges = this.variantFacetValueChanges[variant.id];
             const facetValueIds = pendingFacetValueChanges
-                ? pendingFacetValueChanges
+                ? pendingFacetValueChanges.map(fv => fv.id)
                 : variant.facetValues.map(fv => fv.id);
             const group = {
                 id: variant.id,
@@ -2909,10 +2886,10 @@ class ProductDetailComponent extends BaseDetailComponent {
     }
 }
 ProductDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductDetailComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i1$1.ServerConfigService }, { token: ProductDetailService }, { token: i4.FormBuilder }, { token: i1$1.ModalService }, { token: i1$1.NotificationService }, { token: i1$1.DataService }, { token: i5.Location }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ProductDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductDetailComponent, selector: "vdr-product-detail", usesInheritance: true, ngImport: i0, 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", 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"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i2.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { type: i2.ClrTab, selector: "clr-tab" }, { type: i2.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { type: i1$1.FormItemComponent, selector: "vdr-form-item", inputs: ["label"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { type: i1$1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i1$1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: ["variantsChange"] }, { type: i1$1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { type: i1$1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { type: ProductVariantsTableComponent, selector: "vdr-product-variants-table", inputs: ["productVariantsFormArray", "variants", "paginationConfig", "channelPriceIncludesTax", "optionGroups", "pendingAssetChanges"] }, { type: ProductVariantsListComponent, selector: "vdr-product-variants-list", inputs: ["productVariantsFormArray", "variants", "paginationConfig", "channelPriceIncludesTax", "taxCategories", "facets", "optionGroups", "customFields", "customOptionFields", "activeLanguage", "pendingAssetChanges"], outputs: ["assignToChannel", "removeFromChannel", "assetChange", "selectionChange", "selectFacetValueClick", "updateProductOption"] }], directives: [{ type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { type: i2.ClrTabLink, selector: "[clrTabLink]", inputs: ["clrTabLinkInOverflow", "id"] }, { type: i2.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { type: i2.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1$1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "channelCodeToLabel": i1$1.ChannelLabelPipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ProductDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductDetailComponent, selector: "vdr-product-detail", usesInheritance: true, ngImport: i0, 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                        [pendingFacetValueChanges]=\"variantFacetValueChanges\"\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                    ></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", 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"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i2.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { type: i2.ClrTab, selector: "clr-tab" }, { type: i2.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { type: i1$1.FormItemComponent, selector: "vdr-form-item", inputs: ["label"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { type: i1$1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i1$1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: ["variantsChange"] }, { type: i1$1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { type: i1$1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { type: ProductVariantsTableComponent, selector: "vdr-product-variants-table", inputs: ["productVariantsFormArray", "variants", "paginationConfig", "channelPriceIncludesTax", "optionGroups", "pendingAssetChanges"] }, { type: ProductVariantsListComponent, selector: "vdr-product-variants-list", inputs: ["productVariantsFormArray", "variants", "paginationConfig", "channelPriceIncludesTax", "taxCategories", "optionGroups", "customFields", "customOptionFields", "activeLanguage", "pendingAssetChanges", "pendingFacetValueChanges"], outputs: ["assignToChannel", "removeFromChannel", "assetChange", "selectionChange", "updateProductOption"] }], directives: [{ type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { type: i2.ClrTabLink, selector: "[clrTabLink]", inputs: ["clrTabLinkInOverflow", "id"] }, { type: i2.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { type: i2.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1$1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "channelCodeToLabel": i1$1.ChannelLabelPipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-detail', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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"] }]
+            args: [{ selector: 'vdr-product-detail', changeDetection: ChangeDetectionStrategy.OnPush, 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                        [pendingFacetValueChanges]=\"variantFacetValueChanges\"\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                    ></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", 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"] }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i1$1.ServerConfigService }, { type: ProductDetailService }, { type: i4.FormBuilder }, { type: i1$1.ModalService }, { type: i1$1.NotificationService }, { type: i1$1.DataService }, { type: i5.Location }, { type: i0.ChangeDetectorRef }]; } });
 
 class ProductListComponent extends BaseListComponent {
@@ -4032,7 +4009,6 @@ class BulkAddFacetValuesDialogComponent {
         this.changeDetectorRef = changeDetectorRef;
         /* provided by call to ModalService */
         this.mode = 'product';
-        this.facets = [];
         this.state = 'loading';
         this.selectedValues = [];
         this.items = [];
@@ -4099,10 +4075,10 @@ class BulkAddFacetValuesDialogComponent {
     }
 }
 BulkAddFacetValuesDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: BulkAddFacetValuesDialogComponent, deps: [{ token: i1$1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BulkAddFacetValuesDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: BulkAddFacetValuesDialogComponent, selector: "vdr-bulk-add-facet-values-dialog", ngImport: i0, 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", styles: [".loading{min-height:25vh;display:flex;justify-content:center;align-items:center}.sku{color:var(--color-text-300)}\n"], components: [{ type: i1$1.FacetValueSelectorComponent, selector: "vdr-facet-value-selector", inputs: ["facets", "readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: i2.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i1$1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BulkAddFacetValuesDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: BulkAddFacetValuesDialogComponent, selector: "vdr-bulk-add-facet-values-dialog", ngImport: i0, 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            (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", styles: [".loading{min-height:25vh;display:flex;justify-content:center;align-items:center}.sku{color:var(--color-text-300)}\n"], components: [{ type: i1$1.FacetValueSelectorComponent, selector: "vdr-facet-value-selector", inputs: ["readonly", "transformControlValueAccessorValue"], outputs: ["selectedValuesChange"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: i2.ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }], directives: [{ type: i1$1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: BulkAddFacetValuesDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-bulk-add-facet-values-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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", styles: [".loading{min-height:25vh;display:flex;justify-content:center;align-items:center}.sku{color:var(--color-text-300)}\n"] }]
+            args: [{ selector: 'vdr-bulk-add-facet-values-dialog', changeDetection: ChangeDetectionStrategy.OnPush, 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            (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", styles: [".loading{min-height:25vh;display:flex;justify-content:center;align-items:center}.sku{color:var(--color-text-300)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DataService }, { type: i0.ChangeDetectorRef }]; } });
 
 const deleteCollectionsBulkAction = {
@@ -4578,17 +4554,14 @@ const assignFacetValuesToProductsBulkAction = {
         const ids = mode === 'product'
             ? unique(selection.map(p => p.productId))
             : unique(selection.map(p => p.productVariantId));
-        return dataService.facet
-            .getAllFacets()
-            .mapSingle(data => data.facets.items)
-            .pipe(switchMap(facets => modalService.fromComponent(BulkAddFacetValuesDialogComponent, {
+        return modalService
+            .fromComponent(BulkAddFacetValuesDialogComponent, {
             size: 'xl',
             locals: {
-                facets,
                 mode,
                 ids,
             },
-        })))
+        })
             .subscribe(result => {
             if (result) {
                 notificationService.success(marker('common.notify-bulk-update-success'), {