npm - @vendure/admin-ui - Versions diffs - 2.0.5 → 2.0.7 - Mend

@vendure/admin-ui 2.0.5 → 2.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

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

@@ -4,7 +4,7 @@ import * as i1$1 from '@angular/router';
 import { ROUTES, RouterModule } from '@angular/router';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i1 from '@vendure/admin-ui/core';
-import { findTranslation, DeletionResult, BaseDetailComponent, Permission, createUpdatedTranslatable, SelectionManager, getDefaultUiLanguage, BaseEntityResolver, PageComponent, CanDeactivateDetailGuard, DataService, createResolveData, FacetValueSelectorComponent, ASSET_FRAGMENT, TAG_FRAGMENT, TypedBaseDetailComponent, BaseListComponent, SortOrder, LogicalOperator, AssetPickerDialogComponent, AssetPreviewDialogComponent, DataTable2Component, COLLECTION_FRAGMENT, unicodePatternValidator, getConfigArgValue, encodeConfigArgValue, createBulkDeleteAction, ModalService, NotificationService, createBulkAssignToChannelAction, createBulkRemoveFromChannelAction, TypedBaseListComponent, GetCollectionListDocument, FACET_WITH_VALUES_FRAGMENT, GetFacetDetailDocument, getChannelCodeFromUserStatus, currentChannelIsNotDefault, GetFacetListDocument, GetStockLocationListDocument, ProductVariantListQueryDocument, PRODUCT_DETAIL_FRAGMENT, isMultiChannel, FacetValueFormInputComponent, ProductListQueryDocument, JobState, GetProductVariantsQuickJumpDocument, GlobalFlag, ProductVariantUpdateMutationDocument, CreateStockLocationDocument, UpdateStockLocationDocument, DeleteStockLocationsDocument, AssignStockLocationsToChannelDocument, RemoveStockLocationsFromChannelDocument, detailComponentWithResolver, GetProductDetailDocument, GetStockLocationDetailDocument, GetProductVariantDetailDocument, CollectionDetailQueryDocument, AssetDetailQueryDocument, SharedModule, PageService } from '@vendure/admin-ui/core';
+import { findTranslation, DeletionResult, BaseDetailComponent, Permission, createUpdatedTranslatable, SelectionManager, getDefaultUiLanguage, BaseEntityResolver, PageComponent, CanDeactivateDetailGuard, DataService, createResolveData, FacetValueSelectorComponent, ASSET_FRAGMENT, TAG_FRAGMENT, TypedBaseDetailComponent, getCustomFieldsDefaults, BaseListComponent, SortOrder, LogicalOperator, AssetPickerDialogComponent, AssetPreviewDialogComponent, DataTable2Component, COLLECTION_FRAGMENT, unicodePatternValidator, getConfigArgValue, encodeConfigArgValue, createBulkDeleteAction, ModalService, NotificationService, createBulkAssignToChannelAction, createBulkRemoveFromChannelAction, TypedBaseListComponent, GetCollectionListDocument, FACET_WITH_VALUES_FRAGMENT, GetFacetDetailDocument, getChannelCodeFromUserStatus, currentChannelIsNotDefault, GetFacetListDocument, GetStockLocationListDocument, ProductVariantListQueryDocument, PRODUCT_DETAIL_FRAGMENT, isMultiChannel, FacetValueFormInputComponent, ProductListQueryDocument, JobState, GetProductVariantsQuickJumpDocument, GlobalFlag, ProductVariantUpdateMutationDocument, CreateStockLocationDocument, UpdateStockLocationDocument, DeleteStockLocationsDocument, AssignStockLocationsToChannelDocument, RemoveStockLocationsFromChannelDocument, detailComponentWithResolver, GetProductDetailDocument, GetStockLocationDetailDocument, GetProductVariantDetailDocument, CollectionDetailQueryDocument, AssetDetailQueryDocument, SharedModule, PageService } from '@vendure/admin-ui/core';
 import { shareReplay, mergeMap, map, switchMap, tap, take, startWith, debounceTime, takeUntil, finalize, distinctUntilChanged, filter, catchError, skip, switchMapTo, delay } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
 import { UntypedFormGroup, UntypedFormArray, Validators, FormControl, NG_VALUE_ACCESSOR, FormGroup, UntypedFormControl } from '@angular/forms';
@@ -14,8 +14,8 @@ import { notNullOrUndefined, generateAllCombinations } from '@vendure/common/lib
 import * as i3 from '@clr/angular';
 import * as i3$1 from '@angular/common';
 import * as i5 from '@ngx-translate/core';
-import * as i5$1 from '@ng-select/ng-select';
 import { unique } from '@vendure/common/lib/unique';
+import * as i5$1 from '@ng-select/ng-select';
 import { gql } from 'apollo-angular';
 import * as i5$2 from 'ngx-pagination';
 import * as i2$1 from '@angular/cdk/drag-drop';
