@vendure/admin-ui 2.1.0-next.4 → 2.1.0-next.6

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

@@ -4,11 +4,11 @@ import * as i1$1 from '@angular/router';
 import { ROUTES, RouterModule } from '@angular/router';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i1 from '@vendure/admin-ui/core';
-import { findTranslation, DeletionResult, BaseDetailComponent, Permission, createUpdatedTranslatable, SelectionManager, getDefaultUiLanguage, BaseEntityResolver, PageComponent, CanDeactivateDetailGuard, DataService, createResolveData, FacetValueSelectorComponent, ASSET_FRAGMENT, TAG_FRAGMENT, TypedBaseDetailComponent, getCustomFieldsDefaults, BaseListComponent, SortOrder, LogicalOperator, AssetPickerDialogComponent, AssetPreviewDialogComponent, DataTable2Component, COLLECTION_FRAGMENT, unicodePatternValidator, getConfigArgValue, encodeConfigArgValue, createBulkDeleteAction, ModalService, NotificationService, createBulkAssignToChannelAction, createBulkRemoveFromChannelAction, TypedBaseListComponent, GetCollectionListDocument, FACET_WITH_VALUES_FRAGMENT, GetFacetDetailDocument, getChannelCodeFromUserStatus, currentChannelIsNotDefault, FACET_WITH_VALUE_LIST_FRAGMENT, GetFacetListDocument, GetStockLocationListDocument, ProductVariantListQueryDocument, PRODUCT_DETAIL_FRAGMENT, isMultiChannel, FacetValueFormInputComponent, ProductListQueryDocument, JobState, GetProductVariantsQuickJumpDocument, GlobalFlag, ProductVariantUpdateMutationDocument, CreateStockLocationDocument, UpdateStockLocationDocument, DeleteStockLocationsDocument, AssignStockLocationsToChannelDocument, RemoveStockLocationsFromChannelDocument, detailComponentWithResolver, GetProductDetailDocument, GetStockLocationDetailDocument, GetProductVariantDetailDocument, CollectionDetailQueryDocument, AssetDetailQueryDocument, SharedModule, PageService } from '@vendure/admin-ui/core';
+import { findTranslation, DeletionResult, BaseDetailComponent, Permission, createUpdatedTranslatable, SelectionManager, getDefaultUiLanguage, BaseEntityResolver, PageComponent, CanDeactivateDetailGuard, DataService, createResolveData, FacetValueSelectorComponent, ASSET_FRAGMENT, TAG_FRAGMENT, TypedBaseDetailComponent, getCustomFieldsDefaults, BaseListComponent, SortOrder, LogicalOperator, AssetPickerDialogComponent, AssetPreviewDialogComponent, DataTable2Component, COLLECTION_FRAGMENT, unicodePatternValidator, getConfigArgValue, encodeConfigArgValue, createBulkDeleteAction, ModalService, NotificationService, createBulkAssignToChannelAction, createBulkRemoveFromChannelAction, TypedBaseListComponent, GetCollectionListDocument, FACET_WITH_VALUES_FRAGMENT, GetFacetDetailDocument, getChannelCodeFromUserStatus, currentChannelIsNotDefault, FACET_WITH_VALUE_LIST_FRAGMENT, GetFacetListDocument, GetStockLocationListDocument, ProductVariantListQueryDocument, PRODUCT_DETAIL_FRAGMENT, isMultiChannel, FacetValueFormInputComponent, ProductListQueryDocument, JobState, GetProductVariantsQuickJumpDocument, GlobalFlag, ProductVariantUpdateMutationDocument, detailComponentWithResolver, GetProductDetailDocument, GetProductVariantDetailDocument, CollectionDetailQueryDocument, AssetDetailQueryDocument, SharedModule, PageService } from '@vendure/admin-ui/core';
 import { shareReplay, mergeMap, map, switchMap, tap, take, startWith, debounceTime, takeUntil, finalize, distinctUntilChanged, filter, catchError, skip, switchMapTo, delay } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
 import { UntypedFormGroup, UntypedFormArray, Validators, FormControl, NG_VALUE_ACCESSOR, FormGroup, UntypedFormControl } from '@angular/forms';
