@vendure/admin-ui 2.0.1 → 2.0.3

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

@@ -8,7 +8,7 @@ import { findTranslation, DeletionResult, BaseDetailComponent, Permission, creat
 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';
-import { forkJoin, of, throwError, combineLatest, Subject, EMPTY, BehaviorSubject, from, merge, concat, lastValueFrom } from 'rxjs';
+import { forkJoin, of, throwError, combineLatest, Subject, EMPTY, BehaviorSubject, from, lastValueFrom, merge, concat } from 'rxjs';
 import { normalizeString } from '@vendure/common/lib/normalize-string';
 import { notNullOrUndefined, generateAllCombinations } from '@vendure/common/lib/shared-utils';
 import * as i3 from '@clr/angular';
@@ -1330,11 +1330,11 @@ class AssetListComponent extends BaseListComponent {
             .pipe(switchMap(res => (res ? this.dataService.product.deleteAssets(assetIds, !!message) : EMPTY)), map(res => res.deleteAssets));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetListComponent, deps: [{ token: i1.NotificationService }, { token: i1.ModalService }, { token: i1.DataService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetListComponent, selector: "vdr-asset-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-asset-search-input\r\n        class=\"my-2\"\r\n        [tags]=\"allTags$ | async\"\r\n        (searchTermChange)=\"searchTerm$.next($event)\"\r\n        (tagsChange)=\"filterByTags$.next($event)\"\r\n    >\r\n        <vdr-asset-file-input\r\n            (selectFiles)=\"filesSelected($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".content-area\"\r\n        ></vdr-asset-file-input>\r\n    </vdr-asset-search-input>\r\n    <vdr-asset-gallery\r\n        [assets]=\"(items$ | async)! | paginate : (paginationConfig$ | async) || {}\"\r\n        [multiSelect]=\"true\"\r\n        [canDelete]=\"['DeleteCatalog', 'DeleteAsset'] | hasPermission\"\r\n        (deleteAssets)=\"deleteAssets($event)\"\r\n    ></vdr-asset-gallery>\r\n\r\n    <div class=\"paging-controls\">\r\n        <vdr-items-per-page-controls\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n        ></vdr-items-per-page-controls>\r\n\r\n        <vdr-pagination-controls\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n        ></vdr-pagination-controls>\r\n    </div>\r\n</vdr-page-block>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}.search-input{margin-top:6px;min-width:300px}\n"], dependencies: [{ kind: "component", type: i1.AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { 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: "component", type: i1.AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { kind: "component", type: i1.AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssetListComponent, selector: "vdr-asset-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <div class=\"my-2\">\r\n        <vdr-asset-search-input\r\n            [tags]=\"allTags$ | async\"\r\n            (searchTermChange)=\"searchTerm$.next($event)\"\r\n            (tagsChange)=\"filterByTags$.next($event)\"\r\n        >\r\n            <vdr-asset-file-input\r\n                (selectFiles)=\"filesSelected($event)\"\r\n                [uploading]=\"uploading\"\r\n                dropZoneTarget=\".content-area\"\r\n            ></vdr-asset-file-input>\r\n        </vdr-asset-search-input>\r\n    </div>\r\n    <vdr-asset-gallery\r\n        [assets]=\"(items$ | async)! | paginate : (paginationConfig$ | async) || {}\"\r\n        [multiSelect]=\"true\"\r\n        [canDelete]=\"['DeleteCatalog', 'DeleteAsset'] | hasPermission\"\r\n        (deleteAssets)=\"deleteAssets($event)\"\r\n    ></vdr-asset-gallery>\r\n\r\n    <div class=\"paging-controls\">\r\n        <vdr-items-per-page-controls\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n        ></vdr-items-per-page-controls>\r\n\r\n        <vdr-pagination-controls\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n        ></vdr-pagination-controls>\r\n    </div>\r\n</vdr-page-block>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}.search-input{margin-top:6px;min-width:300px}\n"], dependencies: [{ kind: "component", type: i1.AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { 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: "component", type: i1.AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { kind: "component", type: i1.AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssetListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-asset-list', template: "<vdr-page-block>\r\n    <vdr-asset-search-input\r\n        class=\"my-2\"\r\n        [tags]=\"allTags$ | async\"\r\n        (searchTermChange)=\"searchTerm$.next($event)\"\r\n        (tagsChange)=\"filterByTags$.next($event)\"\r\n    >\r\n        <vdr-asset-file-input\r\n            (selectFiles)=\"filesSelected($event)\"\r\n            [uploading]=\"uploading\"\r\n            dropZoneTarget=\".content-area\"\r\n        ></vdr-asset-file-input>\r\n    </vdr-asset-search-input>\r\n    <vdr-asset-gallery\r\n        [assets]=\"(items$ | async)! | paginate : (paginationConfig$ | async) || {}\"\r\n        [multiSelect]=\"true\"\r\n        [canDelete]=\"['DeleteCatalog', 'DeleteAsset'] | hasPermission\"\r\n        (deleteAssets)=\"deleteAssets($event)\"\r\n    ></vdr-asset-gallery>\r\n\r\n    <div class=\"paging-controls\">\r\n        <vdr-items-per-page-controls\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n        ></vdr-items-per-page-controls>\r\n\r\n        <vdr-pagination-controls\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n        ></vdr-pagination-controls>\r\n    </div>\r\n</vdr-page-block>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}.search-input{margin-top:6px;min-width:300px}\n"] }]
+            args: [{ selector: 'vdr-asset-list', template: "<vdr-page-block>\r\n    <div class=\"my-2\">\r\n        <vdr-asset-search-input\r\n            [tags]=\"allTags$ | async\"\r\n            (searchTermChange)=\"searchTerm$.next($event)\"\r\n            (tagsChange)=\"filterByTags$.next($event)\"\r\n        >\r\n            <vdr-asset-file-input\r\n                (selectFiles)=\"filesSelected($event)\"\r\n                [uploading]=\"uploading\"\r\n                dropZoneTarget=\".content-area\"\r\n            ></vdr-asset-file-input>\r\n        </vdr-asset-search-input>\r\n    </div>\r\n    <vdr-asset-gallery\r\n        [assets]=\"(items$ | async)! | paginate : (paginationConfig$ | async) || {}\"\r\n        [multiSelect]=\"true\"\r\n        [canDelete]=\"['DeleteCatalog', 'DeleteAsset'] | hasPermission\"\r\n        (deleteAssets)=\"deleteAssets($event)\"\r\n    ></vdr-asset-gallery>\r\n\r\n    <div class=\"paging-controls\">\r\n        <vdr-items-per-page-controls\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n        ></vdr-items-per-page-controls>\r\n\r\n        <vdr-pagination-controls\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n        ></vdr-pagination-controls>\r\n    </div>\r\n</vdr-page-block>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}.search-input{margin-top:6px;min-width:300px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.NotificationService }, { type: i1.ModalService }, { type: i1.DataService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }]; } });
 
 /**
@@ -1501,18 +1501,14 @@ class AssignProductsToChannelDialogComponent {
         this.resolveWith();
     }
     async getTopVariants(take) {
-        const variants = [];
-        for (let i = 0; i < this.productIds.length && variants.length < take; i++) {
-            const productVariants = await this.dataService.product
-                .getProduct(this.productIds[i], { take: this.isProductVariantMode ? undefined : take })
-                .mapSingle(({ product }) => {
-                const _variants = product ? product.variantList.items : [];
-                return _variants.filter(v => this.isProductVariantMode ? this.productVariantIds?.includes(v.id) : true);
-            })
-                .toPromise();
-            variants.push(...(productVariants || []));
-        }
-        return variants.slice(0, take);
+        return (await lastValueFrom(this.dataService.product.getProductVariants({
+            filterOperator: LogicalOperator.OR,
+            filter: {
+                productId: { in: this.productIds },
+                id: { in: this.productVariantIds },
+            },
+            take,
+        }).single$)).productVariants.items;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: AssignProductsToChannelDialogComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: AssignProductsToChannelDialogComponent, selector: "vdr-assign-products-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <ng-container *ngIf=\"isProductVariantMode; else productModeTitle\">{{\r\n        'catalog.assign-variants-to-channel' | translate\r\n    }}</ng-container>\r\n    <ng-template #productModeTitle>{{ 'catalog.assign-products-to-channel' | translate }}</ng-template>\r\n</ng-template>\r\n\r\n<div class=\"flex\">\r\n    <clr-input-container>\r\n        <label>{{ 'common.channel' | translate }}</label>\r\n        <vdr-channel-assignment-control\r\n            clrInput\r\n            [multiple]=\"false\"\r\n            [includeDefaultChannel]=\"false\"\r\n            [disableChannelIds]=\"currentChannelIds\"\r\n            [formControl]=\"selectedChannelIdControl\"\r\n        ></vdr-channel-assignment-control>\r\n    </clr-input-container>\r\n    <div class=\"flex-spacer\"></div>\r\n    <clr-input-container>\r\n        <label>{{ 'catalog.price-conversion-factor' | translate }}</label>\r\n        <input clrInput type=\"number\" min=\"0\" max=\"99999\" [formControl]=\"priceFactorControl\" />\r\n    </clr-input-container>\r\n</div>\r\n\r\n<div class=\"channel-price-preview\">\r\n    <label class=\"clr-control-label\">{{ 'catalog.channel-price-preview' | translate }}</label>\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.name' | translate }}</th>\r\n                <th>\r\n                    {{\r\n                        'catalog.price-in-channel'\r\n                            | translate: { channel: currentChannel?.code | channelCodeToLabel | translate }\r\n                    }}\r\n                </th>\r\n                <th>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n                        {{ 'catalog.price-in-channel' | translate: { channel: selectedChannel?.code } }}\r\n                    </ng-template>\r\n                    <ng-template #noSelection>\r\n                        {{ 'catalog.no-channel-selected' | translate }}\r\n                    </ng-template>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of variantsPreview$ | async\">\r\n                <td>{{ row.name }}</td>\r\n                <td>{{ row.price | localeCurrency: currentChannel?.defaultCurrencyCode }}</td>\r\n                <td>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noChannelSelected\">\r\n                        {{ row.pricePreview | localeCurrency: selectedChannel?.defaultCurrencyCode }}\r\n                    </ng-template>\r\n                    <ng-template #noChannelSelected> - </ng-template>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\r\n        <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n            {{ 'catalog.assign-to-named-channel' | translate: { channelCode: selectedChannel?.code } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'catalog.no-channel-selected' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: ["vdr-channel-assignment-control{min-width:200px}.channel-price-preview{margin-top:24px}.channel-price-preview table.table{margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3.ClrInputContainer, selector: "clr-input-container" }, { 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.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -2129,8 +2125,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImpor
         }] });
 
 class MoveCollectionsDialogComponent {
-    constructor(dataService) {
+    constructor(dataService, i18nService) {
         this.dataService = dataService;
+        this.i18nService = i18nService;
         this.searchTermControl = new FormControl('');
         this.currentPage$ = new BehaviorSubject(1);
         this.itemsPerPage$ = new BehaviorSubject(10);
@@ -2155,7 +2152,32 @@ class MoveCollectionsDialogComponent {
                 },
             });
         });
-        this.items$ = getCollectionsResult.mapStream(data => data.collections.items);
+        const rootCollectionId$ = this.dataService.collection
+            .getCollections({
+            take: 1,
+            topLevelOnly: true,
+        })
+            .mapSingle(data => data.collections.items[0].parentId);
+        this.items$ = combineLatest(getCollectionsResult.mapStream(({ collections }) => collections), rootCollectionId$).pipe(map(([collections, rootCollectionId]) => [
+            ...(rootCollectionId
+                ? [
+                    {
+                        id: rootCollectionId,
+                        name: this.i18nService.translate('catalog.root-collection'),
+                        slug: '',
+                        parentId: '__',
+                        position: 0,
+                        featuredAsset: null,
+                        children: [],
+                        breadcrumbs: [],
+                        isPrivate: false,
+                        createdAt: '',
+                        updatedAt: '',
+                    },
+                ]
+                : []),
+            ...collections.items,
+        ]));
         this.totalItems$ = getCollectionsResult.mapStream(data => data.collections.totalItems);
         this.subCollections$ = this.expandedIds$.pipe(tap(val => (this.expandedIds = val)), switchMap(ids => {
             if (ids.length) {
@@ -2183,13 +2205,13 @@ class MoveCollectionsDialogComponent {
         }
         this.expandedIds$.next(expandedIds);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: MoveCollectionsDialogComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: MoveCollectionsDialogComponent, selector: "vdr-move-collections-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.move-collections' | translate }}\r\n</ng-template>\r\n<vdr-collection-data-table\r\n    class=\"mt-2\"\r\n    id=\"move-collection-list\"\r\n    [items]=\"items$ | async\"\r\n    [subCollections]=\"subCollections$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"currentPage$.next($event)\"\r\n    (itemsPerPageChange)=\"itemsPerPage$.next($event)\"\r\n>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-collection=\"item\">\r\n            {{ collection.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" [optional]=\"false\">\r\n        <ng-template let-collection=\"item\" let-depth=\"depth\">\r\n            <div [ngClass]=\"'indent-' + depth\"></div>\r\n            <clr-icon\r\n                class=\"child-arrow\"\r\n                [class.transparent]=\"depth === 0\"\r\n                shape=\"child-arrow\"\r\n                *ngIf=\"!collection.children?.length\"\r\n            ></clr-icon>\r\n            <button\r\n                class=\"icon-button folder-button\"\r\n                *ngIf=\"collection.children?.length\"\r\n                (click)=\"toggleExpanded(collection)\"\r\n            >\r\n                <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\r\n                <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\r\n            </button>\r\n            <button class=\"button-ghost\" (click)=\"resolveWith(collection)\">\r\n                <span>{{ 'catalog.move-collection-to' | translate : { name: collection.name } }}</span>\r\n            </button>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\">\r\n        <ng-template let-collection=\"item\">\r\n            <div class=\"breadcrumb\">\r\n                <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\r\n                    <ng-container *ngIf=\"breadcrumbs.length\">\r\n                        <div *ngFor=\"let item of breadcrumbs\">\r\n                            <span class=\"separator\">/</span>{{ item.name }}\r\n                        </div>\r\n                    </ng-container>\r\n                    <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\r\n                </ng-container>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\">\r\n        <ng-template let-collection=\"item\">\r\n            {{ collection.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-collection-data-table>\r\n", styles: ["", ":host{--indent-spacing: 18px}.indent-1{padding-left:var(--indent-spacing)}.indent-2{padding-left:calc(var(--indent-spacing) * 2)}.indent-3{padding-left:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-left:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { 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: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: ["subCollections"], outputs: ["changeOrder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: CollectionBreadcrumbPipe, name: "collectionBreadcrumb" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: MoveCollectionsDialogComponent, deps: [{ token: i1.DataService }, { token: i1.I18nService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: MoveCollectionsDialogComponent, selector: "vdr-move-collections-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.move-collections' | translate }}\r\n</ng-template>\r\n<vdr-collection-data-table\r\n    class=\"mt-2\"\r\n    id=\"move-collection-list\"\r\n    [items]=\"items$ | async\"\r\n    [subCollections]=\"subCollections$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"currentPage$.next($event)\"\r\n    (itemsPerPageChange)=\"itemsPerPage$.next($event)\"\r\n>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-collection=\"item\">\r\n            {{ collection.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" [optional]=\"false\">\r\n        <ng-template let-collection=\"item\" let-depth=\"depth\">\r\n            <div [ngClass]=\"'indent-' + depth\"></div>\r\n            <clr-icon\r\n                class=\"child-arrow\"\r\n                [class.transparent]=\"depth === 0\"\r\n                shape=\"child-arrow\"\r\n                *ngIf=\"!collection.children?.length && collection.parentId !== '__'\"\r\n            ></clr-icon>\r\n            <button\r\n                class=\"icon-button folder-button\"\r\n                *ngIf=\"collection.children?.length\"\r\n                (click)=\"toggleExpanded(collection)\"\r\n            >\r\n                <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\r\n                <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\r\n            </button>\r\n            <button class=\"icon-button folder-button\" *ngIf=\"collection.parentId === '__'\" disabled>\r\n                <clr-icon shape=\"folder\" class=\"is-solid\"></clr-icon>\r\n            </button>\r\n            <button class=\"button-ghost\" (click)=\"resolveWith(collection)\">\r\n                <span>{{ 'catalog.move-collection-to' | translate : {name: collection.name} }}</span>\r\n            </button>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\">\r\n        <ng-template let-collection=\"item\">\r\n            <div class=\"breadcrumb\">\r\n                <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\r\n                    <ng-container *ngIf=\"breadcrumbs.length\">\r\n                        <div *ngFor=\"let item of breadcrumbs\">\r\n                            <span class=\"separator\">/</span>{{ item.name }}\r\n                        </div>\r\n                    </ng-container>\r\n                    <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\r\n                </ng-container>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\">\r\n        <ng-template let-collection=\"item\">\r\n            {{ collection.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-collection-data-table>\r\n", styles: ["", ":host{--indent-spacing: 18px}.indent-1{padding-left:var(--indent-spacing)}.indent-2{padding-left:calc(var(--indent-spacing) * 2)}.indent-3{padding-left:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-left:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { 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: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: ["subCollections"], outputs: ["changeOrder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: CollectionBreadcrumbPipe, name: "collectionBreadcrumb" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: MoveCollectionsDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-move-collections-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.move-collections' | translate }}\r\n</ng-template>\r\n<vdr-collection-data-table\r\n    class=\"mt-2\"\r\n    id=\"move-collection-list\"\r\n    [items]=\"items$ | async\"\r\n    [subCollections]=\"subCollections$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"currentPage$.next($event)\"\r\n    (itemsPerPageChange)=\"itemsPerPage$.next($event)\"\r\n>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-collection=\"item\">\r\n            {{ collection.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" [optional]=\"false\">\r\n        <ng-template let-collection=\"item\" let-depth=\"depth\">\r\n            <div [ngClass]=\"'indent-' + depth\"></div>\r\n            <clr-icon\r\n                class=\"child-arrow\"\r\n                [class.transparent]=\"depth === 0\"\r\n                shape=\"child-arrow\"\r\n                *ngIf=\"!collection.children?.length\"\r\n            ></clr-icon>\r\n            <button\r\n                class=\"icon-button folder-button\"\r\n                *ngIf=\"collection.children?.length\"\r\n                (click)=\"toggleExpanded(collection)\"\r\n            >\r\n                <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\r\n                <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\r\n            </button>\r\n            <button class=\"button-ghost\" (click)=\"resolveWith(collection)\">\r\n                <span>{{ 'catalog.move-collection-to' | translate : { name: collection.name } }}</span>\r\n            </button>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\">\r\n        <ng-template let-collection=\"item\">\r\n            <div class=\"breadcrumb\">\r\n                <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\r\n                    <ng-container *ngIf=\"breadcrumbs.length\">\r\n                        <div *ngFor=\"let item of breadcrumbs\">\r\n                            <span class=\"separator\">/</span>{{ item.name }}\r\n                        </div>\r\n                    </ng-container>\r\n                    <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\r\n                </ng-container>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\">\r\n        <ng-template let-collection=\"item\">\r\n            {{ collection.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-collection-data-table>\r\n", styles: [":host{--indent-spacing: 18px}.indent-1{padding-left:var(--indent-spacing)}.indent-2{padding-left:calc(var(--indent-spacing) * 2)}.indent-3{padding-left:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-left:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.DataService }]; } });
+            args: [{ selector: 'vdr-move-collections-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.move-collections' | translate }}\r\n</ng-template>\r\n<vdr-collection-data-table\r\n    class=\"mt-2\"\r\n    id=\"move-collection-list\"\r\n    [items]=\"items$ | async\"\r\n    [subCollections]=\"subCollections$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"currentPage$.next($event)\"\r\n    (itemsPerPageChange)=\"itemsPerPage$.next($event)\"\r\n>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\">\r\n        <ng-template let-collection=\"item\">\r\n            {{ collection.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" [optional]=\"false\">\r\n        <ng-template let-collection=\"item\" let-depth=\"depth\">\r\n            <div [ngClass]=\"'indent-' + depth\"></div>\r\n            <clr-icon\r\n                class=\"child-arrow\"\r\n                [class.transparent]=\"depth === 0\"\r\n                shape=\"child-arrow\"\r\n                *ngIf=\"!collection.children?.length && collection.parentId !== '__'\"\r\n            ></clr-icon>\r\n            <button\r\n                class=\"icon-button folder-button\"\r\n                *ngIf=\"collection.children?.length\"\r\n                (click)=\"toggleExpanded(collection)\"\r\n            >\r\n                <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\r\n                <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\r\n            </button>\r\n            <button class=\"icon-button folder-button\" *ngIf=\"collection.parentId === '__'\" disabled>\r\n                <clr-icon shape=\"folder\" class=\"is-solid\"></clr-icon>\r\n            </button>\r\n            <button class=\"button-ghost\" (click)=\"resolveWith(collection)\">\r\n                <span>{{ 'catalog.move-collection-to' | translate : {name: collection.name} }}</span>\r\n            </button>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\">\r\n        <ng-template let-collection=\"item\">\r\n            <div class=\"breadcrumb\">\r\n                <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\r\n                    <ng-container *ngIf=\"breadcrumbs.length\">\r\n                        <div *ngFor=\"let item of breadcrumbs\">\r\n                            <span class=\"separator\">/</span>{{ item.name }}\r\n                        </div>\r\n                    </ng-container>\r\n                    <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\r\n                </ng-container>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\">\r\n        <ng-template let-collection=\"item\">\r\n            {{ collection.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n</vdr-collection-data-table>\r\n", styles: [":host{--indent-spacing: 18px}.indent-1{padding-left:var(--indent-spacing)}.indent-2{padding-left:calc(var(--indent-spacing) * 2)}.indent-3{padding-left:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-left:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i1.I18nService }]; } });
 
 const deleteCollectionsBulkAction = createBulkDeleteAction({
     location: 'collection-list',
@@ -3403,7 +3425,7 @@ class ProductVariantListComponent extends TypedBaseListComponent {
                     skip,
                     take,
                     filter: {
-                        name: {
+                        sku: {
                             contains: this.searchTermControl.value,
                         },
                         ...this.filters.createFilterInput(),
@@ -3416,11 +3438,11 @@ class ProductVariantListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductVariantListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductVariantListComponent, selector: "vdr-product-variant-list", inputs: { productId: "productId", hideLanguageSelect: "hideLanguageSelect" }, usesInheritance: true, ngImport: i0, template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\r\n    <vdr-language-selector\r\n        [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n        [currentLanguageCode]=\"contentLanguage$ | async\"\r\n        (languageCodeChange)=\"setLanguage($event)\"\r\n    ></vdr-language-selector>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-variant-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-variant-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\r\n        <ng-template let-variant=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"variant.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-variant=\"item\">\r\n            <a\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['/catalog/inventory', variant.productId, 'variants', variant.id]\"\r\n                ><span>{{ variant.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" [sort]=\"sorts.get('sku')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.sku }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngIf=\"variant.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!variant.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.price' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('price')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.price | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" [sort]=\"sorts.get('priceWithTax')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n\r\n    <vdr-dt2-column [heading]=\"'catalog.stock-on-hand' | translate\" [hiddenByDefault]=\"false\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngFor=\"let stockLevel of variant.stockLevels\" [title]=\"stockLevel.stockLocation?.name\">\r\n                <div class=\"flex center\">\r\n                    <div>\r\n                        {{ stockLevel.stockOnHand\r\n                        }}<span class=\"ml-1\" *ngIf=\"stockLevel.stockAllocated\"\r\n                            >({{ stockLevel.stockAllocated }} allocated)</span\r\n                        >\r\n                    </div>\r\n                </div>\r\n            </vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}.sku{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { 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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductVariantListComponent, selector: "vdr-product-variant-list", inputs: { productId: "productId", hideLanguageSelect: "hideLanguageSelect" }, usesInheritance: true, ngImport: i0, template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\r\n    <vdr-language-selector\r\n        [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n        [currentLanguageCode]=\"contentLanguage$ | async\"\r\n        (languageCodeChange)=\"setLanguage($event)\"\r\n    ></vdr-language-selector>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-variant-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-variant-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-sku' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\r\n        <ng-template let-variant=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"variant.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-variant=\"item\">\r\n            <a\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['/catalog/inventory', variant.productId, 'variants', variant.id]\"\r\n                ><span>{{ variant.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" [sort]=\"sorts.get('sku')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.sku }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngIf=\"variant.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!variant.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.price' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('price')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.price | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" [sort]=\"sorts.get('priceWithTax')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n\r\n    <vdr-dt2-column [heading]=\"'catalog.stock-on-hand' | translate\" [hiddenByDefault]=\"false\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngFor=\"let stockLevel of variant.stockLevels\" [title]=\"stockLevel.stockLocation?.name\">\r\n                <div class=\"flex center\">\r\n                    <div>\r\n                        {{ stockLevel.stockOnHand\r\n                        }}<span class=\"ml-1\" *ngIf=\"stockLevel.stockAllocated\"\r\n                            >({{ stockLevel.stockAllocated }} allocated)</span\r\n                        >\r\n                    </div>\r\n                </div>\r\n            </vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}.sku{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { 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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductVariantListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-variant-list', template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\r\n    <vdr-language-selector\r\n        [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n        [currentLanguageCode]=\"contentLanguage$ | async\"\r\n        (languageCodeChange)=\"setLanguage($event)\"\r\n    ></vdr-language-selector>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-variant-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-variant-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\r\n        <ng-template let-variant=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"variant.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-variant=\"item\">\r\n            <a\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['/catalog/inventory', variant.productId, 'variants', variant.id]\"\r\n                ><span>{{ variant.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" [sort]=\"sorts.get('sku')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.sku }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngIf=\"variant.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!variant.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.price' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('price')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.price | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" [sort]=\"sorts.get('priceWithTax')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n\r\n    <vdr-dt2-column [heading]=\"'catalog.stock-on-hand' | translate\" [hiddenByDefault]=\"false\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngFor=\"let stockLevel of variant.stockLevels\" [title]=\"stockLevel.stockLocation?.name\">\r\n                <div class=\"flex center\">\r\n                    <div>\r\n                        {{ stockLevel.stockOnHand\r\n                        }}<span class=\"ml-1\" *ngIf=\"stockLevel.stockAllocated\"\r\n                            >({{ stockLevel.stockAllocated }} allocated)</span\r\n                        >\r\n                    </div>\r\n                </div>\r\n            </vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}.sku{color:var(--color-text-300)}\n"] }]
+            args: [{ selector: 'vdr-product-variant-list', template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\r\n    <vdr-language-selector\r\n        [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n        [currentLanguageCode]=\"contentLanguage$ | async\"\r\n        (languageCodeChange)=\"setLanguage($event)\"\r\n    ></vdr-language-selector>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-variant-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-variant-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-sku' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\r\n        <ng-template let-variant=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"variant.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-variant=\"item\">\r\n            <a\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['/catalog/inventory', variant.productId, 'variants', variant.id]\"\r\n                ><span>{{ variant.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" [sort]=\"sorts.get('sku')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.sku }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngIf=\"variant.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!variant.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.price' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('price')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.price | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" [sort]=\"sorts.get('priceWithTax')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n\r\n    <vdr-dt2-column [heading]=\"'catalog.stock-on-hand' | translate\" [hiddenByDefault]=\"false\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngFor=\"let stockLevel of variant.stockLevels\" [title]=\"stockLevel.stockLocation?.name\">\r\n                <div class=\"flex center\">\r\n                    <div>\r\n                        {{ stockLevel.stockOnHand\r\n                        }}<span class=\"ml-1\" *ngIf=\"stockLevel.stockAllocated\"\r\n                            >({{ stockLevel.stockAllocated }} allocated)</span\r\n                        >\r\n                    </div>\r\n                </div>\r\n            </vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}.sku{color:var(--color-text-300)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { productId: [{
                 type: Input
             }], hideLanguageSelect: [{
@@ -3985,11 +4007,11 @@ class ProductListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductListComponent, deps: [{ token: i1.DataService }, { token: i1.ModalService }, { token: i1.NotificationService }, { token: i1.JobQueueService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductListComponent, selector: "vdr-products-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                [routerLink]=\"['./create']\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-product' | translate }}\r\n            </a>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <!--<ng-template #vdrDt2CustomSearch>\r\n            <div class=\"search-form\">\r\n                <vdr-product-search-input\r\n                    #productSearchInputComponent\r\n                    [facetValueResults]=\"facetValues$ | async\"\r\n                    (searchTermChange)=\"setSearchTerm($event)\"\r\n                    (facetValueChange)=\"setFacetValueIds($event)\"\r\n                ></vdr-product-search-input>\r\n                <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"icon-button search-index-button\"\r\n                        [title]=\"\r\n                            (pendingSearchIndexUpdates\r\n                                ? 'catalog.pending-search-index-updates'\r\n                                : 'catalog.search-index-controls'\r\n                            ) | translate\r\n                        \"\r\n                        vdrDropdownTrigger\r\n                    >\r\n                        <clr-icon shape=\"cog\"></clr-icon>\r\n                        <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                        <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"run-updates-button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"runPendingSearchIndexUpdates()\"\r\n                                [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                            >\r\n                                <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                                {{\r\n                                    'catalog.run-pending-search-index-updates'\r\n                                        | translate : { count: pendingSearchIndexUpdates }\r\n                                }}\r\n                            </button>\r\n                            <div class=\"dropdown-divider\"></div>\r\n                        </ng-container>\r\n                        <button\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"rebuildSearchIndex()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            {{ 'catalog.rebuild-search-index' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </ng-template>-->\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"product.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-product=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', product.id]\"\r\n                ><span>{{ product.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\" [sort]=\"sorts.get('slug')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            <vdr-chip *ngIf=\"product.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!product.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.number-of-variants' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}.sku{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { 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: 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.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductListComponent, selector: "vdr-products-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"button primary mr-1\"\r\n                [routerLink]=\"['./create']\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-product' | translate }}\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"rebuildSearchIndex()\">\r\n                        <clr-icon shape=\"refresh\" class=\"\"></clr-icon>\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <!--<ng-template #vdrDt2CustomSearch>\r\n            <div class=\"search-form\">\r\n                <vdr-product-search-input\r\n                    #productSearchInputComponent\r\n                    [facetValueResults]=\"facetValues$ | async\"\r\n                    (searchTermChange)=\"setSearchTerm($event)\"\r\n                    (facetValueChange)=\"setFacetValueIds($event)\"\r\n                ></vdr-product-search-input>\r\n                <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"icon-button search-index-button\"\r\n                        [title]=\"\r\n                            (pendingSearchIndexUpdates\r\n                                ? 'catalog.pending-search-index-updates'\r\n                                : 'catalog.search-index-controls'\r\n                            ) | translate\r\n                        \"\r\n                        vdrDropdownTrigger\r\n                    >\r\n                        <clr-icon shape=\"cog\"></clr-icon>\r\n                        <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                        <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"run-updates-button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"runPendingSearchIndexUpdates()\"\r\n                                [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                            >\r\n                                <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                                {{\r\n                                    'catalog.run-pending-search-index-updates'\r\n                                        | translate : { count: pendingSearchIndexUpdates }\r\n                                }}\r\n                            </button>\r\n                            <div class=\"dropdown-divider\"></div>\r\n                        </ng-container>\r\n                        <button\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"rebuildSearchIndex()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            {{ 'catalog.rebuild-search-index' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </ng-template>-->\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"product.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-product=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', product.id]\"\r\n                ><span>{{ product.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\" [sort]=\"sorts.get('slug')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            <vdr-chip *ngIf=\"product.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!product.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.number-of-variants' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}.sku{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { 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: 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.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-products-list', template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                [routerLink]=\"['./create']\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-product' | translate }}\r\n            </a>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <!--<ng-template #vdrDt2CustomSearch>\r\n            <div class=\"search-form\">\r\n                <vdr-product-search-input\r\n                    #productSearchInputComponent\r\n                    [facetValueResults]=\"facetValues$ | async\"\r\n                    (searchTermChange)=\"setSearchTerm($event)\"\r\n                    (facetValueChange)=\"setFacetValueIds($event)\"\r\n                ></vdr-product-search-input>\r\n                <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"icon-button search-index-button\"\r\n                        [title]=\"\r\n                            (pendingSearchIndexUpdates\r\n                                ? 'catalog.pending-search-index-updates'\r\n                                : 'catalog.search-index-controls'\r\n                            ) | translate\r\n                        \"\r\n                        vdrDropdownTrigger\r\n                    >\r\n                        <clr-icon shape=\"cog\"></clr-icon>\r\n                        <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                        <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"run-updates-button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"runPendingSearchIndexUpdates()\"\r\n                                [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                            >\r\n                                <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                                {{\r\n                                    'catalog.run-pending-search-index-updates'\r\n                                        | translate : { count: pendingSearchIndexUpdates }\r\n                                }}\r\n                            </button>\r\n                            <div class=\"dropdown-divider\"></div>\r\n                        </ng-container>\r\n                        <button\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"rebuildSearchIndex()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            {{ 'catalog.rebuild-search-index' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </ng-template>-->\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"product.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-product=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', product.id]\"\r\n                ><span>{{ product.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\" [sort]=\"sorts.get('slug')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            <vdr-chip *ngIf=\"product.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!product.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.number-of-variants' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}.sku{color:var(--color-text-300)}\n"] }]
+            args: [{ selector: 'vdr-products-list', template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"button primary mr-1\"\r\n                [routerLink]=\"['./create']\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-product' | translate }}\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"rebuildSearchIndex()\">\r\n                        <clr-icon shape=\"refresh\" class=\"\"></clr-icon>\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <!--<ng-template #vdrDt2CustomSearch>\r\n            <div class=\"search-form\">\r\n                <vdr-product-search-input\r\n                    #productSearchInputComponent\r\n                    [facetValueResults]=\"facetValues$ | async\"\r\n                    (searchTermChange)=\"setSearchTerm($event)\"\r\n                    (facetValueChange)=\"setFacetValueIds($event)\"\r\n                ></vdr-product-search-input>\r\n                <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"icon-button search-index-button\"\r\n                        [title]=\"\r\n                            (pendingSearchIndexUpdates\r\n                                ? 'catalog.pending-search-index-updates'\r\n                                : 'catalog.search-index-controls'\r\n                            ) | translate\r\n                        \"\r\n                        vdrDropdownTrigger\r\n                    >\r\n                        <clr-icon shape=\"cog\"></clr-icon>\r\n                        <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                        <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                            <button\r\n                                type=\"button\"\r\n                                class=\"run-updates-button\"\r\n                                vdrDropdownItem\r\n                                (click)=\"runPendingSearchIndexUpdates()\"\r\n                                [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                            >\r\n                                <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                                {{\r\n                                    'catalog.run-pending-search-index-updates'\r\n                                        | translate : { count: pendingSearchIndexUpdates }\r\n                                }}\r\n                            </button>\r\n                            <div class=\"dropdown-divider\"></div>\r\n                        </ng-container>\r\n                        <button\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"rebuildSearchIndex()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            {{ 'catalog.rebuild-search-index' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </ng-template>-->\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"product.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-product=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', product.id]\"\r\n                ><span>{{ product.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\" [sort]=\"sorts.get('slug')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            <vdr-chip *ngIf=\"product.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!product.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.number-of-variants' | translate\">\r\n        <ng-template let-product=\"item\">\r\n            {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}.sku{color:var(--color-text-300)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i1.ModalService }, { type: i1.NotificationService }, { type: i1.JobQueueService }]; } });
 
 class VariantPriceDetailComponent {
@@ -4182,7 +4204,6 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
                 'trackInventory',
                 'outOfStockThreshold',
                 'useGlobalOutOfStockThreshold',
-                'stockOnHand',
                 'customFields',
             ]);
             if (this.stockLevelsForm.dirty) {
@@ -4226,7 +4247,7 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
         });
     }
     assetsChanged() {
-        return false;
+        return !!Object.values(this.assetChanges).length;
     }
     inventoryIsNotTracked(formGroup) {
         const trackInventory = formGroup.get('trackInventory')?.value;
@@ -4327,13 +4348,99 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
         };
     }
     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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductVariantDetailComponent, selector: "vdr-product-variant-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left [grow]=\"true\">\r\n            <div class=\"flex center\">\r\n                <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\r\n                    <vdr-language-selector\r\n                        *ngIf=\"availableLanguages.length > 1\"\r\n                        class=\"mr-2\"\r\n                        [disabled]=\"isNew$ | async\"\r\n                        [availableLanguageCodes]=\"availableLanguages\"\r\n                        [currentLanguageCode]=\"languageCode$ | async\"\r\n                        (languageCodeChange)=\"setLanguage($event)\"\r\n                    ></vdr-language-selector>\r\n                </ng-container>\r\n                <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\r\n            </div>\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                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"\r\n                    (detailForm.invalid ||\r\n                        stockLevelsForm.invalid ||\r\n                        pricesForm.invalid ||\r\n                        (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\r\n                    !assetsChanged()\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\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=\"['UpdateCatalog', 'UpdateProduct']\">\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            <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let option of variant.options | sort : 'groupId'\"\r\n                        [colorFrom]=\"optionGroupCode(option.groupId)\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        <span>{{ optionGroupCode(option.groupId) }}:</span>\r\n                        {{ optionName(option) }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a\r\n                        [routerLink]=\"['../../', 'options']\"\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\r\n                    >\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)=\"removeFacetValue(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)=\"selectFacetValue()\"\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\r\n            <vdr-card>\r\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\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                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\r\n                        <input\r\n                            id=\"sku\"\r\n                            type=\"text\"\r\n                            formControlName=\"sku\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\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=\"ProductVariant\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"product-variant-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            />\r\n            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || variant.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\r\n                        <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\r\n                            <option\r\n                                *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n                                [value]=\"taxCategory.id\"\r\n                            >\r\n                                {{ taxCategory.name }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                </div>\r\n                <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            ('catalog.price' | translate) +\r\n                            (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\r\n                        \"\r\n                        [tooltip]=\"\r\n                            1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\r\n                                ? ('catalog.default-currency' | translate)\r\n                                : undefined\r\n                        \"\r\n                        for=\"price\"\r\n                    >\r\n                        <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\r\n                            <vdr-currency-input\r\n                                name=\"price\"\r\n                                [currencyCode]=\"price.value.currencyCode\"\r\n                                [readonly]=\"\r\n                                    !(updatePermissions | hasPermission) || price.value.delete === true\r\n                                \"\r\n                                formControlName=\"price\"\r\n                            />\r\n                            <div *ngIf=\"1 < pricesForm.controls.length\">\r\n                                <button\r\n                                    class=\"button-small delete-button\"\r\n                                    [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\r\n                                    (click)=\"toggleDeletePrice(price.get('delete'))\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </vdr-form-field>\r\n                    <vdr-variant-price-detail\r\n                        [price]=\"price.value.price\"\r\n                        [currencyCode]=\"price.value.currencyCode\"\r\n                        [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\r\n                    />\r\n                </div>\r\n                <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\r\n                    <div *ngIf=\"unusedCurrencyCodes.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-price-in-another-currency' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let currencyCode of unusedCurrencyCodes\"\r\n                                    (click)=\"addPriceInCurrency(currencyCode)\"\r\n                                >\r\n                                    {{ currencyCode | localeCurrencyName }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.stock-levels' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        for=\"track-inventory\"\r\n                        [label]=\"'catalog.track-inventory' | translate\"\r\n                        [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                    >\r\n                        <select\r\n                            name=\"track-inventory\"\r\n                            formControlName=\"trackInventory\"\r\n                            [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        >\r\n                            <option [value]=\"GlobalFlag.TRUE\">\r\n                                {{ 'catalog.track-inventory-true' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.FALSE\">\r\n                                {{ 'catalog.track-inventory-false' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.INHERIT\">\r\n                                {{ 'catalog.track-inventory-inherit' | translate }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n\r\n                    <vdr-form-item\r\n                        [label]=\"'catalog.out-of-stock-threshold' | translate\"\r\n                        [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                    >\r\n                        <input\r\n                            type=\"number\"\r\n                            formControlName=\"outOfStockThreshold\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                            [vdrDisabled]=\"\r\n                                detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\r\n                                inventoryIsNotTracked(detailForm)\r\n                            \"\r\n                        />\r\n                        <clr-toggle-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrToggle\r\n                                name=\"useGlobalOutOfStockThreshold\"\r\n                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                [vdrDisabled]=\"\r\n                                    !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\r\n                                \"\r\n                            />\r\n                            <label\r\n                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                    globalOutOfStockThreshold\r\n                                }})</label\r\n                            >\r\n                        </clr-toggle-wrapper>\r\n                    </vdr-form-item>\r\n                </div>\r\n                <div\r\n                    class=\"form-grid stock-levels\"\r\n                    *ngFor=\"let stockLevel of stockLevelsForm.controls\"\r\n                    [formGroup]=\"stockLevel\"\r\n                >\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-on-hand' | translate)\r\n                        \"\r\n                        [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                    >\r\n                        <input\r\n                            [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                            type=\"number\"\r\n                            formControlName=\"stockOnHand\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-item\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-allocated' | translate)\r\n                        \"\r\n                    >\r\n                        {{ stockLevel.get('stockAllocated')?.value }}\r\n                    </vdr-form-item>\r\n                </div>\r\n                <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\r\n                    <div *ngIf=\"unusedStockLocations.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-stock-location' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let stockLocation of unusedStockLocations\"\r\n                                    (click)=\"addStockLocation(stockLocation)\"\r\n                                >\r\n                                    <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-right:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { 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.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { 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: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { kind: "component", type: ProductVariantQuickJumpComponent, selector: "vdr-product-variant-quick-jump", inputs: ["productId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.3", type: ProductVariantDetailComponent, selector: "vdr-product-variant-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left [grow]=\"true\">\r\n            <div class=\"flex center\">\r\n                <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\r\n                    <vdr-language-selector\r\n                        *ngIf=\"availableLanguages.length > 1\"\r\n                        class=\"mr-2\"\r\n                        [disabled]=\"isNew$ | async\"\r\n                        [availableLanguageCodes]=\"availableLanguages\"\r\n                        [currentLanguageCode]=\"languageCode$ | async\"\r\n                        (languageCodeChange)=\"setLanguage($event)\"\r\n                    ></vdr-language-selector>\r\n                </ng-container>\r\n                <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\r\n            <button\r\n                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"\r\n                    (detailForm.invalid ||\r\n                        stockLevelsForm.invalid ||\r\n                        pricesForm.invalid ||\r\n                        (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\r\n                    !assetsChanged()\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\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=\"['UpdateCatalog', 'UpdateProduct']\">\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            <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let option of variant.options | sort : 'groupId'\"\r\n                        [colorFrom]=\"optionGroupCode(option.groupId)\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        <span>{{ optionGroupCode(option.groupId) }}:</span>\r\n                        {{ optionName(option) }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a\r\n                        [routerLink]=\"['../../', 'options']\"\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\r\n                    >\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)=\"removeFacetValue(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)=\"selectFacetValue()\"\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\r\n            <vdr-card>\r\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\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                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\r\n                        <input\r\n                            id=\"sku\"\r\n                            type=\"text\"\r\n                            formControlName=\"sku\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\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=\"ProductVariant\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"product-variant-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            />\r\n            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || variant.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\r\n                        <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\r\n                            <option\r\n                                *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n                                [value]=\"taxCategory.id\"\r\n                            >\r\n                                {{ taxCategory.name }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                </div>\r\n                <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            ('catalog.price' | translate) +\r\n                            (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\r\n                        \"\r\n                        [tooltip]=\"\r\n                            1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\r\n                                ? ('catalog.default-currency' | translate)\r\n                                : undefined\r\n                        \"\r\n                        for=\"price\"\r\n                    >\r\n                        <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\r\n                            <vdr-currency-input\r\n                                name=\"price\"\r\n                                [currencyCode]=\"price.value.currencyCode\"\r\n                                [readonly]=\"\r\n                                    !(updatePermissions | hasPermission) || price.value.delete === true\r\n                                \"\r\n                                formControlName=\"price\"\r\n                            />\r\n                            <div *ngIf=\"1 < pricesForm.controls.length\">\r\n                                <button\r\n                                    class=\"button-small delete-button\"\r\n                                    [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\r\n                                    (click)=\"toggleDeletePrice(price.get('delete'))\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </vdr-form-field>\r\n                    <vdr-variant-price-detail\r\n                        [price]=\"price.value.price\"\r\n                        [currencyCode]=\"price.value.currencyCode\"\r\n                        [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\r\n                    />\r\n                </div>\r\n                <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\r\n                    <div *ngIf=\"unusedCurrencyCodes.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-price-in-another-currency' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let currencyCode of unusedCurrencyCodes\"\r\n                                    (click)=\"addPriceInCurrency(currencyCode)\"\r\n                                >\r\n                                    {{ currencyCode | localeCurrencyName }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.stock-levels' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        for=\"track-inventory\"\r\n                        [label]=\"'catalog.track-inventory' | translate\"\r\n                        [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                    >\r\n                        <select\r\n                            name=\"track-inventory\"\r\n                            formControlName=\"trackInventory\"\r\n                            [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        >\r\n                            <option [value]=\"GlobalFlag.TRUE\">\r\n                                {{ 'catalog.track-inventory-true' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.FALSE\">\r\n                                {{ 'catalog.track-inventory-false' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.INHERIT\">\r\n                                {{ 'catalog.track-inventory-inherit' | translate }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n\r\n                    <vdr-form-item\r\n                        [label]=\"'catalog.out-of-stock-threshold' | translate\"\r\n                        [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                    >\r\n                        <input\r\n                            type=\"number\"\r\n                            formControlName=\"outOfStockThreshold\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                            [vdrDisabled]=\"\r\n                                detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\r\n                                inventoryIsNotTracked(detailForm)\r\n                            \"\r\n                        />\r\n                        <clr-toggle-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrToggle\r\n                                name=\"useGlobalOutOfStockThreshold\"\r\n                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                [vdrDisabled]=\"\r\n                                    !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\r\n                                \"\r\n                            />\r\n                            <label\r\n                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                    globalOutOfStockThreshold\r\n                                }})</label\r\n                            >\r\n                        </clr-toggle-wrapper>\r\n                    </vdr-form-item>\r\n                </div>\r\n                <div\r\n                    class=\"form-grid stock-levels\"\r\n                    *ngFor=\"let stockLevel of stockLevelsForm.controls\"\r\n                    [formGroup]=\"stockLevel\"\r\n                >\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-on-hand' | translate)\r\n                        \"\r\n                        [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                    >\r\n                        <input\r\n                            [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                            type=\"number\"\r\n                            formControlName=\"stockOnHand\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-item\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-allocated' | translate)\r\n                        \"\r\n                    >\r\n                        {{ stockLevel.get('stockAllocated')?.value }}\r\n                    </vdr-form-item>\r\n                </div>\r\n                <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\r\n                    <div *ngIf=\"unusedStockLocations.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-stock-location' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let stockLocation of unusedStockLocations\"\r\n                                    (click)=\"addStockLocation(stockLocation)\"\r\n                                >\r\n                                    <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-right:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { 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.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { 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: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { kind: "component", type: ProductVariantQuickJumpComponent, selector: "vdr-product-variant-quick-jump", inputs: ["productId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.3", ngImport: i0, type: ProductVariantDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-variant-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left [grow]=\"true\">\r\n            <div class=\"flex center\">\r\n                <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\r\n                    <vdr-language-selector\r\n                        *ngIf=\"availableLanguages.length > 1\"\r\n                        class=\"mr-2\"\r\n                        [disabled]=\"isNew$ | async\"\r\n                        [availableLanguageCodes]=\"availableLanguages\"\r\n                        [currentLanguageCode]=\"languageCode$ | async\"\r\n                        (languageCodeChange)=\"setLanguage($event)\"\r\n                    ></vdr-language-selector>\r\n                </ng-container>\r\n                <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\r\n            </div>\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                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"\r\n                    (detailForm.invalid ||\r\n                        stockLevelsForm.invalid ||\r\n                        pricesForm.invalid ||\r\n                        (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\r\n                    !assetsChanged()\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\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=\"['UpdateCatalog', 'UpdateProduct']\">\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            <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let option of variant.options | sort : 'groupId'\"\r\n                        [colorFrom]=\"optionGroupCode(option.groupId)\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        <span>{{ optionGroupCode(option.groupId) }}:</span>\r\n                        {{ optionName(option) }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a\r\n                        [routerLink]=\"['../../', 'options']\"\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\r\n                    >\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)=\"removeFacetValue(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)=\"selectFacetValue()\"\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\r\n            <vdr-card>\r\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\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                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\r\n                        <input\r\n                            id=\"sku\"\r\n                            type=\"text\"\r\n                            formControlName=\"sku\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\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=\"ProductVariant\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"product-variant-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            />\r\n            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || variant.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\r\n                        <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\r\n                            <option\r\n                                *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n                                [value]=\"taxCategory.id\"\r\n                            >\r\n                                {{ taxCategory.name }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                </div>\r\n                <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            ('catalog.price' | translate) +\r\n                            (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\r\n                        \"\r\n                        [tooltip]=\"\r\n                            1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\r\n                                ? ('catalog.default-currency' | translate)\r\n                                : undefined\r\n                        \"\r\n                        for=\"price\"\r\n                    >\r\n                        <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\r\n                            <vdr-currency-input\r\n                                name=\"price\"\r\n                                [currencyCode]=\"price.value.currencyCode\"\r\n                                [readonly]=\"\r\n                                    !(updatePermissions | hasPermission) || price.value.delete === true\r\n                                \"\r\n                                formControlName=\"price\"\r\n                            />\r\n                            <div *ngIf=\"1 < pricesForm.controls.length\">\r\n                                <button\r\n                                    class=\"button-small delete-button\"\r\n                                    [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\r\n                                    (click)=\"toggleDeletePrice(price.get('delete'))\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </vdr-form-field>\r\n                    <vdr-variant-price-detail\r\n                        [price]=\"price.value.price\"\r\n                        [currencyCode]=\"price.value.currencyCode\"\r\n                        [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\r\n                    />\r\n                </div>\r\n                <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\r\n                    <div *ngIf=\"unusedCurrencyCodes.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-price-in-another-currency' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let currencyCode of unusedCurrencyCodes\"\r\n                                    (click)=\"addPriceInCurrency(currencyCode)\"\r\n                                >\r\n                                    {{ currencyCode | localeCurrencyName }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.stock-levels' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        for=\"track-inventory\"\r\n                        [label]=\"'catalog.track-inventory' | translate\"\r\n                        [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                    >\r\n                        <select\r\n                            name=\"track-inventory\"\r\n                            formControlName=\"trackInventory\"\r\n                            [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        >\r\n                            <option [value]=\"GlobalFlag.TRUE\">\r\n                                {{ 'catalog.track-inventory-true' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.FALSE\">\r\n                                {{ 'catalog.track-inventory-false' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.INHERIT\">\r\n                                {{ 'catalog.track-inventory-inherit' | translate }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n\r\n                    <vdr-form-item\r\n                        [label]=\"'catalog.out-of-stock-threshold' | translate\"\r\n                        [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                    >\r\n                        <input\r\n                            type=\"number\"\r\n                            formControlName=\"outOfStockThreshold\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                            [vdrDisabled]=\"\r\n                                detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\r\n                                inventoryIsNotTracked(detailForm)\r\n                            \"\r\n                        />\r\n                        <clr-toggle-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrToggle\r\n                                name=\"useGlobalOutOfStockThreshold\"\r\n                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                [vdrDisabled]=\"\r\n                                    !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\r\n                                \"\r\n                            />\r\n                            <label\r\n                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                    globalOutOfStockThreshold\r\n                                }})</label\r\n                            >\r\n                        </clr-toggle-wrapper>\r\n                    </vdr-form-item>\r\n                </div>\r\n                <div\r\n                    class=\"form-grid stock-levels\"\r\n                    *ngFor=\"let stockLevel of stockLevelsForm.controls\"\r\n                    [formGroup]=\"stockLevel\"\r\n                >\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-on-hand' | translate)\r\n                        \"\r\n                        [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                    >\r\n                        <input\r\n                            [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                            type=\"number\"\r\n                            formControlName=\"stockOnHand\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-item\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-allocated' | translate)\r\n                        \"\r\n                    >\r\n                        {{ stockLevel.get('stockAllocated')?.value }}\r\n                    </vdr-form-item>\r\n                </div>\r\n                <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\r\n                    <div *ngIf=\"unusedStockLocations.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-stock-location' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let stockLocation of unusedStockLocations\"\r\n                                    (click)=\"addStockLocation(stockLocation)\"\r\n                                >\r\n                                    <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-right:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}\n"] }]
+            args: [{ selector: 'vdr-product-variant-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left [grow]=\"true\">\r\n            <div class=\"flex center\">\r\n                <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\r\n                    <vdr-language-selector\r\n                        *ngIf=\"availableLanguages.length > 1\"\r\n                        class=\"mr-2\"\r\n                        [disabled]=\"isNew$ | async\"\r\n                        [availableLanguageCodes]=\"availableLanguages\"\r\n                        [currentLanguageCode]=\"languageCode$ | async\"\r\n                        (languageCodeChange)=\"setLanguage($event)\"\r\n                    ></vdr-language-selector>\r\n                </ng-container>\r\n                <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\r\n            <button\r\n                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"\r\n                    (detailForm.invalid ||\r\n                        stockLevelsForm.invalid ||\r\n                        pricesForm.invalid ||\r\n                        (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\r\n                    !assetsChanged()\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\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=\"['UpdateCatalog', 'UpdateProduct']\">\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            <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let option of variant.options | sort : 'groupId'\"\r\n                        [colorFrom]=\"optionGroupCode(option.groupId)\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        <span>{{ optionGroupCode(option.groupId) }}:</span>\r\n                        {{ optionName(option) }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a\r\n                        [routerLink]=\"['../../', 'options']\"\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\r\n                    >\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)=\"removeFacetValue(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)=\"selectFacetValue()\"\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\r\n            <vdr-card>\r\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\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                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\r\n                        <input\r\n                            id=\"sku\"\r\n                            type=\"text\"\r\n                            formControlName=\"sku\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\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=\"ProductVariant\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"product-variant-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            />\r\n            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || variant.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\r\n                        <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\r\n                            <option\r\n                                *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n                                [value]=\"taxCategory.id\"\r\n                            >\r\n                                {{ taxCategory.name }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                </div>\r\n                <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            ('catalog.price' | translate) +\r\n                            (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\r\n                        \"\r\n                        [tooltip]=\"\r\n                            1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\r\n                                ? ('catalog.default-currency' | translate)\r\n                                : undefined\r\n                        \"\r\n                        for=\"price\"\r\n                    >\r\n                        <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\r\n                            <vdr-currency-input\r\n                                name=\"price\"\r\n                                [currencyCode]=\"price.value.currencyCode\"\r\n                                [readonly]=\"\r\n                                    !(updatePermissions | hasPermission) || price.value.delete === true\r\n                                \"\r\n                                formControlName=\"price\"\r\n                            />\r\n                            <div *ngIf=\"1 < pricesForm.controls.length\">\r\n                                <button\r\n                                    class=\"button-small delete-button\"\r\n                                    [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\r\n                                    (click)=\"toggleDeletePrice(price.get('delete'))\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </vdr-form-field>\r\n                    <vdr-variant-price-detail\r\n                        [price]=\"price.value.price\"\r\n                        [currencyCode]=\"price.value.currencyCode\"\r\n                        [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\r\n                    />\r\n                </div>\r\n                <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\r\n                    <div *ngIf=\"unusedCurrencyCodes.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-price-in-another-currency' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let currencyCode of unusedCurrencyCodes\"\r\n                                    (click)=\"addPriceInCurrency(currencyCode)\"\r\n                                >\r\n                                    {{ currencyCode | localeCurrencyName }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.stock-levels' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        for=\"track-inventory\"\r\n                        [label]=\"'catalog.track-inventory' | translate\"\r\n                        [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                    >\r\n                        <select\r\n                            name=\"track-inventory\"\r\n                            formControlName=\"trackInventory\"\r\n                            [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        >\r\n                            <option [value]=\"GlobalFlag.TRUE\">\r\n                                {{ 'catalog.track-inventory-true' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.FALSE\">\r\n                                {{ 'catalog.track-inventory-false' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.INHERIT\">\r\n                                {{ 'catalog.track-inventory-inherit' | translate }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n\r\n                    <vdr-form-item\r\n                        [label]=\"'catalog.out-of-stock-threshold' | translate\"\r\n                        [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                    >\r\n                        <input\r\n                            type=\"number\"\r\n                            formControlName=\"outOfStockThreshold\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                            [vdrDisabled]=\"\r\n                                detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\r\n                                inventoryIsNotTracked(detailForm)\r\n                            \"\r\n                        />\r\n                        <clr-toggle-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrToggle\r\n                                name=\"useGlobalOutOfStockThreshold\"\r\n                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                [vdrDisabled]=\"\r\n                                    !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\r\n                                \"\r\n                            />\r\n                            <label\r\n                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                    globalOutOfStockThreshold\r\n                                }})</label\r\n                            >\r\n                        </clr-toggle-wrapper>\r\n                    </vdr-form-item>\r\n                </div>\r\n                <div\r\n                    class=\"form-grid stock-levels\"\r\n                    *ngFor=\"let stockLevel of stockLevelsForm.controls\"\r\n                    [formGroup]=\"stockLevel\"\r\n                >\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-on-hand' | translate)\r\n                        \"\r\n                        [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                    >\r\n                        <input\r\n                            [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                            type=\"number\"\r\n                            formControlName=\"stockOnHand\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-item\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-allocated' | translate)\r\n                        \"\r\n                    >\r\n                        {{ stockLevel.get('stockAllocated')?.value }}\r\n                    </vdr-form-item>\r\n                </div>\r\n                <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\r\n                    <div *ngIf=\"unusedStockLocations.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-stock-location' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let stockLocation of unusedStockLocations\"\r\n                                    (click)=\"addStockLocation(stockLocation)\"\r\n                                >\r\n                                    <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-right:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}\n"] }]
         }], ctorParameters: function () { return [{ type: ProductDetailService }, { type: i2.FormBuilder }, { type: i1.ModalService }, { type: i1.NotificationService }, { type: i1.DataService }, { type: i0.ChangeDetectorRef }]; } });
 
+const assignProductVariantsToChannelBulkAction = {
+    location: 'product-variant-list',
+    label: marker('catalog.assign-to-channel'),
+    icon: 'layers',
+    requiresPermission: userPermissions => userPermissions.includes(Permission.UpdateCatalog) ||
+        userPermissions.includes(Permission.UpdateProduct),
+    isVisible: ({ injector }) => isMultiChannel(injector.get(DataService)),
+    onClick: ({ injector, selection, clearSelection }) => {
+        const modalService = injector.get(ModalService);
+        modalService
+            .fromComponent(AssignProductsToChannelDialogComponent, {
+            size: 'lg',
+            locals: {
+                productVariantIds: unique(selection.map(p => p.id)),
+                currentChannelIds: [],
+            },
+        })
+            .subscribe(result => {
+            if (result) {
+                clearSelection();
+            }
+        });
+    },
+};
+const removeProductVariantsFromChannelBulkAction = createBulkRemoveFromChannelAction({
+    location: 'product-variant-list',
+    requiresPermission: userPermissions => userPermissions.includes(Permission.UpdateCatalog) ||
+        userPermissions.includes(Permission.UpdateProduct),
+    getItemName: item => item.name,
+    bulkRemoveFromChannel: (dataService, ids, channelId) => dataService.product
+        .removeVariantsFromChannel({
+        channelId: channelId,
+        productVariantIds: ids,
+    })
+        .pipe(map(res => res.removeProductVariantsFromChannel)),
+});
+const deleteProductVariantsBulkAction = {
+    location: 'product-variant-list',
+    label: marker('common.delete'),
+    icon: 'trash',
+    iconClass: 'is-danger',
+    requiresPermission: userPermissions => userPermissions.includes(Permission.DeleteProduct) ||
+        userPermissions.includes(Permission.DeleteCatalog),
+    onClick: ({ injector, selection, hostComponent, clearSelection }) => {
+        const modalService = injector.get(ModalService);
+        const dataService = injector.get(DataService);
+        const notificationService = injector.get(NotificationService);
+        modalService
+            .dialog({
+            title: marker('common.confirm-bulk-delete'),
+            translationVars: {
+                count: selection.length,
+            },
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(response => response
+            ? dataService.product.deleteProductVariants(unique(selection.map(p => p.id)))
+            : EMPTY))
+            .subscribe(result => {
+            let deleted = 0;
+            const errors = [];
+            for (const item of result.deleteProductVariants) {
+                if (item.result === DeletionResult.DELETED) {
+                    deleted++;
+                }
+                else if (item.message) {
+                    errors.push(item.message);
+                }
+            }
+            if (0 < deleted) {
+                notificationService.success(marker('catalog.notify-bulk-delete-products-success'), {
+                    count: deleted,
+                });
+            }
+            if (0 < errors.length) {
+                notificationService.error(errors.join('\n'));
+            }
+            hostComponent.refresh();
+            clearSelection();
+        });
+    },
+};
+
 class ProductVariantsTableComponent {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
@@ -4765,8 +4872,11 @@ class CatalogModule {
         this.pageService = pageService;
         bulkActionRegistryService.registerBulkAction(assignFacetValuesToProductsBulkAction);
         bulkActionRegistryService.registerBulkAction(assignProductsToChannelBulkAction);
+        bulkActionRegistryService.registerBulkAction(assignProductVariantsToChannelBulkAction);
         bulkActionRegistryService.registerBulkAction(removeProductsFromChannelBulkAction);
+        bulkActionRegistryService.registerBulkAction(removeProductVariantsFromChannelBulkAction);
         bulkActionRegistryService.registerBulkAction(deleteProductsBulkAction);
+        bulkActionRegistryService.registerBulkAction(deleteProductVariantsBulkAction);
         bulkActionRegistryService.registerBulkAction(assignFacetsToChannelBulkAction);
         bulkActionRegistryService.registerBulkAction(removeFacetsFromChannelBulkAction);
         bulkActionRegistryService.registerBulkAction(deleteFacetsBulkAction);
@@ -5182,56 +5292,6 @@ const PRODUCT_VARIANT_UPDATE_MUTATION = gql `
     ${PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT}
 `;
 
-const deleteProductVariantsBulkAction = {
-    location: 'product-list',
-    label: marker('common.delete'),
-    icon: 'trash',
-    iconClass: 'is-danger',
-    requiresPermission: userPermissions => userPermissions.includes(Permission.DeleteProduct) ||
-        userPermissions.includes(Permission.DeleteCatalog),
-    onClick: ({ injector, selection, hostComponent, clearSelection }) => {
-        const modalService = injector.get(ModalService);
-        const dataService = injector.get(DataService);
-        const notificationService = injector.get(NotificationService);
-        modalService
-            .dialog({
-            title: marker('catalog.confirm-bulk-delete-products'),
-            translationVars: {
-                count: selection.length,
-            },
-            buttons: [
-                { type: 'secondary', label: marker('common.cancel') },
-                { type: 'danger', label: marker('common.delete'), returnValue: true },
-            ],
-        })
-            .pipe(switchMap(response => response
-            ? dataService.product.deleteProducts(unique(selection.map(p => p.productId)))
-            : EMPTY))
-            .subscribe(result => {
-            let deleted = 0;
-            const errors = [];
-            for (const item of result.deleteProducts) {
-                if (item.result === DeletionResult.DELETED) {
-                    deleted++;
-                }
-                else if (item.message) {
-                    errors.push(item.message);
-                }
-            }
-            if (0 < deleted) {
-                notificationService.success(marker('catalog.notify-bulk-delete-products-success'), {
-                    count: deleted,
-                });
-            }
-            if (0 < errors.length) {
-                notificationService.error(errors.join('\n'));
-            }
-            hostComponent.refresh();
-            clearSelection();
-        });
-    },
-};
-
 const PRODUCT_VARIANT_LIST_QUERY_PRODUCT_VARIANT_FRAGMENT = gql `
     fragment ProductVariantListQueryProductVariantFragment on ProductVariant {
         id
@@ -5287,5 +5347,5 @@ const PRODUCT_VARIANT_LIST_QUERY = gql `
  * Generated bundle index. Do not edit.
  */
 
-export { ASSET_DETAIL_QUERY, ApplyFacetDialogComponent, AssetDetailComponent, AssetListComponent, AssetsComponent, AssignProductsToChannelDialogComponent, BulkAddFacetValuesDialogComponent, COLLECTION_DETAIL_QUERY, CREATE_STOCK_LOCATION, CatalogModule, CollectionBreadcrumbPipe, CollectionContentsComponent, CollectionDataTableComponent, CollectionDetailComponent, CollectionListComponent, CollectionTreeComponent, CollectionTreeNodeComponent, CollectionTreeService, ConfirmVariantDeletionDialogComponent, CreateProductOptionGroupDialogComponent, CreateProductVariantDialogComponent, FACET_DETAIL_QUERY, FACET_LIST_QUERY, FacetDetailComponent, FacetListComponent, GET_PRODUCTS_WITH_FACET_VALUES_BY_IDS, GET_PRODUCT_DETAIL, GET_STOCK_LOCATION_DETAIL, GET_STOCK_LOCATION_LIST, GET_VARIANTS_WITH_FACET_VALUES_BY_IDS, GenerateProductVariantsComponent, GeneratedVariant, MoveCollectionsDialogComponent, OPTION_VALUE_INPUT_VALUE_ACCESSOR, OptionValueInputComponent, PRODUCT_LIST_QUERY, PRODUCT_VARIANT_DETAIL_QUERY, PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT, PRODUCT_VARIANT_LIST_QUERY, PRODUCT_VARIANT_UPDATE_MUTATION, ProductDetailComponent, ProductDetailService, ProductListComponent, ProductOptionsEditorComponent, ProductVariantDetailComponent, ProductVariantListComponent, ProductVariantQuickJumpComponent, ProductVariantsEditorComponent, ProductVariantsResolver, ProductVariantsTableComponent, StockLocationDetailComponent, StockLocationListComponent, UPDATE_PRODUCTS_BULK, UPDATE_STOCK_LOCATION, UPDATE_VARIANTS_BULK, UpdateProductOptionDialogComponent, VariantPriceDetailComponent, arrayToTree, assignCollectionsToChannelBulkAction, assignFacetValuesToProductsBulkAction, assignFacetsToChannelBulkAction, assignProductsToChannelBulkAction, assignStockLocationsToChannelBulkAction, createRoutes, deleteCollectionsBulkAction, deleteFacetsBulkAction, deleteProductVariantsBulkAction, deleteProductsBulkAction, deleteStockLocationsBulkAction, moveCollectionsBulkAction, productOptionsEditorBreadcrumb, removeCollectionsFromChannelBulkAction, removeFacetsFromChannelBulkAction, removeFacetsFromChannelBulkAction2, removeProductsFromChannelBulkAction, removeStockLocationsFromChannelBulkAction, replaceLast };
+export { ASSET_DETAIL_QUERY, ApplyFacetDialogComponent, AssetDetailComponent, AssetListComponent, AssetsComponent, AssignProductsToChannelDialogComponent, BulkAddFacetValuesDialogComponent, COLLECTION_DETAIL_QUERY, CREATE_STOCK_LOCATION, CatalogModule, CollectionBreadcrumbPipe, CollectionContentsComponent, CollectionDataTableComponent, CollectionDetailComponent, CollectionListComponent, CollectionTreeComponent, CollectionTreeNodeComponent, CollectionTreeService, ConfirmVariantDeletionDialogComponent, CreateProductOptionGroupDialogComponent, CreateProductVariantDialogComponent, FACET_DETAIL_QUERY, FACET_LIST_QUERY, FacetDetailComponent, FacetListComponent, GET_PRODUCTS_WITH_FACET_VALUES_BY_IDS, GET_PRODUCT_DETAIL, GET_STOCK_LOCATION_DETAIL, GET_STOCK_LOCATION_LIST, GET_VARIANTS_WITH_FACET_VALUES_BY_IDS, GenerateProductVariantsComponent, GeneratedVariant, MoveCollectionsDialogComponent, OPTION_VALUE_INPUT_VALUE_ACCESSOR, OptionValueInputComponent, PRODUCT_LIST_QUERY, PRODUCT_VARIANT_DETAIL_QUERY, PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT, PRODUCT_VARIANT_LIST_QUERY, PRODUCT_VARIANT_UPDATE_MUTATION, ProductDetailComponent, ProductDetailService, ProductListComponent, ProductOptionsEditorComponent, ProductVariantDetailComponent, ProductVariantListComponent, ProductVariantQuickJumpComponent, ProductVariantsEditorComponent, ProductVariantsResolver, ProductVariantsTableComponent, StockLocationDetailComponent, StockLocationListComponent, UPDATE_PRODUCTS_BULK, UPDATE_STOCK_LOCATION, UPDATE_VARIANTS_BULK, UpdateProductOptionDialogComponent, VariantPriceDetailComponent, arrayToTree, assignCollectionsToChannelBulkAction, assignFacetValuesToProductsBulkAction, assignFacetsToChannelBulkAction, assignProductVariantsToChannelBulkAction, assignProductsToChannelBulkAction, assignStockLocationsToChannelBulkAction, createRoutes, deleteCollectionsBulkAction, deleteFacetsBulkAction, deleteProductVariantsBulkAction, deleteProductsBulkAction, deleteStockLocationsBulkAction, moveCollectionsBulkAction, productOptionsEditorBreadcrumb, removeCollectionsFromChannelBulkAction, removeFacetsFromChannelBulkAction, removeFacetsFromChannelBulkAction2, removeProductVariantsFromChannelBulkAction, removeProductsFromChannelBulkAction, removeStockLocationsFromChannelBulkAction, replaceLast };
 //# sourceMappingURL=vendure-admin-ui-catalog.mjs.map