@@ -483,10 +483,12 @@ class CreateProductVariantDialogComponent {
         this.form = this.formBuilder.group({
             name: ['', Validators.required],
             sku: ['', Validators.required],
+            price: ['', Validators.required],
             options: this.formBuilder.record({}),
         });
     }
     ngOnInit() {
+        this.currencyCode = this.product.variants[0].currencyCode;
         for (const optionGroup of this.product.optionGroups) {
             this.form.get('options').addControl(optionGroup.code, new FormControl('', Validators.required));
         }
@@ -510,14 +512,15 @@ class CreateProductVariantDialogComponent {
         });
     }
     confirm() {
-        const { name, sku, options } = this.form.value;
-        if (!name || !sku || !options) {
+        const { name, sku, options, price } = this.form.value;
+        if (!name || !sku || !options || !price) {
             return;
         }
         const optionIds = Object.values(options).filter(notNullOrUndefined);
         this.resolveWith({
             productId: this.product.id,
             sku,
+            price: Number(price),
             optionIds,
             translations: [
                 {
@@ -537,11 +540,11 @@ class CreateProductVariantDialogComponent {
         return this.product.optionGroups.find(og => og.code === code)?.id ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CreateProductVariantDialogComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CreateProductVariantDialogComponent, selector: "vdr-create-product-variant-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-variant' | translate }}\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <div formGroupName=\"options\" class=\"form-grid\">\r\n        <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\r\n            <ng-select\r\n                [items]=\"optionGroup.options\"\r\n                [formControlName]=\"optionGroup.code\"\r\n                bindLabel=\"name\"\r\n                bindValue=\"id\"\r\n                appendTo=\"body\"\r\n            >\r\n            </ng-select>\r\n        </vdr-form-field>\r\n        <clr-alert\r\n            *ngIf=\"product.optionGroups.length === 0\"\r\n            clrAlertType=\"warning\"\r\n            [clrAlertClosable]=\"false\"\r\n            class=\"form-grid-span\"\r\n        >\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.cannot-create-variants-without-options' | translate }}\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div *ngIf=\"existingVariant\" class=\"mt-2\">\r\n        <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\r\n                        existingVariant.sku\r\n                    }})\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div class=\"form-grid mt-2\">\r\n        <vdr-form-field [label]=\"'common.name' | translate\">\r\n            <input type=\"text\" formControlName=\"name\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.sku' | translate\">\r\n            <input type=\"text\" formControlName=\"sku\" />\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\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)=\"confirm()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\"\r\n    >\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertClosed", "clrAlertType", "clrAlertIcon"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrAlertText, selector: ".alert-text" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CreateProductVariantDialogComponent, selector: "vdr-create-product-variant-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-variant' | translate }}\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <div formGroupName=\"options\" class=\"form-grid\">\r\n        <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\r\n            <ng-select [items]=\"optionGroup.options\" [formControlName]=\"optionGroup.code\" bindLabel=\"name\"\r\n                bindValue=\"id\" appendTo=\"body\">\r\n            </ng-select>\r\n        </vdr-form-field>\r\n        <clr-alert *ngIf=\"product.optionGroups.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\"\r\n            class=\"form-grid-span\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.cannot-create-variants-without-options' | translate }}\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div *ngIf=\"existingVariant\" class=\"mt-2\">\r\n        <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\r\n                    existingVariant.sku\r\n                    }})\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div class=\"form-grid mt-2\">\r\n        <vdr-form-field [label]=\"'common.name' | translate\">\r\n            <input type=\"text\" formControlName=\"name\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.sku' | translate\">\r\n            <input type=\"text\" formControlName=\"sku\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.price' | translate\">\r\n            <vdr-currency-input name=\"price\" [currencyCode]=\"currencyCode\" formControlName=\"price\" />\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertClosed", "clrAlertType", "clrAlertIcon"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrAlertText, selector: ".alert-text" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CreateProductVariantDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-create-product-variant-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-variant' | translate }}\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <div formGroupName=\"options\" class=\"form-grid\">\r\n        <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\r\n            <ng-select\r\n                [items]=\"optionGroup.options\"\r\n                [formControlName]=\"optionGroup.code\"\r\n                bindLabel=\"name\"\r\n                bindValue=\"id\"\r\n                appendTo=\"body\"\r\n            >\r\n            </ng-select>\r\n        </vdr-form-field>\r\n        <clr-alert\r\n            *ngIf=\"product.optionGroups.length === 0\"\r\n            clrAlertType=\"warning\"\r\n            [clrAlertClosable]=\"false\"\r\n            class=\"form-grid-span\"\r\n        >\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.cannot-create-variants-without-options' | translate }}\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div *ngIf=\"existingVariant\" class=\"mt-2\">\r\n        <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\r\n                        existingVariant.sku\r\n                    }})\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div class=\"form-grid mt-2\">\r\n        <vdr-form-field [label]=\"'common.name' | translate\">\r\n            <input type=\"text\" formControlName=\"name\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.sku' | translate\">\r\n            <input type=\"text\" formControlName=\"sku\" />\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\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)=\"confirm()\"\r\n        class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\"\r\n    >\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'vdr-create-product-variant-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-variant' | translate }}\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <div formGroupName=\"options\" class=\"form-grid\">\r\n        <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\r\n            <ng-select [items]=\"optionGroup.options\" [formControlName]=\"optionGroup.code\" bindLabel=\"name\"\r\n                bindValue=\"id\" appendTo=\"body\">\r\n            </ng-select>\r\n        </vdr-form-field>\r\n        <clr-alert *ngIf=\"product.optionGroups.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\"\r\n            class=\"form-grid-span\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.cannot-create-variants-without-options' | translate }}\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div *ngIf=\"existingVariant\" class=\"mt-2\">\r\n        <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\r\n                    existingVariant.sku\r\n                    }})\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div class=\"form-grid mt-2\">\r\n        <vdr-form-field [label]=\"'common.name' | translate\">\r\n            <input type=\"text\" formControlName=\"name\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.sku' | translate\">\r\n            <input type=\"text\" formControlName=\"sku\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.price' | translate\">\r\n            <vdr-currency-input name=\"price\" [currencyCode]=\"currencyCode\" formControlName=\"price\" />\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i2.FormBuilder }]; } });
 const OPTION_VALUE_INPUT_VALUE_ACCESSOR = {
@@ -893,14 +896,15 @@ class ProductVariantsEditorComponent {
         }
     }
     addOptionToVariant(variant) {
+        const optionIds = [
+            ...variant.options.map(o => o.id),
+            ...Object.values(this.optionsToAddToVariant[variant.id]),
+        ];
         this.dataService.product
             .updateProductVariants([
             {
                 id: variant.id,
-                optionIds: [
-                    ...variant.options.map(o => o.id),
-                    ...Object.values(this.optionsToAddToVariant[variant.id]),
-                ],
+                optionIds: unique(optionIds),
             },
         ])
             .subscribe(({ updateProductVariants }) => {
@@ -1182,7 +1186,7 @@ class AssetDetailComponent extends TypedBaseDetailComponent {
         this.detailForm = new FormGroup({
             name: new FormControl(''),
             tags: new FormControl([]),
-            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         });
     }
     ngOnInit() {
@@ -1843,11 +1847,11 @@ class CollectionDataTableComponent extends DataTable2Component {
         this.changeDetectorRef.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CollectionDataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalStorageService }, { token: i1.DataService }, { token: i2$1.DragDrop }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: { subCollections: "subCollections" }, outputs: { changeOrder: "changeOrder" }, viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "collectionRowList", predicate: ["collectionRow"], descendants: true, read: CdkDrag }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n        [style.table-layout]=\"!items?.length ? 'fixed' : 'inherit'\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <div class=\"flex\">\r\n                        <div class=\"drag-handle-spacer\"></div>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                            (change)=\"onToggleAllClick()\"\r\n                        />\r\n                    </div>\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody\r\n            cdkDropList\r\n            cdkDropListLockAxis=\"y\"\r\n            (cdkDropListDropped)=\"onDrop($event)\"\r\n            [cdkDropListSortPredicate]=\"sortPredicate\"\r\n        >\r\n            <ng-container\r\n                *ngFor=\"\r\n                let item of items\r\n                    | paginate\r\n                        : {\r\n                              itemsPerPage: itemsPerPage,\r\n                              currentPage: currentPage,\r\n                              totalItems: totalItems,\r\n                              id: id,\r\n                          };\r\n                index as i;\r\n                trackBy: trackByFn\r\n            \"\r\n            >\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"collectionRowTmp\"\r\n                    [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\r\n                ></ng-container>\r\n            </ng-container>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\r\n    <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\r\n        <td\r\n            *ngIf=\"selectionManager\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n            class=\"selection-col\"\r\n        >\r\n            <div class=\"flex\">\r\n                <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    [checked]=\"selectionManager?.isSelected(item)\"\r\n                    (click)=\"onRowClick(item, $event)\"\r\n                />\r\n            </div>\r\n        </td>\r\n        <td\r\n            *ngFor=\"let column of visibleSortedColumns\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n        >\r\n            <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\r\n                ></ng-container>\r\n            </div>\r\n        </td>\r\n        <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\r\n    </tr>\r\n    <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\r\n        ></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-left:var(--surface-margin-left);text-align:left}}th:last-of-type,td:last-of-type{border-right:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-left:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-left:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-left:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-left:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-weight-200)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-left:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-left:var(--surface-margin-left);margin-right:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-left:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-left:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: { subCollections: "subCollections" }, outputs: { changeOrder: "changeOrder" }, viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "collectionRowList", predicate: ["collectionRow"], descendants: true, read: CdkDrag }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <div class=\"flex\">\r\n                        <div class=\"drag-handle-spacer\"></div>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                            (change)=\"onToggleAllClick()\"\r\n                        />\r\n                    </div>\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody\r\n            cdkDropList\r\n            cdkDropListLockAxis=\"y\"\r\n            (cdkDropListDropped)=\"onDrop($event)\"\r\n            [cdkDropListSortPredicate]=\"sortPredicate\"\r\n        >\r\n            <ng-container\r\n                *ngFor=\"\r\n                let item of items\r\n                    | paginate\r\n                        : {\r\n                              itemsPerPage: itemsPerPage,\r\n                              currentPage: currentPage,\r\n                              totalItems: totalItems,\r\n                              id: id,\r\n                          };\r\n                index as i;\r\n                trackBy: trackByFn\r\n            \"\r\n            >\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"collectionRowTmp\"\r\n                    [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\r\n                ></ng-container>\r\n            </ng-container>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\r\n    <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\r\n        <td\r\n            *ngIf=\"selectionManager\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n            class=\"selection-col\"\r\n        >\r\n            <div class=\"flex\">\r\n                <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    [checked]=\"selectionManager?.isSelected(item)\"\r\n                    (click)=\"onRowClick(item, $event)\"\r\n                />\r\n            </div>\r\n        </td>\r\n        <td\r\n            *ngFor=\"let column of visibleSortedColumns\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n        >\r\n            <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\r\n                ></ng-container>\r\n            </div>\r\n        </td>\r\n        <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\r\n    </tr>\r\n    <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\r\n        ></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-left:var(--surface-margin-left);text-align:left}}th:last-of-type,td:last-of-type{border-right:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-left:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-left:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-left:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-left:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-weight-200)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-left:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-left:var(--surface-margin-left);margin-right:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-left:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-left:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: CollectionDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-collection-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n        [style.table-layout]=\"!items?.length ? 'fixed' : 'inherit'\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <div class=\"flex\">\r\n                        <div class=\"drag-handle-spacer\"></div>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                            (change)=\"onToggleAllClick()\"\r\n                        />\r\n                    </div>\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody\r\n            cdkDropList\r\n            cdkDropListLockAxis=\"y\"\r\n            (cdkDropListDropped)=\"onDrop($event)\"\r\n            [cdkDropListSortPredicate]=\"sortPredicate\"\r\n        >\r\n            <ng-container\r\n                *ngFor=\"\r\n                let item of items\r\n                    | paginate\r\n                        : {\r\n                              itemsPerPage: itemsPerPage,\r\n                              currentPage: currentPage,\r\n                              totalItems: totalItems,\r\n                              id: id,\r\n                          };\r\n                index as i;\r\n                trackBy: trackByFn\r\n            \"\r\n            >\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"collectionRowTmp\"\r\n                    [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\r\n                ></ng-container>\r\n            </ng-container>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\r\n    <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\r\n        <td\r\n            *ngIf=\"selectionManager\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n            class=\"selection-col\"\r\n        >\r\n            <div class=\"flex\">\r\n                <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    [checked]=\"selectionManager?.isSelected(item)\"\r\n                    (click)=\"onRowClick(item, $event)\"\r\n                />\r\n            </div>\r\n        </td>\r\n        <td\r\n            *ngFor=\"let column of visibleSortedColumns\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n        >\r\n            <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\r\n                ></ng-container>\r\n            </div>\r\n        </td>\r\n        <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\r\n    </tr>\r\n    <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\r\n        ></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-left:var(--surface-margin-left);text-align:left}}th:last-of-type,td:last-of-type{border-right:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-left:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-left:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-left:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-left:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-weight-200)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-left:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-left:var(--surface-margin-left);margin-right:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-left:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-left:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"] }]
+            args: [{ selector: 'vdr-collection-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bulk-actions\">\r\n    <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n</div>\r\n<div class=\"table-wrapper\">\r\n    <table\r\n        class=\"\"\r\n        [class.no-select]=\"disableSelect\"\r\n    >\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <div class=\"flex\">\r\n                        <div class=\"drag-handle-spacer\"></div>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                            (change)=\"onToggleAllClick()\"\r\n                        />\r\n                    </div>\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <span>{{ column.heading }}</span>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody\r\n            cdkDropList\r\n            cdkDropListLockAxis=\"y\"\r\n            (cdkDropListDropped)=\"onDrop($event)\"\r\n            [cdkDropListSortPredicate]=\"sortPredicate\"\r\n        >\r\n            <ng-container\r\n                *ngFor=\"\r\n                let item of items\r\n                    | paginate\r\n                        : {\r\n                              itemsPerPage: itemsPerPage,\r\n                              currentPage: currentPage,\r\n                              totalItems: totalItems,\r\n                              id: id,\r\n                          };\r\n                index as i;\r\n                trackBy: trackByFn\r\n            \"\r\n            >\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"collectionRowTmp\"\r\n                    [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\r\n                ></ng-container>\r\n            </ng-container>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\r\n    <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\r\n        <td\r\n            *ngIf=\"selectionManager\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n            class=\"selection-col\"\r\n        >\r\n            <div class=\"flex\">\r\n                <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    [checked]=\"selectionManager?.isSelected(item)\"\r\n                    (click)=\"onRowClick(item, $event)\"\r\n                />\r\n            </div>\r\n        </td>\r\n        <td\r\n            *ngFor=\"let column of visibleSortedColumns\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n        >\r\n            <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                <ng-container\r\n                    *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\r\n                ></ng-container>\r\n            </div>\r\n        </td>\r\n        <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\r\n    </tr>\r\n    <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\r\n        ></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-weight-200);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-left:var(--surface-margin-left);text-align:left}}th:last-of-type,td:last-of-type{border-right:1px solid var(--color-weight-200)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-weight-200),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-weight-200),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-left:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-left:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-left:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-left:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-weight-200)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-left:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-left:var(--surface-margin-left);margin-right:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-left:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-left:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-left:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.LocalStorageService }, { type: i1.DataService }, { type: i2$1.DragDrop }]; }, propDecorators: { subCollections: [{
                 type: Input
             }], changeOrder: [{
@@ -1885,7 +1889,7 @@ class CollectionDetailComponent extends TypedBaseDetailComponent {
             visible: false,
             inheritFilters: true,
             filters: this.formBuilder.array([]),
-            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         });
         this.assetChanges = {};
         this.filters = [];
@@ -2290,6 +2294,7 @@ class CollectionListComponent extends TypedBaseListComponent {
         this.expandedIds = [];
         this.customFields = this.getCustomFieldConfig('Collection');
         this.filters = this.createFilterCollection()
+            .addIdFilter()
             .addDateFilters()
             .addFilter({
             name: 'slug',
@@ -2740,7 +2745,7 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
                 code: ['', Validators.required],
                 name: '',
                 visible: true,
-                customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+                customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
             }),
             values: this.formBuilder.array([]),
         });
@@ -3186,6 +3191,7 @@ class FacetListComponent extends TypedBaseListComponent {
         this.displayLimit = {};
         this.customFields = this.getCustomFieldConfig('Facet');
         this.filters = this.createFilterCollection()
+            .addIdFilter()
             .addDateFilters()
             .addFilter({
             name: 'visibility',
@@ -3370,6 +3376,7 @@ class ProductVariantListComponent extends TypedBaseListComponent {
         this.hideLanguageSelect = false;
         this.customFields = this.getCustomFieldConfig('ProductVariant');
         this.filters = this.createFilterCollection()
+            .addIdFilter()
             .addDateFilters()
             .addFilters([
             {
@@ -3378,12 +3385,6 @@ class ProductVariantListComponent extends TypedBaseListComponent {
                 label: marker('common.name'),
                 filterField: 'name',
             },
-            {
-                name: 'id',
-                type: { kind: 'text' },
-                label: marker('common.id'),
-                filterField: 'id',
-            },
             {
                 name: 'enabled',
                 type: { kind: 'boolean' },
@@ -3480,7 +3481,7 @@ class ProductDetailComponent extends TypedBaseDetailComponent {
             slug: ['', unicodePatternValidator(/^[\p{Letter}0-9._-]+$/)],
             description: '',
             facetValueIds: [[]],
-            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         });
         this.assetChanges = {};
         this.createVariantsConfig = { groups: [], variants: [], stockLocationId: '' };
@@ -3757,11 +3758,11 @@ class ProductDetailComponent extends TypedBaseDetailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductDetailComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i1.ServerConfigService }, { token: ProductDetailService }, { token: i2.FormBuilder }, { token: i1.ModalService }, { token: i1.NotificationService }, { token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductDetailComponent, selector: "vdr-product-detail2", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-flex-row\"></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\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermissions\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermissions\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            [formControl]=\"detailForm.get(['enabled'])\"\r\n                        />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <ng-container *ngIf=\"!(isNew$ | async)\">\r\n                <vdr-card *vdrIfMultichannel [title]=\"'common.channels' | translate\">\r\n                    <vdr-form-item *vdrIfDefaultChannelActive>\r\n                        <div class=\"flex channel-assignment\">\r\n                            <div class=\"mb-2\">\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 [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                        {{ channel.code | channelCodeToLabel }}\r\n                                    </vdr-chip>\r\n                                </ng-container>\r\n                            </div>\r\n                            <button class=\"button-small\" (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                </vdr-card>\r\n            </ng-container>\r\n            <vdr-card *ngIf=\"entity?.optionGroups.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let optionGroup of entity?.optionGroups | sort : 'id'\"\r\n                        [colorFrom]=\"optionGroup.code\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        {{ optionGroup.name }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a [routerLink]=\"['options']\" class=\"button-small mt-2\" *vdrIfPermissions=\"updatePermissions\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'catalog.edit-options' | translate }}\r\n                    </a>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.facets' | translate\">\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]=\"updatePermissions | hasPermission\"\r\n                        (remove)=\"removeProductFacetValue(facetValue.id)\"\r\n                    ></vdr-facet-value-chip>\r\n                </div>\r\n                <div>\r\n                    <button\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\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            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block>\r\n            <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <div>\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]=\"!(updatePermissions | hasPermission)\"\r\n                                (input)=\"updateSlug($event.target.value)\"\r\n                            />\r\n                        </vdr-form-field>\r\n                        <div *ngIf=\"(isNew$ | async) === false && detailForm.get(['name'])?.dirty\">\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>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                            </clr-checkbox-wrapper>\r\n                        </div>\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]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Product\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || entity?.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || entity?.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                ></vdr-assets>\r\n            </vdr-card>\r\n\r\n            <vdr-card [title]=\"'catalog.product-variants' | translate\" [paddingX]=\"isNew$ | async\">\r\n                <div *ngIf=\"isNew$ | async; else variantList\">\r\n                    <vdr-generate-product-variants\r\n                        (variantsChange)=\"createVariantsConfig = $event\"\r\n                    ></vdr-generate-product-variants>\r\n                </div>\r\n                <ng-template #variantList>\r\n                    <vdr-product-variant-list\r\n                        [productId]=\"this.id\"\r\n                        [hideLanguageSelect]=\"true\"\r\n                    ></vdr-product-variant-list>\r\n                </ng-template>\r\n                <div class=\"mx-3\" *ngIf=\"(isNew$ | async) === false\">\r\n                    <a class=\"button\" [routerLink]=\"['manage-variants']\">\r\n                        <clr-icon shape=\"add-text\"></clr-icon>\r\n                        {{ 'catalog.manage-variants' | translate }}</a\r\n                    >\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets,.options{display:flex;flex-wrap:wrap;gap:3px}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}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "directive", type: i1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "directive", type: i1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: ["variantsChange"] }, { kind: "component", type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: ProductVariantListComponent, selector: "vdr-product-variant-list", inputs: ["productId", "hideLanguageSelect"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductDetailComponent, selector: "vdr-product-detail2", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-flex-row\"></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 || createVariantsConfig.variants.length === 0\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermissions\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermissions\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            [formControl]=\"detailForm.get(['enabled'])\"\r\n                        />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <ng-container *ngIf=\"!(isNew$ | async)\">\r\n                <vdr-card *vdrIfMultichannel [title]=\"'common.channels' | translate\">\r\n                    <vdr-form-item *vdrIfDefaultChannelActive>\r\n                        <div class=\"flex channel-assignment\">\r\n                            <div class=\"mb-2\">\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 [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                        {{ channel.code | channelCodeToLabel }}\r\n                                    </vdr-chip>\r\n                                </ng-container>\r\n                            </div>\r\n                            <button class=\"button-small\" (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                </vdr-card>\r\n            </ng-container>\r\n            <vdr-card *ngIf=\"entity?.optionGroups.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let optionGroup of entity?.optionGroups | sort : 'id'\"\r\n                        [colorFrom]=\"optionGroup.code\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        {{ optionGroup.name }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a [routerLink]=\"['options']\" class=\"button-small mt-2\" *vdrIfPermissions=\"updatePermissions\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'catalog.edit-options' | translate }}\r\n                    </a>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.facets' | translate\">\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]=\"updatePermissions | hasPermission\"\r\n                        (remove)=\"removeProductFacetValue(facetValue.id)\"\r\n                    ></vdr-facet-value-chip>\r\n                </div>\r\n                <div>\r\n                    <button\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\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            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block>\r\n            <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <div>\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]=\"!(updatePermissions | hasPermission)\"\r\n                                (input)=\"updateSlug($event.target.value)\"\r\n                            />\r\n                        </vdr-form-field>\r\n                        <div *ngIf=\"(isNew$ | async) === false && detailForm.get(['name'])?.dirty\">\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>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                            </clr-checkbox-wrapper>\r\n                        </div>\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]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Product\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || entity?.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || entity?.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                ></vdr-assets>\r\n            </vdr-card>\r\n\r\n            <vdr-card [title]=\"'catalog.product-variants' | translate\" [paddingX]=\"isNew$ | async\">\r\n                <div *ngIf=\"isNew$ | async; else variantList\">\r\n                    <vdr-generate-product-variants\r\n                        (variantsChange)=\"createVariantsConfig = $event\"\r\n                    ></vdr-generate-product-variants>\r\n                </div>\r\n                <ng-template #variantList>\r\n                    <vdr-product-variant-list\r\n                        [productId]=\"this.id\"\r\n                        [hideLanguageSelect]=\"true\"\r\n                    ></vdr-product-variant-list>\r\n                </ng-template>\r\n                <div class=\"mx-3\" *ngIf=\"(isNew$ | async) === false\">\r\n                    <a class=\"button\" [routerLink]=\"['manage-variants']\">\r\n                        <clr-icon shape=\"add-text\"></clr-icon>\r\n                        {{ 'catalog.manage-variants' | translate }}</a\r\n                    >\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets,.options{display:flex;flex-wrap:wrap;gap:3px}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}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "directive", type: i1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "directive", type: i1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: ["variantsChange"] }, { kind: "component", type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: ProductVariantListComponent, selector: "vdr-product-variant-list", inputs: ["productId", "hideLanguageSelect"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-detail2', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-flex-row\"></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\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermissions\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermissions\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            [formControl]=\"detailForm.get(['enabled'])\"\r\n                        />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <ng-container *ngIf=\"!(isNew$ | async)\">\r\n                <vdr-card *vdrIfMultichannel [title]=\"'common.channels' | translate\">\r\n                    <vdr-form-item *vdrIfDefaultChannelActive>\r\n                        <div class=\"flex channel-assignment\">\r\n                            <div class=\"mb-2\">\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 [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                        {{ channel.code | channelCodeToLabel }}\r\n                                    </vdr-chip>\r\n                                </ng-container>\r\n                            </div>\r\n                            <button class=\"button-small\" (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                </vdr-card>\r\n            </ng-container>\r\n            <vdr-card *ngIf=\"entity?.optionGroups.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let optionGroup of entity?.optionGroups | sort : 'id'\"\r\n                        [colorFrom]=\"optionGroup.code\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        {{ optionGroup.name }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a [routerLink]=\"['options']\" class=\"button-small mt-2\" *vdrIfPermissions=\"updatePermissions\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'catalog.edit-options' | translate }}\r\n                    </a>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.facets' | translate\">\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]=\"updatePermissions | hasPermission\"\r\n                        (remove)=\"removeProductFacetValue(facetValue.id)\"\r\n                    ></vdr-facet-value-chip>\r\n                </div>\r\n                <div>\r\n                    <button\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\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            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block>\r\n            <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <div>\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]=\"!(updatePermissions | hasPermission)\"\r\n                                (input)=\"updateSlug($event.target.value)\"\r\n                            />\r\n                        </vdr-form-field>\r\n                        <div *ngIf=\"(isNew$ | async) === false && detailForm.get(['name'])?.dirty\">\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>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                            </clr-checkbox-wrapper>\r\n                        </div>\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]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Product\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || entity?.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || entity?.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                ></vdr-assets>\r\n            </vdr-card>\r\n\r\n            <vdr-card [title]=\"'catalog.product-variants' | translate\" [paddingX]=\"isNew$ | async\">\r\n                <div *ngIf=\"isNew$ | async; else variantList\">\r\n                    <vdr-generate-product-variants\r\n                        (variantsChange)=\"createVariantsConfig = $event\"\r\n                    ></vdr-generate-product-variants>\r\n                </div>\r\n                <ng-template #variantList>\r\n                    <vdr-product-variant-list\r\n                        [productId]=\"this.id\"\r\n                        [hideLanguageSelect]=\"true\"\r\n                    ></vdr-product-variant-list>\r\n                </ng-template>\r\n                <div class=\"mx-3\" *ngIf=\"(isNew$ | async) === false\">\r\n                    <a class=\"button\" [routerLink]=\"['manage-variants']\">\r\n                        <clr-icon shape=\"add-text\"></clr-icon>\r\n                        {{ 'catalog.manage-variants' | translate }}</a\r\n                    >\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets,.options{display:flex;flex-wrap:wrap;gap:3px}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}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"] }]
+            args: [{ selector: 'vdr-product-detail2', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-flex-row\"></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 || createVariantsConfig.variants.length === 0\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermissions\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermissions\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            [formControl]=\"detailForm.get(['enabled'])\"\r\n                        />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <ng-container *ngIf=\"!(isNew$ | async)\">\r\n                <vdr-card *vdrIfMultichannel [title]=\"'common.channels' | translate\">\r\n                    <vdr-form-item *vdrIfDefaultChannelActive>\r\n                        <div class=\"flex channel-assignment\">\r\n                            <div class=\"mb-2\">\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 [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                        {{ channel.code | channelCodeToLabel }}\r\n                                    </vdr-chip>\r\n                                </ng-container>\r\n                            </div>\r\n                            <button class=\"button-small\" (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                </vdr-card>\r\n            </ng-container>\r\n            <vdr-card *ngIf=\"entity?.optionGroups.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let optionGroup of entity?.optionGroups | sort : 'id'\"\r\n                        [colorFrom]=\"optionGroup.code\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        {{ optionGroup.name }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a [routerLink]=\"['options']\" class=\"button-small mt-2\" *vdrIfPermissions=\"updatePermissions\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'catalog.edit-options' | translate }}\r\n                    </a>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.facets' | translate\">\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]=\"updatePermissions | hasPermission\"\r\n                        (remove)=\"removeProductFacetValue(facetValue.id)\"\r\n                    ></vdr-facet-value-chip>\r\n                </div>\r\n                <div>\r\n                    <button\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\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            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block>\r\n            <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <div>\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]=\"!(updatePermissions | hasPermission)\"\r\n                                (input)=\"updateSlug($event.target.value)\"\r\n                            />\r\n                        </vdr-form-field>\r\n                        <div *ngIf=\"(isNew$ | async) === false && detailForm.get(['name'])?.dirty\">\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>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                            </clr-checkbox-wrapper>\r\n                        </div>\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]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Product\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || entity?.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || entity?.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                ></vdr-assets>\r\n            </vdr-card>\r\n\r\n            <vdr-card [title]=\"'catalog.product-variants' | translate\" [paddingX]=\"isNew$ | async\">\r\n                <div *ngIf=\"isNew$ | async; else variantList\">\r\n                    <vdr-generate-product-variants\r\n                        (variantsChange)=\"createVariantsConfig = $event\"\r\n                    ></vdr-generate-product-variants>\r\n                </div>\r\n                <ng-template #variantList>\r\n                    <vdr-product-variant-list\r\n                        [productId]=\"this.id\"\r\n                        [hideLanguageSelect]=\"true\"\r\n                    ></vdr-product-variant-list>\r\n                </ng-template>\r\n                <div class=\"mx-3\" *ngIf=\"(isNew$ | async) === false\">\r\n                    <a class=\"button\" [routerLink]=\"['manage-variants']\">\r\n                        <clr-icon shape=\"add-text\"></clr-icon>\r\n                        {{ 'catalog.manage-variants' | translate }}</a\r\n                    >\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets,.options{display:flex;flex-wrap:wrap;gap:3px}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}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i1.ServerConfigService }, { type: ProductDetailService }, { type: i2.FormBuilder }, { type: i1.ModalService }, { type: i1.NotificationService }, { type: i1.DataService }, { type: i0.ChangeDetectorRef }]; } });
 const deleteProductsBulkAction = {
@@ -3889,14 +3890,9 @@ class ProductListComponent extends TypedBaseListComponent {
         this.pendingSearchIndexUpdates = 0;
         this.customFields = this.getCustomFieldConfig('Product');
         this.filters = this.createFilterCollection()
+            .addIdFilter()
             .addDateFilters()
             .addFilters([
-            {
-                name: 'id',
-                type: { kind: 'text' },
-                label: marker('common.id'),
-                filterField: 'id',
-            },
             {
                 name: 'enabled',
                 type: { kind: 'boolean' },
@@ -4137,7 +4133,7 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
             outOfStockThreshold: 0,
             trackInventory: GlobalFlag.TRUE,
             facetValueIds: [],
-            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         });
         this.stockLevelsForm = this.formBuilder.array([]);
         this.pricesForm = this.formBuilder.array([]);
@@ -4197,7 +4193,6 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
     save() {
         combineLatest(this.entity$, this.languageCode$)
             .pipe(take(1), mergeMap(([variant, languageCode]) => {
-            const formValue = this.detailForm.value;
             const input = pick(this.getUpdatedVariant(variant, this.detailForm, languageCode), [
                 'id',
                 'enabled',
@@ -4351,6 +4346,7 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
             assetIds: this.assetChanges.assets?.map(a => a.id),
             featuredAssetId: this.assetChanges.featuredAsset?.id,
             facetValueIds: variantFormGroup.value.facetValueIds,
+            taxCategoryId: variantFormGroup.value.taxCategoryId,
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductVariantDetailComponent, deps: [{ token: ProductDetailService }, { token: i2.FormBuilder }, { token: i1.ModalService }, { token: i1.NotificationService }, { token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -4553,7 +4549,7 @@ class StockLocationDetailComponent extends TypedBaseDetailComponent {
         this.detailForm = this.formBuilder.group({
             name: ['', Validators.required],
             description: [''],
-            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
         });
     }
     ngOnInit() {
@@ -4722,14 +4718,9 @@ class StockLocationListComponent extends TypedBaseListComponent {
         super();
         this.customFields = this.getCustomFieldConfig('StockLocation');
         this.filters = this.createFilterCollection()
+            .addIdFilter()
             .addDateFilters()
             .addFilters([
-            {
-                name: 'id',
-                type: { kind: 'text' },
-                label: marker('common.id'),
-                filterField: 'id',
-            },
             {
                 name: 'enabled',
                 type: { kind: 'text' },