-import { forkJoin, of, throwError, combineLatest, Subject, EMPTY, BehaviorSubject, from, lastValueFrom, merge, concat } from 'rxjs';
+import { forkJoin, of, throwError, combineLatest, Subject, EMPTY, BehaviorSubject, from, lastValueFrom, merge, Observable, 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';
@@ -993,20 +993,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
 
 const createRoutes = (pageService) => [
     {
-        path: 'inventory',
+        path: 'products',
         component: PageComponent,
         data: {
             locationId: 'product-list',
-            breadcrumb: marker('breadcrumb.inventory'),
+            breadcrumb: marker('breadcrumb.products'),
         },
         children: pageService.getPageTabRoutes('product-list'),
     },
     {
-        path: 'inventory/:id',
+        path: 'inventory',
+        redirectTo: 'products',
+    },
+    {
+        path: 'products/:id',
         component: PageComponent,
         data: {
             locationId: 'product-detail',
-            breadcrumb: { label: marker('breadcrumb.inventory'), link: ['../', 'inventory'] },
+            breadcrumb: { label: marker('breadcrumb.products'), link: ['../', 'products'] },
         },
         children: [
             {
@@ -1035,16 +1039,16 @@ const createRoutes = (pageService) => [
         ],
     },
     {
-        path: 'inventory/:productId/variants/:id',
+        path: 'products/:productId/variants/:id',
         component: PageComponent,
         data: {
             locationId: 'product-variant-detail',
-            breadcrumb: { label: marker('breadcrumb.inventory'), link: ['../', 'inventory'] },
+            breadcrumb: { label: marker('breadcrumb.products'), link: ['../', 'products'] },
         },
         children: pageService.getPageTabRoutes('product-variant-detail'),
     },
     {
-        path: 'inventory/:id/options',
+        path: 'products/:id/options',
         component: ProductOptionsEditorComponent,
         resolve: createResolveData(ProductVariantsResolver),
         canDeactivate: [CanDeactivateDetailGuard],
@@ -1052,21 +1056,6 @@ const createRoutes = (pageService) => [
             breadcrumb: productOptionsEditorBreadcrumb,
         },
     },
-    {
-        path: 'inventory/stock-locations/:id',
-        component: PageComponent,
-        data: {
-            locationId: 'stock-location-detail',
-            breadcrumb: [
-                { label: marker('breadcrumb.inventory'), link: ['../', 'inventory'] },
-                {
-                    label: marker('breadcrumb.stock-locations'),
-                    link: ['../', 'inventory', 'stock-locations'],
-                },
-            ],
-        },
-        children: pageService.getPageTabRoutes('stock-location-detail'),
-    },
     {
         path: 'facets',
         component: PageComponent,
@@ -1125,12 +1114,12 @@ const createRoutes = (pageService) => [
 function productOptionsEditorBreadcrumb(data, params) {
     return data.entity.pipe(map((entity) => [
         {
-            label: marker('breadcrumb.inventory'),
-            link: ['../', 'inventory'],
+            label: marker('breadcrumb.products'),
+            link: ['../', 'products'],
         },
         {
             label: `${entity.name}`,
-            link: ['../', 'inventory', params.id],
+            link: ['../', 'products', params.id],
         },
         {
             label: marker('breadcrumb.product-options'),
@@ -1224,7 +1213,7 @@ class AssetDetailComponent extends TypedBaseDetailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetDetailComponent, deps: [{ token: i1.NotificationService }, { token: i1.DataService }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssetDetailComponent, selector: "vdr-asset-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"asset-detail\"></vdr-action-bar-items>\r\n            <button\r\n                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateAsset']\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\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<vdr-page-block>\r\n    <vdr-asset-preview\r\n        [asset]=\"entity$ | async\"\r\n        [editable]=\"true\"\r\n        [customFields]=\"customFields\"\r\n        [customFieldsForm]=\"detailForm.get('customFields')\"\r\n        (assetChange)=\"onAssetChange($event)\"\r\n    />\r\n</vdr-page-block>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}\n"], dependencies: [{ 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.AssetPreviewComponent, selector: "vdr-asset-preview", inputs: ["asset", "editable", "customFields", "customFieldsForm"], outputs: ["assetChange", "editClick"] }, { 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.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssetDetailComponent, selector: "vdr-asset-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"asset-detail\"></vdr-action-bar-items>\r\n            <button\r\n                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateAsset']\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\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<vdr-page-block>\r\n    <vdr-asset-preview\r\n        [asset]=\"entity$ | async\"\r\n        [editable]=\"true\"\r\n        [customFields]=\"customFields\"\r\n        [customFieldsForm]=\"detailForm.get('customFields')\"\r\n        (assetChange)=\"onAssetChange($event)\"\r\n    />\r\n</vdr-page-block>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}\n"], dependencies: [{ 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.AssetPreviewComponent, selector: "vdr-asset-preview", inputs: ["asset", "assets", "editable", "customFields", "customFieldsForm"], outputs: ["assetChange", "editClick"] }, { 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.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetDetailComponent, decorators: [{
             type: Component,
@@ -1334,7 +1323,7 @@ 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.2.2", 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.2.2", 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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", "editAssetClick"] }, { 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.2.2", ngImport: i0, type: AssetListComponent, decorators: [{
             type: Component,
@@ -1389,7 +1378,7 @@ class AssetsComponent {
             .fromComponent(AssetPreviewDialogComponent, {
             size: 'xl',
             closable: true,
-            locals: { asset },
+            locals: { asset, assets: this.assets },
         })
             .subscribe();
     }
@@ -1759,11 +1748,11 @@ class CollectionContentsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionContentsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: { collectionId: "collectionId", parentId: "parentId", inheritFilters: "inheritFilters", updatedFilters: "updatedFilters", previewUpdatedFilters: "previewUpdatedFilters" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-wrapper\">\r\n    <div class=\"progress loop\" [class.visible]=\"isLoading\"></div>\r\n    <div class=\"header-title-row\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\r\n        ></ng-container>\r\n    </div>\r\n    <vdr-data-table-2\r\n        id=\"collection-contents\"\r\n        [class.loading]=\"isLoading\"\r\n        [items]=\"contents$ | async\"\r\n        [itemsPerPage]=\"contentsItemsPerPage$ | async\"\r\n        [totalItems]=\"contentsTotalItems$ | async\"\r\n        [currentPage]=\"contentsCurrentPage$ | async\"\r\n        (pageChange)=\"setContentsPageNumber($event)\"\r\n        (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n    >\r\n        <vdr-dt2-search\r\n            [searchTermControl]=\"filterTermControl\"\r\n            [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n        />\r\n        <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\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 [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\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 [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\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.name' | translate\" id=\"name\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                <a class=\"button-ghost\" [routerLink]=\"['/catalog/inventory', variant.productId]\"\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\" id=\"sku\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.sku }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep table{margin-top:-1px}vdr-data-table{opacity:1;transition:opacity .3s}vdr-data-table.loading{opacity:.5}.table-wrapper{position:relative}.progress{position:absolute;top:0;left:0;overflow:hidden;height:6px;opacity:0;transition:opacity .1s}.progress.visible{opacity:1}.sku{color:var(--color-text-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: { collectionId: "collectionId", parentId: "parentId", inheritFilters: "inheritFilters", updatedFilters: "updatedFilters", previewUpdatedFilters: "previewUpdatedFilters" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-wrapper\">\r\n    <div class=\"progress loop\" [class.visible]=\"isLoading\"></div>\r\n    <div class=\"header-title-row\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\r\n        ></ng-container>\r\n    </div>\r\n    <vdr-data-table-2\r\n        id=\"collection-contents\"\r\n        [class.loading]=\"isLoading\"\r\n        [items]=\"contents$ | async\"\r\n        [itemsPerPage]=\"contentsItemsPerPage$ | async\"\r\n        [totalItems]=\"contentsTotalItems$ | async\"\r\n        [currentPage]=\"contentsCurrentPage$ | async\"\r\n        (pageChange)=\"setContentsPageNumber($event)\"\r\n        (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n    >\r\n        <vdr-dt2-search\r\n            [searchTermControl]=\"filterTermControl\"\r\n            [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n        />\r\n        <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\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 [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\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 [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\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.name' | translate\" id=\"name\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                <a class=\"button-ghost\" [routerLink]=\"['/catalog/products', variant.productId]\"\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\" id=\"sku\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.sku }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep table{margin-top:-1px}vdr-data-table{opacity:1;transition:opacity .3s}vdr-data-table.loading{opacity:.5}.table-wrapper{position:relative}.progress{position:absolute;top:0;left:0;overflow:hidden;height:6px;opacity:0;transition:opacity .1s}.progress.visible{opacity:1}.sku{color:var(--color-text-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionContentsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-collection-contents', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-wrapper\">\r\n    <div class=\"progress loop\" [class.visible]=\"isLoading\"></div>\r\n    <div class=\"header-title-row\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\r\n        ></ng-container>\r\n    </div>\r\n    <vdr-data-table-2\r\n        id=\"collection-contents\"\r\n        [class.loading]=\"isLoading\"\r\n        [items]=\"contents$ | async\"\r\n        [itemsPerPage]=\"contentsItemsPerPage$ | async\"\r\n        [totalItems]=\"contentsTotalItems$ | async\"\r\n        [currentPage]=\"contentsCurrentPage$ | async\"\r\n        (pageChange)=\"setContentsPageNumber($event)\"\r\n        (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n    >\r\n        <vdr-dt2-search\r\n            [searchTermControl]=\"filterTermControl\"\r\n            [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n        />\r\n        <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\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 [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\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 [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\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.name' | translate\" id=\"name\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                <a class=\"button-ghost\" [routerLink]=\"['/catalog/inventory', variant.productId]\"\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\" id=\"sku\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.sku }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep table{margin-top:-1px}vdr-data-table{opacity:1;transition:opacity .3s}vdr-data-table.loading{opacity:.5}.table-wrapper{position:relative}.progress{position:absolute;top:0;left:0;overflow:hidden;height:6px;opacity:0;transition:opacity .1s}.progress.visible{opacity:1}.sku{color:var(--color-text-200)}\n"] }]
+            args: [{ selector: 'vdr-collection-contents', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-wrapper\">\r\n    <div class=\"progress loop\" [class.visible]=\"isLoading\"></div>\r\n    <div class=\"header-title-row\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\r\n        ></ng-container>\r\n    </div>\r\n    <vdr-data-table-2\r\n        id=\"collection-contents\"\r\n        [class.loading]=\"isLoading\"\r\n        [items]=\"contents$ | async\"\r\n        [itemsPerPage]=\"contentsItemsPerPage$ | async\"\r\n        [totalItems]=\"contentsTotalItems$ | async\"\r\n        [currentPage]=\"contentsCurrentPage$ | async\"\r\n        (pageChange)=\"setContentsPageNumber($event)\"\r\n        (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n    >\r\n        <vdr-dt2-search\r\n            [searchTermControl]=\"filterTermControl\"\r\n            [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n        />\r\n        <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\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 [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\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 [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\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.name' | translate\" id=\"name\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                <a class=\"button-ghost\" [routerLink]=\"['/catalog/products', variant.productId]\"\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\" id=\"sku\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.sku }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep table{margin-top:-1px}vdr-data-table{opacity:1;transition:opacity .3s}vdr-data-table.loading{opacity:.5}.table-wrapper{position:relative}.progress{position:absolute;top:0;left:0;overflow:hidden;height:6px;opacity:0;transition:opacity .1s}.progress.visible{opacity:1}.sku{color:var(--color-text-200)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i1.DataService }]; }, propDecorators: { collectionId: [{
                 type: Input
             }], parentId: [{
@@ -2747,13 +2736,29 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
                 visible: true,
                 customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
             }),
-            values: this.formBuilder.array([]),
+            values: this.formBuilder.record({}),
         });
-        this.values = [];
+        this.currentPage = 1;
+        this.itemsPerPage = 10;
+        this.filterControl = new FormControl('');
+        this.values$ = new BehaviorSubject([]);
+        this.filteredValues$ = new Observable();
         this.updatePermission = [Permission.UpdateCatalog, Permission.UpdateFacet];
     }
     ngOnInit() {
         this.init();
+        this.filteredValues$ = combineLatest([
+            this.values$,
+            this.filterControl.valueChanges.pipe(startWith('')),
+        ]).pipe(map(([values, filterTerm]) => {
+            const filterString = filterTerm?.toLowerCase().trim();
+            return filterString
+                ? values.filter(v => v.name.toLowerCase().includes(filterString) ||
+                    v.code.toLowerCase().includes(filterString))
+                : values;
+        }), tap(() => {
+            this.currentPage = 1;
+        }));
     }
     ngOnDestroy() {
         this.destroy();
@@ -2766,9 +2771,9 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
             }
         }
     }
-    updateValueCode(currentCode, nameValue, index) {
+    updateValueCode(currentCode, nameValue, valueId) {
         if (!currentCode) {
-            const codeControl = this.detailForm.get(['values', index, 'code']);
+            const codeControl = this.detailForm.get(['values', valueId, 'code']);
             if (codeControl && codeControl.pristine) {
                 codeControl.setValue(normalizeString(nameValue, '-'));
             }
@@ -2777,19 +2782,17 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
     customValueFieldIsSet(index, name) {
         return !!this.detailForm.get(['values', index, 'customFields', name]);
     }
-    getValuesFormArray() {
-        return this.detailForm.get('values');
-    }
     addFacetValue() {
-        const valuesFormArray = this.detailForm.get('values');
-        if (valuesFormArray) {
+        const valuesFormRecord = this.detailForm.get('values');
+        if (valuesFormRecord) {
+            const id = this.createTempId();
             const valueGroup = this.formBuilder.group({
-                id: '',
+                id,
                 name: ['', Validators.required],
                 code: '',
                 customFields: this.formBuilder.group({}),
             });
-            const newValue = { name: '', code: '' };
+            const newValue = { id, name: '', code: '' };
             if (this.customValueFields.length) {
                 const customValueFieldsGroup = new UntypedFormGroup({});
                 newValue.customFields = {};
@@ -2799,8 +2802,11 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
                 }
                 valueGroup.addControl('customFields', customValueFieldsGroup);
             }
-            valuesFormArray.insert(valuesFormArray.length, valueGroup);
-            this.values.push(newValue);
+            valuesFormRecord.addControl(id, valueGroup);
+            const values = this.values$.value;
+            const endOfPageIndex = this.currentPage * this.itemsPerPage - 1;
+            values.splice(endOfPageIndex, 0, newValue);
+            this.values$.next(values);
         }
     }
     create() {
@@ -2831,7 +2837,7 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
         });
     }
     save() {
-        const valuesArray = this.detailForm.get('values');
+        const valuesFormRecord = this.detailForm.get('values');
         combineLatest(this.entity$, this.languageCode$)
             .pipe(take(1), mergeMap(([facet, languageCode]) => {
             const facetForm = this.detailForm.get('facet');
@@ -2842,14 +2848,14 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
                     updateOperations.push(this.dataService.facet.updateFacet(newFacet));
                 }
             }
-            if (valuesArray && valuesArray.dirty) {
-                const createdValues = this.getCreatedFacetValues(facet, valuesArray, languageCode);
+            if (valuesFormRecord && valuesFormRecord.dirty) {
+                const createdValues = this.getCreatedFacetValues(facet, valuesFormRecord, languageCode);
                 if (createdValues.length) {
                     updateOperations.push(this.dataService.facet.createFacetValues(createdValues).pipe(switchMap(() => this.dataService.query(GetFacetDetailDocument, {
                         id: this.id,
                     }).single$)));
                 }
-                const updatedValues = this.getUpdatedFacetValues(facet, valuesArray, languageCode);
+                const updatedValues = this.getUpdatedFacetValues(facet, valuesFormRecord, languageCode);
                 if (updatedValues.length) {
                     updateOperations.push(this.dataService.facet.updateFacetValues(updatedValues));
                 }
@@ -2866,14 +2872,15 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
             });
         });
     }
-    deleteFacetValue(facetValueId, index) {
-        if (!facetValueId) {
+    deleteFacetValue(facetValueId) {
+        if (this.isTempId(facetValueId)) {
             // deleting a newly-added (not persisted) FacetValue
-            const valuesFormArray = this.detailForm.get('values');
-            if (valuesFormArray) {
-                valuesFormArray.removeAt(index);
+            const valuesFormRecord = this.detailForm.get('values');
+            if (valuesFormRecord) {
+                valuesFormRecord.removeControl(facetValueId);
             }
-            this.values.splice(index, 1);
+            const values = this.values$.value;
+            this.values$.next(values.filter(v => v.id !== facetValueId));
             return;
         }
         this.showModalAndDelete(facetValueId)
@@ -2890,9 +2897,9 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
             }).single$
             : []))
             .subscribe(() => {
-            const valuesFormArray = this.detailForm.get('values');
-            if (valuesFormArray) {
-                valuesFormArray.removeAt(index);
+            const valuesFormRecord = this.detailForm.get('values');
+            if (valuesFormRecord) {
+                valuesFormRecord.removeControl(facetValueId);
             }
             this.notificationService.success(marker('common.notify-delete-success'), {
                 entity: 'FacetValue',
@@ -2928,11 +2935,10 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
             },
         });
         if (this.customFields.length) {
-            const customFieldsGroup = this.detailForm.get(['facet', 'customFields']);
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['facet', 'customFields']), facet, currentTranslation);
         }
-        const currentValuesFormArray = this.detailForm.get('values');
-        this.values = [...facet.values];
+        const currentValuesFormGroup = this.detailForm.get('values');
+        this.values$.next([...facet.values]);
         facet.values.forEach(value => {
             const valueTranslation = findTranslation(value, languageCode);
             const group = {
@@ -2940,7 +2946,7 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
                 code: value.code,
                 name: valueTranslation ? valueTranslation.name : '',
             };
-            let valueControl = currentValuesFormArray.controls.find(control => control.value.id === value.id);
+            let valueControl = currentValuesFormGroup.get(value.id);
             if (valueControl) {
                 valueControl.get('id')?.setValue(group.id);
                 valueControl.get('code')?.setValue(group.code);
@@ -2948,7 +2954,7 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
             }
             else {
                 valueControl = this.formBuilder.group(group);
-                currentValuesFormArray.push(valueControl);
+                currentValuesFormGroup.addControl(value.id, valueControl);
             }
             if (this.customValueFields.length) {
                 let customValueFieldsGroup = valueControl.get(['customFields']);
@@ -2996,9 +3002,9 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
      * Given an array of facet values and the values from the detailForm, this method creates a new array
      * which can be persisted to the API via a createFacetValues mutation.
      */
-    getCreatedFacetValues(facet, valuesFormArray, languageCode) {
-        return valuesFormArray.controls
-            .filter(c => !c.value?.id)
+    getCreatedFacetValues(facet, valuesFormRecord, languageCode) {
+        return Object.values(valuesFormRecord.controls)
+            .filter(c => c.value.id && this.isTempId(c.value.id))
             .map(c => c.value)
             .map(value => createUpdatedTranslatable({
             translatable: { ...value, translations: [] },
@@ -3014,19 +3020,20 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
             facetId: facet.id,
             code: input.code ?? '',
             ...input,
+            id: undefined,
         }));
     }
     /**
      * Given an array of facet values and the values from the detailForm, this method creates a new array
      * which can be persisted to the API via an updateFacetValues mutation.
      */
-    getUpdatedFacetValues(facet, valuesFormArray, languageCode) {
-        const dirtyValues = facet.values.filter((v, i) => {
-            const formRow = valuesFormArray.get(i.toString());
+    getUpdatedFacetValues(facet, valuesFormGroup, languageCode) {
+        const dirtyValues = facet.values.filter(v => {
+            const formRow = valuesFormGroup.get(v.id);
             return formRow && formRow.dirty && formRow.value.id;
         });
-        const dirtyValueValues = valuesFormArray.controls
-            .filter(c => c.dirty && c.value.id)
+        const dirtyValueValues = Object.values(valuesFormGroup.controls)
+            .filter(c => c.dirty && !this.isTempId(c.value.id))
             .map(c => c.value);
         if (dirtyValues.length !== dirtyValueValues.length) {
             throw new Error(marker(`error.facet-value-form-values-do-not-match`));
@@ -3044,12 +3051,18 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
         }))
             .filter(notNullOrUndefined);
     }
+    createTempId() {
+        return `temp-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    isTempId(id) {
+        return id.startsWith('temp-');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FacetDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2.FormBuilder }, { token: i1.NotificationService }, { token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FacetDetailComponent, selector: "vdr-facet-detail", 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                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"facet-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermission\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar formGroupName=\"facet\">\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"visible\"\r\n                            id=\"visibility\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\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        <vdr-page-block>\r\n            <vdr-card formGroupName=\"facet\">\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]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateCode(entity?.code, $event.target.value)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                        <input\r\n                            id=\"code\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"code\"\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=\"Facet\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"facet-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-card\r\n                *ngIf=\"!(isNew$ | async)\"\r\n                [title]=\"'catalog.facet-values' | translate\"\r\n                [paddingX]=\"false\"\r\n            >\r\n                <table\r\n                    class=\"facet-values-list table\"\r\n                    formArrayName=\"values\"\r\n                    *ngIf=\"0 < getValuesFormArray().length\"\r\n                >\r\n                    <thead>\r\n                        <tr>\r\n                            <th></th>\r\n                            <th>{{ 'common.name' | translate }}</th>\r\n                            <th>{{ 'common.code' | translate }}</th>\r\n                            <ng-container *ngIf=\"customValueFields.length\">\r\n                                <th>{{ 'common.custom-fields' | translate }}</th>\r\n                            </ng-container>\r\n                            <th></th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr\r\n                            class=\"facet-value\"\r\n                            *ngFor=\"let value of values; let i = index\"\r\n                            [formGroup]=\"detailForm.get(['values', i])\"\r\n                        >\r\n                            <td class=\"align-middle\">\r\n                                <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n                            </td>\r\n                            <td class=\"align-middle\">\r\n                                <input\r\n                                    type=\"text\"\r\n                                    formControlName=\"name\"\r\n                                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    (input)=\"updateValueCode(entity?.values[i]?.code, $event.target.value, i)\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle\">\r\n                                <input type=\"text\" formControlName=\"code\" />\r\n                            </td>\r\n                            <td class=\"\" *ngIf=\"customValueFields.length\">\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"FacetValue\"\r\n                                    [customFields]=\"customValueFields\"\r\n                                    [compact]=\"true\"\r\n                                    [customFieldsFormGroup]=\"detailForm.get(['values', i, 'customFields'])\"\r\n                                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </td>\r\n                            <td class=\"align-middle\">\r\n                                <vdr-dropdown>\r\n                                    <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                                        {{ 'common.actions' | translate }}\r\n                                        <clr-icon shape=\"caret down\"></clr-icon>\r\n                                    </button>\r\n                                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                        <button\r\n                                            type=\"button\"\r\n                                            class=\"delete-button\"\r\n                                            (click)=\"deleteFacetValue(entity?.values[i]?.id, i)\"\r\n                                            [disabled]=\"!(updatePermission | hasPermission)\"\r\n                                            vdrDropdownItem\r\n                                        >\r\n                                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                            {{ 'common.delete' | translate }}\r\n                                        </button>\r\n                                    </vdr-dropdown-menu>\r\n                                </vdr-dropdown>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"button m-3\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n                        (click)=\"addFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"add\"></clr-icon>\r\n                        {{ 'catalog.add-facet-value' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { 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.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { 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: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FacetDetailComponent, selector: "vdr-facet-detail", 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                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"facet-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermission\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar formGroupName=\"facet\">\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"visible\"\r\n                            id=\"visibility\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\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        <vdr-page-block>\r\n            <vdr-card formGroupName=\"facet\">\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]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateCode(entity?.code, $event.target.value)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                        <input\r\n                            id=\"code\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"code\"\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=\"Facet\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"facet-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-card\r\n                *ngIf=\"!(isNew$ | async)\"\r\n                [title]=\"'catalog.facet-values' | translate\"\r\n                [paddingX]=\"false\"\r\n            >\r\n                <ng-template vdrCardControls>\r\n                    <input\r\n                        type=\"text\"\r\n                        class=\"mr-3\"\r\n                        [formControl]=\"filterControl\"\r\n                        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                    />\r\n                </ng-template>\r\n                <ng-container *ngIf=\"filteredValues$ | async as filteredValues\">\r\n                    <table class=\"facet-values-list table\" formArrayName=\"values\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th></th>\r\n                                <th>{{ 'common.name' | translate }}</th>\r\n                                <th>{{ 'common.code' | translate }}</th>\r\n                                <ng-container *ngIf=\"customValueFields.length\">\r\n                                    <th>{{ 'common.custom-fields' | translate }}</th>\r\n                                </ng-container>\r\n                                <th></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr\r\n                                class=\"facet-value\"\r\n                                *ngFor=\"\r\n                                    let value of filteredValues\r\n                                        | paginate\r\n                                            : {\r\n                                                  currentPage: currentPage,\r\n                                                  itemsPerPage: itemsPerPage,\r\n                                                  totalItems: filteredValues.length\r\n                                              };\r\n                                    let i = index\r\n                                \"\r\n                                [formGroup]=\"detailForm.get(['values', value.id])\"\r\n                            >\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input\r\n                                        type=\"text\"\r\n                                        formControlName=\"name\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        (input)=\"updateValueCode(value.code, $event.target.value, value.id)\"\r\n                                    />\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input type=\"text\" formControlName=\"code\" />\r\n                                </td>\r\n                                <td class=\"\" *ngIf=\"customValueFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"FacetValue\"\r\n                                        [customFields]=\"customValueFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"\r\n                                            detailForm.get(['values', value.id, 'customFields'])\r\n                                        \"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-dropdown>\r\n                                        <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n                                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                        </button>\r\n                                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                            <button\r\n                                                type=\"button\"\r\n                                                class=\"delete-button\"\r\n                                                (click)=\"deleteFacetValue(value.id)\"\r\n                                                [disabled]=\"!(updatePermission | hasPermission)\"\r\n                                                vdrDropdownItem\r\n                                            >\r\n                                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                                {{ 'common.delete' | translate }}\r\n                                            </button>\r\n                                        </vdr-dropdown-menu>\r\n                                    </vdr-dropdown>\r\n                                </td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                    <div class=\"pagination-wrapper\">\r\n                        <vdr-items-per-page-controls\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            (itemsPerPageChange)=\"itemsPerPage = $event\"\r\n                        ></vdr-items-per-page-controls>\r\n                        <vdr-pagination-controls\r\n                            [currentPage]=\"currentPage\"\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            [totalItems]=\"filteredValues.length\"\r\n                            (pageChange)=\"currentPage = $event\"\r\n                        ></vdr-pagination-controls>\r\n                    </div>\r\n                </ng-container>\r\n                <div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"button m-3\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n                        (click)=\"addFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"add\"></clr-icon>\r\n                        {{ 'catalog.add-facet-value' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}tr.facet-value td{vertical-align:middle}.pagination-wrapper{display:flex;justify-content:space-between;padding:var(--card-padding)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { 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.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.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { 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.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { 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: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FacetDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-facet-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"facet-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermission\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar formGroupName=\"facet\">\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"visible\"\r\n                            id=\"visibility\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\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        <vdr-page-block>\r\n            <vdr-card formGroupName=\"facet\">\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]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateCode(entity?.code, $event.target.value)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                        <input\r\n                            id=\"code\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"code\"\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=\"Facet\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"facet-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-card\r\n                *ngIf=\"!(isNew$ | async)\"\r\n                [title]=\"'catalog.facet-values' | translate\"\r\n                [paddingX]=\"false\"\r\n            >\r\n                <table\r\n                    class=\"facet-values-list table\"\r\n                    formArrayName=\"values\"\r\n                    *ngIf=\"0 < getValuesFormArray().length\"\r\n                >\r\n                    <thead>\r\n                        <tr>\r\n                            <th></th>\r\n                            <th>{{ 'common.name' | translate }}</th>\r\n                            <th>{{ 'common.code' | translate }}</th>\r\n                            <ng-container *ngIf=\"customValueFields.length\">\r\n                                <th>{{ 'common.custom-fields' | translate }}</th>\r\n                            </ng-container>\r\n                            <th></th>\r\n                        </tr>\r\n                    </thead>\r\n                    <tbody>\r\n                        <tr\r\n                            class=\"facet-value\"\r\n                            *ngFor=\"let value of values; let i = index\"\r\n                            [formGroup]=\"detailForm.get(['values', i])\"\r\n                        >\r\n                            <td class=\"align-middle\">\r\n                                <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n                            </td>\r\n                            <td class=\"align-middle\">\r\n                                <input\r\n                                    type=\"text\"\r\n                                    formControlName=\"name\"\r\n                                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    (input)=\"updateValueCode(entity?.values[i]?.code, $event.target.value, i)\"\r\n                                />\r\n                            </td>\r\n                            <td class=\"align-middle\">\r\n                                <input type=\"text\" formControlName=\"code\" />\r\n                            </td>\r\n                            <td class=\"\" *ngIf=\"customValueFields.length\">\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"FacetValue\"\r\n                                    [customFields]=\"customValueFields\"\r\n                                    [compact]=\"true\"\r\n                                    [customFieldsFormGroup]=\"detailForm.get(['values', i, 'customFields'])\"\r\n                                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </td>\r\n                            <td class=\"align-middle\">\r\n                                <vdr-dropdown>\r\n                                    <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                                        {{ 'common.actions' | translate }}\r\n                                        <clr-icon shape=\"caret down\"></clr-icon>\r\n                                    </button>\r\n                                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                        <button\r\n                                            type=\"button\"\r\n                                            class=\"delete-button\"\r\n                                            (click)=\"deleteFacetValue(entity?.values[i]?.id, i)\"\r\n                                            [disabled]=\"!(updatePermission | hasPermission)\"\r\n                                            vdrDropdownItem\r\n                                        >\r\n                                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                            {{ 'common.delete' | translate }}\r\n                                        </button>\r\n                                    </vdr-dropdown-menu>\r\n                                </vdr-dropdown>\r\n                            </td>\r\n                        </tr>\r\n                    </tbody>\r\n                </table>\r\n\r\n                <div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"button m-3\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n                        (click)=\"addFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"add\"></clr-icon>\r\n                        {{ 'catalog.add-facet-value' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}\n"] }]
+            args: [{ selector: 'vdr-facet-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"facet-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermission\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar formGroupName=\"facet\">\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"visible\"\r\n                            id=\"visibility\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\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        <vdr-page-block>\r\n            <vdr-card formGroupName=\"facet\">\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]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateCode(entity?.code, $event.target.value)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                        <input\r\n                            id=\"code\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"code\"\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=\"Facet\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"facet-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-card\r\n                *ngIf=\"!(isNew$ | async)\"\r\n                [title]=\"'catalog.facet-values' | translate\"\r\n                [paddingX]=\"false\"\r\n            >\r\n                <ng-template vdrCardControls>\r\n                    <input\r\n                        type=\"text\"\r\n                        class=\"mr-3\"\r\n                        [formControl]=\"filterControl\"\r\n                        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                    />\r\n                </ng-template>\r\n                <ng-container *ngIf=\"filteredValues$ | async as filteredValues\">\r\n                    <table class=\"facet-values-list table\" formArrayName=\"values\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th></th>\r\n                                <th>{{ 'common.name' | translate }}</th>\r\n                                <th>{{ 'common.code' | translate }}</th>\r\n                                <ng-container *ngIf=\"customValueFields.length\">\r\n                                    <th>{{ 'common.custom-fields' | translate }}</th>\r\n                                </ng-container>\r\n                                <th></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr\r\n                                class=\"facet-value\"\r\n                                *ngFor=\"\r\n                                    let value of filteredValues\r\n                                        | paginate\r\n                                            : {\r\n                                                  currentPage: currentPage,\r\n                                                  itemsPerPage: itemsPerPage,\r\n                                                  totalItems: filteredValues.length\r\n                                              };\r\n                                    let i = index\r\n                                \"\r\n                                [formGroup]=\"detailForm.get(['values', value.id])\"\r\n                            >\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input\r\n                                        type=\"text\"\r\n                                        formControlName=\"name\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        (input)=\"updateValueCode(value.code, $event.target.value, value.id)\"\r\n                                    />\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input type=\"text\" formControlName=\"code\" />\r\n                                </td>\r\n                                <td class=\"\" *ngIf=\"customValueFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"FacetValue\"\r\n                                        [customFields]=\"customValueFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"\r\n                                            detailForm.get(['values', value.id, 'customFields'])\r\n                                        \"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-dropdown>\r\n                                        <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n                                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                        </button>\r\n                                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                            <button\r\n                                                type=\"button\"\r\n                                                class=\"delete-button\"\r\n                                                (click)=\"deleteFacetValue(value.id)\"\r\n                                                [disabled]=\"!(updatePermission | hasPermission)\"\r\n                                                vdrDropdownItem\r\n                                            >\r\n                                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                                {{ 'common.delete' | translate }}\r\n                                            </button>\r\n                                        </vdr-dropdown-menu>\r\n                                    </vdr-dropdown>\r\n                                </td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                    <div class=\"pagination-wrapper\">\r\n                        <vdr-items-per-page-controls\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            (itemsPerPageChange)=\"itemsPerPage = $event\"\r\n                        ></vdr-items-per-page-controls>\r\n                        <vdr-pagination-controls\r\n                            [currentPage]=\"currentPage\"\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            [totalItems]=\"filteredValues.length\"\r\n                            (pageChange)=\"currentPage = $event\"\r\n                        ></vdr-pagination-controls>\r\n                    </div>\r\n                </ng-container>\r\n                <div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"button m-3\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n                        (click)=\"addFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"add\"></clr-icon>\r\n                        {{ 'catalog.add-facet-value' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}tr.facet-value td{vertical-align:middle}.pagination-wrapper{display:flex;justify-content:space-between;padding:var(--card-padding)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2.FormBuilder }, { type: i1.NotificationService }, { type: i1.ModalService }]; } });
 
 const deleteFacetsBulkAction = createBulkDeleteAction({
@@ -3445,11 +3458,11 @@ class ProductVariantListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductVariantListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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\" id=\"id\" [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\" id=\"created-at\"\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\" id=\"updated-at\"\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\" id=\"image\">\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\" id=\"name\" [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\" id=\"sku\" [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\" id=\"enabled\">\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\" id=\"price\"\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\" id=\"price-with-tax\" [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\" id=\"stock-on-hand\" [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-inline-end: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: ["id", "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.2.2", 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\" id=\"id\" [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\" id=\"created-at\"\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\" id=\"updated-at\"\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\" id=\"image\">\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\" id=\"name\" [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/products', 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\" id=\"sku\" [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\" id=\"enabled\">\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\" id=\"price\"\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\" id=\"price-with-tax\" [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\" id=\"stock-on-hand\" [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-inline-end: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: ["id", "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.2.2", 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-sku' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [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\" id=\"created-at\"\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\" id=\"updated-at\"\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\" id=\"image\">\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\" id=\"name\" [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\" id=\"sku\" [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\" id=\"enabled\">\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\" id=\"price\"\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\" id=\"price-with-tax\" [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\" id=\"stock-on-hand\" [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-inline-end: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\" id=\"id\" [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\" id=\"created-at\"\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\" id=\"updated-at\"\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\" id=\"image\">\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\" id=\"name\" [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/products', 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\" id=\"sku\" [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\" id=\"enabled\">\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\" id=\"price\"\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\" id=\"price-with-tax\" [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\" id=\"stock-on-hand\" [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-inline-end:24px}.sku{color:var(--color-text-300)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { productId: [{
                 type: Input
             }], hideLanguageSelect: [{
@@ -4096,7 +4109,7 @@ class ProductVariantQuickJumpComponent {
     onSelect(item) {
         if (item) {
             this.router
-                .navigate(['catalog', 'inventory', this.productId, 'variants', item.id])
+                .navigate(['catalog', 'products', this.productId, 'variants', item.id])
                 .then(() => (this.selectedVariantId = undefined));
         }
     }
@@ -4505,274 +4518,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 type: Input
             }] } });
 
-const STOCK_LOCATION_DETAIL_FRAGMENT = gql `
-    fragment StockLocationDetail on StockLocation {
-        id
-        createdAt
-        updatedAt
-        name
-        description
-    }
-`;
-const GET_STOCK_LOCATION_DETAIL = gql `
-    query GetStockLocationDetail($id: ID!) {
-        stockLocation(id: $id) {
-            ...StockLocationDetail
-        }
-    }
-    ${STOCK_LOCATION_DETAIL_FRAGMENT}
-`;
-const CREATE_STOCK_LOCATION = gql `
-    mutation CreateStockLocation($input: CreateStockLocationInput!) {
-        createStockLocation(input: $input) {
-            ...StockLocationDetail
-        }
-    }
-    ${STOCK_LOCATION_DETAIL_FRAGMENT}
-`;
-const UPDATE_STOCK_LOCATION = gql `
-    mutation UpdateStockLocation($input: UpdateStockLocationInput!) {
-        updateStockLocation(input: $input) {
-            ...StockLocationDetail
-        }
-    }
-    ${STOCK_LOCATION_DETAIL_FRAGMENT}
-`;
-class StockLocationDetailComponent extends TypedBaseDetailComponent {
-    constructor(changeDetector, dataService, formBuilder, notificationService) {
-        super();
-        this.changeDetector = changeDetector;
-        this.dataService = dataService;
-        this.formBuilder = formBuilder;
-        this.notificationService = notificationService;
-        this.customFields = this.getCustomFieldConfig('StockLocation');
-        this.detailForm = this.formBuilder.group({
-            name: ['', Validators.required],
-            description: [''],
-            customFields: this.formBuilder.group(getCustomFieldsDefaults(this.customFields)),
-        });
-    }
-    ngOnInit() {
-        this.init();
-    }
-    ngOnDestroy() {
-        this.destroy();
-    }
-    create() {
-        if (!this.detailForm.dirty) {
-            return;
-        }
-        const { name, description, customFields } = this.detailForm.value;
-        if (!name) {
-            return;
-        }
-        const input = {
-            name,
-            description,
-            customFields,
-        };
-        this.dataService.mutate(CreateStockLocationDocument, { input }).subscribe(data => {
-            this.notificationService.success(marker('common.notify-create-success'), {
-                entity: 'StockLocation',
-            });
-            this.detailForm.markAsPristine();
-            this.changeDetector.markForCheck();
-            this.router.navigate(['../', data.createStockLocation.id], { relativeTo: this.route });
-        }, err => {
-            this.notificationService.error(marker('common.notify-create-error'), {
-                entity: 'StockLocation',
-            });
-        });
-    }
-    save() {
-        if (!this.detailForm.dirty) {
-            return;
-        }
-        const formValue = this.detailForm.value;
-        this.entity$
-            .pipe(take(1), mergeMap(taxRate => {
-            const input = {
-                id: taxRate.id,
-                name: formValue.name,
-                description: formValue.description,
-                customFields: formValue.customFields,
-            };
-            return this.dataService.mutate(UpdateStockLocationDocument, { input });
-        }))
-            .subscribe(data => {
-            this.notificationService.success(marker('common.notify-update-success'), {
-                entity: 'StockLocation',
-            });
-            this.detailForm.markAsPristine();
-            this.changeDetector.markForCheck();
-        }, err => {
-            this.notificationService.error(marker('common.notify-update-error'), {
-                entity: 'StockLocation',
-            });
-        });
-    }
-    /**
-     * Update the form values when the entity changes.
-     */
-    setFormValues(entity) {
-        this.detailForm.patchValue({
-            name: entity.name,
-            description: entity.description,
-        });
-        if (this.customFields.length) {
-            this.setCustomFieldFormValues(this.customFields, this.detailForm.get('customFields'), entity);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: StockLocationDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2.FormBuilder }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: StockLocationDetailComponent, selector: "vdr-stock-location-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"stock-location-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                    *vdrIfPermissions=\"'UpdateStockLocation'\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\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]=\"!('UpdateStockLocation' | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!('UpdateStockLocation' | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"StockLocation\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"stock-location-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: 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.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { 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.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: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: StockLocationDetailComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-stock-location-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left></vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"stock-location-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                    *vdrIfPermissions=\"'UpdateStockLocation'\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\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]=\"!('UpdateStockLocation' | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!('UpdateStockLocation' | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"StockLocation\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"stock-location-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2.FormBuilder }, { type: i1.NotificationService }]; } });
-
-const DELETE_STOCK_LOCATIONS = gql `
-    mutation DeleteStockLocations($input: [DeleteStockLocationInput!]!) {
-        deleteStockLocations(input: $input) {
-            result
-            message
-        }
-    }
-`;
-const ASSIGN_STOCK_LOCATIONS_TO_CHANNEL = gql `
-    mutation AssignStockLocationsToChannel($input: AssignStockLocationsToChannelInput!) {
-        assignStockLocationsToChannel(input: $input) {
-            id
-            name
-        }
-    }
-`;
-const REMOVE_STOCK_LOCATIONS_FROM_CHANNEL = gql `
-    mutation RemoveStockLocationsFromChannel($input: RemoveStockLocationsFromChannelInput!) {
-        removeStockLocationsFromChannel(input: $input) {
-            id
-            name
-        }
-    }
-`;
-const deleteStockLocationsBulkAction = createBulkDeleteAction({
-    location: 'stock-location-list',
-    requiresPermission: userPermissions => userPermissions.includes(Permission.DeleteStockLocation) ||
-        userPermissions.includes(Permission.DeleteCatalog),
-    getItemName: item => item.name,
-    bulkDelete: (dataService, ids) => dataService
-        .mutate(DeleteStockLocationsDocument, {
-        input: ids.map(id => ({ id })),
-    })
-        .pipe(map(res => res.deleteStockLocations)),
-    shouldRetryItem: response => response.result === DeletionResult.NOT_DELETED,
-});
-const assignStockLocationsToChannelBulkAction = createBulkAssignToChannelAction({
-    location: 'stock-location-list',
-    requiresPermission: userPermissions => userPermissions.includes(Permission.UpdateCatalog) ||
-        userPermissions.includes(Permission.UpdateStockLocation),
-    getItemName: item => item.name,
-    bulkAssignToChannel: (dataService, stockLocationIds, channelId) => dataService
-        .mutate(AssignStockLocationsToChannelDocument, {
-        input: {
-            channelId,
-            stockLocationIds,
-        },
-    })
-        .pipe(map(res => res.assignStockLocationsToChannel)),
-});
-const removeStockLocationsFromChannelBulkAction = createBulkRemoveFromChannelAction({
-    location: 'stock-location-list',
-    requiresPermission: userPermissions => userPermissions.includes(Permission.DeleteCatalog) ||
-        userPermissions.includes(Permission.DeleteStockLocation),
-    getItemName: item => item.name,
-    bulkRemoveFromChannel: (dataService, stockLocationIds, channelId) => dataService
-        .mutate(RemoveStockLocationsFromChannelDocument, {
-        input: {
-            channelId,
-            stockLocationIds,
-        },
-    })
-        .pipe(map(res => res.removeStockLocationsFromChannel)),
-});
-
-const GET_STOCK_LOCATION_LIST = gql `
-    query GetStockLocationList($options: StockLocationListOptions) {
-        stockLocations(options: $options) {
-            items {
-                ...StockLocationListItem
-            }
-            totalItems
-        }
-    }
-    fragment StockLocationListItem on StockLocation {
-        id
-        createdAt
-        updatedAt
-        name
-        description
-    }
-`;
-class StockLocationListComponent extends TypedBaseListComponent {
-    constructor() {
-        super();
-        this.customFields = this.getCustomFieldConfig('StockLocation');
-        this.filters = this.createFilterCollection()
-            .addIdFilter()
-            .addDateFilters()
-            .addFilters([
-            {
-                name: 'enabled',
-                type: { kind: 'text' },
-                label: marker('common.enabled'),
-                filterField: 'name',
-            },
-            {
-                name: 'sku',
-                type: { kind: 'text' },
-                label: marker('catalog.sku'),
-                filterField: 'description',
-            },
-        ])
-            .addCustomFieldFilters(this.customFields)
-            .connectToRoute(this.route);
-        this.sorts = this.createSortCollection()
-            .addSorts([
-            { name: 'id' },
-            { name: 'createdAt' },
-            { name: 'updatedAt' },
-            { name: 'name' },
-            { name: 'description' },
-        ])
-            .addCustomFieldSorts(this.customFields)
-            .connectToRoute(this.route);
-        this.configure({
-            document: GetStockLocationListDocument,
-            getItems: data => data.stockLocations,
-            setVariables: (skip, take) => ({
-                options: {
-                    skip,
-                    take,
-                    filter: {
-                        name: {
-                            contains: this.searchTermControl.value,
-                        },
-                        ...this.filters.createFilterInput(),
-                    },
-                    sort: this.sorts.createSortInput(),
-                },
-            }),
-            refreshListOnChanges: [this.sorts.valueChanges, this.filters.valueChanges],
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: StockLocationListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: StockLocationListComponent, selector: "vdr-stock-location-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"stock-location-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"button primary\"\r\n                *vdrIfPermissions=\"['CreateStockLocation']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-stock-location' | 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=\"stock-location-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=\"stock-location-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\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', stockLocation.id]\"\r\n                ><span>{{ stockLocation.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.description' | translate\" id=\"description\" [sort]=\"sorts.get('description')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <div class=\"description\" [innerHTML]=\"stockLocation.description\"></div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let field of customFields\"\r\n        [customField]=\"field\"\r\n        [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: ["::ng-deep .description>p{margin-top:0!important}\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: 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: "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: ["id", "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.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: StockLocationListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-stock-location-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left> </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"stock-location-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"button primary\"\r\n                *vdrIfPermissions=\"['CreateStockLocation']\"\r\n                [routerLink]=\"['./', 'create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-stock-location' | 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=\"stock-location-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=\"stock-location-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\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-stockLocation=\"item\">\r\n            {{ stockLocation.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', stockLocation.id]\"\r\n                ><span>{{ stockLocation.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.description' | translate\" id=\"description\" [sort]=\"sorts.get('description')\">\r\n        <ng-template let-stockLocation=\"item\">\r\n            <div class=\"description\" [innerHTML]=\"stockLocation.description\"></div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let field of customFields\"\r\n        [customField]=\"field\"\r\n        [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: ["::ng-deep .description>p{margin-top:0!important}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
 class UpdateProductOptionDialogComponent {
     constructor() {
         this.updateVariantName = true;
@@ -4860,7 +4605,6 @@ const CATALOG_COMPONENTS = [
     CreateProductVariantDialogComponent,
     CreateProductOptionGroupDialogComponent,
     ProductVariantQuickJumpComponent,
-    StockLocationListComponent,
 ];
 class CatalogModule {
     constructor(bulkActionRegistryService, pageService) {
@@ -4880,9 +4624,6 @@ class CatalogModule {
         bulkActionRegistryService.registerBulkAction(assignCollectionsToChannelBulkAction);
         bulkActionRegistryService.registerBulkAction(removeCollectionsFromChannelBulkAction);
         bulkActionRegistryService.registerBulkAction(deleteCollectionsBulkAction);
-        bulkActionRegistryService.registerBulkAction(assignStockLocationsToChannelBulkAction);
-        bulkActionRegistryService.registerBulkAction(removeStockLocationsFromChannelBulkAction);
-        bulkActionRegistryService.registerBulkAction(deleteStockLocationsBulkAction);
         pageService.registerPageTab({
             priority: 0,
             location: 'product-list',
@@ -4914,30 +4655,30 @@ class CatalogModule {
             route: 'variants',
             component: ProductVariantListComponent,
         });
-        pageService.registerPageTab({
-            priority: 0,
-            location: 'stock-location-detail',
-            tab: marker('catalog.stock-location'),
-            route: '',
-            component: detailComponentWithResolver({
-                component: StockLocationDetailComponent,
-                query: GetStockLocationDetailDocument,
-                entityKey: 'stockLocation',
-                getBreadcrumbs: entity => [
-                    {
-                        label: entity ? entity.name : marker('catalog.create-new-stock-location'),
-                        link: [entity?.id],
-                    },
-                ],
-            }),
-        });
-        pageService.registerPageTab({
-            priority: 0,
-            location: 'product-list',
-            tab: marker('catalog.stock-locations'),
-            route: 'stock-locations',
-            component: StockLocationListComponent,
-        });
+        // pageService.registerPageTab({
+        //     priority: 0,
+        //     location: 'stock-location-detail',
+        //     tab: _('catalog.stock-location'),
+        //     route: '',
+        //     component: detailComponentWithResolver({
+        //         component: StockLocationDetailComponent,
+        //         query: GetStockLocationDetailDocument,
+        //         entityKey: 'stockLocation',
+        //         getBreadcrumbs: entity => [
+        //             {
+        //                 label: entity ? entity.name : _('catalog.create-new-stock-location'),
+        //                 link: [entity?.id],
+        //             },
+        //         ],
+        //     }),
+        // });
+        // pageService.registerPageTab({
+        //     priority: 0,
+        //     location: 'product-list',
+        //     tab: _('catalog.stock-locations'),
+        //     route: 'stock-locations',
+        //     component: StockLocationListComponent,
+        // });
         pageService.registerPageTab({
             priority: 0,
             location: 'product-variant-detail',
@@ -4950,7 +4691,7 @@ class CatalogModule {
                 getBreadcrumbs: entity => [
                     {
                         label: `${entity?.product.name}`,
-                        link: ['/catalog', 'inventory', entity?.product.id],
+                        link: ['/catalog', 'products', entity?.product.id],
                     },
                     {
                         label: `${entity?.name} (${entity?.sku})`,
@@ -5064,8 +4805,7 @@ class CatalogModule {
             ProductVariantDetailComponent,
             CreateProductVariantDialogComponent,
             CreateProductOptionGroupDialogComponent,
-            ProductVariantQuickJumpComponent,
-            StockLocationListComponent, StockLocationDetailComponent], imports: [SharedModule, i1$1.RouterModule], exports: [ProductListComponent,
+            ProductVariantQuickJumpComponent], imports: [SharedModule, i1$1.RouterModule], exports: [ProductListComponent,
             ProductDetailComponent,
             FacetListComponent,
             FacetDetailComponent,
@@ -5096,8 +4836,7 @@ class CatalogModule {
             ProductVariantDetailComponent,
             CreateProductVariantDialogComponent,
             CreateProductOptionGroupDialogComponent,
-            ProductVariantQuickJumpComponent,
-            StockLocationListComponent] }); }
+            ProductVariantQuickJumpComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CatalogModule, providers: [
             {
                 provide: ROUTES,
@@ -5112,7 +4851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
             args: [{
                     imports: [SharedModule, RouterModule.forChild([])],
                     exports: [...CATALOG_COMPONENTS],
-                    declarations: [...CATALOG_COMPONENTS, StockLocationDetailComponent],
+                    declarations: [...CATALOG_COMPONENTS],
                     providers: [
                         {
                             provide: ROUTES,
@@ -5343,5 +5082,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, assignProductVariantsToChannelBulkAction, assignProductsToChannelBulkAction, assignStockLocationsToChannelBulkAction, createRoutes, deleteCollectionsBulkAction, deleteFacetsBulkAction, deleteProductVariantsBulkAction, deleteProductsBulkAction, deleteStockLocationsBulkAction, moveCollectionsBulkAction, productOptionsEditorBreadcrumb, removeCollectionsFromChannelBulkAction, removeFacetsFromChannelBulkAction, removeFacetsFromChannelBulkAction2, removeProductVariantsFromChannelBulkAction, removeProductsFromChannelBulkAction, removeStockLocationsFromChannelBulkAction, replaceLast };
+export { ASSET_DETAIL_QUERY, ApplyFacetDialogComponent, AssetDetailComponent, AssetListComponent, AssetsComponent, AssignProductsToChannelDialogComponent, BulkAddFacetValuesDialogComponent, COLLECTION_DETAIL_QUERY, 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_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, UPDATE_PRODUCTS_BULK, UPDATE_VARIANTS_BULK, UpdateProductOptionDialogComponent, VariantPriceDetailComponent, arrayToTree, assignCollectionsToChannelBulkAction, assignFacetValuesToProductsBulkAction, assignFacetsToChannelBulkAction, assignProductVariantsToChannelBulkAction, assignProductsToChannelBulkAction, createRoutes, deleteCollectionsBulkAction, deleteFacetsBulkAction, deleteProductVariantsBulkAction, deleteProductsBulkAction, moveCollectionsBulkAction, productOptionsEditorBreadcrumb, removeCollectionsFromChannelBulkAction, removeFacetsFromChannelBulkAction, removeFacetsFromChannelBulkAction2, removeProductVariantsFromChannelBulkAction, removeProductsFromChannelBulkAction, replaceLast };
 //# sourceMappingURL=vendure-admin-ui-catalog.mjs.map