@vendure/admin-ui 1.4.7 → 2.0.0-next.0

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

@@ -0,0 +1,3747 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, EventEmitter, Input, HostBinding, Output, TemplateRef, ContentChild, ViewChild, Injectable, SkipSelf, Optional, forwardRef, NgModule } from '@angular/core';
+import * as i1 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i1$1 from '@vendure/admin-ui/core';
+import { BaseDetailComponent, BaseListComponent, SortOrder, LogicalOperator, DeletionResult, AssetPickerDialogComponent, AssetPreviewDialogComponent, Permission, unicodePatternValidator, findTranslation, getConfigArgValue, createUpdatedTranslatable, encodeConfigArgValue, FacetValueSelectorComponent, GlobalFlag, flattenFacetValues, SingleSearchSelectionModelFactory, JobState, getDefaultUiLanguage, BaseEntityResolver, AssetType, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
+import { marker } from '@biesbjerg/ngx-translate-extract-marker';
+import { map, debounceTime, takeUntil, finalize, switchMap, startWith, distinctUntilChanged, tap, take, mergeMap, shareReplay, mapTo, filter, skipUntil, skip, withLatestFrom, delay } from 'rxjs/operators';
+import * as i4 from '@angular/forms';
+import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, FormArray } from '@angular/forms';
+import * as i5 from '@angular/common';
+import * as i5$1 from '@ngx-translate/core';
+import { BehaviorSubject, combineLatest, EMPTY, Subject, of, forkJoin, from, throwError, merge } from 'rxjs';
+import * as i4$1 from 'ngx-pagination';
+import { normalizeString } from '@vendure/common/lib/normalize-string';
+import * as i2 from '@clr/angular';
+import * as i4$2 from '@angular/cdk/drag-drop';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import { unique } from '@vendure/common/lib/unique';
+import { notNullOrUndefined, generateAllCombinations } from '@vendure/common/lib/shared-utils';
+import { SortOrder as SortOrder$1 } from '@vendure/common/lib/generated-shop-types';
+import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
+import * as i1$2 from '@ng-select/ng-select';
+import { SELECTION_MODEL_FACTORY } from '@ng-select/ng-select';
+import { pick } from '@vendure/common/lib/pick';
+
+class AssetDetailComponent extends BaseDetailComponent {
+    constructor(router, route, serverConfigService, notificationService, dataService, formBuilder) {
+        super(route, router, serverConfigService, dataService);
+        this.notificationService = notificationService;
+        this.dataService = dataService;
+        this.formBuilder = formBuilder;
+        this.detailForm = new FormGroup({});
+        this.customFields = this.getCustomFieldConfig('Asset');
+    }
+    ngOnInit() {
+        this.detailForm = new FormGroup({
+            name: new FormControl(''),
+            tags: new FormControl([]),
+            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+        });
+        this.init();
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    onAssetChange(event) {
+        this.detailForm.get('name')?.setValue(event.name);
+        this.detailForm.get('tags')?.setValue(event.tags);
+        this.detailForm.markAsDirty();
+    }
+    save() {
+        this.dataService.product
+            .updateAsset({
+            id: this.id,
+            name: this.detailForm.value.name,
+            tags: this.detailForm.value.tags,
+            customFields: this.detailForm.value.customFields,
+        })
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-update-success'), { entity: 'Asset' });
+        }, err => {
+            this.notificationService.error(marker('common.notify-update-error'), {
+                entity: 'Asset',
+            });
+        });
+    }
+    setFormValues(entity, languageCode) {
+        this.detailForm.get('name')?.setValue(entity.name);
+        this.detailForm.get('tags')?.setValue(entity.tags);
+        if (this.customFields.length) {
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), entity);
+        }
+    }
+}
+AssetDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetDetailComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.ServerConfigService }, { token: i1$1.NotificationService }, { token: i1$1.DataService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+AssetDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetDetailComponent, selector: "vdr-asset-detail", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </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-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></vdr-asset-preview>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.AssetPreviewComponent, selector: "vdr-asset-preview", inputs: ["asset", "editable", "customFields", "customFieldsForm"], outputs: ["assetChange", "editClick"] }], directives: [{ type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-asset-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n    </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-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></vdr-asset-preview>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.ServerConfigService }, { type: i1$1.NotificationService }, { type: i1$1.DataService }, { type: i4.FormBuilder }]; } });
+
+class AssetListComponent extends BaseListComponent {
+    constructor(notificationService, modalService, dataService, router, route) {
+        super(router, route);
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.dataService = dataService;
+        this.searchTerm$ = new BehaviorSubject(undefined);
+        this.filterByTags$ = new BehaviorSubject(undefined);
+        this.uploading = false;
+        super.setQueryFn((...args) => this.dataService.product.getAssetList(...args), data => data.assets, (skip, take) => {
+            const searchTerm = this.searchTerm$.value;
+            const tags = this.filterByTags$.value?.map(t => t.value);
+            return {
+                options: {
+                    skip,
+                    take,
+                    ...(searchTerm
+                        ? {
+                            filter: {
+                                name: { contains: searchTerm },
+                            },
+                        }
+                        : {}),
+                    sort: {
+                        createdAt: SortOrder.DESC,
+                    },
+                    tags,
+                    tagsOperator: LogicalOperator.AND,
+                },
+            };
+        }, { take: 25, skip: 0 });
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.paginationConfig$ = combineLatest(this.itemsPerPage$, this.currentPage$, this.totalItems$).pipe(map(([itemsPerPage, currentPage, totalItems]) => ({ itemsPerPage, currentPage, totalItems })));
+        this.searchTerm$.pipe(debounceTime(250), takeUntil(this.destroy$)).subscribe(() => this.refresh());
+        this.filterByTags$.pipe(takeUntil(this.destroy$)).subscribe(() => this.refresh());
+        this.allTags$ = this.dataService.product.getTagList().mapStream(data => data.tags.items);
+    }
+    filesSelected(files) {
+        if (files.length) {
+            this.uploading = true;
+            this.dataService.product
+                .createAssets(files)
+                .pipe(finalize(() => (this.uploading = false)))
+                .subscribe(({ createAssets }) => {
+                let successCount = 0;
+                for (const result of createAssets) {
+                    switch (result.__typename) {
+                        case 'Asset':
+                            successCount++;
+                            break;
+                        case 'MimeTypeError':
+                            this.notificationService.error(result.message);
+                            break;
+                    }
+                }
+                if (0 < successCount) {
+                    super.refresh();
+                    this.notificationService.success(marker('asset.notify-create-assets-success'), {
+                        count: successCount,
+                    });
+                }
+            });
+        }
+    }
+    deleteAssets(assets) {
+        this.showModalAndDelete(assets.map(a => a.id))
+            .pipe(switchMap(response => {
+            if (response.result === DeletionResult.DELETED) {
+                return [true];
+            }
+            else {
+                return this.showModalAndDelete(assets.map(a => a.id), response.message || '').pipe(map(r => r.result === DeletionResult.DELETED));
+            }
+        }))
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-delete-success'), {
+                entity: 'Assets',
+            });
+            this.refresh();
+        }, err => {
+            this.notificationService.error(marker('common.notify-delete-error'), {
+                entity: 'Assets',
+            });
+        });
+    }
+    showModalAndDelete(assetIds, message) {
+        return this.modalService
+            .dialog({
+            title: marker('catalog.confirm-delete-assets'),
+            translationVars: {
+                count: assetIds.length,
+            },
+            body: message,
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(res => (res ? this.dataService.product.deleteAssets(assetIds, !!message) : EMPTY)), map(res => res.deleteAssets));
+    }
+}
+AssetListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetListComponent, deps: [{ token: i1$1.NotificationService }, { token: i1$1.ModalService }, { token: i1$1.DataService }, { token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+AssetListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetListComponent, selector: "vdr-asset-list", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <vdr-asset-search-input\r\n            class=\"pr4 mt1\"\r\n            [tags]=\"allTags$ | async\"\r\n            (searchTermChange)=\"searchTerm$.next($event)\"\r\n            (tagsChange)=\"filterByTags$.next($event)\"\r\n        ></vdr-asset-search-input>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"asset-list\"></vdr-action-bar-items>\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-ab-right>\r\n</vdr-action-bar>\r\n\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", 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"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.AssetSearchInputComponent, selector: "vdr-asset-search-input", inputs: ["tags"], outputs: ["searchTermChange", "tagsChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.AssetFileInputComponent, selector: "vdr-asset-file-input", inputs: ["dropZoneTarget", "uploading"], outputs: ["selectFiles"] }, { type: i1$1.AssetGalleryComponent, selector: "vdr-asset-gallery", inputs: ["assets", "multiSelect", "canDelete"], outputs: ["selectionChange", "deleteAssets"] }, { type: i1$1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { type: i1$1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }], pipes: { "async": i5.AsyncPipe, "paginate": i4$1.PaginatePipe, "hasPermission": i1$1.HasPermissionPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-asset-list', template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <vdr-asset-search-input\r\n            class=\"pr4 mt1\"\r\n            [tags]=\"allTags$ | async\"\r\n            (searchTermChange)=\"searchTerm$.next($event)\"\r\n            (tagsChange)=\"filterByTags$.next($event)\"\r\n        ></vdr-asset-search-input>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"asset-list\"></vdr-action-bar-items>\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-ab-right>\r\n</vdr-action-bar>\r\n\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", styles: [":host{display:flex;flex-direction:column;height:100%}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}.search-input{margin-top:6px;min-width:300px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.NotificationService }, { type: i1$1.ModalService }, { type: i1$1.DataService }, { type: i1.Router }, { type: i1.ActivatedRoute }]; } });
+
+/**
+ * A component which displays the Assets, and allows assets to be removed and
+ * added, and for the featured asset to be set.
+ *
+ * Note: rather complex code for drag drop is due to a limitation of the default CDK implementation
+ * which is addressed by a work-around from here: https://github.com/angular/components/issues/13372#issuecomment-483998378
+ */
+class AssetsComponent {
+    constructor(modalService, changeDetector) {
+        this.modalService = modalService;
+        this.changeDetector = changeDetector;
+        this.compact = false;
+        this.change = new EventEmitter();
+        this.assets = [];
+    }
+    set assetsSetter(val) {
+        // create a new non-readonly array of assets
+        this.assets = (val || []).slice();
+    }
+    selectAssets() {
+        this.modalService
+            .fromComponent(AssetPickerDialogComponent, {
+            size: 'xl',
+        })
+            .subscribe(result => {
+            if (result && result.length) {
+                this.assets = unique(this.assets.concat(result), 'id');
+                if (!this.featuredAsset) {
+                    this.featuredAsset = result[0];
+                }
+                this.emitChangeEvent(this.assets, this.featuredAsset);
+                this.changeDetector.markForCheck();
+            }
+        });
+    }
+    setAsFeatured(asset) {
+        this.featuredAsset = asset;
+        this.emitChangeEvent(this.assets, asset);
+    }
+    isFeatured(asset) {
+        return !!this.featuredAsset && this.featuredAsset.id === asset.id;
+    }
+    previewAsset(asset) {
+        this.modalService
+            .fromComponent(AssetPreviewDialogComponent, {
+            size: 'xl',
+            closable: true,
+            locals: { asset },
+        })
+            .subscribe();
+    }
+    removeAsset(asset) {
+        this.assets = this.assets.filter(a => a.id !== asset.id);
+        if (this.featuredAsset && this.featuredAsset.id === asset.id) {
+            this.featuredAsset = this.assets.length > 0 ? this.assets[0] : undefined;
+        }
+        this.emitChangeEvent(this.assets, this.featuredAsset);
+    }
+    emitChangeEvent(assets, featuredAsset) {
+        this.change.emit({
+            assets,
+            featuredAsset,
+        });
+    }
+    dropListDropped(event) {
+        moveItemInArray(this.assets, event.previousContainer.data, event.container.data);
+        this.emitChangeEvent(this.assets, this.featuredAsset);
+    }
+}
+AssetsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetsComponent, deps: [{ token: i1$1.ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+AssetsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssetsComponent, selector: "vdr-assets", inputs: { assetsSetter: ["assets", "assetsSetter"], featuredAsset: "featuredAsset", compact: "compact", updatePermissions: "updatePermissions" }, outputs: { change: "change" }, host: { properties: { "class.compact": "this.compact" } }, ngImport: i0, template: "<div class=\"card\" *ngIf=\"!compact; else compactView\">\r\n    <div class=\"card-img\">\r\n        <div class=\"featured-asset\">\r\n            <img\r\n                *ngIf=\"featuredAsset\"\r\n                [src]=\"featuredAsset | assetPreview:'small'\"\r\n                (click)=\"previewAsset(featuredAsset)\"\r\n            />\r\n            <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-featured-asset' | translate }}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\"><ng-container *ngTemplateOutlet=\"assetList\"></ng-container></div>\r\n    <div class=\"card-footer\" *vdrIfPermissions=\"updatePermissions\">\r\n        <button class=\"btn\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"attachment\"></clr-icon>\r\n            {{ 'asset.add-asset' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #compactView>\r\n    <div class=\"featured-asset compact\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview:'thumb'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\"><clr-icon shape=\"image\" size=\"150\"></clr-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview:'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{width:340px;display:block}:host.compact{width:162px}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);cursor:pointer}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"], components: [{ type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "assetPreview": i1$1.AssetPreviewPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-assets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card\" *ngIf=\"!compact; else compactView\">\r\n    <div class=\"card-img\">\r\n        <div class=\"featured-asset\">\r\n            <img\r\n                *ngIf=\"featuredAsset\"\r\n                [src]=\"featuredAsset | assetPreview:'small'\"\r\n                (click)=\"previewAsset(featuredAsset)\"\r\n            />\r\n            <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\">\r\n                <clr-icon shape=\"image\" size=\"128\"></clr-icon>\r\n                <div>{{ 'catalog.no-featured-asset' | translate }}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"card-block\"><ng-container *ngTemplateOutlet=\"assetList\"></ng-container></div>\r\n    <div class=\"card-footer\" *vdrIfPermissions=\"updatePermissions\">\r\n        <button class=\"btn\" (click)=\"selectAssets()\">\r\n            <clr-icon shape=\"attachment\"></clr-icon>\r\n            {{ 'asset.add-asset' | translate }}\r\n        </button>\r\n    </div>\r\n</div>\r\n\r\n<ng-template #compactView>\r\n    <div class=\"featured-asset compact\">\r\n        <img\r\n            *ngIf=\"featuredAsset\"\r\n            [src]=\"featuredAsset | assetPreview:'thumb'\"\r\n            (click)=\"previewAsset(featuredAsset)\"\r\n        />\r\n\r\n        <div class=\"placeholder\" *ngIf=\"!featuredAsset\" (click)=\"selectAssets()\"><clr-icon shape=\"image\" size=\"150\"></clr-icon></div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview:'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{width:340px;display:block}:host.compact{width:162px}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer}.featured-asset.compact{width:100%;min-height:40px;position:relative;padding:6px}.featured-asset .compact-select{position:absolute;bottom:6px;right:6px;margin:0}.all-assets{display:flex;flex-wrap:wrap}.all-assets .drop-list{min-width:60px}.all-assets .asset-thumb{margin:3px;padding:0;border:2px solid var(--color-component-border-100);cursor:pointer}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ModalService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { assetsSetter: [{
+                type: Input,
+                args: ['assets']
+            }], featuredAsset: [{
+                type: Input
+            }], compact: [{
+                type: HostBinding,
+                args: ['class.compact']
+            }, {
+                type: Input
+            }], change: [{
+                type: Output
+            }], updatePermissions: [{
+                type: Input
+            }] } });
+
+class CollectionContentsComponent {
+    constructor(route, router, dataService) {
+        this.route = route;
+        this.router = router;
+        this.dataService = dataService;
+        this.filterTermControl = new FormControl('');
+        this.collectionIdChange$ = new BehaviorSubject('');
+        this.refresh$ = new BehaviorSubject(true);
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.contentsCurrentPage$ = this.route.paramMap.pipe(map(qpm => qpm.get('contentsPage')), map(page => (!page ? 1 : +page)), startWith(1), distinctUntilChanged());
+        this.contentsItemsPerPage$ = this.route.paramMap.pipe(map(qpm => qpm.get('contentsPerPage')), map(perPage => (!perPage ? 10 : +perPage)), startWith(10), distinctUntilChanged());
+        const filterTerm$ = this.filterTermControl.valueChanges.pipe(debounceTime(250), tap(() => this.setContentsPageNumber(1)), startWith(''));
+        const collection$ = combineLatest(this.collectionIdChange$, this.contentsCurrentPage$, this.contentsItemsPerPage$, filterTerm$, this.refresh$).pipe(takeUntil(this.destroy$), switchMap(([id, currentPage, itemsPerPage, filterTerm]) => {
+            const take = itemsPerPage;
+            const skip = (currentPage - 1) * itemsPerPage;
+            if (id) {
+                return this.dataService.collection
+                    .getCollectionContents(id, take, skip, filterTerm)
+                    .mapSingle(data => data.collection);
+            }
+            else {
+                return of(null);
+            }
+        }));
+        this.contents$ = collection$.pipe(map(result => (result ? result.productVariants.items : [])));
+        this.contentsTotalItems$ = collection$.pipe(map(result => (result ? result.productVariants.totalItems : 0)));
+    }
+    ngOnChanges(changes) {
+        if ('collectionId' in changes) {
+            this.collectionIdChange$.next(changes.collectionId.currentValue);
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    setContentsPageNumber(page) {
+        this.setParam('contentsPage', page);
+    }
+    setContentsItemsPerPage(perPage) {
+        this.setParam('contentsPerPage', perPage);
+    }
+    refresh() {
+        this.refresh$.next(true);
+    }
+    setParam(key, value) {
+        this.router.navigate(['./', { ...this.route.snapshot.params, [key]: value }], {
+            relativeTo: this.route,
+            queryParamsHandling: 'merge',
+        });
+    }
+}
+CollectionContentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionContentsComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Component });
+CollectionContentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: { collectionId: "collectionId" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"contents-header\">\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    <input\r\n        type=\"text\"\r\n        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n        [formControl]=\"filterTermControl\"\r\n    />\r\n</div>\r\n<vdr-data-table\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    <ng-template let-variant=\"item\">\r\n        <td class=\"left align-middle\">{{ variant.name }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['/catalog/products', variant.productId, { tab: 'variants' }]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".contents-header{background-color:var(--color-component-bg-100);position:sticky;top:0;padding:6px;z-index:1;border-bottom:1px solid var(--color-component-border-200)}.contents-header .header-title-row{display:flex;justify-content:space-between;align-items:center}.contents-header .clr-input{width:100%}:host ::ng-deep table{margin-top:-1px}\n"], components: [{ type: i1$1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1$1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionContentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-collection-contents', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"contents-header\">\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    <input\r\n        type=\"text\"\r\n        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n        [formControl]=\"filterTermControl\"\r\n    />\r\n</div>\r\n<vdr-data-table\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    <ng-template let-variant=\"item\">\r\n        <td class=\"left align-middle\">{{ variant.name }}</td>\r\n        <td class=\"right align-middle\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['/catalog/products', variant.productId, { tab: 'variants' }]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".contents-header{background-color:var(--color-component-bg-100);position:sticky;top:0;padding:6px;z-index:1;border-bottom:1px solid var(--color-component-border-200)}.contents-header .header-title-row{display:flex;justify-content:space-between;align-items:center}.contents-header .clr-input{width:100%}:host ::ng-deep table{margin-top:-1px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i1$1.DataService }]; }, propDecorators: { collectionId: [{
+                type: Input
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
+class CollectionDetailComponent extends BaseDetailComponent {
+    constructor(router, route, serverConfigService, changeDetector, dataService, formBuilder, notificationService, modalService) {
+        super(route, router, serverConfigService, dataService);
+        this.changeDetector = changeDetector;
+        this.dataService = dataService;
+        this.formBuilder = formBuilder;
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.assetChanges = {};
+        this.filters = [];
+        this.allFilters = [];
+        this.updatePermission = [Permission.UpdateCatalog, Permission.UpdateCollection];
+        this.customFields = this.getCustomFieldConfig('Collection');
+        this.detailForm = this.formBuilder.group({
+            name: ['', Validators.required],
+            slug: ['', unicodePatternValidator(/^[\p{Letter}0-9_-]+$/)],
+            description: '',
+            visible: false,
+            filters: this.formBuilder.array([]),
+            customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+        });
+    }
+    ngOnInit() {
+        this.init();
+        this.dataService.collection.getCollectionFilters().single$.subscribe(res => {
+            this.allFilters = res.collectionFilters;
+        });
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    getFilterDefinition(filter) {
+        return this.allFilters.find(f => f.code === filter.code);
+    }
+    assetsChanged() {
+        return !!Object.values(this.assetChanges).length;
+    }
+    /**
+     * If creating a new Collection, automatically generate the slug based on the collection name.
+     */
+    updateSlug(nameValue) {
+        combineLatest(this.entity$, this.languageCode$)
+            .pipe(take(1))
+            .subscribe(([entity, languageCode]) => {
+            const slugControl = this.detailForm.get(['slug']);
+            const currentTranslation = findTranslation(entity, languageCode);
+            const currentSlugIsEmpty = !currentTranslation || !currentTranslation.slug;
+            if (slugControl && slugControl.pristine && currentSlugIsEmpty) {
+                slugControl.setValue(normalizeString(`${nameValue}`, '-'));
+            }
+        });
+    }
+    addFilter(collectionFilter) {
+        const filtersArray = this.detailForm.get('filters');
+        const index = filtersArray.value.findIndex(o => o.code === collectionFilter.code);
+        if (index === -1) {
+            const argsHash = collectionFilter.args.reduce((output, arg) => ({
+                ...output,
+                [arg.name]: getConfigArgValue(arg.value),
+            }), {});
+            filtersArray.push(this.formBuilder.control({
+                code: collectionFilter.code,
+                args: argsHash,
+            }));
+            this.filters.push({
+                code: collectionFilter.code,
+                args: collectionFilter.args.map(a => ({ name: a.name, value: getConfigArgValue(a.value) })),
+            });
+        }
+    }
+    removeFilter(collectionFilter) {
+        const filtersArray = this.detailForm.get('filters');
+        const index = filtersArray.value.findIndex(o => o.code === collectionFilter.code);
+        if (index !== -1) {
+            filtersArray.removeAt(index);
+            this.filters.splice(index, 1);
+        }
+    }
+    create() {
+        if (!this.detailForm.dirty) {
+            return;
+        }
+        combineLatest(this.entity$, this.languageCode$)
+            .pipe(take(1), mergeMap(([category, languageCode]) => {
+            const input = this.getUpdatedCollection(category, this.detailForm, languageCode);
+            const parentId = this.route.snapshot.paramMap.get('parentId');
+            if (parentId) {
+                input.parentId = parentId;
+            }
+            return this.dataService.collection.createCollection(input);
+        }))
+            .subscribe(data => {
+            this.notificationService.success(marker('common.notify-create-success'), {
+                entity: 'Collection',
+            });
+            this.assetChanges = {};
+            this.detailForm.markAsPristine();
+            this.changeDetector.markForCheck();
+            this.router.navigate(['../', data.createCollection.id], { relativeTo: this.route });
+        }, err => {
+            this.notificationService.error(marker('common.notify-create-error'), {
+                entity: 'Collection',
+            });
+        });
+    }
+    save() {
+        combineLatest(this.entity$, this.languageCode$)
+            .pipe(take(1), mergeMap(([category, languageCode]) => {
+            const input = this.getUpdatedCollection(category, this.detailForm, languageCode);
+            return this.dataService.collection.updateCollection(input);
+        }))
+            .subscribe(() => {
+            this.assetChanges = {};
+            this.detailForm.markAsPristine();
+            this.changeDetector.markForCheck();
+            this.notificationService.success(marker('common.notify-update-success'), {
+                entity: 'Collection',
+            });
+            this.contentsComponent.refresh();
+        }, err => {
+            this.notificationService.error(marker('common.notify-update-error'), {
+                entity: 'Collection',
+            });
+        });
+    }
+    canDeactivate() {
+        return super.canDeactivate() && !this.assetChanges.assets && !this.assetChanges.featuredAsset;
+    }
+    /**
+     * Sets the values of the form on changes to the category or current language.
+     */
+    setFormValues(entity, languageCode) {
+        const currentTranslation = findTranslation(entity, languageCode);
+        this.detailForm.patchValue({
+            name: currentTranslation ? currentTranslation.name : '',
+            slug: currentTranslation ? currentTranslation.slug : '',
+            description: currentTranslation ? currentTranslation.description : '',
+            visible: !entity.isPrivate,
+        });
+        entity.filters.forEach(f => this.addFilter(f));
+        if (this.customFields.length) {
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), entity, currentTranslation);
+        }
+    }
+    /**
+     * Given a category and the value of the form, this method creates an updated copy of the category which
+     * can then be persisted to the API.
+     */
+    getUpdatedCollection(category, form, languageCode) {
+        const updatedCategory = createUpdatedTranslatable({
+            translatable: category,
+            updatedFields: form.value,
+            customFieldConfig: this.customFields,
+            languageCode,
+            defaultTranslation: {
+                languageCode,
+                name: category.name || '',
+                slug: category.slug || '',
+                description: category.description || '',
+            },
+        });
+        return {
+            ...updatedCategory,
+            assetIds: this.assetChanges.assets?.map(a => a.id),
+            featuredAssetId: this.assetChanges.featuredAsset?.id,
+            isPrivate: !form.value.visible,
+            filters: this.mapOperationsToInputs(this.filters, this.detailForm.value.filters),
+        };
+    }
+    /**
+     * Maps an array of conditions or actions to the input format expected by the GraphQL API.
+     */
+    mapOperationsToInputs(operations, formValueOperations) {
+        return operations.map((o, i) => {
+            return {
+                code: o.code,
+                arguments: Object.values(formValueOperations[i].args).map((value, j) => ({
+                    name: o.args[j].name,
+                    value: encodeConfigArgValue(value),
+                })),
+            };
+        });
+    }
+}
+CollectionDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionDetailComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i1$1.DataService }, { token: i4.FormBuilder }, { token: i1$1.NotificationService }, { token: i1$1.ModalService }], target: i0.ɵɵFactoryTarget.Component });
+CollectionDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionDetailComponent, selector: "vdr-collection-detail", viewQueries: [{ propertyName: "contentsComponent", first: true, predicate: ["collectionContents"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"collection-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as category\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col\">\r\n            <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                <clr-toggle-wrapper>\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrToggle\r\n                        formControlName=\"visible\"\r\n                        id=\"visibility\"\r\n                        [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    />\r\n                    <label class=\"visible-toggle\">\r\n                        <ng-container *ngIf=\"detailForm.value.visible; else private\">{{ 'catalog.public' | translate }}</ng-container>\r\n                        <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                    </label>\r\n                </clr-toggle-wrapper>\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                <input\r\n                    id=\"name\"\r\n                    type=\"text\"\r\n                    formControlName=\"name\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                    (input)=\"updateSlug($event.target.value)\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-form-field\r\n                [label]=\"'catalog.slug' | translate\"\r\n                for=\"slug\"\r\n                [errors]=\"{ pattern: ('catalog.slug-pattern-error' | translate) }\"\r\n            >\r\n                <input\r\n                    id=\"slug\"\r\n                    type=\"text\"\r\n                    formControlName=\"slug\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-rich-text-editor\r\n                formControlName=\"description\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                [label]=\"'common.description' | translate\"\r\n            ></vdr-rich-text-editor>\r\n\r\n            <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                <label>{{ 'common.custom-fields' | translate }}</label>\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Collection\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get(['customFields'])\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </section>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"collection-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </div>\r\n        <div class=\"clr-col-md-auto\">\r\n            <vdr-assets\r\n                [assets]=\"category.assets\"\r\n                [featuredAsset]=\"category.featuredAsset\"\r\n                [updatePermissions]=\"updatePermission\"\r\n                (change)=\"assetChanges = $event\"\r\n            ></vdr-assets>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\" formArrayName=\"filters\">\r\n        <div class=\"clr-col\">\r\n            <label>{{ 'catalog.filters' | translate }}</label>\r\n            <ng-container *ngFor=\"let filter of filters; index as i\">\r\n                <vdr-configurable-input\r\n                    (remove)=\"removeFilter($event)\"\r\n                    [operation]=\"filter\"\r\n                    [operationDefinition]=\"getFilterDefinition(filter)\"\r\n                    [formControlName]=\"i\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-configurable-input>\r\n            </ng-container>\r\n\r\n            <div *vdrIfPermissions=\"updatePermission\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'marketing.add-condition' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let filter of allFilters\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"addFilter(filter)\"\r\n                        >\r\n                            {{ filter.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n        <div class=\"clr-col\">\r\n            <vdr-collection-contents [collectionId]=\"id\" #collectionContents>\r\n                <ng-template let-count>\r\n                    <div class=\"contents-title\">\r\n                        {{ 'catalog.collection-contents' | translate }} ({{\r\n                            'common.results-count' | translate: { count: count }\r\n                        }})\r\n                    </div>\r\n                </ng-template>\r\n            </vdr-collection-contents>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { type: i1$1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable"], outputs: ["remove"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-collection-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"collection-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as category\">\r\n    <div class=\"clr-row\">\r\n        <div class=\"clr-col\">\r\n            <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                <clr-toggle-wrapper>\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        clrToggle\r\n                        formControlName=\"visible\"\r\n                        id=\"visibility\"\r\n                        [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                    />\r\n                    <label class=\"visible-toggle\">\r\n                        <ng-container *ngIf=\"detailForm.value.visible; else private\">{{ 'catalog.public' | translate }}</ng-container>\r\n                        <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                    </label>\r\n                </clr-toggle-wrapper>\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                <input\r\n                    id=\"name\"\r\n                    type=\"text\"\r\n                    formControlName=\"name\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                    (input)=\"updateSlug($event.target.value)\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-form-field\r\n                [label]=\"'catalog.slug' | translate\"\r\n                for=\"slug\"\r\n                [errors]=\"{ pattern: ('catalog.slug-pattern-error' | translate) }\"\r\n            >\r\n                <input\r\n                    id=\"slug\"\r\n                    type=\"text\"\r\n                    formControlName=\"slug\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-form-field>\r\n            <vdr-rich-text-editor\r\n                formControlName=\"description\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                [label]=\"'common.description' | translate\"\r\n            ></vdr-rich-text-editor>\r\n\r\n            <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                <label>{{ 'common.custom-fields' | translate }}</label>\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Collection\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get(['customFields'])\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </section>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"collection-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n        </div>\r\n        <div class=\"clr-col-md-auto\">\r\n            <vdr-assets\r\n                [assets]=\"category.assets\"\r\n                [featuredAsset]=\"category.featuredAsset\"\r\n                [updatePermissions]=\"updatePermission\"\r\n                (change)=\"assetChanges = $event\"\r\n            ></vdr-assets>\r\n        </div>\r\n    </div>\r\n    <div class=\"clr-row\" formArrayName=\"filters\">\r\n        <div class=\"clr-col\">\r\n            <label>{{ 'catalog.filters' | translate }}</label>\r\n            <ng-container *ngFor=\"let filter of filters; index as i\">\r\n                <vdr-configurable-input\r\n                    (remove)=\"removeFilter($event)\"\r\n                    [operation]=\"filter\"\r\n                    [operationDefinition]=\"getFilterDefinition(filter)\"\r\n                    [formControlName]=\"i\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-configurable-input>\r\n            </ng-container>\r\n\r\n            <div *vdrIfPermissions=\"updatePermission\">\r\n                <vdr-dropdown>\r\n                    <button class=\"btn btn-outline\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'marketing.add-condition' | translate }}\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\r\n                        <button\r\n                            *ngFor=\"let filter of allFilters\"\r\n                            type=\"button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"addFilter(filter)\"\r\n                        >\r\n                            {{ filter.description }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </div>\r\n        </div>\r\n        <div class=\"clr-col\">\r\n            <vdr-collection-contents [collectionId]=\"id\" #collectionContents>\r\n                <ng-template let-count>\r\n                    <div class=\"contents-title\">\r\n                        {{ 'catalog.collection-contents' | translate }} ({{\r\n                            'common.results-count' | translate: { count: count }\r\n                        }})\r\n                    </div>\r\n                </ng-template>\r\n            </vdr-collection-contents>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.ServerConfigService }, { type: i0.ChangeDetectorRef }, { type: i1$1.DataService }, { type: i4.FormBuilder }, { type: i1$1.NotificationService }, { type: i1$1.ModalService }]; }, propDecorators: { contentsComponent: [{
+                type: ViewChild,
+                args: ['collectionContents']
+            }] } });
+
+/**
+ * Builds a tree from an array of nodes which have a parent.
+ * Based on https://stackoverflow.com/a/31247960/772859, modified to preserve ordering.
+ */
+function arrayToTree(nodes, currentState) {
+    const topLevelNodes = [];
+    const mappedArr = {};
+    const currentStateMap = treeToMap(currentState);
+    // First map the nodes of the array to an object -> create a hash table.
+    for (const node of nodes) {
+        mappedArr[node.id] = { ...node, children: [] };
+    }
+    for (const id of nodes.map(n => n.id)) {
+        if (mappedArr.hasOwnProperty(id)) {
+            const mappedElem = mappedArr[id];
+            mappedElem.expanded = currentStateMap.get(id)?.expanded ?? false;
+            const parent = mappedElem.parent;
+            if (!parent) {
+                continue;
+            }
+            // If the element is not at the root level, add it to its parent array of children.
+            const parentIsRoot = !mappedArr[parent.id];
+            if (!parentIsRoot) {
+                if (mappedArr[parent.id]) {
+                    mappedArr[parent.id].children.push(mappedElem);
+                }
+                else {
+                    mappedArr[parent.id] = { children: [mappedElem] };
+                }
+            }
+            else {
+                topLevelNodes.push(mappedElem);
+            }
+        }
+    }
+    // tslint:disable-next-line:no-non-null-assertion
+    const rootId = topLevelNodes.length ? topLevelNodes[0].parent.id : undefined;
+    return { id: rootId, children: topLevelNodes };
+}
+/**
+ * Converts an existing tree (as generated by the arrayToTree function) into a flat
+ * Map. This is used to persist certain states (e.g. `expanded`) when re-building the
+ * tree.
+ */
+function treeToMap(tree) {
+    const nodeMap = new Map();
+    function visit(node) {
+        nodeMap.set(node.id, node);
+        node.children.forEach(visit);
+    }
+    if (tree) {
+        visit(tree);
+    }
+    return nodeMap;
+}
+
+/**
+ * Facilitates communication between the CollectionTreeComponent and child CollectionTreeNodeComponents
+ * without introducing a cyclic dependency.
+ */
+class CollectionTreeService {
+    constructor() {
+        this.allMoveListItems = [];
+        this._rearrange$ = new Subject();
+        this._delete$ = new Subject();
+        this.rearrange$ = this._rearrange$.asObservable();
+        this.delete$ = this._delete$.asObservable();
+    }
+    ngOnDestroy() {
+        this._rearrange$.complete();
+        this._delete$.complete();
+    }
+    setCollectionTree(tree) {
+        this.collectionTree = tree;
+    }
+    resetMoveList() {
+        this.allMoveListItems = [];
+    }
+    getMoveListItems(collection) {
+        if (this.allMoveListItems.length === 0) {
+            this.allMoveListItems = this.calculateAllMoveListItems();
+        }
+        return this.allMoveListItems.filter(item => item.id !== collection.id &&
+            !item.ancestorIdPath.has(collection.id) &&
+            item.id !== collection.parent?.id);
+    }
+    onDrop(event) {
+        const item = event.item.data;
+        const newParent = event.container.data;
+        const newParentId = newParent.id;
+        if (newParentId == null) {
+            throw new Error(`Could not determine the ID of the root Collection`);
+        }
+        this._rearrange$.next({
+            collectionId: item.id,
+            parentId: newParentId,
+            index: event.currentIndex,
+        });
+    }
+    onMove(event) {
+        this._rearrange$.next(event);
+    }
+    onDelete(id) {
+        this._delete$.next(id);
+    }
+    calculateAllMoveListItems() {
+        const visit = (node, parentPath, ancestorIdPath, output) => {
+            const path = parentPath.concat(node.name);
+            output.push({ path: path.slice(1).join(' / ') || 'root', id: node.id, ancestorIdPath });
+            node.children.forEach(child => visit(child, path, new Set([...ancestorIdPath, node.id]), output));
+            return output;
+        };
+        return visit(this.collectionTree, [], new Set(), []);
+    }
+}
+CollectionTreeService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+CollectionTreeService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionTreeService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionTreeService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+class CollectionTreeNodeComponent {
+    constructor(parent, dataService, collectionTreeService) {
+        this.parent = parent;
+        this.dataService = dataService;
+        this.collectionTreeService = collectionTreeService;
+        this.depth = 0;
+        this.expandAll = false;
+        this.moveListItems = [];
+        if (parent) {
+            this.depth = parent.depth + 1;
+        }
+    }
+    ngOnInit() {
+        this.parentName = this.collectionTree.name || '<root>';
+        const permissions$ = this.dataService.client
+            .userStatus()
+            .mapStream(data => data.userStatus.permissions)
+            .pipe(shareReplay(1));
+        this.hasUpdatePermission$ = permissions$.pipe(map(perms => perms.includes(Permission.UpdateCatalog) || perms.includes(Permission.UpdateCollection)));
+        this.hasDeletePermission$ = permissions$.pipe(map(perms => perms.includes(Permission.DeleteCatalog) || perms.includes(Permission.DeleteCollection)));
+    }
+    ngOnChanges(changes) {
+        const expandAllChange = changes['expandAll'];
+        if (expandAllChange) {
+            if (expandAllChange.previousValue === true && expandAllChange.currentValue === false) {
+                this.collectionTree.children.forEach(c => (c.expanded = false));
+            }
+        }
+    }
+    trackByFn(index, item) {
+        return item.id;
+    }
+    getMoveListItems(collection) {
+        this.moveListItems = this.collectionTreeService.getMoveListItems(collection);
+    }
+    move(collection, parentId) {
+        this.collectionTreeService.onMove({
+            index: 0,
+            parentId,
+            collectionId: collection.id,
+        });
+    }
+    moveUp(collection, currentIndex) {
+        if (!collection.parent) {
+            return;
+        }
+        this.collectionTreeService.onMove({
+            index: currentIndex - 1,
+            parentId: collection.parent.id,
+            collectionId: collection.id,
+        });
+    }
+    moveDown(collection, currentIndex) {
+        if (!collection.parent) {
+            return;
+        }
+        this.collectionTreeService.onMove({
+            index: currentIndex + 1,
+            parentId: collection.parent.id,
+            collectionId: collection.id,
+        });
+    }
+    drop(event) {
+        moveItemInArray(this.collectionTree.children, event.previousIndex, event.currentIndex);
+        this.collectionTreeService.onDrop(event);
+    }
+    delete(id) {
+        this.collectionTreeService.onDelete(id);
+    }
+}
+CollectionTreeNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionTreeNodeComponent, deps: [{ token: CollectionTreeNodeComponent, optional: true, skipSelf: true }, { token: i1$1.DataService }, { token: CollectionTreeService }], target: i0.ɵɵFactoryTarget.Component });
+CollectionTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: { collectionTree: "collectionTree", activeCollectionId: "activeCollectionId", expandAll: "expandAll" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    cdkDropList\r\n    class=\"tree-node\"\r\n    #dropList\r\n    [cdkDropListData]=\"collectionTree\"\r\n    [cdkDropListDisabled]=\"!(hasUpdatePermission$ | async)\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n    <div\r\n        class=\"collection\"\r\n        [class.private]=\"collection.isPrivate\"\r\n        *ngFor=\"let collection of collectionTree.children; index as i; trackBy: trackByFn\"\r\n        cdkDrag\r\n        [cdkDragData]=\"collection\"\r\n    >\r\n        <div\r\n            class=\"collection-detail\"\r\n            [ngClass]=\"'depth-' + depth\"\r\n            [class.active]=\"collection.id === activeCollectionId\"\r\n        >\r\n            <div class=\"name\">\r\n                <button\r\n                    class=\"icon-button folder-button\"\r\n                    [disabled]=\"expandAll\"\r\n                    *ngIf=\"collection.children?.length; else folderSpacer\"\r\n                    (click)=\"collection.expanded = !collection.expanded\"\r\n                >\r\n                    <clr-icon shape=\"folder\" *ngIf=\"!collection.expanded && !expandAll\"></clr-icon>\r\n                    <clr-icon shape=\"folder-open\" *ngIf=\"collection.expanded || expandAll\"></clr-icon>\r\n                </button>\r\n                <ng-template #folderSpacer>\r\n                    <div class=\"folder-button-spacer\"></div>\r\n                </ng-template>\r\n                {{ collection.name }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <vdr-chip *ngIf=\"collection.isPrivate\">{{ 'catalog.private' | translate }}</vdr-chip>\r\n            <a\r\n                class=\"btn btn-link btn-sm\"\r\n                [routerLink]=\"['./', { contents: collection.id }]\"\r\n                queryParamsHandling=\"preserve\"\r\n            >\r\n                <clr-icon shape=\"view-list\"></clr-icon>\r\n                {{ 'catalog.view-contents' | translate }}\r\n            </a>\r\n            <a class=\"btn btn-link btn-sm\" [routerLink]=\"['/catalog/collections/', collection.id]\">\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n                {{ 'common.edit' | translate }}\r\n            </a>\r\n            <div class=\"drag-handle\" cdkDragHandle *vdrIfPermissions=\"['UpdateCatalog', 'UpdateCollection']\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger (click)=\"getMoveListItems(collection)\">\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <a\r\n                        class=\"dropdown-item\"\r\n                        [routerLink]=\"['./', 'create', { parentId: collection.id }]\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n                    >\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'catalog.create-new-collection' | translate }}\r\n                    </a>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"i === 0 || !(hasUpdatePermission$ | async)\"\r\n                        (click)=\"moveUp(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret up\"></clr-icon>\r\n                        {{ 'catalog.move-up' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"\r\n                            i === collectionTree.children.length - 1 || !(hasUpdatePermission$ | async)\r\n                        \"\r\n                        (click)=\"moveDown(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret down\"></clr-icon>\r\n                        {{ 'catalog.move-down' | translate }}\r\n                    </button>\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.move-to' | translate }}</h4>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngFor=\"let item of moveListItems\"\r\n                        (click)=\"move(collection, item.id)\"\r\n                        [disabled]=\"!(hasUpdatePermission$ | async)\"\r\n                    >\r\n                        <div class=\"move-to-item\">\r\n                            <div class=\"move-icon\">\r\n                                <clr-icon shape=\"child-arrow\"></clr-icon>\r\n                            </div>\r\n                            <div class=\"path\">\r\n                                {{ item.path }}\r\n                            </div>\r\n                        </div>\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        class=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"delete(collection.id)\"\r\n                        [disabled]=\"!(hasDeletePermission$ | async)\"\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <vdr-collection-tree-node\r\n            *ngIf=\"collection.expanded || expandAll\"\r\n            [expandAll]=\"expandAll\"\r\n            [collectionTree]=\"collection\"\r\n            [activeCollectionId]=\"activeCollectionId\"\r\n        ></vdr-collection-tree-node>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.collection{background-color:var(--color-component-bg-100);font-size:.65rem;transition:transform .25s cubic-bezier(0,0,.2,1);margin-bottom:2px;border-left:2px solid transparent;transition:border-left-color .2s}.collection.private{background-color:var(--color-component-bg-200)}.collection .collection-detail{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-component-border-100)}.collection .collection-detail.active{background-color:var(--clr-global-selection-color)}.collection .collection-detail.depth-1{padding-left:36px}.collection .collection-detail.depth-2{padding-left:60px}.collection .collection-detail.depth-3{padding-left:84px}.collection .collection-detail.depth-4{padding-left:108px}.collection .collection-detail .folder-button-spacer{display:inline-block;width:28px}.tree-node{display:block;background:var(--color-component-bg-100);overflow:hidden}.tree-node.cdk-drop-list-dragging>.collection{border-left-color:var(--color-primary-300)}.drag-placeholder{min-height:120px;background-color:var(--color-component-bg-300);transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.move-to-item{display:flex;white-space:normal;align-items:baseline}.move-to-item .move-icon{flex:none;margin-right:3px}.move-to-item .path{line-height:18px}\n"], components: [{ type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: ["collectionTree", "activeCollectionId", "expandAll"] }], directives: [{ type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionTreeNodeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-collection-tree-node', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n    cdkDropList\r\n    class=\"tree-node\"\r\n    #dropList\r\n    [cdkDropListData]=\"collectionTree\"\r\n    [cdkDropListDisabled]=\"!(hasUpdatePermission$ | async)\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n    <div\r\n        class=\"collection\"\r\n        [class.private]=\"collection.isPrivate\"\r\n        *ngFor=\"let collection of collectionTree.children; index as i; trackBy: trackByFn\"\r\n        cdkDrag\r\n        [cdkDragData]=\"collection\"\r\n    >\r\n        <div\r\n            class=\"collection-detail\"\r\n            [ngClass]=\"'depth-' + depth\"\r\n            [class.active]=\"collection.id === activeCollectionId\"\r\n        >\r\n            <div class=\"name\">\r\n                <button\r\n                    class=\"icon-button folder-button\"\r\n                    [disabled]=\"expandAll\"\r\n                    *ngIf=\"collection.children?.length; else folderSpacer\"\r\n                    (click)=\"collection.expanded = !collection.expanded\"\r\n                >\r\n                    <clr-icon shape=\"folder\" *ngIf=\"!collection.expanded && !expandAll\"></clr-icon>\r\n                    <clr-icon shape=\"folder-open\" *ngIf=\"collection.expanded || expandAll\"></clr-icon>\r\n                </button>\r\n                <ng-template #folderSpacer>\r\n                    <div class=\"folder-button-spacer\"></div>\r\n                </ng-template>\r\n                {{ collection.name }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <vdr-chip *ngIf=\"collection.isPrivate\">{{ 'catalog.private' | translate }}</vdr-chip>\r\n            <a\r\n                class=\"btn btn-link btn-sm\"\r\n                [routerLink]=\"['./', { contents: collection.id }]\"\r\n                queryParamsHandling=\"preserve\"\r\n            >\r\n                <clr-icon shape=\"view-list\"></clr-icon>\r\n                {{ 'catalog.view-contents' | translate }}\r\n            </a>\r\n            <a class=\"btn btn-link btn-sm\" [routerLink]=\"['/catalog/collections/', collection.id]\">\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n                {{ 'common.edit' | translate }}\r\n            </a>\r\n            <div class=\"drag-handle\" cdkDragHandle *vdrIfPermissions=\"['UpdateCatalog', 'UpdateCollection']\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger (click)=\"getMoveListItems(collection)\">\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <a\r\n                        class=\"dropdown-item\"\r\n                        [routerLink]=\"['./', 'create', { parentId: collection.id }]\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n                    >\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'catalog.create-new-collection' | translate }}\r\n                    </a>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"i === 0 || !(hasUpdatePermission$ | async)\"\r\n                        (click)=\"moveUp(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret up\"></clr-icon>\r\n                        {{ 'catalog.move-up' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"\r\n                            i === collectionTree.children.length - 1 || !(hasUpdatePermission$ | async)\r\n                        \"\r\n                        (click)=\"moveDown(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret down\"></clr-icon>\r\n                        {{ 'catalog.move-down' | translate }}\r\n                    </button>\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.move-to' | translate }}</h4>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngFor=\"let item of moveListItems\"\r\n                        (click)=\"move(collection, item.id)\"\r\n                        [disabled]=\"!(hasUpdatePermission$ | async)\"\r\n                    >\r\n                        <div class=\"move-to-item\">\r\n                            <div class=\"move-icon\">\r\n                                <clr-icon shape=\"child-arrow\"></clr-icon>\r\n                            </div>\r\n                            <div class=\"path\">\r\n                                {{ item.path }}\r\n                            </div>\r\n                        </div>\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        class=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"delete(collection.id)\"\r\n                        [disabled]=\"!(hasDeletePermission$ | async)\"\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <vdr-collection-tree-node\r\n            *ngIf=\"collection.expanded || expandAll\"\r\n            [expandAll]=\"expandAll\"\r\n            [collectionTree]=\"collection\"\r\n            [activeCollectionId]=\"activeCollectionId\"\r\n        ></vdr-collection-tree-node>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.collection{background-color:var(--color-component-bg-100);font-size:.65rem;transition:transform .25s cubic-bezier(0,0,.2,1);margin-bottom:2px;border-left:2px solid transparent;transition:border-left-color .2s}.collection.private{background-color:var(--color-component-bg-200)}.collection .collection-detail{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-component-border-100)}.collection .collection-detail.active{background-color:var(--clr-global-selection-color)}.collection .collection-detail.depth-1{padding-left:36px}.collection .collection-detail.depth-2{padding-left:60px}.collection .collection-detail.depth-3{padding-left:84px}.collection .collection-detail.depth-4{padding-left:108px}.collection .collection-detail .folder-button-spacer{display:inline-block;width:28px}.tree-node{display:block;background:var(--color-component-bg-100);overflow:hidden}.tree-node.cdk-drop-list-dragging>.collection{border-left-color:var(--color-primary-300)}.drag-placeholder{min-height:120px;background-color:var(--color-component-bg-300);transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.move-to-item{display:flex;white-space:normal;align-items:baseline}.move-to-item .move-icon{flex:none;margin-right:3px}.move-to-item .path{line-height:18px}\n"] }]
+        }], ctorParameters: function () { return [{ type: CollectionTreeNodeComponent, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Optional
+                }] }, { type: i1$1.DataService }, { type: CollectionTreeService }]; }, propDecorators: { collectionTree: [{
+                type: Input
+            }], activeCollectionId: [{
+                type: Input
+            }], expandAll: [{
+                type: Input
+            }] } });
+
+class CollectionTreeComponent {
+    constructor(collectionTreeService) {
+        this.collectionTreeService = collectionTreeService;
+        this.expandAll = false;
+        this.rearrange = new EventEmitter();
+        this.deleteCollection = new EventEmitter();
+    }
+    ngOnChanges(changes) {
+        if ('collections' in changes && this.collections) {
+            this.collectionTree = arrayToTree(this.collections, this.collectionTree);
+            this.collectionTreeService.setCollectionTree(this.collectionTree);
+            this.collectionTreeService.resetMoveList();
+        }
+    }
+    ngOnInit() {
+        this.collectionTreeService.rearrange$.subscribe(event => this.rearrange.emit(event));
+        this.collectionTreeService.delete$.subscribe(id => this.deleteCollection.emit(id));
+    }
+}
+CollectionTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionTreeComponent, deps: [{ token: CollectionTreeService }], target: i0.ɵɵFactoryTarget.Component });
+CollectionTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionTreeComponent, selector: "vdr-collection-tree", inputs: { collections: "collections", activeCollectionId: "activeCollectionId", expandAll: "expandAll" }, outputs: { rearrange: "rearrange", deleteCollection: "deleteCollection" }, providers: [CollectionTreeService], usesOnChanges: true, ngImport: i0, template: "<vdr-collection-tree-node\r\n    *ngIf=\"collectionTree\"\r\n    cdkDropListGroup\r\n    [expandAll]=\"expandAll\"\r\n    [collectionTree]=\"collectionTree\"\r\n    [activeCollectionId]=\"activeCollectionId\"\r\n></vdr-collection-tree-node>\r\n", styles: [""], components: [{ type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: ["collectionTree", "activeCollectionId", "expandAll"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-collection-tree', changeDetection: ChangeDetectionStrategy.OnPush, providers: [CollectionTreeService], template: "<vdr-collection-tree-node\r\n    *ngIf=\"collectionTree\"\r\n    cdkDropListGroup\r\n    [expandAll]=\"expandAll\"\r\n    [collectionTree]=\"collectionTree\"\r\n    [activeCollectionId]=\"activeCollectionId\"\r\n></vdr-collection-tree-node>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: CollectionTreeService }]; }, propDecorators: { collections: [{
+                type: Input
+            }], activeCollectionId: [{
+                type: Input
+            }], expandAll: [{
+                type: Input
+            }], rearrange: [{
+                type: Output
+            }], deleteCollection: [{
+                type: Output
+            }] } });
+
+class CollectionListComponent {
+    constructor(dataService, notificationService, modalService, router, route, serverConfigService) {
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.router = router;
+        this.route = route;
+        this.serverConfigService = serverConfigService;
+        this.filterTermControl = new FormControl('');
+        this.expandAll = false;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.queryResult = this.dataService.collection.getCollections(1000, 0).refetchOnChannelChange();
+        this.items$ = this.queryResult.mapStream(data => data.collections.items).pipe(shareReplay(1));
+        this.activeCollectionId$ = this.route.paramMap.pipe(map(pm => pm.get('contents')), distinctUntilChanged());
+        this.activeCollectionTitle$ = combineLatest(this.activeCollectionId$, this.items$).pipe(map(([id, collections]) => {
+            if (id) {
+                const match = collections.find(c => c.id === id);
+                return match ? match.name : '';
+            }
+            return '';
+        }));
+        this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
+        this.contentLanguage$ = this.dataService.client
+            .uiState()
+            .mapStream(({ uiState }) => uiState.contentLanguage)
+            .pipe(tap(() => this.refresh()));
+        this.filterTermControl.valueChanges
+            .pipe(debounceTime(250), takeUntil(this.destroy$))
+            .subscribe(() => this.refresh());
+    }
+    ngOnDestroy() {
+        this.queryResult.completed$.next();
+        this.destroy$.next(undefined);
+        this.destroy$.complete();
+    }
+    onRearrange(event) {
+        this.dataService.collection.moveCollection([event]).subscribe({
+            next: () => {
+                this.notificationService.success(marker('common.notify-saved-changes'));
+                this.refresh();
+            },
+            error: err => {
+                this.notificationService.error(marker('common.notify-save-changes-error'));
+            },
+        });
+    }
+    deleteCollection(id) {
+        this.items$
+            .pipe(take(1), map(items => -1 < items.findIndex(i => i.parent && i.parent.id === id)), switchMap(hasChildren => {
+            return this.modalService.dialog({
+                title: marker('catalog.confirm-delete-collection'),
+                body: hasChildren
+                    ? marker('catalog.confirm-delete-collection-and-children-body')
+                    : undefined,
+                buttons: [
+                    { type: 'secondary', label: marker('common.cancel') },
+                    { type: 'danger', label: marker('common.delete'), returnValue: true },
+                ],
+            });
+        }), switchMap(response => (response ? this.dataService.collection.deleteCollection(id) : EMPTY)))
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-delete-success'), {
+                entity: 'Collection',
+            });
+            this.refresh();
+        }, err => {
+            this.notificationService.error(marker('common.notify-delete-error'), {
+                entity: 'Collection',
+            });
+        });
+    }
+    closeContents() {
+        const params = { ...this.route.snapshot.params };
+        delete params.contents;
+        this.router.navigate(['./', params], { relativeTo: this.route, queryParamsHandling: 'preserve' });
+    }
+    setLanguage(code) {
+        this.dataService.client.setContentLanguage(code).subscribe();
+    }
+    refresh() {
+        this.queryResult.ref.refetch({
+            options: {
+                skip: 0,
+                take: 1000,
+                ...(this.filterTermControl.value
+                    ? {
+                        filter: {
+                            name: {
+                                contains: this.filterTermControl.value,
+                            },
+                        },
+                    }
+                    : {}),
+            },
+        });
+    }
+}
+CollectionListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionListComponent, deps: [{ token: i1$1.DataService }, { token: i1$1.NotificationService }, { token: i1$1.ModalService }, { token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.ServerConfigService }], target: i0.ɵɵFactoryTarget.Component });
+CollectionListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: CollectionListComponent, selector: "vdr-collection-list", ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex center wrap\">\r\n            <vdr-language-selector\r\n                class=\"mt2\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <clr-checkbox-wrapper\r\n                class=\"expand-all-toggle ml3\"\r\n                [ngClass]=\"(availableLanguages$ | async)?.length === 1 ? 'mt3' : 'mt1'\"\r\n            >\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"expandAll\" />\r\n                <label>{{ 'catalog.expand-all-collections' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <input\r\n                type='text'\r\n                name='searchTerm'\r\n                [formControl]='filterTermControl'\r\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                class='clr-input search-input ml4'\r\n            />\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"collection-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-collection' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"collection-wrapper\">\r\n    <vdr-collection-tree\r\n        [collections]=\"items$ | async\"\r\n        [activeCollectionId]=\"activeCollectionId$ | async\"\r\n        [expandAll]=\"expandAll\"\r\n        (rearrange)=\"onRearrange($event)\"\r\n        (deleteCollection)=\"deleteCollection($event)\"\r\n    ></vdr-collection-tree>\r\n\r\n    <div class=\"collection-contents\" [class.expanded]=\"activeCollectionId$ | async\">\r\n        <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\">\r\n            <ng-template let-count>\r\n                <div class=\"collection-title\">\r\n                    {{ activeCollectionTitle$ | async }} ({{\r\n                        'common.results-count' | translate: { count: count }\r\n                    }})\r\n                </div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeContents()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n        </vdr-collection-contents>\r\n    </div>\r\n</div>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}.expand-all-toggle{display:block}.collection-wrapper{display:flex;height:calc(100% - 50px)}.collection-wrapper vdr-collection-tree{flex:1;height:100%;overflow:auto}.collection-wrapper .collection-contents{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.collection-wrapper .collection-contents.expanded{width:30vw;visibility:visible;opacity:1;padding-left:12px}.collection-wrapper .collection-contents .close-button{margin:0;background:none;border:none;cursor:pointer}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: CollectionTreeComponent, selector: "vdr-collection-tree", inputs: ["collections", "activeCollectionId", "expandAll"], outputs: ["rearrange", "deleteCollection"] }, { type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-collection-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex center wrap\">\r\n            <vdr-language-selector\r\n                class=\"mt2\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <clr-checkbox-wrapper\r\n                class=\"expand-all-toggle ml3\"\r\n                [ngClass]=\"(availableLanguages$ | async)?.length === 1 ? 'mt3' : 'mt1'\"\r\n            >\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"expandAll\" />\r\n                <label>{{ 'catalog.expand-all-collections' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <input\r\n                type='text'\r\n                name='searchTerm'\r\n                [formControl]='filterTermControl'\r\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                class='clr-input search-input ml4'\r\n            />\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"collection-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-collection' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<div class=\"collection-wrapper\">\r\n    <vdr-collection-tree\r\n        [collections]=\"items$ | async\"\r\n        [activeCollectionId]=\"activeCollectionId$ | async\"\r\n        [expandAll]=\"expandAll\"\r\n        (rearrange)=\"onRearrange($event)\"\r\n        (deleteCollection)=\"deleteCollection($event)\"\r\n    ></vdr-collection-tree>\r\n\r\n    <div class=\"collection-contents\" [class.expanded]=\"activeCollectionId$ | async\">\r\n        <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\">\r\n            <ng-template let-count>\r\n                <div class=\"collection-title\">\r\n                    {{ activeCollectionTitle$ | async }} ({{\r\n                        'common.results-count' | translate: { count: count }\r\n                    }})\r\n                </div>\r\n                <button type=\"button\" class=\"close-button\" (click)=\"closeContents()\">\r\n                    <clr-icon shape=\"close\"></clr-icon>\r\n                </button>\r\n            </ng-template>\r\n        </vdr-collection-contents>\r\n    </div>\r\n</div>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}.expand-all-toggle{display:block}.collection-wrapper{display:flex;height:calc(100% - 50px)}.collection-wrapper vdr-collection-tree{flex:1;height:100%;overflow:auto}.collection-wrapper .collection-contents{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.collection-wrapper .collection-contents.expanded{width:30vw;visibility:visible;opacity:1;padding-left:12px}.collection-wrapper .collection-contents .close-button{margin:0;background:none;border:none;cursor:pointer}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DataService }, { type: i1$1.NotificationService }, { type: i1$1.ModalService }, { type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.ServerConfigService }]; } });
+
+class FacetDetailComponent extends BaseDetailComponent {
+    constructor(router, route, serverConfigService, changeDetector, dataService, formBuilder, notificationService, modalService) {
+        super(route, router, serverConfigService, dataService);
+        this.changeDetector = changeDetector;
+        this.dataService = dataService;
+        this.formBuilder = formBuilder;
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.updatePermission = [Permission.UpdateCatalog, Permission.UpdateFacet];
+        this.customFields = this.getCustomFieldConfig('Facet');
+        this.customValueFields = this.getCustomFieldConfig('FacetValue');
+        this.detailForm = this.formBuilder.group({
+            facet: this.formBuilder.group({
+                code: ['', Validators.required],
+                name: '',
+                visible: true,
+                customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            }),
+            values: this.formBuilder.array([]),
+        });
+    }
+    ngOnInit() {
+        this.init();
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    updateCode(currentCode, nameValue) {
+        if (!currentCode) {
+            const codeControl = this.detailForm.get(['facet', 'code']);
+            if (codeControl && codeControl.pristine) {
+                codeControl.setValue(normalizeString(nameValue, '-'));
+            }
+        }
+    }
+    updateValueCode(currentCode, nameValue, index) {
+        if (!currentCode) {
+            const codeControl = this.detailForm.get(['values', index, 'code']);
+            if (codeControl && codeControl.pristine) {
+                codeControl.setValue(normalizeString(nameValue, '-'));
+            }
+        }
+    }
+    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 valueGroup = this.formBuilder.group({
+                id: '',
+                name: ['', Validators.required],
+                code: '',
+            });
+            const newValue = { name: '', code: '' };
+            if (this.customValueFields.length) {
+                const customValueFieldsGroup = new FormGroup({});
+                newValue.customFields = {};
+                for (const fieldDef of this.customValueFields) {
+                    const key = fieldDef.name;
+                    customValueFieldsGroup.addControl(key, new FormControl());
+                }
+                valueGroup.addControl('customFields', customValueFieldsGroup);
+            }
+            valuesFormArray.insert(valuesFormArray.length, valueGroup);
+            this.values.push(newValue);
+        }
+    }
+    create() {
+        const facetForm = this.detailForm.get('facet');
+        if (!facetForm || !facetForm.dirty) {
+            return;
+        }
+        combineLatest(this.entity$, this.languageCode$)
+            .pipe(take(1), mergeMap(([facet, languageCode]) => {
+            const newFacet = this.getUpdatedFacet(facet, facetForm, languageCode);
+            return this.dataService.facet.createFacet(newFacet);
+        }), switchMap(data => this.dataService.facet.getAllFacets().single$.pipe(mapTo(data))))
+            .subscribe(data => {
+            this.notificationService.success(marker('common.notify-create-success'), { entity: 'Facet' });
+            this.detailForm.markAsPristine();
+            this.changeDetector.markForCheck();
+            this.router.navigate(['../', data.createFacet.id], { relativeTo: this.route });
+        }, err => {
+            this.notificationService.error(marker('common.notify-create-error'), {
+                entity: 'Facet',
+            });
+        });
+    }
+    save() {
+        combineLatest(this.entity$, this.languageCode$)
+            .pipe(take(1), mergeMap(([facet, languageCode]) => {
+            const facetGroup = this.detailForm.get('facet');
+            const updateOperations = [];
+            if (facetGroup && facetGroup.dirty) {
+                const newFacet = this.getUpdatedFacet(facet, facetGroup, languageCode);
+                if (newFacet) {
+                    updateOperations.push(this.dataService.facet.updateFacet(newFacet));
+                }
+            }
+            const valuesArray = this.detailForm.get('values');
+            if (valuesArray && valuesArray.dirty) {
+                const createdValues = this.getCreatedFacetValues(facet, valuesArray, languageCode);
+                if (createdValues.length) {
+                    updateOperations.push(this.dataService.facet
+                        .createFacetValues(createdValues)
+                        .pipe(switchMap(() => this.dataService.facet.getFacet(this.id).single$)));
+                }
+                const updatedValues = this.getUpdatedFacetValues(facet, valuesArray, languageCode);
+                if (updatedValues.length) {
+                    updateOperations.push(this.dataService.facet.updateFacetValues(updatedValues));
+                }
+            }
+            return forkJoin(updateOperations);
+        }), switchMap(() => this.dataService.facet.getAllFacets().single$))
+            .subscribe(() => {
+            this.detailForm.markAsPristine();
+            this.changeDetector.markForCheck();
+            this.notificationService.success(marker('common.notify-update-success'), { entity: 'Facet' });
+        }, err => {
+            this.notificationService.error(marker('common.notify-update-error'), {
+                entity: 'Facet',
+            });
+        });
+    }
+    deleteFacetValue(facetValueId, index) {
+        if (!facetValueId) {
+            // deleting a newly-added (not persisted) FacetValue
+            const valuesFormArray = this.detailForm.get('values');
+            if (valuesFormArray) {
+                valuesFormArray.removeAt(index);
+            }
+            this.values.splice(index, 1);
+            return;
+        }
+        this.showModalAndDelete(facetValueId)
+            .pipe(switchMap(response => {
+            if (response.result === DeletionResult.DELETED) {
+                return [true];
+            }
+            else {
+                return this.showModalAndDelete(facetValueId, response.message || '').pipe(map(r => r.result === DeletionResult.DELETED));
+            }
+        }), switchMap(deleted => (deleted ? this.dataService.facet.getFacet(this.id).single$ : [])))
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-delete-success'), {
+                entity: 'FacetValue',
+            });
+        }, err => {
+            this.notificationService.error(marker('common.notify-delete-error'), {
+                entity: 'FacetValue',
+            });
+        });
+    }
+    showModalAndDelete(facetValueId, message) {
+        return this.modalService
+            .dialog({
+            title: marker('catalog.confirm-delete-facet-value'),
+            body: message,
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(result => result ? this.dataService.facet.deleteFacetValues([facetValueId], !!message) : EMPTY), map(result => result.deleteFacetValues[0]));
+    }
+    /**
+     * Sets the values of the form on changes to the facet or current language.
+     */
+    setFormValues(facet, languageCode) {
+        const currentTranslation = findTranslation(facet, languageCode);
+        this.detailForm.patchValue({
+            facet: {
+                code: facet.code,
+                visible: !facet.isPrivate,
+                name: currentTranslation?.name ?? '',
+            },
+        });
+        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];
+        facet.values.forEach((value, i) => {
+            const valueTranslation = findTranslation(value, languageCode);
+            const group = {
+                id: value.id,
+                code: value.code,
+                name: valueTranslation ? valueTranslation.name : '',
+            };
+            const valueControl = currentValuesFormArray.at(i);
+            if (valueControl) {
+                valueControl.get('id')?.setValue(group.id);
+                valueControl.get('code')?.setValue(group.code);
+                valueControl.get('name')?.setValue(group.name);
+            }
+            else {
+                currentValuesFormArray.insert(i, this.formBuilder.group(group));
+            }
+            if (this.customValueFields.length) {
+                let customValueFieldsGroup = this.detailForm.get(['values', i, 'customFields']);
+                if (!customValueFieldsGroup) {
+                    customValueFieldsGroup = new FormGroup({});
+                    this.detailForm.get(['values', i]).addControl('customFields', customValueFieldsGroup);
+                }
+                if (customValueFieldsGroup) {
+                    for (const fieldDef of this.customValueFields) {
+                        const key = fieldDef.name;
+                        const fieldValue = fieldDef.type === 'localeString'
+                            ? valueTranslation.customFields[key]
+                            : value.customFields[key];
+                        const control = customValueFieldsGroup.get(key);
+                        if (control) {
+                            control.setValue(fieldValue);
+                        }
+                        else {
+                            customValueFieldsGroup.addControl(key, new FormControl(fieldValue));
+                        }
+                    }
+                }
+            }
+        });
+    }
+    /**
+     * Given a facet and the value of the detailForm, this method creates an updated copy of the facet which
+     * can then be persisted to the API.
+     */
+    getUpdatedFacet(facet, facetFormGroup, languageCode) {
+        const input = createUpdatedTranslatable({
+            translatable: facet,
+            updatedFields: facetFormGroup.value,
+            customFieldConfig: this.customFields,
+            languageCode,
+            defaultTranslation: {
+                languageCode,
+                name: facet.name || '',
+            },
+        });
+        input.isPrivate = !facetFormGroup.value.visible;
+        return input;
+    }
+    /**
+     * 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)
+            .map(c => c.value)
+            .map(value => createUpdatedTranslatable({
+            translatable: { ...value, translations: [] },
+            updatedFields: value,
+            customFieldConfig: this.customValueFields,
+            languageCode,
+            defaultTranslation: {
+                languageCode,
+                name: '',
+            },
+        }))
+            .map(input => ({
+            facetId: facet.id,
+            ...input,
+        }));
+    }
+    /**
+     * 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());
+            return formRow && formRow.dirty && formRow.value.id;
+        });
+        const dirtyValueValues = valuesFormArray.controls
+            .filter(c => c.dirty && c.value.id)
+            .map(c => c.value);
+        if (dirtyValues.length !== dirtyValueValues.length) {
+            throw new Error(marker(`error.facet-value-form-values-do-not-match`));
+        }
+        return dirtyValues
+            .map((value, i) => {
+            return createUpdatedTranslatable({
+                translatable: value,
+                updatedFields: dirtyValueValues[i],
+                customFieldConfig: this.customValueFields,
+                languageCode,
+                defaultTranslation: {
+                    languageCode,
+                    name: '',
+                },
+            });
+        })
+            .filter(notNullOrUndefined);
+    }
+}
+FacetDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetDetailComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i1$1.ServerConfigService }, { token: i0.ChangeDetectorRef }, { token: i1$1.DataService }, { token: i4.FormBuilder }, { token: i1$1.NotificationService }, { token: i1$1.ModalService }], target: i0.ɵɵFactoryTarget.Component });
+FacetDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FacetDetailComponent, selector: "vdr-facet-detail", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"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\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as facet\">\r\n    <section class=\"form-block\" formGroupName=\"facet\">\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-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(facet.code, $event.target.value)\"\r\n            />\r\n        </vdr-form-field>\r\n        <vdr-form-field\r\n            [label]=\"'common.code' | translate\"\r\n            for=\"code\"\r\n            [readOnlyToggle]=\"updatePermission | hasPermission\"\r\n        >\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\r\n        <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n            <label>{{ 'common.custom-fields' | translate }}</label>\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Facet\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get(['facet', 'customFields'])\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </section>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"facet-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n    </section>\r\n\r\n    <section class=\"form-block\" *ngIf=\"!(isNew$ | async)\">\r\n        <label>{{ 'catalog.facet-values' | translate }}</label>\r\n\r\n        <table class=\"facet-values-list table\" formArrayName=\"values\" *ngIf=\"0 < getValuesFormArray().length\">\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 class=\"facet-value\" *ngFor=\"let value of values; let i = index\" [formGroupName]=\"i\">\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(facet.values[i]?.code, $event.target.value, i)\"\r\n                        />\r\n                    </td>\r\n                    <td class=\"align-middle\"><input type=\"text\" formControlName=\"code\" readonly /></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(facet.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=\"btn btn-secondary\"\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    </section>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-facet-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"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\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as facet\">\r\n    <section class=\"form-block\" formGroupName=\"facet\">\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-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(facet.code, $event.target.value)\"\r\n            />\r\n        </vdr-form-field>\r\n        <vdr-form-field\r\n            [label]=\"'common.code' | translate\"\r\n            for=\"code\"\r\n            [readOnlyToggle]=\"updatePermission | hasPermission\"\r\n        >\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\r\n        <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n            <label>{{ 'common.custom-fields' | translate }}</label>\r\n            <vdr-tabbed-custom-fields\r\n                entityName=\"Facet\"\r\n                [customFields]=\"customFields\"\r\n                [customFieldsFormGroup]=\"detailForm.get(['facet', 'customFields'])\"\r\n                [readonly]=\"!(updatePermission | hasPermission)\"\r\n            ></vdr-tabbed-custom-fields>\r\n        </section>\r\n        <vdr-custom-detail-component-host\r\n            locationId=\"facet-detail\"\r\n            [entity$]=\"entity$\"\r\n            [detailForm]=\"detailForm\"\r\n        ></vdr-custom-detail-component-host>\r\n    </section>\r\n\r\n    <section class=\"form-block\" *ngIf=\"!(isNew$ | async)\">\r\n        <label>{{ 'catalog.facet-values' | translate }}</label>\r\n\r\n        <table class=\"facet-values-list table\" formArrayName=\"values\" *ngIf=\"0 < getValuesFormArray().length\">\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 class=\"facet-value\" *ngFor=\"let value of values; let i = index\" [formGroupName]=\"i\">\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(facet.values[i]?.code, $event.target.value, i)\"\r\n                        />\r\n                    </td>\r\n                    <td class=\"align-middle\"><input type=\"text\" formControlName=\"code\" readonly /></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(facet.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=\"btn btn-secondary\"\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    </section>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i1$1.ServerConfigService }, { type: i0.ChangeDetectorRef }, { type: i1$1.DataService }, { type: i4.FormBuilder }, { type: i1$1.NotificationService }, { type: i1$1.ModalService }]; } });
+
+class FacetListComponent extends BaseListComponent {
+    constructor(dataService, modalService, notificationService, serverConfigService, router, route) {
+        super(router, route);
+        this.dataService = dataService;
+        this.modalService = modalService;
+        this.notificationService = notificationService;
+        this.serverConfigService = serverConfigService;
+        this.filterTermControl = new FormControl('');
+        this.initialLimit = 3;
+        this.displayLimit = {};
+        super.setQueryFn((...args) => this.dataService.facet.getFacets(...args).refetchOnChannelChange(), data => data.facets, (skip, take) => ({
+            options: {
+                skip,
+                take,
+                filter: {
+                    name: {
+                        contains: this.filterTermControl.value,
+                    },
+                },
+                sort: {
+                    createdAt: SortOrder$1.DESC,
+                },
+            },
+        }));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
+        this.contentLanguage$ = this.dataService.client
+            .uiState()
+            .mapStream(({ uiState }) => uiState.contentLanguage)
+            .pipe(tap(() => this.refresh()));
+        this.filterTermControl.valueChanges
+            .pipe(filter(value => 2 <= value.length || value.length === 0), debounceTime(250), takeUntil(this.destroy$))
+            .subscribe(() => this.refresh());
+    }
+    toggleDisplayLimit(facet) {
+        if (this.displayLimit[facet.id] === facet.values.length) {
+            this.displayLimit[facet.id] = this.initialLimit;
+        }
+        else {
+            this.displayLimit[facet.id] = facet.values.length;
+        }
+    }
+    deleteFacet(facetValueId) {
+        this.showModalAndDelete(facetValueId)
+            .pipe(switchMap(response => {
+            if (response.result === DeletionResult.DELETED) {
+                return [true];
+            }
+            else {
+                return this.showModalAndDelete(facetValueId, response.message || '').pipe(map(r => r.result === DeletionResult.DELETED));
+            }
+        }), 
+        // Refresh the cached facets to reflect the changes
+        switchMap(() => this.dataService.facet.getAllFacets().single$))
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-delete-success'), {
+                entity: 'FacetValue',
+            });
+            this.refresh();
+        }, err => {
+            this.notificationService.error(marker('common.notify-delete-error'), {
+                entity: 'FacetValue',
+            });
+        });
+    }
+    setLanguage(code) {
+        this.dataService.client.setContentLanguage(code).subscribe();
+    }
+    showModalAndDelete(facetId, message) {
+        return this.modalService
+            .dialog({
+            title: marker('catalog.confirm-delete-facet'),
+            body: message,
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(res => (res ? this.dataService.facet.deleteFacet(facetId, !!message) : EMPTY)), map(res => res.deleteFacet));
+    }
+}
+FacetListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetListComponent, deps: [{ token: i1$1.DataService }, { token: i1$1.ModalService }, { token: i1$1.NotificationService }, { token: i1$1.ServerConfigService }, { token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+FacetListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: FacetListComponent, selector: "vdr-facet-list", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex center wrap\">\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"filterTermControl\"\r\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                class=\"clr-input search-input ml4\"\r\n            />\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"facet-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-facet' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'catalog.values' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'catalog.visibility' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-facet=\"item\">\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.code }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.name }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-facet-value-chip\r\n                *ngFor=\"let value of facet.values | slice: 0:displayLimit[facet.id] || 3\"\r\n                [facetValue]=\"value\"\r\n                [removable]=\"false\"\r\n                [displayFacetName]=\"false\"\r\n            ></vdr-facet-value-chip>\r\n            <button\r\n                class=\"btn btn-sm btn-secondary btn-icon\"\r\n                *ngIf=\"facet.values.length > initialLimit\"\r\n                (click)=\"toggleDisplayLimit(facet)\"\r\n            >\r\n                <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.values.length; else collapse\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ facet.values.length - initialLimit }}\r\n                </ng-container>\r\n                <ng-template #collapse>\r\n                    <clr-icon shape=\"minus\"></clr-icon>\r\n                </ng-template>\r\n            </button>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-chip>\r\n                <ng-container *ngIf=\"!facet.isPrivate; else private\">{{\r\n                    'catalog.public' | translate\r\n                }}</ng-container>\r\n                <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n            </vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', facet.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteFacet(facet.id)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteFacet'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: ["td.private{background-color:var(--color-component-bg-200)}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1$1.DataTableColumnComponent, selector: "vdr-dt-column", inputs: ["expand"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "slice": i5.SlicePipe, "hasPermission": i1$1.HasPermissionPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-facet-list', template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex center wrap\">\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n            <input\r\n                type=\"text\"\r\n                name=\"searchTerm\"\r\n                [formControl]=\"filterTermControl\"\r\n                [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                class=\"clr-input search-input ml4\"\r\n            />\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"facet-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n            [routerLink]=\"['./create']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-new-facet' | translate }}\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-dt-column>{{ 'common.code' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'common.name' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column [expand]=\"true\">{{ 'catalog.values' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column>{{ 'catalog.visibility' | translate }}</vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <vdr-dt-column></vdr-dt-column>\r\n    <ng-template let-facet=\"item\">\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.code }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">{{ facet.name }}</td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-facet-value-chip\r\n                *ngFor=\"let value of facet.values | slice: 0:displayLimit[facet.id] || 3\"\r\n                [facetValue]=\"value\"\r\n                [removable]=\"false\"\r\n                [displayFacetName]=\"false\"\r\n            ></vdr-facet-value-chip>\r\n            <button\r\n                class=\"btn btn-sm btn-secondary btn-icon\"\r\n                *ngIf=\"facet.values.length > initialLimit\"\r\n                (click)=\"toggleDisplayLimit(facet)\"\r\n            >\r\n                <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.values.length; else collapse\">\r\n                    <clr-icon shape=\"plus\"></clr-icon>\r\n                    {{ facet.values.length - initialLimit }}\r\n                </ng-container>\r\n                <ng-template #collapse>\r\n                    <clr-icon shape=\"minus\"></clr-icon>\r\n                </ng-template>\r\n            </button>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-chip>\r\n                <ng-container *ngIf=\"!facet.isPrivate; else private\">{{\r\n                    'catalog.public' | translate\r\n                }}</ng-container>\r\n                <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n            </vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', facet.id]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.private]=\"facet.isPrivate\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteFacet(facet.id)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteFacet'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: ["td.private{background-color:var(--color-component-bg-200)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DataService }, { type: i1$1.ModalService }, { type: i1$1.NotificationService }, { type: i1$1.ServerConfigService }, { type: i1.Router }, { type: i1.ActivatedRoute }]; } });
+
+class ApplyFacetDialogComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.selectedValues = [];
+    }
+    ngAfterViewInit() {
+        setTimeout(() => this.selector.focus(), 0);
+    }
+    selectValues() {
+        this.resolveWith(this.selectedValues);
+    }
+    cancel() {
+        this.resolveWith();
+    }
+}
+ApplyFacetDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ApplyFacetDialogComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ApplyFacetDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ApplyFacetDialogComponent, selector: "vdr-apply-facet-dialog", viewQueries: [{ propertyName: "selector", first: true, predicate: FacetValueSelectorComponent, descendants: true }], ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'catalog.add-facets' | translate }}</ng-template>\r\n\r\n<vdr-facet-value-selector\r\n    [facets]=\"facets\"\r\n    (selectedValuesChange)=\"selectedValues = $event\"\r\n></vdr-facet-value-selector>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"selectValues()\"\r\n        [disabled]=\"selectedValues.length === 0\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'catalog.add-facets' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i1$1.FacetValueSelectorComponent, selector: "vdr-facet-value-selector", inputs: ["facets", "readonly"], outputs: ["selectedValuesChange"] }], directives: [{ type: i1$1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i1$1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ApplyFacetDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-apply-facet-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'catalog.add-facets' | translate }}</ng-template>\r\n\r\n<vdr-facet-value-selector\r\n    [facets]=\"facets\"\r\n    (selectedValuesChange)=\"selectedValues = $event\"\r\n></vdr-facet-value-selector>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"selectValues()\"\r\n        [disabled]=\"selectedValues.length === 0\"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'catalog.add-facets' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { selector: [{
+                type: ViewChild,
+                args: [FacetValueSelectorComponent]
+            }] } });
+
+class AssignProductsToChannelDialogComponent {
+    constructor(dataService, notificationService) {
+        this.dataService = dataService;
+        this.notificationService = notificationService;
+        this.priceFactorControl = new FormControl(1);
+        this.selectedChannelIdControl = new FormControl();
+    }
+    get isProductVariantMode() {
+        return this.productVariantIds != null;
+    }
+    ngOnInit() {
+        const activeChannelId$ = this.dataService.client
+            .userStatus()
+            .mapSingle(({ userStatus }) => userStatus.activeChannelId);
+        const allChannels$ = this.dataService.settings.getChannels().mapSingle(data => data.channels);
+        combineLatest(activeChannelId$, allChannels$).subscribe(([activeChannelId, channels]) => {
+            // tslint:disable-next-line:no-non-null-assertion
+            this.currentChannel = channels.find(c => c.id === activeChannelId);
+            this.availableChannels = channels;
+        });
+        this.selectedChannelIdControl.valueChanges.subscribe(ids => {
+            this.selectChannel(ids);
+        });
+        this.variantsPreview$ = combineLatest(from(this.getTopVariants(10)), this.priceFactorControl.valueChanges.pipe(startWith(1))).pipe(map(([variants, factor]) => {
+            return variants.map(v => ({
+                id: v.id,
+                name: v.name,
+                price: v.price,
+                pricePreview: v.price * +factor,
+            }));
+        }));
+    }
+    selectChannel(channelIds) {
+        this.selectedChannel = this.availableChannels.find(c => c.id === channelIds[0]);
+    }
+    assign() {
+        const selectedChannel = this.selectedChannel;
+        if (selectedChannel) {
+            if (!this.isProductVariantMode) {
+                this.dataService.product
+                    .assignProductsToChannel({
+                    channelId: selectedChannel.id,
+                    productIds: this.productIds,
+                    priceFactor: +this.priceFactorControl.value,
+                })
+                    .subscribe(() => {
+                    this.notificationService.success(marker('catalog.assign-product-to-channel-success'), {
+                        channel: selectedChannel.code,
+                    });
+                    this.resolveWith(true);
+                });
+            }
+            else if (this.productVariantIds) {
+                this.dataService.product
+                    .assignVariantsToChannel({
+                    channelId: selectedChannel.id,
+                    productVariantIds: this.productVariantIds,
+                    priceFactor: +this.priceFactorControl.value,
+                })
+                    .subscribe(() => {
+                    this.notificationService.success(marker('catalog.assign-variant-to-channel-success'), {
+                        channel: selectedChannel.code,
+                    });
+                    this.resolveWith(true);
+                });
+            }
+        }
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    async getTopVariants(take) {
+        const variants = [];
+        for (let i = 0; i < this.productIds.length && variants.length < take; i++) {
+            const productVariants = await this.dataService.product
+                .getProduct(this.productIds[i], { take: this.isProductVariantMode ? undefined : take })
+                .mapSingle(({ product }) => {
+                const _variants = product ? product.variantList.items : [];
+                return _variants.filter(v => this.isProductVariantMode ? this.productVariantIds?.includes(v.id) : true);
+            })
+                .toPromise();
+            variants.push(...(productVariants || []));
+        }
+        return variants.slice(0, take);
+    }
+}
+AssignProductsToChannelDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssignProductsToChannelDialogComponent, deps: [{ token: i1$1.DataService }, { token: i1$1.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
+AssignProductsToChannelDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: AssignProductsToChannelDialogComponent, selector: "vdr-assign-products-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <ng-container *ngIf=\"isProductVariantMode; else productModeTitle\">{{\r\n        'catalog.assign-variants-to-channel' | translate\r\n    }}</ng-container>\r\n    <ng-template #productModeTitle>{{ 'catalog.assign-products-to-channel' | translate }}</ng-template>\r\n</ng-template>\r\n\r\n<div class=\"flex\">\r\n    <clr-input-container>\r\n        <label>{{ 'common.channel' | translate }}</label>\r\n        <vdr-channel-assignment-control\r\n            clrInput\r\n            [multiple]=\"false\"\r\n            [includeDefaultChannel]=\"false\"\r\n            [disableChannelIds]=\"currentChannelIds\"\r\n            [formControl]=\"selectedChannelIdControl\"\r\n        ></vdr-channel-assignment-control>\r\n    </clr-input-container>\r\n    <div class=\"flex-spacer\"></div>\r\n    <clr-input-container>\r\n        <label>{{ 'catalog.price-conversion-factor' | translate }}</label>\r\n        <input clrInput type=\"number\" min=\"0\" max=\"99999\" [formControl]=\"priceFactorControl\" />\r\n    </clr-input-container>\r\n</div>\r\n\r\n<div class=\"channel-price-preview\">\r\n    <label class=\"clr-control-label\">{{ 'catalog.channel-price-preview' | translate }}</label>\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.name' | translate }}</th>\r\n                <th>\r\n                    {{\r\n                        'catalog.price-in-channel'\r\n                            | translate: { channel: currentChannel?.code | channelCodeToLabel | translate }\r\n                    }}\r\n                </th>\r\n                <th>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n                        {{ 'catalog.price-in-channel' | translate: { channel: selectedChannel?.code } }}\r\n                    </ng-template>\r\n                    <ng-template #noSelection>\r\n                        {{ 'catalog.no-channel-selected' | translate }}\r\n                    </ng-template>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of variantsPreview$ | async\">\r\n                <td>{{ row.name }}</td>\r\n                <td>{{ row.price | localeCurrency: currentChannel?.currencyCode }}</td>\r\n                <td>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noChannelSelected\">\r\n                        {{ row.pricePreview | localeCurrency: selectedChannel?.currencyCode }}\r\n                    </ng-template>\r\n                    <ng-template #noChannelSelected> - </ng-template>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\r\n        <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n            {{ 'catalog.assign-to-named-channel' | translate: { channelCode: selectedChannel?.code } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'catalog.no-channel-selected' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: ["vdr-channel-assignment-control{min-width:200px}.channel-price-preview{margin-top:24px}.channel-price-preview table.table{margin-top:6px}\n"], components: [{ type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }], directives: [{ type: i1$1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i5$1.TranslatePipe, "channelCodeToLabel": i1$1.ChannelLabelPipe, "async": i5.AsyncPipe, "localeCurrency": i1$1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssignProductsToChannelDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-assign-products-to-channel-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    <ng-container *ngIf=\"isProductVariantMode; else productModeTitle\">{{\r\n        'catalog.assign-variants-to-channel' | translate\r\n    }}</ng-container>\r\n    <ng-template #productModeTitle>{{ 'catalog.assign-products-to-channel' | translate }}</ng-template>\r\n</ng-template>\r\n\r\n<div class=\"flex\">\r\n    <clr-input-container>\r\n        <label>{{ 'common.channel' | translate }}</label>\r\n        <vdr-channel-assignment-control\r\n            clrInput\r\n            [multiple]=\"false\"\r\n            [includeDefaultChannel]=\"false\"\r\n            [disableChannelIds]=\"currentChannelIds\"\r\n            [formControl]=\"selectedChannelIdControl\"\r\n        ></vdr-channel-assignment-control>\r\n    </clr-input-container>\r\n    <div class=\"flex-spacer\"></div>\r\n    <clr-input-container>\r\n        <label>{{ 'catalog.price-conversion-factor' | translate }}</label>\r\n        <input clrInput type=\"number\" min=\"0\" max=\"99999\" [formControl]=\"priceFactorControl\" />\r\n    </clr-input-container>\r\n</div>\r\n\r\n<div class=\"channel-price-preview\">\r\n    <label class=\"clr-control-label\">{{ 'catalog.channel-price-preview' | translate }}</label>\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.name' | translate }}</th>\r\n                <th>\r\n                    {{\r\n                        'catalog.price-in-channel'\r\n                            | translate: { channel: currentChannel?.code | channelCodeToLabel | translate }\r\n                    }}\r\n                </th>\r\n                <th>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n                        {{ 'catalog.price-in-channel' | translate: { channel: selectedChannel?.code } }}\r\n                    </ng-template>\r\n                    <ng-template #noSelection>\r\n                        {{ 'catalog.no-channel-selected' | translate }}\r\n                    </ng-template>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of variantsPreview$ | async\">\r\n                <td>{{ row.name }}</td>\r\n                <td>{{ row.price | localeCurrency: currentChannel?.currencyCode }}</td>\r\n                <td>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noChannelSelected\">\r\n                        {{ row.pricePreview | localeCurrency: selectedChannel?.currencyCode }}\r\n                    </ng-template>\r\n                    <ng-template #noChannelSelected> - </ng-template>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\r\n        <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n            {{ 'catalog.assign-to-named-channel' | translate: { channelCode: selectedChannel?.code } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'catalog.no-channel-selected' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: ["vdr-channel-assignment-control{min-width:200px}.channel-price-preview{margin-top:24px}.channel-price-preview table.table{margin-top:6px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DataService }, { type: i1$1.NotificationService }]; } });
+
+/**
+ * @description
+ * Like String.prototype.replace(), but replaces the last instance
+ * rather than the first.
+ */
+function replaceLast(target, search, replace) {
+    if (!target) {
+        return '';
+    }
+    const lastIndex = target.lastIndexOf(search);
+    if (lastIndex === -1) {
+        return target;
+    }
+    const head = target.substr(0, lastIndex);
+    const tail = target.substr(lastIndex).replace(search, replace);
+    return head + tail;
+}
+
+/**
+ * Handles the logic for making the API calls to perform CRUD operations on a Product and its related
+ * entities. This logic was extracted out of the component because it became too large and hard to follow.
+ */
+class ProductDetailService {
+    constructor(dataService) {
+        this.dataService = dataService;
+    }
+    getFacets() {
+        return this.dataService.facet.getAllFacets().mapSingle(data => data.facets.items);
+    }
+    getTaxCategories() {
+        return this.dataService.settings
+            .getTaxCategories()
+            .mapSingle(data => data.taxCategories)
+            .pipe(shareReplay(1));
+    }
+    createProductWithVariants(input, createVariantsConfig, languageCode) {
+        const createProduct$ = this.dataService.product.createProduct(input);
+        const nonEmptyOptionGroups = createVariantsConfig.groups.filter(g => 0 < g.values.length);
+        const createOptionGroups$ = this.createProductOptionGroups(nonEmptyOptionGroups, languageCode);
+        return forkJoin(createProduct$, createOptionGroups$).pipe(mergeMap(([{ createProduct }, optionGroups]) => {
+            const addOptionsToProduct$ = optionGroups.length
+                ? forkJoin(optionGroups.map(optionGroup => {
+                    return this.dataService.product.addOptionGroupToProduct({
+                        productId: createProduct.id,
+                        optionGroupId: optionGroup.id,
+                    });
+                }))
+                : of([]);
+            return addOptionsToProduct$.pipe(map(() => {
+                return { createProduct, optionGroups };
+            }));
+        }), mergeMap(({ createProduct, optionGroups }) => {
+            const variants = createVariantsConfig.variants.map(v => {
+                const optionIds = optionGroups.length
+                    ? v.optionValues.map((optionName, index) => {
+                        const option = optionGroups[index].options.find(o => o.name === optionName);
+                        if (!option) {
+                            throw new Error(`Could not find a matching ProductOption "${optionName}" when creating variant`);
+                        }
+                        return option.id;
+                    })
+                    : [];
+                return {
+                    ...v,
+                    optionIds,
+                };
+            });
+            const options = optionGroups.map(og => og.options).reduce((flat, o) => [...flat, ...o], []);
+            return this.createProductVariants(createProduct, variants, options, languageCode);
+        }));
+    }
+    createProductOptionGroups(groups, languageCode) {
+        return groups.length
+            ? forkJoin(groups.map(c => {
+                return this.dataService.product
+                    .createProductOptionGroups({
+                    code: normalizeString(c.name, '-'),
+                    translations: [{ languageCode, name: c.name }],
+                    options: c.values.map(v => ({
+                        code: normalizeString(v, '-'),
+                        translations: [{ languageCode, name: v }],
+                    })),
+                })
+                    .pipe(map(data => data.createProductOptionGroup));
+            }))
+            : of([]);
+    }
+    createProductVariants(product, variantData, options, languageCode) {
+        const variants = variantData.map(v => {
+            const name = options.length
+                ? `${product.name} ${v.optionIds
+                    .map(id => options.find(o => o.id === id))
+                    .filter(notNullOrUndefined)
+                    .map(o => o.name)
+                    .join(' ')}`
+                : product.name;
+            return {
+                productId: product.id,
+                price: v.price,
+                sku: v.sku,
+                stockOnHand: v.stock,
+                translations: [
+                    {
+                        languageCode,
+                        name,
+                    },
+                ],
+                optionIds: v.optionIds,
+            };
+        });
+        return this.dataService.product.createProductVariants(variants).pipe(map(({ createProductVariants }) => ({
+            createProductVariants,
+            productId: product.id,
+        })));
+    }
+    updateProduct(updateOptions) {
+        const { product, languageCode, autoUpdate, productInput, variantsInput } = updateOptions;
+        const updateOperations = [];
+        const updateVariantsInput = variantsInput || [];
+        const variants$ = autoUpdate
+            ? this.dataService.product
+                .getProductVariants({}, product.id)
+                .mapSingle(({ productVariants }) => productVariants.items)
+            : of([]);
+        return variants$.pipe(mergeMap(variants => {
+            if (productInput) {
+                updateOperations.push(this.dataService.product.updateProduct(productInput));
+                const productOldName = findTranslation(product, languageCode)?.name ?? '';
+                const productNewName = findTranslation(productInput, languageCode)?.name;
+                if (productNewName && productOldName !== productNewName && autoUpdate) {
+                    for (const variant of variants) {
+                        const currentVariantName = findTranslation(variant, languageCode)?.name || '';
+                        let variantInput;
+                        const existingVariantInput = updateVariantsInput.find(i => i.id === variant.id);
+                        if (existingVariantInput) {
+                            variantInput = existingVariantInput;
+                        }
+                        else {
+                            variantInput = {
+                                id: variant.id,
+                                translations: [{ languageCode, name: currentVariantName }],
+                            };
+                            updateVariantsInput.push(variantInput);
+                        }
+                        const variantTranslation = findTranslation(variantInput, languageCode);
+                        if (variantTranslation) {
+                            if (variantTranslation.name) {
+                                variantTranslation.name = replaceLast(variantTranslation.name, productOldName, productNewName);
+                            }
+                            else {
+                                // The variant translation was falsy, which occurs
+                                // when defining the product name for a new translation
+                                // language that had not yet been defined.
+                                variantTranslation.name = [
+                                    productNewName,
+                                    ...variant.options.map(o => o.name),
+                                ].join(' ');
+                            }
+                        }
+                    }
+                }
+            }
+            if (updateVariantsInput.length) {
+                updateOperations.push(this.dataService.product.updateProductVariants(updateVariantsInput));
+            }
+            return forkJoin(updateOperations);
+        }));
+    }
+    updateProductOption(input, product, languageCode) {
+        const variants$ = input.autoUpdate
+            ? this.dataService.product
+                .getProductVariants({}, product.id)
+                .mapSingle(({ productVariants }) => productVariants.items)
+            : of([]);
+        return variants$.pipe(mergeMap(variants => {
+            let updateProductVariantNames$ = of([]);
+            if (input.autoUpdate) {
+                // Update any ProductVariants' names which include the option name
+                let oldOptionName;
+                const newOptionName = findTranslation(input, languageCode)?.name;
+                if (!newOptionName) {
+                    updateProductVariantNames$ = of([]);
+                }
+                const variantsToUpdate = [];
+                for (const variant of variants) {
+                    if (variant.options.map(o => o.id).includes(input.id)) {
+                        if (!oldOptionName) {
+                            oldOptionName = findTranslation(variant.options.find(o => o.id === input.id), languageCode)?.name;
+                        }
+                        const variantName = findTranslation(variant, languageCode)?.name || '';
+                        if (oldOptionName && newOptionName && variantName.includes(oldOptionName)) {
+                            variantsToUpdate.push({
+                                id: variant.id,
+                                translations: [
+                                    {
+                                        languageCode,
+                                        name: replaceLast(variantName, oldOptionName, newOptionName),
+                                    },
+                                ],
+                            });
+                        }
+                    }
+                }
+                if (variantsToUpdate.length) {
+                    updateProductVariantNames$ =
+                        this.dataService.product.updateProductVariants(variantsToUpdate);
+                }
+            }
+            return this.dataService.product
+                .updateProductOption(input)
+                .pipe(mergeMap(() => updateProductVariantNames$));
+        }));
+    }
+    deleteProductVariant(id, productId) {
+        return this.dataService.product.deleteProductVariant(id).pipe(switchMap(result => {
+            if (result.deleteProductVariant.result === DeletionResult.DELETED) {
+                return this.dataService.product.getProduct(productId).single$;
+            }
+            else {
+                return throwError(result.deleteProductVariant.message);
+            }
+        }));
+    }
+}
+ProductDetailService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductDetailService, deps: [{ token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Injectable });
+ProductDetailService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductDetailService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductDetailService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DataService }]; } });
+
+const OPTION_VALUE_INPUT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => OptionValueInputComponent),
+    multi: true,
+};
+class OptionValueInputComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.groupName = '';
+        this.disabled = false;
+        this.input = '';
+        this.isFocussed = false;
+        this.lastSelected = false;
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.changeDetector.markForCheck();
+    }
+    writeValue(obj) {
+        this.options = obj || [];
+    }
+    focus() {
+        this.textArea.nativeElement.focus();
+    }
+    removeOption(option) {
+        if (!option.locked) {
+            this.options = this.options.filter(o => o.name !== option.name);
+            this.onChangeFn(this.options);
+        }
+    }
+    handleKey(event) {
+        switch (event.key) {
+            case ',':
+            case 'Enter':
+                this.addOptionValue();
+                event.preventDefault();
+                break;
+            case 'Backspace':
+                if (this.lastSelected) {
+                    this.removeLastOption();
+                    this.lastSelected = false;
+                }
+                else if (this.input === '') {
+                    this.lastSelected = true;
+                }
+                break;
+            default:
+                this.lastSelected = false;
+        }
+    }
+    handleBlur() {
+        this.isFocussed = false;
+        this.addOptionValue();
+    }
+    addOptionValue() {
+        this.options = unique([...this.options, ...this.parseInputIntoOptions(this.input)]);
+        this.input = '';
+        this.onChangeFn(this.options);
+    }
+    parseInputIntoOptions(input) {
+        return input
+            .split(/[,\n]/)
+            .map(s => s.trim())
+            .filter(s => s !== '')
+            .map(s => ({ name: s, locked: false }));
+    }
+    removeLastOption() {
+        if (!this.options[this.options.length - 1].locked) {
+            this.options = this.options.slice(0, this.options.length - 1);
+        }
+    }
+}
+OptionValueInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OptionValueInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+OptionValueInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: { groupName: "groupName" }, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < options.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of options; last as isLast\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            {{ option.name }}\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n", styles: [".input-wrapper{background-color:#fff;border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}\n"], components: [{ type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OptionValueInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-option-value-input', changeDetection: ChangeDetectionStrategy.Default, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < options.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of options; last as isLast\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            {{ option.name }}\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n", styles: [".input-wrapper{background-color:#fff;border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { groupName: [{
+                type: Input
+            }], textArea: [{
+                type: ViewChild,
+                args: ['textArea', { static: true }]
+            }] } });
+
+const DEFAULT_VARIANT_CODE = '__DEFAULT_VARIANT__';
+class GenerateProductVariantsComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.variantsChange = new EventEmitter();
+        this.optionGroups = [];
+        this.variantFormValues = {};
+    }
+    ngOnInit() {
+        this.dataService.settings.getActiveChannel().single$.subscribe(data => {
+            this.currencyCode = data.activeChannel.currencyCode;
+        });
+        this.generateVariants();
+    }
+    addOption() {
+        this.optionGroups.push({ name: '', values: [] });
+    }
+    removeOption(name) {
+        this.optionGroups = this.optionGroups.filter(g => g.name !== name);
+        this.generateVariants();
+    }
+    generateVariants() {
+        const totalValuesCount = this.optionGroups.reduce((sum, group) => sum + group.values.length, 0);
+        const groups = totalValuesCount
+            ? this.optionGroups.map(g => g.values.map(v => v.name))
+            : [[DEFAULT_VARIANT_CODE]];
+        this.variants = generateAllCombinations(groups).map(values => ({ id: values.join('|'), values }));
+        this.variants.forEach(variant => {
+            if (!this.variantFormValues[variant.id]) {
+                this.variantFormValues[variant.id] = {
+                    optionValues: variant.values,
+                    enabled: true,
+                    price: this.copyFromDefault(variant.id, 'price', 0),
+                    sku: this.copyFromDefault(variant.id, 'sku', ''),
+                    stock: this.copyFromDefault(variant.id, 'stock', 0),
+                };
+            }
+        });
+        this.onFormChange();
+    }
+    trackByFn(index, variant) {
+        return variant.values.join('|');
+    }
+    handleEnter(event, optionValueInputComponent) {
+        event.preventDefault();
+        event.stopPropagation();
+        optionValueInputComponent.focus();
+    }
+    onFormChange() {
+        const variantsToCreate = this.variants.map(v => this.variantFormValues[v.id]).filter(v => v.enabled);
+        this.variantsChange.emit({
+            groups: this.optionGroups.map(og => ({ name: og.name, values: og.values.map(v => v.name) })),
+            variants: variantsToCreate,
+        });
+    }
+    copyFromDefault(variantId, prop, value) {
+        return variantId !== DEFAULT_VARIANT_CODE
+            ? this.variantFormValues[DEFAULT_VARIANT_CODE][prop]
+            : value;
+    }
+}
+GenerateProductVariantsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: GenerateProductVariantsComponent, deps: [{ token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Component });
+GenerateProductVariantsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: { variantsChange: "variantsChange" }, ngImport: i0, template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            placeholder=\"e.g. Size\"\r\n            clrInput\r\n            [(ngModel)]=\"group.name\"\r\n            name=\"name\"\r\n            required\r\n            (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\r\n        />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div class=\"remove-group\">\r\n        <button\r\n            class=\"btn btn-icon btn-warning-outline\"\r\n            [title]=\"'catalog.remove-option' | translate\"\r\n            (click)=\"removeOption(group.name)\"\r\n        >\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"btn btn-primary-outline btn-sm\" (click)=\"addOption()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tr\r\n            *ngFor=\"let variant of variants; trackBy: trackByFn\"\r\n            [class.disabled]=\"!variantFormValues[variant.id].enabled\"\r\n        >\r\n            <td *ngIf=\"1 < variants.length\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    (change)=\"onFormChange()\"\r\n                    [(ngModel)]=\"variantFormValues[variant.id].enabled\"\r\n                    clrCheckbox\r\n                />\r\n            </td>\r\n            <td *ngIf=\"1 < variants.length\">\r\n                {{ variant.values.join(' ') }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        (change)=\"onFormChange()\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variantFormValues[variant.id].price\"\r\n                        (ngModelChange)=\"onFormChange()\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].stock\"\r\n                        (change)=\"onFormChange()\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:120px}.option-groups{display:flex}.values{flex:1;margin:0 6px}.remove-group{padding-top:18px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], components: [{ type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "translate": i5$1.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: GenerateProductVariantsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-generate-product-variants', template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            placeholder=\"e.g. Size\"\r\n            clrInput\r\n            [(ngModel)]=\"group.name\"\r\n            name=\"name\"\r\n            required\r\n            (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\r\n        />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div class=\"remove-group\">\r\n        <button\r\n            class=\"btn btn-icon btn-warning-outline\"\r\n            [title]=\"'catalog.remove-option' | translate\"\r\n            (click)=\"removeOption(group.name)\"\r\n        >\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"btn btn-primary-outline btn-sm\" (click)=\"addOption()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tr\r\n            *ngFor=\"let variant of variants; trackBy: trackByFn\"\r\n            [class.disabled]=\"!variantFormValues[variant.id].enabled\"\r\n        >\r\n            <td *ngIf=\"1 < variants.length\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    (change)=\"onFormChange()\"\r\n                    [(ngModel)]=\"variantFormValues[variant.id].enabled\"\r\n                    clrCheckbox\r\n                />\r\n            </td>\r\n            <td *ngIf=\"1 < variants.length\">\r\n                {{ variant.values.join(' ') }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        (change)=\"onFormChange()\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variantFormValues[variant.id].price\"\r\n                        (ngModelChange)=\"onFormChange()\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].stock\"\r\n                        (change)=\"onFormChange()\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n", styles: [":host{display:block;margin-bottom:120px}.option-groups{display:flex}.values{flex:1;margin:0 6px}.remove-group{padding-top:18px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DataService }]; }, propDecorators: { variantsChange: [{
+                type: Output
+            }] } });
+
+class ProductVariantsTableComponent {
+    constructor(changeDetector) {
+        this.changeDetector = changeDetector;
+        this.formGroupMap = new Map();
+        this.updatePermission = [Permission.UpdateCatalog, Permission.UpdateProduct];
+    }
+    ngOnInit() {
+        this.subscription = this.formArray.valueChanges
+            .pipe(map(value => value.length), debounceTime(1), distinctUntilChanged())
+            .subscribe(() => {
+            this.buildFormGroupMap();
+        });
+        this.buildFormGroupMap();
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    trackByFn(index, item) {
+        if (item.id != null) {
+            return item.id;
+        }
+        else {
+            return index;
+        }
+    }
+    getFeaturedAsset(variant) {
+        return this.pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset;
+    }
+    optionGroupName(optionGroupId) {
+        const group = this.optionGroups.find(g => g.id === optionGroupId);
+        return group && group.name;
+    }
+    buildFormGroupMap() {
+        this.formGroupMap.clear();
+        for (const controlGroup of this.formArray.controls) {
+            this.formGroupMap.set(controlGroup.value.id, controlGroup);
+        }
+        this.changeDetector.markForCheck();
+    }
+}
+ProductVariantsTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ProductVariantsTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantsTableComponent, selector: "vdr-product-variants-table", inputs: { formArray: ["productVariantsFormArray", "formArray"], variants: "variants", paginationConfig: "paginationConfig", channelPriceIncludesTax: "channelPriceIncludesTax", optionGroups: "optionGroups", pendingAssetChanges: "pendingAssetChanges" }, ngImport: i0, template: "<table class=\"table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'common.name' | translate }}</th>\r\n            <th>{{ 'catalog.sku' | translate }}</th>\r\n            <ng-container *ngFor=\"let optionGroup of optionGroups | sort: 'id'\">\r\n                <th>{{ optionGroup.name }}</th>\r\n            </ng-container>\r\n            <th>{{ 'catalog.price' | translate }}</th>\r\n            <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            <th>{{ 'common.enabled' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <tr *ngFor=\"let variant of variants | paginate: paginationConfig; index as i; trackBy: trackByFn\">\r\n            <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <div class=\"card-img\">\r\n                        <div class=\"featured-asset\">\r\n                            <img\r\n                                *ngIf=\"getFeaturedAsset(variant) as featuredAsset; else placeholder\"\r\n                                [src]=\"featuredAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                            <ng-template #placeholder>\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                    </div>\r\n                </td>\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            [placeholder]=\"'common.name' | translate\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"text\"\r\n                            formControlName=\"sku\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            [placeholder]=\"'catalog.sku' | translate\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <ng-container *ngFor=\"let option of variant.options | sort: 'groupId'\">\r\n                    <td\r\n                        class=\"left align-middle\"\r\n                        [class.disabled]=\"!formGroup.get('enabled')!.value\"\r\n                        [style.color]=\"optionGroupName(option.groupId) | stringToColor\"\r\n                    >\r\n                        {{ option.name }}\r\n                    </td>\r\n                </ng-container>\r\n                <td class=\"left align-middle price\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <vdr-currency-input\r\n                            *ngIf=\"!channelPriceIncludesTax\"\r\n                            clrInput\r\n                            [currencyCode]=\"variant.currencyCode\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"price\"\r\n                        ></vdr-currency-input>\r\n                        <vdr-currency-input\r\n                            *ngIf=\"channelPriceIncludesTax\"\r\n                            clrInput\r\n                            [currencyCode]=\"variant.currencyCode\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"priceWithTax\"\r\n                        ></vdr-currency-input>\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"number\"\r\n                            min=\"0\"\r\n                            step=\"1\"\r\n                            formControlName=\"stockOnHand\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            formControlName=\"enabled\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </clr-toggle-wrapper>\r\n                </td>\r\n            </ng-container>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n", styles: [".placeholder{color:var(--color-grey-300)}.stock input,.price input{max-width:96px}td{transition:background-color .2s}td.disabled{background-color:var(--color-component-bg-200)}\n"], components: [{ type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i1$1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }], pipes: { "translate": i5$1.TranslatePipe, "sort": i1$1.SortPipe, "paginate": i4$1.PaginatePipe, "assetPreview": i1$1.AssetPreviewPipe, "hasPermission": i1$1.HasPermissionPipe, "stringToColor": i1$1.StringToColorPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-product-variants-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'common.name' | translate }}</th>\r\n            <th>{{ 'catalog.sku' | translate }}</th>\r\n            <ng-container *ngFor=\"let optionGroup of optionGroups | sort: 'id'\">\r\n                <th>{{ optionGroup.name }}</th>\r\n            </ng-container>\r\n            <th>{{ 'catalog.price' | translate }}</th>\r\n            <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            <th>{{ 'common.enabled' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <tr *ngFor=\"let variant of variants | paginate: paginationConfig; index as i; trackBy: trackByFn\">\r\n            <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <div class=\"card-img\">\r\n                        <div class=\"featured-asset\">\r\n                            <img\r\n                                *ngIf=\"getFeaturedAsset(variant) as featuredAsset; else placeholder\"\r\n                                [src]=\"featuredAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                            <ng-template #placeholder>\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                    </div>\r\n                </td>\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            [placeholder]=\"'common.name' | translate\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"text\"\r\n                            formControlName=\"sku\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            [placeholder]=\"'catalog.sku' | translate\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <ng-container *ngFor=\"let option of variant.options | sort: 'groupId'\">\r\n                    <td\r\n                        class=\"left align-middle\"\r\n                        [class.disabled]=\"!formGroup.get('enabled')!.value\"\r\n                        [style.color]=\"optionGroupName(option.groupId) | stringToColor\"\r\n                    >\r\n                        {{ option.name }}\r\n                    </td>\r\n                </ng-container>\r\n                <td class=\"left align-middle price\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <vdr-currency-input\r\n                            *ngIf=\"!channelPriceIncludesTax\"\r\n                            clrInput\r\n                            [currencyCode]=\"variant.currencyCode\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"price\"\r\n                        ></vdr-currency-input>\r\n                        <vdr-currency-input\r\n                            *ngIf=\"channelPriceIncludesTax\"\r\n                            clrInput\r\n                            [currencyCode]=\"variant.currencyCode\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"priceWithTax\"\r\n                        ></vdr-currency-input>\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"number\"\r\n                            min=\"0\"\r\n                            step=\"1\"\r\n                            formControlName=\"stockOnHand\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            formControlName=\"enabled\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </clr-toggle-wrapper>\r\n                </td>\r\n            </ng-container>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n", styles: [".placeholder{color:var(--color-grey-300)}.stock input,.price input{max-width:96px}td{transition:background-color .2s}td.disabled{background-color:var(--color-component-bg-200)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formArray: [{
+                type: Input,
+                args: ['productVariantsFormArray']
+            }], variants: [{
+                type: Input
+            }], paginationConfig: [{
+                type: Input
+            }], channelPriceIncludesTax: [{
+                type: Input
+            }], optionGroups: [{
+                type: Input
+            }], pendingAssetChanges: [{
+                type: Input
+            }] } });
+
+class UpdateProductOptionDialogComponent {
+    constructor() {
+        this.updateVariantName = true;
+        this.codeInputTouched = false;
+    }
+    ngOnInit() {
+        const currentTranslation = this.productOption.translations.find(t => t.languageCode === this.activeLanguage);
+        this.name = currentTranslation?.name ?? '';
+        this.code = this.productOption.code;
+        this.customFieldsForm = new FormGroup({});
+        if (this.customFields) {
+            const cfCurrentTranslation = (currentTranslation && currentTranslation.customFields) || {};
+            for (const fieldDef of this.customFields) {
+                const key = fieldDef.name;
+                const value = fieldDef.type === 'localeString'
+                    ? cfCurrentTranslation[key]
+                    : this.productOption.customFields[key];
+                this.customFieldsForm.addControl(fieldDef.name, new FormControl(value));
+            }
+        }
+    }
+    update() {
+        const result = createUpdatedTranslatable({
+            translatable: this.productOption,
+            languageCode: this.activeLanguage,
+            updatedFields: {
+                code: this.code,
+                name: this.name,
+                customFields: this.customFieldsForm.value,
+            },
+            customFieldConfig: this.customFields,
+            defaultTranslation: {
+                languageCode: this.activeLanguage,
+                name: '',
+            },
+        });
+        this.resolveWith({ ...result, autoUpdate: this.updateVariantName });
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    updateCode(nameValue) {
+        if (!this.codeInputTouched && !this.productOption.code) {
+            this.code = normalizeString(nameValue, '-');
+        }
+    }
+}
+UpdateProductOptionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UpdateProductOptionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+UpdateProductOptionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: UpdateProductOptionDialogComponent, selector: "vdr-update-product-option-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'catalog.update-product-option' | translate }}</ng-template>\r\n<vdr-form-field [label]=\"'catalog.option-name' | translate\" for=\"name\">\r\n    <input\r\n        id=\"name\"\r\n        type=\"text\"\r\n        #nameInput=\"ngModel\"\r\n        [(ngModel)]=\"name\"\r\n        required\r\n        (input)=\"updateCode($event.target.value)\"\r\n    />\r\n</vdr-form-field>\r\n<vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n    <input id=\"code\" type=\"text\" #codeInput=\"ngModel\" required [(ngModel)]=\"code\" pattern=\"[a-z0-9_-]+\" />\r\n</vdr-form-field>\r\n<clr-checkbox-wrapper>\r\n    <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"updateVariantName\" />\r\n    <label>{{ 'catalog.auto-update-option-variant-name' | translate }}</label>\r\n</clr-checkbox-wrapper>\r\n<section *ngIf=\"customFields.length\">\r\n    <label>{{ 'common.custom-fields' | translate }}</label>\r\n    <vdr-tabbed-custom-fields\r\n        entityName=\"ProductOption\"\r\n        [customFields]=\"customFields\"\r\n        [customFieldsFormGroup]=\"customFieldsForm\"\r\n        [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n    ></vdr-tabbed-custom-fields>\r\n</section>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"update()\"\r\n        [disabled]=\"\r\n            nameInput.invalid ||\r\n            codeInput.invalid ||\r\n            (nameInput.pristine && codeInput.pristine && customFieldsForm.pristine)\r\n        \"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'catalog.update-product-option' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], components: [{ type: i1$1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }], directives: [{ type: i1$1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: UpdateProductOptionDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-update-product-option-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>{{ 'catalog.update-product-option' | translate }}</ng-template>\r\n<vdr-form-field [label]=\"'catalog.option-name' | translate\" for=\"name\">\r\n    <input\r\n        id=\"name\"\r\n        type=\"text\"\r\n        #nameInput=\"ngModel\"\r\n        [(ngModel)]=\"name\"\r\n        required\r\n        (input)=\"updateCode($event.target.value)\"\r\n    />\r\n</vdr-form-field>\r\n<vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n    <input id=\"code\" type=\"text\" #codeInput=\"ngModel\" required [(ngModel)]=\"code\" pattern=\"[a-z0-9_-]+\" />\r\n</vdr-form-field>\r\n<clr-checkbox-wrapper>\r\n    <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"updateVariantName\" />\r\n    <label>{{ 'catalog.auto-update-option-variant-name' | translate }}</label>\r\n</clr-checkbox-wrapper>\r\n<section *ngIf=\"customFields.length\">\r\n    <label>{{ 'common.custom-fields' | translate }}</label>\r\n    <vdr-tabbed-custom-fields\r\n        entityName=\"ProductOption\"\r\n        [customFields]=\"customFields\"\r\n        [customFieldsFormGroup]=\"customFieldsForm\"\r\n        [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n    ></vdr-tabbed-custom-fields>\r\n</section>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"update()\"\r\n        [disabled]=\"\r\n            nameInput.invalid ||\r\n            codeInput.invalid ||\r\n            (nameInput.pristine && codeInput.pristine && customFieldsForm.pristine)\r\n        \"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'catalog.update-product-option' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""] }]
+        }] });
+
+class VariantPriceDetailComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.priceChange$ = new BehaviorSubject(0);
+        this.taxCategoryIdChange$ = new BehaviorSubject('');
+    }
+    ngOnInit() {
+        const taxRates$ = this.dataService.settings
+            .getTaxRatesSimple(999, 0, 'cache-first')
+            .mapStream(data => data.taxRates.items);
+        const activeChannel$ = this.dataService.settings
+            .getActiveChannel('cache-first')
+            .refetchOnChannelChange()
+            .mapStream(data => data.activeChannel);
+        this.taxRate$ = combineLatest(activeChannel$, taxRates$, this.taxCategoryIdChange$).pipe(map(([channel, taxRates, taxCategoryId]) => {
+            const defaultTaxZone = channel.defaultTaxZone;
+            if (!defaultTaxZone) {
+                return 0;
+            }
+            const applicableRate = taxRates.find(taxRate => taxRate.zone.id === defaultTaxZone.id && taxRate.category.id === taxCategoryId);
+            if (!applicableRate) {
+                return 0;
+            }
+            return applicableRate.value;
+        }));
+        this.grossPrice$ = combineLatest(this.taxRate$, this.priceChange$).pipe(map(([taxRate, price]) => {
+            return Math.round(price * ((100 + taxRate) / 100));
+        }));
+    }
+    ngOnChanges(changes) {
+        if ('price' in changes) {
+            this.priceChange$.next(changes.price.currentValue);
+        }
+        if ('taxCategoryId' in changes) {
+            this.taxCategoryIdChange$.next(changes.taxCategoryId.currentValue);
+        }
+    }
+}
+VariantPriceDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: VariantPriceDetailComponent, deps: [{ token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Component });
+VariantPriceDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: { priceIncludesTax: "priceIncludesTax", price: "price", currencyCode: "currencyCode", taxCategoryId: "taxCategoryId" }, usesOnChanges: true, ngImport: i0, template: "<label class=\"clr-control-label\">{{ 'catalog.taxes' | translate }}</label>\r\n<div *ngIf=\"priceIncludesTax\" class=\"value\">\r\n    {{ 'catalog.price-includes-tax-at' | translate: { rate: taxRate$ | async } }}\r\n</div>\r\n<div *ngIf=\"!priceIncludesTax\" class=\"value\">\r\n    {{\r\n        'catalog.price-with-tax-in-default-zone'\r\n            | translate: { price: grossPrice$ | async | localeCurrency: currencyCode, rate: taxRate$ | async }\r\n    }}\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column}.value{margin-top:3px}\n"], directives: [{ type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i5$1.TranslatePipe, "async": i5.AsyncPipe, "localeCurrency": i1$1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: VariantPriceDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-variant-price-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label class=\"clr-control-label\">{{ 'catalog.taxes' | translate }}</label>\r\n<div *ngIf=\"priceIncludesTax\" class=\"value\">\r\n    {{ 'catalog.price-includes-tax-at' | translate: { rate: taxRate$ | async } }}\r\n</div>\r\n<div *ngIf=\"!priceIncludesTax\" class=\"value\">\r\n    {{\r\n        'catalog.price-with-tax-in-default-zone'\r\n            | translate: { price: grossPrice$ | async | localeCurrency: currencyCode, rate: taxRate$ | async }\r\n    }}\r\n</div>\r\n", styles: [":host{display:flex;flex-direction:column}.value{margin-top:3px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DataService }]; }, propDecorators: { priceIncludesTax: [{
+                type: Input
+            }], price: [{
+                type: Input
+            }], currencyCode: [{
+                type: Input
+            }], taxCategoryId: [{
+                type: Input
+            }] } });
+
+class ProductVariantsListComponent {
+    constructor(changeDetector, modalService, dataService) {
+        this.changeDetector = changeDetector;
+        this.modalService = modalService;
+        this.dataService = dataService;
+        this.assignToChannel = new EventEmitter();
+        this.removeFromChannel = new EventEmitter();
+        this.assetChange = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+        this.selectFacetValueClick = new EventEmitter();
+        this.updateProductOption = new EventEmitter();
+        this.selectedVariantIds = [];
+        this.formGroupMap = new Map();
+        this.GlobalFlag = GlobalFlag;
+        this.updatePermission = [Permission.UpdateCatalog, Permission.UpdateProduct];
+    }
+    ngOnInit() {
+        this.dataService.settings.getGlobalSettings('cache-first').single$.subscribe(({ globalSettings }) => {
+            this.globalTrackInventory = globalSettings.trackInventory;
+            this.globalOutOfStockThreshold = globalSettings.outOfStockThreshold;
+            this.changeDetector.markForCheck();
+        });
+        this.subscription = this.formArray.valueChanges.subscribe(() => this.changeDetector.markForCheck());
+        this.subscription.add(this.formArray.valueChanges
+            .pipe(map(value => value.length), debounceTime(1), distinctUntilChanged())
+            .subscribe(() => {
+            this.buildFormGroupMap();
+        }));
+        this.buildFormGroupMap();
+    }
+    ngOnChanges(changes) {
+        if ('facets' in changes && !!changes['facets'].currentValue) {
+            this.facetValues = flattenFacetValues(this.facets);
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+    isDefaultChannel(channelCode) {
+        return channelCode === DEFAULT_CHANNEL_CODE;
+    }
+    trackById(index, item) {
+        return item.id;
+    }
+    inventoryIsNotTracked(formGroup) {
+        const trackInventory = formGroup.get('trackInventory')?.value;
+        return (trackInventory === GlobalFlag.FALSE ||
+            (trackInventory === GlobalFlag.INHERIT && this.globalTrackInventory === false));
+    }
+    getTaxCategoryName(group) {
+        const control = group.get(['taxCategoryId']);
+        if (control && this.taxCategories) {
+            const match = this.taxCategories.find(t => t.id === control.value);
+            return match ? match.name : '';
+        }
+        return '';
+    }
+    getSaleableStockLevel(variant) {
+        const effectiveOutOfStockThreshold = variant.useGlobalOutOfStockThreshold
+            ? this.globalOutOfStockThreshold
+            : variant.outOfStockThreshold;
+        return variant.stockOnHand - variant.stockAllocated - effectiveOutOfStockThreshold;
+    }
+    areAllSelected() {
+        return !!this.variants && this.selectedVariantIds.length === this.variants.length;
+    }
+    onAssetChange(variantId, event) {
+        this.assetChange.emit({
+            variantId,
+            ...event,
+        });
+        const index = this.variants.findIndex(v => v.id === variantId);
+        this.formArray.at(index).markAsDirty();
+    }
+    toggleSelectAll() {
+        if (this.areAllSelected()) {
+            this.selectedVariantIds = [];
+        }
+        else {
+            this.selectedVariantIds = this.variants.map(v => v.id);
+        }
+        this.selectionChange.emit(this.selectedVariantIds);
+    }
+    toggleSelectVariant(variantId) {
+        const index = this.selectedVariantIds.indexOf(variantId);
+        if (-1 < index) {
+            this.selectedVariantIds.splice(index, 1);
+        }
+        else {
+            this.selectedVariantIds.push(variantId);
+        }
+        this.selectionChange.emit(this.selectedVariantIds);
+    }
+    optionGroupName(optionGroupId) {
+        const group = this.optionGroups.find(g => g.id === optionGroupId);
+        if (group) {
+            const translation = group?.translations.find(t => t.languageCode === this.activeLanguage) ??
+                group.translations[0];
+            return translation.name;
+        }
+    }
+    optionName(option) {
+        const translation = option.translations.find(t => t.languageCode === this.activeLanguage) ?? option.translations[0];
+        return translation.name;
+    }
+    pendingFacetValues(variant) {
+        if (this.facets) {
+            const formFacetValueIds = this.getFacetValueIds(variant.id);
+            const variantFacetValueIds = variant.facetValues.map(fv => fv.id);
+            return formFacetValueIds
+                .filter(x => !variantFacetValueIds.includes(x))
+                .map(id => this.facetValues.find(fv => fv.id === id))
+                .filter(notNullOrUndefined);
+        }
+        else {
+            return [];
+        }
+    }
+    existingFacetValues(variant) {
+        const formFacetValueIds = this.getFacetValueIds(variant.id);
+        const intersection = [...formFacetValueIds].filter(x => variant.facetValues.map(fv => fv.id).includes(x));
+        return intersection
+            .map(id => variant.facetValues.find(fv => fv.id === id))
+            .filter(notNullOrUndefined);
+    }
+    removeFacetValue(variant, facetValueId) {
+        const formGroup = this.formGroupMap.get(variant.id);
+        if (formGroup) {
+            const newValue = formGroup.value.facetValueIds.filter(id => id !== facetValueId);
+            formGroup.patchValue({
+                facetValueIds: newValue,
+            });
+            formGroup.markAsDirty();
+        }
+    }
+    isVariantSelected(variantId) {
+        return -1 < this.selectedVariantIds.indexOf(variantId);
+    }
+    editOption(option) {
+        this.modalService
+            .fromComponent(UpdateProductOptionDialogComponent, {
+            size: 'md',
+            locals: {
+                productOption: option,
+                activeLanguage: this.activeLanguage,
+                customFields: this.customOptionFields,
+            },
+        })
+            .subscribe(result => {
+            if (result) {
+                this.updateProductOption.emit(result);
+            }
+        });
+    }
+    buildFormGroupMap() {
+        this.formGroupMap.clear();
+        for (const controlGroup of this.formArray.controls) {
+            this.formGroupMap.set(controlGroup.value.id, controlGroup);
+        }
+        this.changeDetector.markForCheck();
+    }
+    getFacetValueIds(id) {
+        const formValue = this.formGroupMap.get(id)?.value;
+        return formValue.facetValueIds;
+    }
+}
+ProductVariantsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.ModalService }, { token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Component });
+ProductVariantsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantsListComponent, selector: "vdr-product-variants-list", inputs: { formArray: ["productVariantsFormArray", "formArray"], variants: "variants", paginationConfig: "paginationConfig", channelPriceIncludesTax: "channelPriceIncludesTax", taxCategories: "taxCategories", facets: "facets", optionGroups: "optionGroups", customFields: "customFields", customOptionFields: "customOptionFields", activeLanguage: "activeLanguage", pendingAssetChanges: "pendingAssetChanges" }, outputs: { assignToChannel: "assignToChannel", removeFromChannel: "removeFromChannel", assetChange: "assetChange", selectionChange: "selectionChange", selectFacetValueClick: "selectFacetValueClick", updateProductOption: "updateProductOption" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"variants-list\">\r\n    <div\r\n        class=\"variant-container card\"\r\n        *ngFor=\"\r\n            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };\r\n            trackBy: trackById;\r\n            let i = index\r\n        \"\r\n        [class.disabled]=\"!formGroupMap.get(variant.id)?.get('enabled')?.value\"\r\n    >\r\n        <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n            <div class=\"card-block header-row\">\r\n                <div class=\"details\">\r\n                    <vdr-title-input class=\"sku\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"sku\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'catalog.sku' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                    <vdr-title-input class=\"name\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'common.name' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                </div>\r\n                <div class=\"right-controls\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermission\">\r\n                        <input type=\"checkbox\" clrToggle name=\"enabled\" formControlName=\"enabled\" />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"variant-body\">\r\n                    <div class=\"assets\">\r\n                        <vdr-assets\r\n                            [compact]=\"true\"\r\n                            [assets]=\"pendingAssetChanges[variant.id]?.assets || variant.assets\"\r\n                            [featuredAsset]=\"\r\n                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset\r\n                            \"\r\n                            [updatePermissions]=\"updatePermission\"\r\n                            (change)=\"onAssetChange(variant.id, $event)\"\r\n                        ></vdr-assets>\r\n                    </div>\r\n                    <div class=\"variant-form-inputs\">\r\n                        <div class=\"standard-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div class=\"tax-category\">\r\n                                    <clr-select-container\r\n                                        *vdrIfPermissions=\"updatePermission; else taxCategoryLabel\"\r\n                                    >\r\n                                        <label>{{ 'catalog.tax-category' | translate }}</label>\r\n                                        <select clrSelect name=\"options\" formControlName=\"taxCategoryId\">\r\n                                            <option\r\n                                                *ngFor=\"let taxCategory of taxCategories\"\r\n                                                [value]=\"taxCategory.id\"\r\n                                            >\r\n                                                {{ taxCategory.name }}\r\n                                            </option>\r\n                                        </select>\r\n                                    </clr-select-container>\r\n                                    <ng-template #taxCategoryLabel>\r\n                                        <label class=\"clr-control-label\">{{\r\n                                            'catalog.tax-category' | translate\r\n                                        }}</label>\r\n                                        <div class=\"tax-category-label\">\r\n                                            {{ getTaxCategoryName(formGroup) }}\r\n                                        </div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"price\">\r\n                                    <clr-input-container>\r\n                                        <label>{{ 'catalog.price' | translate }}</label>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"!channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"price\"\r\n                                        ></vdr-currency-input>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"priceWithTax\"\r\n                                        ></vdr-currency-input>\r\n                                    </clr-input-container>\r\n                                </div>\r\n                                <vdr-variant-price-detail\r\n                                    [price]=\"formGroup.get('price')!.value\"\r\n                                    [currencyCode]=\"variant.currencyCode\"\r\n                                    [priceIncludesTax]=\"channelPriceIncludesTax\"\r\n                                    [taxCategoryId]=\"formGroup.get('taxCategoryId')!.value\"\r\n                                ></vdr-variant-price-detail>\r\n                            </div>\r\n                            <div class=\"variant-form-input-row\">\r\n                                <clr-select-container *vdrIfPermissions=\"updatePermission\">\r\n                                    <label\r\n                                        >{{ 'catalog.track-inventory' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip>\r\n                                    </label>\r\n                                    <select clrSelect name=\"options\" formControlName=\"trackInventory\">\r\n                                        <option [value]=\"GlobalFlag.TRUE\">\r\n                                            {{ 'catalog.track-inventory-true' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.FALSE\">\r\n                                            {{ 'catalog.track-inventory-false' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.INHERIT\">\r\n                                            {{ 'catalog.track-inventory-inherit' | translate }}\r\n                                        </option>\r\n                                    </select>\r\n                                </clr-select-container>\r\n                                <clr-input-container>\r\n                                    <label\r\n                                        >{{ 'catalog.stock-on-hand' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-on-hand-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <input\r\n                                        [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                        clrInput\r\n                                        type=\"number\"\r\n                                        min=\"0\"\r\n                                        step=\"1\"\r\n                                        formControlName=\"stockOnHand\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        [vdrDisabled]=\"inventoryIsNotTracked(formGroup)\"\r\n                                    />\r\n                                </clr-input-container>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-allocated' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-allocated-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ variant.stockAllocated }}\r\n                                    </div>\r\n                                </div>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-saleable' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-saleable-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ getSaleableStockLevel(variant) }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div\r\n                                    class=\"out-of-stock-threshold-wrapper\"\r\n                                    [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                >\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.out-of-stock-threshold' | translate\r\n                                        }}<vdr-help-tooltip\r\n                                            [content]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"flex\">\r\n                                        <clr-input-container>\r\n                                            <input\r\n                                                clrInput\r\n                                                type=\"number\"\r\n                                                [formControl]=\"formGroup.get('outOfStockThreshold')\"\r\n                                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                                [vdrDisabled]=\"\r\n                                                    formGroup.get('useGlobalOutOfStockThreshold')?.value !==\r\n                                                        false || inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                        </clr-input-container>\r\n                                        <clr-toggle-wrapper>\r\n                                            <input\r\n                                                type=\"checkbox\"\r\n                                                clrToggle\r\n                                                name=\"useGlobalOutOfStockThreshold\"\r\n                                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                                [vdrDisabled]=\"\r\n                                                    !(updatePermission | hasPermission) ||\r\n                                                    inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                            <label\r\n                                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                                    globalOutOfStockThreshold\r\n                                                }})</label\r\n                                            >\r\n                                        </clr-toggle-wrapper>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"custom-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"ProductVariant\"\r\n                                        [customFields]=\"customFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"formGroup.get('customFields')\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </section>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"options-facets\">\r\n                    <vdr-entity-info [entity]=\"variant\"></vdr-entity-info>\r\n                    <div *ngIf=\"variant.options.length\">\r\n                        <div class=\"options\">\r\n                            <vdr-chip\r\n                                *ngFor=\"let option of variant.options | sort: 'groupId'\"\r\n                                [colorFrom]=\"optionGroupName(option.groupId)\"\r\n                                [invert]=\"true\"\r\n                                (iconClick)=\"editOption(option)\"\r\n                                [icon]=\"(updatePermission | hasPermission) && 'pencil'\"\r\n                            >\r\n                                <span class=\"option-group-name\">{{ optionGroupName(option.groupId) }}</span>\r\n                                {{ optionName(option) }}\r\n                            </vdr-chip>\r\n                            <a [routerLink]=\"['./', 'options']\" class=\"btn btn-link btn-sm\"\r\n                                >{{ 'catalog.edit-options' | translate }}...</a\r\n                            >\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex-spacer\"></div>\r\n                    <div class=\"facets\">\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of existingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of pendingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <button\r\n                            *vdrIfPermissions=\"updatePermission\"\r\n                            class=\"btn btn-sm btn-secondary\"\r\n                            (click)=\"selectFacetValueClick.emit([variant.id])\"\r\n                        >\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            {{ 'catalog.add-facets' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *vdrIfMultichannel>\r\n                <div class=\"card-block\" *vdrIfDefaultChannelActive>\r\n                    <div class=\"flex channel-assignment\">\r\n                        <ng-container *ngFor=\"let channel of variant.channels\">\r\n                            <vdr-chip\r\n                                *ngIf=\"!isDefaultChannel(channel.code)\"\r\n                                icon=\"times-circle\"\r\n                                [title]=\"'catalog.remove-from-channel' | translate\"\r\n                                (iconClick)=\"\r\n                                    removeFromChannel.emit({ channelId: channel.id, variant: variant })\r\n                                \"\r\n                            >\r\n                                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                {{ channel.code | channelCodeToLabel }}\r\n                            </vdr-chip>\r\n                        </ng-container>\r\n                        <button class=\"btn btn-sm\" (click)=\"assignToChannel.emit(variant)\">\r\n                            <clr-icon shape=\"layers\"></clr-icon>\r\n                            {{ 'catalog.assign-to-channel' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".with-selected{display:flex;min-height:52px;align-items:center;border:1px solid var(--color-component-border-100);border-radius:3px;padding:6px 18px}.with-selected vdr-select-toggle{margin-right:12px}.with-selected>label{margin-right:12px}.variant-container{transition:background-color .2s;min-height:330px}.variant-container.disabled{background-color:var(--color-component-bg-200)}.variant-container .header-row{display:flex;align-items:center;flex-wrap:wrap}.variant-container .variant-body{display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-body{flex-direction:row}}.variant-container .details{display:flex;flex-direction:column;flex:1;margin-right:12px}@media screen and (min-width: 768px){.variant-container .details{flex-direction:row;height:36px}}.variant-container .details .name{flex:1}.variant-container .details .name ::ng-deep .clr-control-container{width:100%}.variant-container .details .name ::ng-deep .clr-control-container input.clr-input{min-width:100%}.variant-container .details .sku{width:160px;margin-right:20px;flex:0}.variant-container .details ::ng-deep .name input{min-width:300px}.variant-container .right-controls{display:flex}.variant-container .tax-category-label{margin-top:3px}.variant-container .variant-form-inputs{flex:1;display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-form-inputs{flex-direction:row}}.variant-container .variant-form-input-row{display:flex;flex-wrap:wrap}@media screen and (min-width: 768px){.variant-container .variant-form-input-row{margin:0 6px 8px 24px}}.variant-container .variant-form-input-row>*{margin-right:24px;margin-bottom:24px}.variant-container .track-inventory-toggle{margin-top:22px}.variant-container .clr-form-control{margin-top:0}.variant-container .facets{display:flex;flex-wrap:wrap;align-items:center}.variant-container .pricing{display:flex}.variant-container .pricing>div{margin-right:12px}.variant-container .option-group-name{color:var(--color-text-200);text-transform:uppercase;font-size:10px;margin-right:3px;height:11px}.variant-container .options-facets{display:flex;color:var(--color-grey-400)}.variant-container ::ng-deep .clr-control-container{width:100%}.channel-assignment{justify-content:flex-end}.channel-assignment .btn{margin:6px 12px 6px 0}.out-of-stock-threshold-wrapper{display:flex;flex-direction:column}.out-of-stock-threshold-wrapper clr-toggle-wrapper{margin-left:24px}.inventory-untracked{opacity:.5}\n"], components: [{ type: i1$1.TitleInputComponent, selector: "vdr-title-input", inputs: ["readonly"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { type: i2.ClrSelectContainer, selector: "clr-select-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { type: i1$1.HelpTooltipComponent, selector: "vdr-help-tooltip", inputs: ["content", "position"] }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: i1$1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i2.ClrSelect, selector: "[clrSelect]" }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i1$1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }], pipes: { "paginate": i4$1.PaginatePipe, "hasPermission": i1$1.HasPermissionPipe, "translate": i5$1.TranslatePipe, "sort": i1$1.SortPipe, "channelCodeToLabel": i1$1.ChannelLabelPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-product-variants-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"variants-list\">\r\n    <div\r\n        class=\"variant-container card\"\r\n        *ngFor=\"\r\n            let variant of variants | paginate: paginationConfig || { itemsPerPage: 10, currentPage: 1 };\r\n            trackBy: trackById;\r\n            let i = index\r\n        \"\r\n        [class.disabled]=\"!formGroupMap.get(variant.id)?.get('enabled')?.value\"\r\n    >\r\n        <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n            <div class=\"card-block header-row\">\r\n                <div class=\"details\">\r\n                    <vdr-title-input class=\"sku\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"sku\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'catalog.sku' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                    <vdr-title-input class=\"name\" [readonly]=\"!(updatePermission | hasPermission)\">\r\n                        <clr-input-container>\r\n                            <input\r\n                                clrInput\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                [placeholder]=\"'common.name' | translate\"\r\n                            />\r\n                        </clr-input-container>\r\n                    </vdr-title-input>\r\n                </div>\r\n                <div class=\"right-controls\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermission\">\r\n                        <input type=\"checkbox\" clrToggle name=\"enabled\" formControlName=\"enabled\" />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"variant-body\">\r\n                    <div class=\"assets\">\r\n                        <vdr-assets\r\n                            [compact]=\"true\"\r\n                            [assets]=\"pendingAssetChanges[variant.id]?.assets || variant.assets\"\r\n                            [featuredAsset]=\"\r\n                                pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset\r\n                            \"\r\n                            [updatePermissions]=\"updatePermission\"\r\n                            (change)=\"onAssetChange(variant.id, $event)\"\r\n                        ></vdr-assets>\r\n                    </div>\r\n                    <div class=\"variant-form-inputs\">\r\n                        <div class=\"standard-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div class=\"tax-category\">\r\n                                    <clr-select-container\r\n                                        *vdrIfPermissions=\"updatePermission; else taxCategoryLabel\"\r\n                                    >\r\n                                        <label>{{ 'catalog.tax-category' | translate }}</label>\r\n                                        <select clrSelect name=\"options\" formControlName=\"taxCategoryId\">\r\n                                            <option\r\n                                                *ngFor=\"let taxCategory of taxCategories\"\r\n                                                [value]=\"taxCategory.id\"\r\n                                            >\r\n                                                {{ taxCategory.name }}\r\n                                            </option>\r\n                                        </select>\r\n                                    </clr-select-container>\r\n                                    <ng-template #taxCategoryLabel>\r\n                                        <label class=\"clr-control-label\">{{\r\n                                            'catalog.tax-category' | translate\r\n                                        }}</label>\r\n                                        <div class=\"tax-category-label\">\r\n                                            {{ getTaxCategoryName(formGroup) }}\r\n                                        </div>\r\n                                    </ng-template>\r\n                                </div>\r\n                                <div class=\"price\">\r\n                                    <clr-input-container>\r\n                                        <label>{{ 'catalog.price' | translate }}</label>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"!channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"price\"\r\n                                        ></vdr-currency-input>\r\n                                        <vdr-currency-input\r\n                                            *ngIf=\"channelPriceIncludesTax\"\r\n                                            clrInput\r\n                                            [currencyCode]=\"variant.currencyCode\"\r\n                                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                            formControlName=\"priceWithTax\"\r\n                                        ></vdr-currency-input>\r\n                                    </clr-input-container>\r\n                                </div>\r\n                                <vdr-variant-price-detail\r\n                                    [price]=\"formGroup.get('price')!.value\"\r\n                                    [currencyCode]=\"variant.currencyCode\"\r\n                                    [priceIncludesTax]=\"channelPriceIncludesTax\"\r\n                                    [taxCategoryId]=\"formGroup.get('taxCategoryId')!.value\"\r\n                                ></vdr-variant-price-detail>\r\n                            </div>\r\n                            <div class=\"variant-form-input-row\">\r\n                                <clr-select-container *vdrIfPermissions=\"updatePermission\">\r\n                                    <label\r\n                                        >{{ 'catalog.track-inventory' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip>\r\n                                    </label>\r\n                                    <select clrSelect name=\"options\" formControlName=\"trackInventory\">\r\n                                        <option [value]=\"GlobalFlag.TRUE\">\r\n                                            {{ 'catalog.track-inventory-true' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.FALSE\">\r\n                                            {{ 'catalog.track-inventory-false' | translate }}\r\n                                        </option>\r\n                                        <option [value]=\"GlobalFlag.INHERIT\">\r\n                                            {{ 'catalog.track-inventory-inherit' | translate }}\r\n                                        </option>\r\n                                    </select>\r\n                                </clr-select-container>\r\n                                <clr-input-container>\r\n                                    <label\r\n                                        >{{ 'catalog.stock-on-hand' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-on-hand-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <input\r\n                                        [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                        clrInput\r\n                                        type=\"number\"\r\n                                        min=\"0\"\r\n                                        step=\"1\"\r\n                                        formControlName=\"stockOnHand\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        [vdrDisabled]=\"inventoryIsNotTracked(formGroup)\"\r\n                                    />\r\n                                </clr-input-container>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-allocated' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-allocated-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ variant.stockAllocated }}\r\n                                    </div>\r\n                                </div>\r\n                                <div [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\">\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.stock-saleable' | translate }}\r\n                                        <vdr-help-tooltip\r\n                                            [content]=\"'catalog.stock-saleable-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"value\">\r\n                                        {{ getSaleableStockLevel(variant) }}\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <div class=\"variant-form-input-row\">\r\n                                <div\r\n                                    class=\"out-of-stock-threshold-wrapper\"\r\n                                    [class.inventory-untracked]=\"inventoryIsNotTracked(formGroup)\"\r\n                                >\r\n                                    <label class=\"clr-control-label\"\r\n                                        >{{ 'catalog.out-of-stock-threshold' | translate\r\n                                        }}<vdr-help-tooltip\r\n                                            [content]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                                        ></vdr-help-tooltip\r\n                                    ></label>\r\n                                    <div class=\"flex\">\r\n                                        <clr-input-container>\r\n                                            <input\r\n                                                clrInput\r\n                                                type=\"number\"\r\n                                                [formControl]=\"formGroup.get('outOfStockThreshold')\"\r\n                                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                                [vdrDisabled]=\"\r\n                                                    formGroup.get('useGlobalOutOfStockThreshold')?.value !==\r\n                                                        false || inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                        </clr-input-container>\r\n                                        <clr-toggle-wrapper>\r\n                                            <input\r\n                                                type=\"checkbox\"\r\n                                                clrToggle\r\n                                                name=\"useGlobalOutOfStockThreshold\"\r\n                                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                                [vdrDisabled]=\"\r\n                                                    !(updatePermission | hasPermission) ||\r\n                                                    inventoryIsNotTracked(formGroup)\r\n                                                \"\r\n                                            />\r\n                                            <label\r\n                                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                                    globalOutOfStockThreshold\r\n                                                }})</label\r\n                                            >\r\n                                        </clr-toggle-wrapper>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"custom-fields\">\r\n                            <div class=\"variant-form-input-row\">\r\n                                <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"ProductVariant\"\r\n                                        [customFields]=\"customFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"formGroup.get('customFields')\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </section>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"card-block\">\r\n                <div class=\"options-facets\">\r\n                    <vdr-entity-info [entity]=\"variant\"></vdr-entity-info>\r\n                    <div *ngIf=\"variant.options.length\">\r\n                        <div class=\"options\">\r\n                            <vdr-chip\r\n                                *ngFor=\"let option of variant.options | sort: 'groupId'\"\r\n                                [colorFrom]=\"optionGroupName(option.groupId)\"\r\n                                [invert]=\"true\"\r\n                                (iconClick)=\"editOption(option)\"\r\n                                [icon]=\"(updatePermission | hasPermission) && 'pencil'\"\r\n                            >\r\n                                <span class=\"option-group-name\">{{ optionGroupName(option.groupId) }}</span>\r\n                                {{ optionName(option) }}\r\n                            </vdr-chip>\r\n                            <a [routerLink]=\"['./', 'options']\" class=\"btn btn-link btn-sm\"\r\n                                >{{ 'catalog.edit-options' | translate }}...</a\r\n                            >\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex-spacer\"></div>\r\n                    <div class=\"facets\">\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of existingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <vdr-facet-value-chip\r\n                            *ngFor=\"let facetValue of pendingFacetValues(variant)\"\r\n                            [facetValue]=\"facetValue\"\r\n                            [removable]=\"updatePermission | hasPermission\"\r\n                            (remove)=\"removeFacetValue(variant, facetValue.id)\"\r\n                        ></vdr-facet-value-chip>\r\n                        <button\r\n                            *vdrIfPermissions=\"updatePermission\"\r\n                            class=\"btn btn-sm btn-secondary\"\r\n                            (click)=\"selectFacetValueClick.emit([variant.id])\"\r\n                        >\r\n                            <clr-icon shape=\"plus\"></clr-icon>\r\n                            {{ 'catalog.add-facets' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <ng-container *vdrIfMultichannel>\r\n                <div class=\"card-block\" *vdrIfDefaultChannelActive>\r\n                    <div class=\"flex channel-assignment\">\r\n                        <ng-container *ngFor=\"let channel of variant.channels\">\r\n                            <vdr-chip\r\n                                *ngIf=\"!isDefaultChannel(channel.code)\"\r\n                                icon=\"times-circle\"\r\n                                [title]=\"'catalog.remove-from-channel' | translate\"\r\n                                (iconClick)=\"\r\n                                    removeFromChannel.emit({ channelId: channel.id, variant: variant })\r\n                                \"\r\n                            >\r\n                                <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                {{ channel.code | channelCodeToLabel }}\r\n                            </vdr-chip>\r\n                        </ng-container>\r\n                        <button class=\"btn btn-sm\" (click)=\"assignToChannel.emit(variant)\">\r\n                            <clr-icon shape=\"layers\"></clr-icon>\r\n                            {{ 'catalog.assign-to-channel' | translate }}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: [".with-selected{display:flex;min-height:52px;align-items:center;border:1px solid var(--color-component-border-100);border-radius:3px;padding:6px 18px}.with-selected vdr-select-toggle{margin-right:12px}.with-selected>label{margin-right:12px}.variant-container{transition:background-color .2s;min-height:330px}.variant-container.disabled{background-color:var(--color-component-bg-200)}.variant-container .header-row{display:flex;align-items:center;flex-wrap:wrap}.variant-container .variant-body{display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-body{flex-direction:row}}.variant-container .details{display:flex;flex-direction:column;flex:1;margin-right:12px}@media screen and (min-width: 768px){.variant-container .details{flex-direction:row;height:36px}}.variant-container .details .name{flex:1}.variant-container .details .name ::ng-deep .clr-control-container{width:100%}.variant-container .details .name ::ng-deep .clr-control-container input.clr-input{min-width:100%}.variant-container .details .sku{width:160px;margin-right:20px;flex:0}.variant-container .details ::ng-deep .name input{min-width:300px}.variant-container .right-controls{display:flex}.variant-container .tax-category-label{margin-top:3px}.variant-container .variant-form-inputs{flex:1;display:flex;flex-direction:column}@media screen and (min-width: 768px){.variant-container .variant-form-inputs{flex-direction:row}}.variant-container .variant-form-input-row{display:flex;flex-wrap:wrap}@media screen and (min-width: 768px){.variant-container .variant-form-input-row{margin:0 6px 8px 24px}}.variant-container .variant-form-input-row>*{margin-right:24px;margin-bottom:24px}.variant-container .track-inventory-toggle{margin-top:22px}.variant-container .clr-form-control{margin-top:0}.variant-container .facets{display:flex;flex-wrap:wrap;align-items:center}.variant-container .pricing{display:flex}.variant-container .pricing>div{margin-right:12px}.variant-container .option-group-name{color:var(--color-text-200);text-transform:uppercase;font-size:10px;margin-right:3px;height:11px}.variant-container .options-facets{display:flex;color:var(--color-grey-400)}.variant-container ::ng-deep .clr-control-container{width:100%}.channel-assignment{justify-content:flex-end}.channel-assignment .btn{margin:6px 12px 6px 0}.out-of-stock-threshold-wrapper{display:flex;flex-direction:column}.out-of-stock-threshold-wrapper clr-toggle-wrapper{margin-left:24px}.inventory-untracked{opacity:.5}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.ModalService }, { type: i1$1.DataService }]; }, propDecorators: { formArray: [{
+                type: Input,
+                args: ['productVariantsFormArray']
+            }], variants: [{
+                type: Input
+            }], paginationConfig: [{
+                type: Input
+            }], channelPriceIncludesTax: [{
+                type: Input
+            }], taxCategories: [{
+                type: Input
+            }], facets: [{
+                type: Input
+            }], optionGroups: [{
+                type: Input
+            }], customFields: [{
+                type: Input
+            }], customOptionFields: [{
+                type: Input
+            }], activeLanguage: [{
+                type: Input
+            }], pendingAssetChanges: [{
+                type: Input
+            }], assignToChannel: [{
+                type: Output
+            }], removeFromChannel: [{
+                type: Output
+            }], assetChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], selectFacetValueClick: [{
+                type: Output
+            }], updateProductOption: [{
+                type: Output
+            }] } });
+
+class ProductDetailComponent extends BaseDetailComponent {
+    constructor(route, router, serverConfigService, productDetailService, formBuilder, modalService, notificationService, dataService, location, changeDetector) {
+        super(route, router, serverConfigService, dataService);
+        this.productDetailService = productDetailService;
+        this.formBuilder = formBuilder;
+        this.modalService = modalService;
+        this.notificationService = notificationService;
+        this.dataService = dataService;
+        this.location = location;
+        this.changeDetector = changeDetector;
+        this.filterInput = new FormControl('');
+        this.assetChanges = {};
+        this.variantAssetChanges = {};
+        this.variantFacetValueChanges = {};
+        this.currentPage$ = new BehaviorSubject(1);
+        this.itemsPerPage$ = new BehaviorSubject(10);
+        this.selectedVariantIds = [];
+        this.variantDisplayMode = 'card';
+        this.createVariantsConfig = { groups: [], variants: [] };
+        // Used to store all ProductVariants which have been loaded.
+        // It is needed when saving changes to variants.
+        this.productVariantMap = new Map();
+        this.updatePermissions = [Permission.UpdateCatalog, Permission.UpdateProduct];
+        this.customFields = this.getCustomFieldConfig('Product');
+        this.customVariantFields = this.getCustomFieldConfig('ProductVariant');
+        this.customOptionGroupFields = this.getCustomFieldConfig('ProductOptionGroup');
+        this.customOptionFields = this.getCustomFieldConfig('ProductOption');
+        this.detailForm = this.formBuilder.group({
+            product: this.formBuilder.group({
+                enabled: true,
+                name: ['', Validators.required],
+                autoUpdateVariantNames: true,
+                slug: ['', unicodePatternValidator(/^[\p{Letter}0-9_-]+$/)],
+                description: '',
+                facetValueIds: [[]],
+                customFields: this.formBuilder.group(this.customFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {})),
+            }),
+            variants: this.formBuilder.array([]),
+        });
+    }
+    ngOnInit() {
+        this.init();
+        this.product$ = this.entity$;
+        this.totalItems$ = this.product$.pipe(map(product => product.variantList.totalItems));
+        this.paginationConfig$ = combineLatest(this.totalItems$, this.itemsPerPage$, this.currentPage$).pipe(map(([totalItems, itemsPerPage, currentPage]) => ({
+            totalItems,
+            itemsPerPage,
+            currentPage,
+        })));
+        const variants$ = this.product$.pipe(map(product => product.variantList.items));
+        const filterTerm$ = this.filterInput.valueChanges.pipe(startWith(''), debounceTime(200), shareReplay());
+        const initialVariants$ = this.product$.pipe(map(p => p.variantList.items));
+        const updatedVariants$ = combineLatest(filterTerm$, this.currentPage$, this.itemsPerPage$).pipe(skipUntil(initialVariants$), skip(1), switchMap(([term, currentPage, itemsPerPage]) => {
+            return this.dataService.product
+                .getProductVariants({
+                skip: (currentPage - 1) * itemsPerPage,
+                take: itemsPerPage,
+                ...(term
+                    ? { filter: { name: { contains: term }, sku: { contains: term } } }
+                    : {}),
+                filterOperator: LogicalOperator.OR,
+            }, this.id)
+                .mapStream(({ productVariants }) => productVariants.items);
+        }), shareReplay({ bufferSize: 1, refCount: true }));
+        this.variants$ = merge(initialVariants$, updatedVariants$).pipe(tap(variants => {
+            for (const variant of variants) {
+                this.productVariantMap.set(variant.id, variant);
+            }
+        }));
+        this.taxCategories$ = this.productDetailService.getTaxCategories().pipe(takeUntil(this.destroy$));
+        this.activeTab$ = this.route.paramMap.pipe(map(qpm => qpm.get('tab')));
+        combineLatest(updatedVariants$, this.languageCode$)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(([variants, languageCode]) => {
+            this.buildVariantFormArray(variants, languageCode);
+        });
+        // FacetValues are provided initially by the nested array of the
+        // Product entity, but once a fetch to get all Facets is made (as when
+        // opening the FacetValue selector modal), then these additional values
+        // are concatenated onto the initial array.
+        this.facets$ = this.productDetailService.getFacets();
+        const productFacetValues$ = this.product$.pipe(map(product => product.facetValues));
+        const allFacetValues$ = this.facets$.pipe(map(flattenFacetValues));
+        const productGroup = this.getProductFormGroup();
+        const formFacetValueIdChanges$ = productGroup.valueChanges.pipe(map(val => val.facetValueIds), distinctUntilChanged());
+        const formChangeFacetValues$ = combineLatest(formFacetValueIdChanges$, productFacetValues$, allFacetValues$).pipe(map(([ids, productFacetValues, allFacetValues]) => {
+            const combined = [...productFacetValues, ...allFacetValues];
+            return ids.map(id => combined.find(fv => fv.id === id)).filter(notNullOrUndefined);
+        }));
+        this.facetValues$ = merge(productFacetValues$, formChangeFacetValues$);
+        this.productChannels$ = this.product$.pipe(map(p => p.channels));
+        this.channelPriceIncludesTax$ = this.dataService.settings
+            .getActiveChannel('cache-first')
+            .refetchOnChannelChange()
+            .mapStream(data => data.activeChannel.pricesIncludeTax)
+            .pipe(shareReplay(1));
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    navigateToTab(tabName) {
+        this.location.replaceState(this.router
+            .createUrlTree(['./', { ...this.route.snapshot.params, tab: tabName }], {
+            queryParamsHandling: 'merge',
+            relativeTo: this.route,
+        })
+            .toString());
+    }
+    isDefaultChannel(channelCode) {
+        return channelCode === DEFAULT_CHANNEL_CODE;
+    }
+    setPage(page) {
+        this.currentPage$.next(page);
+    }
+    setItemsPerPage(value) {
+        this.itemsPerPage$.next(+value);
+        this.currentPage$.next(1);
+    }
+    assignToChannel() {
+        this.productChannels$
+            .pipe(take(1), switchMap(channels => {
+            return this.modalService.fromComponent(AssignProductsToChannelDialogComponent, {
+                size: 'lg',
+                locals: {
+                    productIds: [this.id],
+                    currentChannelIds: channels.map(c => c.id),
+                },
+            });
+        }))
+            .subscribe();
+    }
+    removeFromChannel(channelId) {
+        this.modalService
+            .dialog({
+            title: marker('catalog.remove-product-from-channel'),
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('catalog.remove-from-channel'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(response => response
+            ? this.dataService.product.removeProductsFromChannel({
+                channelId,
+                productIds: [this.id],
+            })
+            : EMPTY))
+            .subscribe(() => {
+            this.notificationService.success(marker('catalog.notify-remove-product-from-channel-success'));
+        }, err => {
+            this.notificationService.error(marker('catalog.notify-remove-product-from-channel-error'));
+        });
+    }
+    assignVariantToChannel(variant) {
+        return this.modalService
+            .fromComponent(AssignProductsToChannelDialogComponent, {
+            size: 'lg',
+            locals: {
+                productIds: [this.id],
+                productVariantIds: [variant.id],
+                currentChannelIds: variant.channels.map(c => c.id),
+            },
+        })
+            .subscribe();
+    }
+    removeVariantFromChannel({ channelId, variant }) {
+        this.modalService
+            .dialog({
+            title: marker('catalog.remove-product-variant-from-channel'),
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('catalog.remove-from-channel'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(response => response
+            ? this.dataService.product.removeVariantsFromChannel({
+                channelId,
+                productVariantIds: [variant.id],
+            })
+            : EMPTY))
+            .subscribe(() => {
+            this.notificationService.success(marker('catalog.notify-remove-variant-from-channel-success'));
+        }, err => {
+            this.notificationService.error(marker('catalog.notify-remove-variant-from-channel-error'));
+        });
+    }
+    assetsChanged() {
+        return !!Object.values(this.assetChanges).length;
+    }
+    variantAssetsChanged() {
+        return !!Object.keys(this.variantAssetChanges).length;
+    }
+    variantAssetChange(event) {
+        this.variantAssetChanges[event.variantId] = event;
+    }
+    /**
+     * If creating a new product, automatically generate the slug based on the product name.
+     */
+    updateSlug(nameValue) {
+        combineLatest(this.entity$, this.languageCode$)
+            .pipe(take(1))
+            .subscribe(([entity, languageCode]) => {
+            const slugControl = this.detailForm.get(['product', 'slug']);
+            const currentTranslation = findTranslation(entity, languageCode);
+            const currentSlugIsEmpty = !currentTranslation || !currentTranslation.slug;
+            if (slugControl && slugControl.pristine && currentSlugIsEmpty) {
+                slugControl.setValue(normalizeString(`${nameValue}`, '-'));
+            }
+        });
+    }
+    selectProductFacetValue() {
+        this.displayFacetValueModal().subscribe(facetValueIds => {
+            if (facetValueIds) {
+                const productGroup = this.getProductFormGroup();
+                const currentFacetValueIds = productGroup.value.facetValueIds;
+                productGroup.patchValue({
+                    facetValueIds: unique([...currentFacetValueIds, ...facetValueIds]),
+                });
+                productGroup.markAsDirty();
+            }
+        });
+    }
+    updateProductOption(input) {
+        combineLatest(this.product$, this.languageCode$)
+            .pipe(take(1), mergeMap(([product, languageCode]) => this.productDetailService.updateProductOption(input, product, languageCode)))
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-update-success'), {
+                entity: 'ProductOption',
+            });
+        }, err => {
+            this.notificationService.error(marker('common.notify-update-error'), {
+                entity: 'ProductOption',
+            });
+        });
+    }
+    removeProductFacetValue(facetValueId) {
+        const productGroup = this.getProductFormGroup();
+        const currentFacetValueIds = productGroup.value.facetValueIds;
+        productGroup.patchValue({
+            facetValueIds: currentFacetValueIds.filter(id => id !== facetValueId),
+        });
+        productGroup.markAsDirty();
+    }
+    /**
+     * Opens a dialog to select FacetValues to apply to the select ProductVariants.
+     */
+    selectVariantFacetValue(selectedVariantIds) {
+        this.displayFacetValueModal()
+            .pipe(withLatestFrom(this.variants$))
+            .subscribe(([facetValueIds, variants]) => {
+            if (facetValueIds) {
+                for (const variantId of selectedVariantIds) {
+                    const index = variants.findIndex(v => v.id === variantId);
+                    const variant = variants[index];
+                    const existingFacetValueIds = variant ? variant.facetValues.map(fv => fv.id) : [];
+                    const variantFormGroup = this.detailForm.get('variants').controls.find(c => c.value.id === variantId);
+                    if (variantFormGroup) {
+                        const uniqueFacetValueIds = unique([...existingFacetValueIds, ...facetValueIds]);
+                        variantFormGroup.patchValue({
+                            facetValueIds: uniqueFacetValueIds,
+                        });
+                        variantFormGroup.markAsDirty();
+                        this.variantFacetValueChanges[variantId] = uniqueFacetValueIds;
+                    }
+                }
+                this.changeDetector.markForCheck();
+            }
+        });
+    }
+    variantsToCreateAreValid() {
+        return (0 < this.createVariantsConfig.variants.length &&
+            this.createVariantsConfig.variants.every(v => {
+                return v.sku !== '';
+            }));
+    }
+    displayFacetValueModal() {
+        return this.productDetailService.getFacets().pipe(mergeMap(facets => this.modalService.fromComponent(ApplyFacetDialogComponent, {
+            size: 'md',
+            closable: true,
+            locals: { facets },
+        })), map(facetValues => facetValues && facetValues.map(v => v.id)));
+    }
+    create() {
+        const productGroup = this.getProductFormGroup();
+        if (!productGroup.dirty) {
+            return;
+        }
+        combineLatest(this.product$, this.languageCode$)
+            .pipe(take(1), mergeMap(([product, languageCode]) => {
+            const newProduct = this.getUpdatedProduct(product, productGroup, languageCode);
+            return this.productDetailService.createProductWithVariants(newProduct, this.createVariantsConfig, languageCode);
+        }))
+            .subscribe(({ createProductVariants, productId }) => {
+            this.notificationService.success(marker('common.notify-create-success'), {
+                entity: 'Product',
+            });
+            this.assetChanges = {};
+            this.variantAssetChanges = {};
+            this.detailForm.markAsPristine();
+            this.router.navigate(['../', productId], { relativeTo: this.route });
+        }, err => {
+            // tslint:disable-next-line:no-console
+            console.error(err);
+            this.notificationService.error(marker('common.notify-create-error'), {
+                entity: 'Product',
+            });
+        });
+    }
+    save() {
+        combineLatest(this.product$, this.languageCode$, this.channelPriceIncludesTax$)
+            .pipe(take(1), mergeMap(([product, languageCode, priceIncludesTax]) => {
+            const productGroup = this.getProductFormGroup();
+            let productInput;
+            let variantsInput;
+            if (productGroup.dirty || this.assetsChanged()) {
+                productInput = this.getUpdatedProduct(product, productGroup, languageCode);
+            }
+            const variantsArray = this.detailForm.get('variants');
+            if ((variantsArray && variantsArray.dirty) || this.variantAssetsChanged()) {
+                variantsInput = this.getUpdatedProductVariants(product, variantsArray, languageCode, priceIncludesTax);
+            }
+            return this.productDetailService.updateProduct({
+                product,
+                languageCode,
+                autoUpdate: this.detailForm.get(['product', 'autoUpdateVariantNames'])?.value ?? false,
+                productInput,
+                variantsInput,
+            });
+        }))
+            .subscribe(result => {
+            this.updateSlugAfterSave(result);
+            this.detailForm.markAsPristine();
+            this.assetChanges = {};
+            this.variantAssetChanges = {};
+            this.notificationService.success(marker('common.notify-update-success'), {
+                entity: 'Product',
+            });
+            this.changeDetector.markForCheck();
+        }, err => {
+            this.notificationService.error(marker('common.notify-update-error'), {
+                entity: 'Product',
+            });
+        });
+    }
+    canDeactivate() {
+        return super.canDeactivate() && !this.assetChanges.assets && !this.assetChanges.featuredAsset;
+    }
+    /**
+     * Sets the values of the form on changes to the product or current language.
+     */
+    setFormValues(product, languageCode) {
+        const currentTranslation = findTranslation(product, languageCode);
+        this.detailForm.patchValue({
+            product: {
+                enabled: product.enabled,
+                name: currentTranslation ? currentTranslation.name : '',
+                slug: currentTranslation ? currentTranslation.slug : '',
+                description: currentTranslation ? currentTranslation.description : '',
+                facetValueIds: product.facetValues.map(fv => fv.id),
+            },
+        });
+        if (this.customFields.length) {
+            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['product', 'customFields']), product, currentTranslation);
+        }
+        this.buildVariantFormArray(product.variantList.items, languageCode);
+    }
+    buildVariantFormArray(variants, languageCode) {
+        const variantsFormArray = this.detailForm.get('variants');
+        variants.forEach((variant, i) => {
+            const variantTranslation = findTranslation(variant, languageCode);
+            const pendingFacetValueChanges = this.variantFacetValueChanges[variant.id];
+            const facetValueIds = pendingFacetValueChanges
+                ? pendingFacetValueChanges
+                : variant.facetValues.map(fv => fv.id);
+            const group = {
+                id: variant.id,
+                enabled: variant.enabled,
+                sku: variant.sku,
+                name: variantTranslation ? variantTranslation.name : '',
+                price: variant.price,
+                priceWithTax: variant.priceWithTax,
+                taxCategoryId: variant.taxCategory.id,
+                stockOnHand: variant.stockOnHand,
+                useGlobalOutOfStockThreshold: variant.useGlobalOutOfStockThreshold,
+                outOfStockThreshold: variant.outOfStockThreshold,
+                trackInventory: variant.trackInventory,
+                facetValueIds,
+            };
+            let variantFormGroup = variantsFormArray.controls.find(c => c.value.id === variant.id);
+            if (variantFormGroup) {
+                if (variantFormGroup.pristine) {
+                    variantFormGroup.patchValue(group);
+                }
+            }
+            else {
+                variantFormGroup = this.formBuilder.group({
+                    ...group,
+                    facetValueIds: this.formBuilder.control(facetValueIds),
+                });
+                variantsFormArray.insert(i, variantFormGroup);
+            }
+            if (this.customVariantFields.length) {
+                let customFieldsGroup = variantFormGroup.get(['customFields']);
+                if (!customFieldsGroup) {
+                    customFieldsGroup = this.formBuilder.group(this.customVariantFields.reduce((hash, field) => ({ ...hash, [field.name]: '' }), {}));
+                    variantFormGroup.addControl('customFields', customFieldsGroup);
+                }
+                this.setCustomFieldFormValues(this.customVariantFields, customFieldsGroup, variant, variantTranslation);
+            }
+        });
+    }
+    /**
+     * Given a product and the value of the detailForm, this method creates an updated copy of the product which
+     * can then be persisted to the API.
+     */
+    getUpdatedProduct(product, productFormGroup, languageCode) {
+        const updatedProduct = createUpdatedTranslatable({
+            translatable: product,
+            updatedFields: productFormGroup.value,
+            customFieldConfig: this.customFields,
+            languageCode,
+            defaultTranslation: {
+                languageCode,
+                name: product.name || '',
+                slug: product.slug || '',
+                description: product.description || '',
+            },
+        });
+        return {
+            ...updatedProduct,
+            assetIds: this.assetChanges.assets?.map(a => a.id),
+            featuredAssetId: this.assetChanges.featuredAsset?.id,
+            facetValueIds: productFormGroup.value.facetValueIds,
+        };
+    }
+    /**
+     * Given an array of product variants and the values from the detailForm, this method creates an new array
+     * which can be persisted to the API.
+     */
+    getUpdatedProductVariants(product, variantsFormArray, languageCode, priceIncludesTax) {
+        const dirtyFormControls = variantsFormArray.controls.filter(c => c.dirty);
+        const dirtyVariants = dirtyFormControls
+            .map(c => this.productVariantMap.get(c.value.id))
+            .filter(notNullOrUndefined);
+        const dirtyVariantValues = dirtyFormControls.map(c => c.value);
+        if (dirtyVariants.length !== dirtyVariantValues.length) {
+            throw new Error(marker(`error.product-variant-form-values-do-not-match`));
+        }
+        return dirtyVariants
+            .map((variant, i) => {
+            const formValue = dirtyVariantValues.find(value => value.id === variant.id);
+            const result = createUpdatedTranslatable({
+                translatable: variant,
+                updatedFields: formValue,
+                customFieldConfig: this.customVariantFields,
+                languageCode,
+                defaultTranslation: {
+                    languageCode,
+                    name: '',
+                },
+            });
+            result.taxCategoryId = formValue.taxCategoryId;
+            result.facetValueIds = formValue.facetValueIds;
+            result.price = priceIncludesTax ? formValue.priceWithTax : formValue.price;
+            const assetChanges = this.variantAssetChanges[variant.id];
+            if (assetChanges) {
+                result.featuredAssetId = assetChanges.featuredAsset?.id;
+                result.assetIds = assetChanges.assets?.map(a => a.id);
+            }
+            return result;
+        })
+            .filter(notNullOrUndefined);
+    }
+    getProductFormGroup() {
+        return this.detailForm.get('product');
+    }
+    /**
+     * The server may alter the slug value in order to normalize and ensure uniqueness upon saving.
+     */
+    updateSlugAfterSave(results) {
+        const firstResult = results[0];
+        const slugControl = this.detailForm.get(['product', 'slug']);
+        function isUpdateMutation(input) {
+            return input.hasOwnProperty('updateProduct');
+        }
+        if (slugControl && isUpdateMutation(firstResult)) {
+            slugControl.setValue(firstResult.updateProduct.slug, { emitEvent: false });
+        }
+    }
+}
+ProductDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductDetailComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i1$1.ServerConfigService }, { token: ProductDetailService }, { token: i4.FormBuilder }, { token: i1$1.ModalService }, { token: i1$1.NotificationService }, { token: i1$1.DataService }, { token: i5.Location }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ProductDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductDetailComponent, selector: "vdr-product-detail", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-flex-row\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrToggle\r\n                    name=\"enabled\"\r\n                    [formControl]=\"detailForm.get(['product', 'enabled'])\"\r\n                />\r\n                <label>{{ 'common.enabled' | translate }}</label>\r\n            </clr-toggle-wrapper>\r\n        </div>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine || !variantsToCreateAreValid()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"\r\n                    (detailForm.invalid || detailForm.pristine) && !assetsChanged() && !variantAssetsChanged()\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"product$ | async as product\">\r\n    <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n    <clr-tabs>\r\n        <clr-tab>\r\n            <button clrTabLink (click)=\"navigateToTab('details')\">\r\n                {{ 'catalog.product-details' | translate }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive=\"(activeTab$ | async) === 'details'\">\r\n                <div class=\"clr-row\">\r\n                    <div class=\"clr-col\">\r\n                        <section class=\"form-block\" formGroupName=\"product\">\r\n                            <ng-container *ngIf=\"!(isNew$ | async)\">\r\n                                <ng-container *vdrIfMultichannel>\r\n                                    <vdr-form-item\r\n                                        [label]=\"'common.channels' | translate\"\r\n                                        *vdrIfDefaultChannelActive\r\n                                    >\r\n                                        <div class=\"flex channel-assignment\">\r\n                                            <ng-container *ngFor=\"let channel of productChannels$ | async\">\r\n                                                <vdr-chip\r\n                                                    *ngIf=\"!isDefaultChannel(channel.code)\"\r\n                                                    icon=\"times-circle\"\r\n                                                    (iconClick)=\"removeFromChannel(channel.id)\"\r\n                                                >\r\n                                                    <vdr-channel-badge\r\n                                                        [channelCode]=\"channel.code\"\r\n                                                    ></vdr-channel-badge>\r\n                                                    {{ channel.code | channelCodeToLabel }}\r\n                                                </vdr-chip>\r\n                                            </ng-container>\r\n                                            <button class=\"btn btn-sm\" (click)=\"assignToChannel()\">\r\n                                                <clr-icon shape=\"layers\"></clr-icon>\r\n                                                {{ 'catalog.assign-to-channel' | translate }}\r\n                                            </button>\r\n                                        </div>\r\n                                    </vdr-form-item>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <vdr-form-field [label]=\"'catalog.product-name' | translate\" for=\"name\">\r\n                                <input\r\n                                    id=\"name\"\r\n                                    type=\"text\"\r\n                                    formControlName=\"name\"\r\n                                    [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                                    (input)=\"updateSlug($event.target.value)\"\r\n                                />\r\n                            </vdr-form-field>\r\n                            <div\r\n                                class=\"auto-rename-wrapper\"\r\n                                [class.visible]=\"\r\n                                    (isNew$ | async) === false && detailForm.get(['product', 'name'])?.dirty\r\n                                \"\r\n                            >\r\n                                <clr-checkbox-wrapper>\r\n                                    <input\r\n                                        clrCheckbox\r\n                                        type=\"checkbox\"\r\n                                        id=\"auto-update\"\r\n                                        formControlName=\"autoUpdateVariantNames\"\r\n                                    />\r\n                                    <label>{{\r\n                                        'catalog.auto-update-product-variant-name' | translate\r\n                                    }}</label>\r\n                                </clr-checkbox-wrapper>\r\n                            </div>\r\n                            <vdr-form-field\r\n                                [label]=\"'catalog.slug' | translate\"\r\n                                for=\"slug\"\r\n                                [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                            >\r\n                                <input\r\n                                    id=\"slug\"\r\n                                    type=\"text\"\r\n                                    formControlName=\"slug\"\r\n                                    [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                                />\r\n                            </vdr-form-field>\r\n                            <vdr-rich-text-editor\r\n                                formControlName=\"description\"\r\n                                [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                                [label]=\"'common.description' | translate\"\r\n                            ></vdr-rich-text-editor>\r\n\r\n                            <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                                <label>{{ 'common.custom-fields' | translate }}</label>\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"Product\"\r\n                                    [customFields]=\"customFields\"\r\n                                    [customFieldsFormGroup]=\"detailForm.get(['product', 'customFields'])\"\r\n                                    [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </section>\r\n                            <vdr-custom-detail-component-host\r\n                                locationId=\"product-detail\"\r\n                                [entity$]=\"entity$\"\r\n                                [detailForm]=\"detailForm\"\r\n                            ></vdr-custom-detail-component-host>\r\n                        </section>\r\n                    </div>\r\n                    <div class=\"clr-col-md-auto\">\r\n                        <vdr-assets\r\n                            [assets]=\"assetChanges.assets || product.assets\"\r\n                            [featuredAsset]=\"assetChanges.featuredAsset || product.featuredAsset\"\r\n                            [updatePermissions]=\"updatePermissions\"\r\n                            (change)=\"assetChanges = $event\"\r\n                        ></vdr-assets>\r\n                        <div class=\"facets\">\r\n                            <vdr-facet-value-chip\r\n                                *ngFor=\"let facetValue of facetValues$ | async\"\r\n                                [facetValue]=\"facetValue\"\r\n                                [removable]=\"['UpdateCatalog', 'UpdateProduct'] | hasPermission\"\r\n                                (remove)=\"removeProductFacetValue(facetValue.id)\"\r\n                            ></vdr-facet-value-chip>\r\n                            <button\r\n                                class=\"btn btn-sm btn-secondary\"\r\n                                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                                (click)=\"selectProductFacetValue()\"\r\n                            >\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-facets' | translate }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"isNew$ | async\">\r\n                    <h4>{{ 'catalog.product-variants' | translate }}</h4>\r\n                    <vdr-generate-product-variants\r\n                        (variantsChange)=\"createVariantsConfig = $event\"\r\n                    ></vdr-generate-product-variants>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n        <clr-tab *ngIf=\"!(isNew$ | async)\">\r\n            <button clrTabLink (click)=\"navigateToTab('variants')\">\r\n                {{ 'catalog.product-variants' | translate }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive=\"(activeTab$ | async) === 'variants'\">\r\n                <section class=\"form-block\">\r\n                    <div class=\"view-mode\">\r\n                        <div class=\"btn-group\">\r\n                            <button\r\n                                class=\"btn btn-secondary-outline\"\r\n                                (click)=\"variantDisplayMode = 'card'\"\r\n                                [class.btn-primary]=\"variantDisplayMode === 'card'\"\r\n                            >\r\n                                <clr-icon shape=\"list\"></clr-icon>\r\n                                {{ 'catalog.display-variant-cards' | translate }}\r\n                            </button>\r\n                            <button\r\n                                class=\"btn\"\r\n                                (click)=\"variantDisplayMode = 'table'\"\r\n                                [class.btn-primary]=\"variantDisplayMode === 'table'\"\r\n                            >\r\n                                <clr-icon shape=\"table\"></clr-icon>\r\n                                {{ 'catalog.display-variant-table' | translate }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"variant-filter\">\r\n                            <input\r\n                                [formControl]=\"filterInput\"\r\n                                [placeholder]=\"'catalog.filter-by-name-or-sku' | translate\"\r\n                            />\r\n                            <button class=\"icon-button\" (click)=\"filterInput.setValue('')\">\r\n                                <clr-icon shape=\"times\"></clr-icon>\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"flex-spacer\"></div>\r\n                        <a\r\n                            *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                            [routerLink]=\"['./', 'manage-variants']\"\r\n                            class=\"btn btn-secondary edit-variants-btn\"\r\n                        >\r\n                            <clr-icon shape=\"add-text\"></clr-icon>\r\n                            {{ 'catalog.manage-variants' | translate }}\r\n                        </a>\r\n                    </div>\r\n\r\n                    <div class=\"pagination-row mt4\" *ngIf=\"10 < (paginationConfig$ | async)?.totalItems\">\r\n                        <vdr-items-per-page-controls\r\n                            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n                        ></vdr-items-per-page-controls>\r\n\r\n                        <vdr-pagination-controls\r\n                            [id]=\"(paginationConfig$ | async)?.id\"\r\n                            [currentPage]=\"currentPage$ | async\"\r\n                            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                            (pageChange)=\"setPage($event)\"\r\n                        ></vdr-pagination-controls>\r\n                    </div>\r\n\r\n                    <vdr-product-variants-table\r\n                        *ngIf=\"variantDisplayMode === 'table'\"\r\n                        [variants]=\"variants$ | async\"\r\n                        [paginationConfig]=\"paginationConfig$ | async\"\r\n                        [optionGroups]=\"product.optionGroups\"\r\n                        [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [productVariantsFormArray]=\"detailForm.get('variants')\"\r\n                        [pendingAssetChanges]=\"variantAssetChanges\"\r\n                    ></vdr-product-variants-table>\r\n                    <vdr-product-variants-list\r\n                        *ngIf=\"variantDisplayMode === 'card'\"\r\n                        [variants]=\"variants$ | async\"\r\n                        [paginationConfig]=\"paginationConfig$ | async\"\r\n                        [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [facets]=\"facets$ | async\"\r\n                        [optionGroups]=\"product.optionGroups\"\r\n                        [productVariantsFormArray]=\"detailForm.get('variants')\"\r\n                        [taxCategories]=\"taxCategories$ | async\"\r\n                        [customFields]=\"customVariantFields\"\r\n                        [customOptionFields]=\"customOptionFields\"\r\n                        [activeLanguage]=\"languageCode$ | async\"\r\n                        [pendingAssetChanges]=\"variantAssetChanges\"\r\n                        (assignToChannel)=\"assignVariantToChannel($event)\"\r\n                        (removeFromChannel)=\"removeVariantFromChannel($event)\"\r\n                        (assetChange)=\"variantAssetChange($event)\"\r\n                        (updateProductOption)=\"updateProductOption($event)\"\r\n                        (selectionChange)=\"selectedVariantIds = $event\"\r\n                        (selectFacetValueClick)=\"selectVariantFacetValue($event)\"\r\n                    ></vdr-product-variants-list>\r\n                </section>\r\n                <div class=\"pagination-row mt4\" *ngIf=\"10 < (paginationConfig$ | async)?.totalItems\">\r\n                    <vdr-items-per-page-controls\r\n                        [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                        (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n                    ></vdr-items-per-page-controls>\r\n\r\n                    <vdr-pagination-controls\r\n                        [id]=\"(paginationConfig$ | async)?.id\"\r\n                        [currentPage]=\"currentPage$ | async\"\r\n                        [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                        (pageChange)=\"setPage($event)\"\r\n                    ></vdr-pagination-controls>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</form>\r\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center}@media screen and (min-width: 768px){.facets{max-width:340px}}vdr-action-bar clr-toggle-wrapper{margin-top:12px}.variant-filter{flex:1;display:flex}.variant-filter input{flex:1;max-width:initial;border-radius:3px 0 0 3px!important}.variant-filter .icon-button{border:1px solid var(--color-component-border-300);background-color:var(--color-component-bg-100);border-radius:0 3px 3px 0;border-left:none}.group-name{padding-right:6px}.view-mode{display:flex;justify-content:flex-end;align-items:center}.edit-variants-btn{margin-top:0}.channel-assignment{flex-wrap:wrap}.auto-rename-wrapper{overflow:hidden;max-height:0;padding-left:9.5rem;margin-bottom:0;transition:max-height .2s,margin-bottom .2s}.auto-rename-wrapper.visible{max-height:24px;margin-bottom:12px}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i2.ClrTabs, selector: "clr-tabs", inputs: ["clrLayout"] }, { type: i2.ClrTab, selector: "clr-tab" }, { type: i2.ClrTabContent, selector: "clr-tab-content", inputs: ["id"] }, { type: i1$1.FormItemComponent, selector: "vdr-form-item", inputs: ["label"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { type: i1$1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { type: i1$1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { type: i1$1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { type: i1$1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: ["variantsChange"] }, { type: i1$1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { type: i1$1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { type: ProductVariantsTableComponent, selector: "vdr-product-variants-table", inputs: ["productVariantsFormArray", "variants", "paginationConfig", "channelPriceIncludesTax", "optionGroups", "pendingAssetChanges"] }, { type: ProductVariantsListComponent, selector: "vdr-product-variants-list", inputs: ["productVariantsFormArray", "variants", "paginationConfig", "channelPriceIncludesTax", "taxCategories", "facets", "optionGroups", "customFields", "customOptionFields", "activeLanguage", "pendingAssetChanges"], outputs: ["assignToChannel", "removeFromChannel", "assetChange", "selectionChange", "selectFacetValueClick", "updateProductOption"] }], directives: [{ type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.ÇlrTabsWillyWonka, selector: "clr-tabs" }, { type: i2.ClrTabLink, selector: "[clrTabLink]", inputs: ["clrTabLinkInOverflow", "id"] }, { type: i2.ÇlrActiveOompaLoompa, selector: "[clrTabLink], clr-tab-content" }, { type: i2.ClrIfActive, selector: "[clrIfActive]", inputs: ["clrIfActive"], outputs: ["clrIfActiveChange"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i1$1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { type: i1$1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "channelCodeToLabel": i1$1.ChannelLabelPipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-product-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <div class=\"flex clr-flex-row\">\r\n            <vdr-entity-info [entity]=\"entity$ | async\"></vdr-entity-info>\r\n            <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrToggle\r\n                    name=\"enabled\"\r\n                    [formControl]=\"detailForm.get(['product', 'enabled'])\"\r\n                />\r\n                <label>{{ 'common.enabled' | translate }}</label>\r\n            </clr-toggle-wrapper>\r\n        </div>\r\n        <vdr-language-selector\r\n            [disabled]=\"isNew$ | async\"\r\n            [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n            [currentLanguageCode]=\"languageCode$ | async\"\r\n            (languageCodeChange)=\"setLanguage($event)\"\r\n        ></vdr-language-selector>\r\n    </vdr-ab-left>\r\n\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-detail\"></vdr-action-bar-items>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            *ngIf=\"isNew$ | async; else updateButton\"\r\n            (click)=\"create()\"\r\n            [disabled]=\"detailForm.invalid || detailForm.pristine || !variantsToCreateAreValid()\"\r\n        >\r\n            {{ 'common.create' | translate }}\r\n        </button>\r\n        <ng-template #updateButton>\r\n            <button\r\n                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"\r\n                    (detailForm.invalid || detailForm.pristine) && !assetsChanged() && !variantAssetsChanged()\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </ng-template>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"product$ | async as product\">\r\n    <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n    <clr-tabs>\r\n        <clr-tab>\r\n            <button clrTabLink (click)=\"navigateToTab('details')\">\r\n                {{ 'catalog.product-details' | translate }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive=\"(activeTab$ | async) === 'details'\">\r\n                <div class=\"clr-row\">\r\n                    <div class=\"clr-col\">\r\n                        <section class=\"form-block\" formGroupName=\"product\">\r\n                            <ng-container *ngIf=\"!(isNew$ | async)\">\r\n                                <ng-container *vdrIfMultichannel>\r\n                                    <vdr-form-item\r\n                                        [label]=\"'common.channels' | translate\"\r\n                                        *vdrIfDefaultChannelActive\r\n                                    >\r\n                                        <div class=\"flex channel-assignment\">\r\n                                            <ng-container *ngFor=\"let channel of productChannels$ | async\">\r\n                                                <vdr-chip\r\n                                                    *ngIf=\"!isDefaultChannel(channel.code)\"\r\n                                                    icon=\"times-circle\"\r\n                                                    (iconClick)=\"removeFromChannel(channel.id)\"\r\n                                                >\r\n                                                    <vdr-channel-badge\r\n                                                        [channelCode]=\"channel.code\"\r\n                                                    ></vdr-channel-badge>\r\n                                                    {{ channel.code | channelCodeToLabel }}\r\n                                                </vdr-chip>\r\n                                            </ng-container>\r\n                                            <button class=\"btn btn-sm\" (click)=\"assignToChannel()\">\r\n                                                <clr-icon shape=\"layers\"></clr-icon>\r\n                                                {{ 'catalog.assign-to-channel' | translate }}\r\n                                            </button>\r\n                                        </div>\r\n                                    </vdr-form-item>\r\n                                </ng-container>\r\n                            </ng-container>\r\n                            <vdr-form-field [label]=\"'catalog.product-name' | translate\" for=\"name\">\r\n                                <input\r\n                                    id=\"name\"\r\n                                    type=\"text\"\r\n                                    formControlName=\"name\"\r\n                                    [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                                    (input)=\"updateSlug($event.target.value)\"\r\n                                />\r\n                            </vdr-form-field>\r\n                            <div\r\n                                class=\"auto-rename-wrapper\"\r\n                                [class.visible]=\"\r\n                                    (isNew$ | async) === false && detailForm.get(['product', 'name'])?.dirty\r\n                                \"\r\n                            >\r\n                                <clr-checkbox-wrapper>\r\n                                    <input\r\n                                        clrCheckbox\r\n                                        type=\"checkbox\"\r\n                                        id=\"auto-update\"\r\n                                        formControlName=\"autoUpdateVariantNames\"\r\n                                    />\r\n                                    <label>{{\r\n                                        'catalog.auto-update-product-variant-name' | translate\r\n                                    }}</label>\r\n                                </clr-checkbox-wrapper>\r\n                            </div>\r\n                            <vdr-form-field\r\n                                [label]=\"'catalog.slug' | translate\"\r\n                                for=\"slug\"\r\n                                [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                            >\r\n                                <input\r\n                                    id=\"slug\"\r\n                                    type=\"text\"\r\n                                    formControlName=\"slug\"\r\n                                    [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                                />\r\n                            </vdr-form-field>\r\n                            <vdr-rich-text-editor\r\n                                formControlName=\"description\"\r\n                                [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                                [label]=\"'common.description' | translate\"\r\n                            ></vdr-rich-text-editor>\r\n\r\n                            <section formGroupName=\"customFields\" *ngIf=\"customFields.length\">\r\n                                <label>{{ 'common.custom-fields' | translate }}</label>\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"Product\"\r\n                                    [customFields]=\"customFields\"\r\n                                    [customFieldsFormGroup]=\"detailForm.get(['product', 'customFields'])\"\r\n                                    [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </section>\r\n                            <vdr-custom-detail-component-host\r\n                                locationId=\"product-detail\"\r\n                                [entity$]=\"entity$\"\r\n                                [detailForm]=\"detailForm\"\r\n                            ></vdr-custom-detail-component-host>\r\n                        </section>\r\n                    </div>\r\n                    <div class=\"clr-col-md-auto\">\r\n                        <vdr-assets\r\n                            [assets]=\"assetChanges.assets || product.assets\"\r\n                            [featuredAsset]=\"assetChanges.featuredAsset || product.featuredAsset\"\r\n                            [updatePermissions]=\"updatePermissions\"\r\n                            (change)=\"assetChanges = $event\"\r\n                        ></vdr-assets>\r\n                        <div class=\"facets\">\r\n                            <vdr-facet-value-chip\r\n                                *ngFor=\"let facetValue of facetValues$ | async\"\r\n                                [facetValue]=\"facetValue\"\r\n                                [removable]=\"['UpdateCatalog', 'UpdateProduct'] | hasPermission\"\r\n                                (remove)=\"removeProductFacetValue(facetValue.id)\"\r\n                            ></vdr-facet-value-chip>\r\n                            <button\r\n                                class=\"btn btn-sm btn-secondary\"\r\n                                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                                (click)=\"selectProductFacetValue()\"\r\n                            >\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-facets' | translate }}\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"isNew$ | async\">\r\n                    <h4>{{ 'catalog.product-variants' | translate }}</h4>\r\n                    <vdr-generate-product-variants\r\n                        (variantsChange)=\"createVariantsConfig = $event\"\r\n                    ></vdr-generate-product-variants>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n        <clr-tab *ngIf=\"!(isNew$ | async)\">\r\n            <button clrTabLink (click)=\"navigateToTab('variants')\">\r\n                {{ 'catalog.product-variants' | translate }}\r\n            </button>\r\n            <clr-tab-content *clrIfActive=\"(activeTab$ | async) === 'variants'\">\r\n                <section class=\"form-block\">\r\n                    <div class=\"view-mode\">\r\n                        <div class=\"btn-group\">\r\n                            <button\r\n                                class=\"btn btn-secondary-outline\"\r\n                                (click)=\"variantDisplayMode = 'card'\"\r\n                                [class.btn-primary]=\"variantDisplayMode === 'card'\"\r\n                            >\r\n                                <clr-icon shape=\"list\"></clr-icon>\r\n                                {{ 'catalog.display-variant-cards' | translate }}\r\n                            </button>\r\n                            <button\r\n                                class=\"btn\"\r\n                                (click)=\"variantDisplayMode = 'table'\"\r\n                                [class.btn-primary]=\"variantDisplayMode === 'table'\"\r\n                            >\r\n                                <clr-icon shape=\"table\"></clr-icon>\r\n                                {{ 'catalog.display-variant-table' | translate }}\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"variant-filter\">\r\n                            <input\r\n                                [formControl]=\"filterInput\"\r\n                                [placeholder]=\"'catalog.filter-by-name-or-sku' | translate\"\r\n                            />\r\n                            <button class=\"icon-button\" (click)=\"filterInput.setValue('')\">\r\n                                <clr-icon shape=\"times\"></clr-icon>\r\n                            </button>\r\n                        </div>\r\n                        <div class=\"flex-spacer\"></div>\r\n                        <a\r\n                            *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                            [routerLink]=\"['./', 'manage-variants']\"\r\n                            class=\"btn btn-secondary edit-variants-btn\"\r\n                        >\r\n                            <clr-icon shape=\"add-text\"></clr-icon>\r\n                            {{ 'catalog.manage-variants' | translate }}\r\n                        </a>\r\n                    </div>\r\n\r\n                    <div class=\"pagination-row mt4\" *ngIf=\"10 < (paginationConfig$ | async)?.totalItems\">\r\n                        <vdr-items-per-page-controls\r\n                            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n                        ></vdr-items-per-page-controls>\r\n\r\n                        <vdr-pagination-controls\r\n                            [id]=\"(paginationConfig$ | async)?.id\"\r\n                            [currentPage]=\"currentPage$ | async\"\r\n                            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                            (pageChange)=\"setPage($event)\"\r\n                        ></vdr-pagination-controls>\r\n                    </div>\r\n\r\n                    <vdr-product-variants-table\r\n                        *ngIf=\"variantDisplayMode === 'table'\"\r\n                        [variants]=\"variants$ | async\"\r\n                        [paginationConfig]=\"paginationConfig$ | async\"\r\n                        [optionGroups]=\"product.optionGroups\"\r\n                        [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [productVariantsFormArray]=\"detailForm.get('variants')\"\r\n                        [pendingAssetChanges]=\"variantAssetChanges\"\r\n                    ></vdr-product-variants-table>\r\n                    <vdr-product-variants-list\r\n                        *ngIf=\"variantDisplayMode === 'card'\"\r\n                        [variants]=\"variants$ | async\"\r\n                        [paginationConfig]=\"paginationConfig$ | async\"\r\n                        [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [facets]=\"facets$ | async\"\r\n                        [optionGroups]=\"product.optionGroups\"\r\n                        [productVariantsFormArray]=\"detailForm.get('variants')\"\r\n                        [taxCategories]=\"taxCategories$ | async\"\r\n                        [customFields]=\"customVariantFields\"\r\n                        [customOptionFields]=\"customOptionFields\"\r\n                        [activeLanguage]=\"languageCode$ | async\"\r\n                        [pendingAssetChanges]=\"variantAssetChanges\"\r\n                        (assignToChannel)=\"assignVariantToChannel($event)\"\r\n                        (removeFromChannel)=\"removeVariantFromChannel($event)\"\r\n                        (assetChange)=\"variantAssetChange($event)\"\r\n                        (updateProductOption)=\"updateProductOption($event)\"\r\n                        (selectionChange)=\"selectedVariantIds = $event\"\r\n                        (selectFacetValueClick)=\"selectVariantFacetValue($event)\"\r\n                    ></vdr-product-variants-list>\r\n                </section>\r\n                <div class=\"pagination-row mt4\" *ngIf=\"10 < (paginationConfig$ | async)?.totalItems\">\r\n                    <vdr-items-per-page-controls\r\n                        [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                        (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n                    ></vdr-items-per-page-controls>\r\n\r\n                    <vdr-pagination-controls\r\n                        [id]=\"(paginationConfig$ | async)?.id\"\r\n                        [currentPage]=\"currentPage$ | async\"\r\n                        [itemsPerPage]=\"itemsPerPage$ | async\"\r\n                        (pageChange)=\"setPage($event)\"\r\n                    ></vdr-pagination-controls>\r\n                </div>\r\n            </clr-tab-content>\r\n        </clr-tab>\r\n    </clr-tabs>\r\n</form>\r\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center}@media screen and (min-width: 768px){.facets{max-width:340px}}vdr-action-bar clr-toggle-wrapper{margin-top:12px}.variant-filter{flex:1;display:flex}.variant-filter input{flex:1;max-width:initial;border-radius:3px 0 0 3px!important}.variant-filter .icon-button{border:1px solid var(--color-component-border-300);background-color:var(--color-component-bg-100);border-radius:0 3px 3px 0;border-left:none}.group-name{padding-right:6px}.view-mode{display:flex;justify-content:flex-end;align-items:center}.edit-variants-btn{margin-top:0}.channel-assignment{flex-wrap:wrap}.auto-rename-wrapper{overflow:hidden;max-height:0;padding-left:9.5rem;margin-bottom:0;transition:max-height .2s,margin-bottom .2s}.auto-rename-wrapper.visible{max-height:24px;margin-bottom:12px}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i1$1.ServerConfigService }, { type: ProductDetailService }, { type: i4.FormBuilder }, { type: i1$1.ModalService }, { type: i1$1.NotificationService }, { type: i1$1.DataService }, { type: i5.Location }, { type: i0.ChangeDetectorRef }]; } });
+
+class ProductSearchInputComponent {
+    constructor() {
+        this.searchTermChange = new EventEmitter();
+        this.facetValueChange = new EventEmitter();
+        this.lastTerm = '';
+        this.lastFacetValueIds = [];
+        this.filterFacetResults = (term, item) => {
+            if (!this.isFacetValueItem(item)) {
+                return false;
+            }
+            const cix = term.indexOf(':');
+            const facetName = cix > -1 ? term.toLowerCase().slice(0, cix) : null;
+            const facetVal = cix > -1 ? term.toLowerCase().slice(cix + 1) : term.toLowerCase();
+            if (facetName) {
+                return (item.facetValue.facet.name.toLowerCase().includes(facetName) &&
+                    item.facetValue.name.toLocaleLowerCase().includes(facetVal));
+            }
+            return (item.facetValue.name.toLowerCase().includes(term.toLowerCase()) ||
+                item.facetValue.facet.name.toLowerCase().includes(term.toLowerCase()));
+        };
+        this.isFacetValueItem = (input) => {
+            return typeof input === 'object' && !!input && input.hasOwnProperty('facetValue');
+        };
+    }
+    setSearchTerm(term) {
+        if (term) {
+            this.selectComponent.select({ label: term, value: { label: term } });
+        }
+        else {
+            const currentTerm = this.selectComponent.selectedItems.find(i => !this.isFacetValueItem(i.value));
+            if (currentTerm) {
+                this.selectComponent.unselect(currentTerm);
+            }
+        }
+    }
+    setFacetValues(ids) {
+        const items = this.selectComponent.items;
+        this.selectComponent.selectedItems.forEach(item => {
+            if (this.isFacetValueItem(item.value) && !ids.includes(item.value.facetValue.id)) {
+                this.selectComponent.unselect(item);
+            }
+        });
+        ids.map(id => {
+            return items?.find(item => this.isFacetValueItem(item) && item.facetValue.id === id);
+        })
+            .filter(notNullOrUndefined)
+            .forEach(item => {
+            const isSelected = this.selectComponent.selectedItems.find(i => {
+                const val = i.value;
+                if (this.isFacetValueItem(val)) {
+                    return val.facetValue.id === item.facetValue.id;
+                }
+                return false;
+            });
+            if (!isSelected) {
+                this.selectComponent.select({ label: '', value: item });
+            }
+        });
+    }
+    onSelectChange(selectedItems) {
+        if (!Array.isArray(selectedItems)) {
+            selectedItems = [selectedItems];
+        }
+        const searchTermItem = selectedItems.find(item => !this.isFacetValueItem(item));
+        const searchTerm = searchTermItem ? searchTermItem.label : '';
+        const facetValueIds = selectedItems.filter(this.isFacetValueItem).map(i => i.facetValue.id);
+        if (searchTerm !== this.lastTerm) {
+            this.searchTermChange.emit(searchTerm);
+            this.lastTerm = searchTerm;
+        }
+        if (this.lastFacetValueIds.join(',') !== facetValueIds.join(',')) {
+            this.facetValueChange.emit(facetValueIds);
+            this.lastFacetValueIds = facetValueIds;
+        }
+    }
+    addTagFn(item) {
+        return { label: item };
+    }
+    isSearchHeaderSelected() {
+        return this.selectComponent.itemsList.markedIndex === -1;
+    }
+}
+ProductSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProductSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: { facetValueResults: "facetValueResults" }, outputs: { searchTermChange: "searchTermChange", facetValueChange: "facetValueChange" }, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], viewQueries: [{ propertyName: "selectComponent", first: true, predicate: ["selectComponent"], descendants: true, static: true }], ngImport: i0, template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;min-width:300px;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"], components: [{ type: i1$2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { type: i1$1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i1$2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { type: i1$2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }], pipes: { "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductSearchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-product-search-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: SingleSearchSelectionModelFactory }], template: "<ng-select\r\n    [addTag]=\"addTagFn\"\r\n    [placeholder]=\"'catalog.search-product-name-or-code' | translate\"\r\n    [items]=\"facetValueResults\"\r\n    [searchFn]=\"filterFacetResults\"\r\n    [hideSelected]=\"true\"\r\n    [multiple]=\"true\"\r\n    [markFirst]=\"false\"\r\n    (change)=\"onSelectChange($event)\"\r\n    #selectComponent\r\n>\r\n    <ng-template ng-header-tmp>\r\n        <div\r\n            class=\"search-header\"\r\n            *ngIf=\"selectComponent.searchTerm\"\r\n            [class.selected]=\"isSearchHeaderSelected()\"\r\n            (click)=\"selectComponent.selectTag()\"\r\n        >\r\n            {{ 'catalog.search-for-term' | translate }}: {{ selectComponent.searchTerm }}\r\n        </div>\r\n    </ng-template>\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip\r\n                [facetValue]=\"item.facetValue\"\r\n                [removable]=\"true\"\r\n                (remove)=\"clear(item)\"\r\n            ></vdr-facet-value-chip>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"!item.facetValue\">\r\n            <vdr-chip [icon]=\"'times'\" (iconClick)=\"clear(item)\">\"{{ item.label }}\"</vdr-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n        <ng-container *ngIf=\"item.facetValue\">\r\n            <vdr-facet-value-chip [facetValue]=\"item.facetValue\" [removable]=\"false\"></vdr-facet-value-chip>\r\n        </ng-container>\r\n    </ng-template>\r\n</ng-select>\r\n", styles: [":host{margin-top:6px;display:block;width:100%}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background:none;margin:0}:host ::ng-deep .ng-dropdown-panel-items div.ng-option:last-child{display:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border:none;padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding:0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-left:8px}ng-select{width:100%;min-width:300px;margin-right:12px}.search-header{padding:8px 10px;border-bottom:1px solid var(--color-component-border-100);cursor:pointer}.search-header.selected,.search-header:hover{background-color:var(--color-component-bg-200)}\n"] }]
+        }], propDecorators: { facetValueResults: [{
+                type: Input
+            }], searchTermChange: [{
+                type: Output
+            }], facetValueChange: [{
+                type: Output
+            }], selectComponent: [{
+                type: ViewChild,
+                args: ['selectComponent', { static: true }]
+            }] } });
+
+class ProductListComponent extends BaseListComponent {
+    constructor(dataService, modalService, notificationService, jobQueueService, serverConfigService, router, route) {
+        super(router, route);
+        this.dataService = dataService;
+        this.modalService = modalService;
+        this.notificationService = notificationService;
+        this.jobQueueService = jobQueueService;
+        this.serverConfigService = serverConfigService;
+        this.searchTerm = '';
+        this.facetValueIds = [];
+        this.groupByProduct = true;
+        this.pendingSearchIndexUpdates = 0;
+        this.route.queryParamMap
+            .pipe(map(qpm => qpm.get('q')), takeUntil(this.destroy$))
+            .subscribe(term => {
+            this.searchTerm = term || '';
+            if (this.productSearchInput) {
+                this.productSearchInput.setSearchTerm(term);
+            }
+        });
+        this.selectedFacetValueIds$ = this.route.queryParamMap.pipe(map(qpm => qpm.getAll('fvids')));
+        this.selectedFacetValueIds$.pipe(takeUntil(this.destroy$)).subscribe(ids => {
+            this.facetValueIds = ids;
+            if (this.productSearchInput) {
+                this.productSearchInput.setFacetValues(ids);
+            }
+        });
+        super.setQueryFn((...args) => this.dataService.product.searchProducts(this.searchTerm, ...args).refetchOnChannelChange(), data => data.search, 
+        // tslint:disable-next-line:no-shadowed-variable
+        (skip, take) => ({
+            input: {
+                skip,
+                take,
+                term: this.searchTerm,
+                facetValueIds: this.facetValueIds,
+                facetValueOperator: LogicalOperator.AND,
+                groupByProduct: this.groupByProduct,
+            },
+        }));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.facetValues$ = this.result$.pipe(map(data => data.search.facetValues));
+        this.facetValues$
+            .pipe(take(1), delay(100), withLatestFrom(this.selectedFacetValueIds$))
+            .subscribe(([__, ids]) => {
+            this.productSearchInput.setFacetValues(ids);
+        });
+        this.availableLanguages$ = this.serverConfigService.getAvailableLanguages();
+        this.contentLanguage$ = this.dataService.client
+            .uiState()
+            .mapStream(({ uiState }) => uiState.contentLanguage)
+            .pipe(tap(() => this.refresh()));
+        this.dataService.product
+            .getPendingSearchIndexUpdates()
+            .mapSingle(({ pendingSearchIndexUpdates }) => pendingSearchIndexUpdates)
+            .subscribe(value => (this.pendingSearchIndexUpdates = value));
+    }
+    ngAfterViewInit() {
+        if (this.productSearchInput && this.searchTerm) {
+            setTimeout(() => this.productSearchInput.setSearchTerm(this.searchTerm));
+        }
+    }
+    setSearchTerm(term) {
+        this.searchTerm = term;
+        this.setQueryParam({ q: term || null, page: 1 });
+        this.refresh();
+    }
+    setFacetValueIds(ids) {
+        this.facetValueIds = ids;
+        this.setQueryParam({ fvids: ids, page: 1 });
+        this.refresh();
+    }
+    rebuildSearchIndex() {
+        this.dataService.product.reindex().subscribe(({ reindex }) => {
+            this.notificationService.info(marker('catalog.reindexing'));
+            this.jobQueueService.addJob(reindex.id, job => {
+                if (job.state === JobState.COMPLETED) {
+                    const time = new Intl.NumberFormat().format(job.duration || 0);
+                    this.notificationService.success(marker('catalog.reindex-successful'), {
+                        count: job.result.indexedItemCount,
+                        time,
+                    });
+                    this.refresh();
+                }
+                else {
+                    this.notificationService.error(marker('catalog.reindex-error'));
+                }
+            });
+        });
+    }
+    runPendingSearchIndexUpdates() {
+        this.dataService.product.runPendingSearchIndexUpdates().subscribe(value => {
+            this.notificationService.info(marker('catalog.running-search-index-updates'), {
+                count: this.pendingSearchIndexUpdates,
+            });
+            this.pendingSearchIndexUpdates = 0;
+        });
+    }
+    deleteProduct(productId) {
+        this.modalService
+            .dialog({
+            title: marker('catalog.confirm-delete-product'),
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(response => (response ? this.dataService.product.deleteProduct(productId) : EMPTY)), 
+        // Short delay to allow the product to be removed from the search index before
+        // refreshing.
+        delay(500))
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-delete-success'), {
+                entity: 'Product',
+            });
+            this.refresh();
+        }, err => {
+            this.notificationService.error(marker('common.notify-delete-error'), {
+                entity: 'Product',
+            });
+        });
+    }
+    setLanguage(code) {
+        this.dataService.client.setContentLanguage(code).subscribe();
+    }
+}
+ProductListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductListComponent, deps: [{ token: i1$1.DataService }, { token: i1$1.ModalService }, { token: i1$1.NotificationService }, { token: i1$1.JobQueueService }, { token: i1$1.ServerConfigService }, { token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+ProductListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductListComponent, selector: "vdr-products-list", viewQueries: [{ propertyName: "productSearchInput", first: true, predicate: ["productSearchInputComponent"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <div class=\"search-form\">\r\n            <vdr-product-search-input\r\n                #productSearchInputComponent\r\n                [facetValueResults]=\"facetValues$ | async\"\r\n                (searchTermChange)=\"setSearchTerm($event)\"\r\n                (facetValueChange)=\"setFacetValueIds($event)\"\r\n            ></vdr-product-search-input>\r\n            <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"icon-button search-index-button\"\r\n                    [title]=\"\r\n                        (pendingSearchIndexUpdates\r\n                            ? 'catalog.pending-search-index-updates'\r\n                            : 'catalog.search-index-controls'\r\n                        ) | translate\r\n                    \"\r\n                    vdrDropdownTrigger\r\n                >\r\n                    <clr-icon shape=\"cog\"></clr-icon>\r\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"> </vdr-status-badge>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"run-updates-button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"runPendingSearchIndexUpdates()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            <vdr-status-badge type=\"warning\"> </vdr-status-badge>\r\n                            {{\r\n                                'catalog.run-pending-search-index-updates'\r\n                                    | translate: { count: pendingSearchIndexUpdates }\r\n                            }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"rebuildSearchIndex()\"\r\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                    >\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <div class=\"flex wrap\">\r\n            <clr-checkbox-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\" />\r\n                <label>{{ 'catalog.group-by-product' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            [routerLink]=\"['./create']\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            <span class=\"full-label\">{{ 'catalog.create-new-product' | translate }}</span>\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <ng-template let-result=\"item\">\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"\r\n                        groupByProduct\r\n                            ? result.productAsset\r\n                            : result.productVariantAsset || result.productAsset as asset;\r\n                        else imagePlaceholder\r\n                    \"\r\n                    [src]=\"asset | assetPreview: 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            {{ groupByProduct ? result.productName : result.productVariantName }}\r\n        </td>\r\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', result.productId]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteProduct(result.productId)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%;margin-bottom:6px}.search-input{min-width:300px}@media screen and (max-width: 768px){.search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1$1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1$1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1$1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }], directives: [{ type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe, "assetPreview": i1$1.AssetPreviewPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-products-list', template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <div class=\"search-form\">\r\n            <vdr-product-search-input\r\n                #productSearchInputComponent\r\n                [facetValueResults]=\"facetValues$ | async\"\r\n                (searchTermChange)=\"setSearchTerm($event)\"\r\n                (facetValueChange)=\"setFacetValueIds($event)\"\r\n            ></vdr-product-search-input>\r\n            <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"icon-button search-index-button\"\r\n                    [title]=\"\r\n                        (pendingSearchIndexUpdates\r\n                            ? 'catalog.pending-search-index-updates'\r\n                            : 'catalog.search-index-controls'\r\n                        ) | translate\r\n                    \"\r\n                    vdrDropdownTrigger\r\n                >\r\n                    <clr-icon shape=\"cog\"></clr-icon>\r\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"> </vdr-status-badge>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"run-updates-button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"runPendingSearchIndexUpdates()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            <vdr-status-badge type=\"warning\"> </vdr-status-badge>\r\n                            {{\r\n                                'catalog.run-pending-search-index-updates'\r\n                                    | translate: { count: pendingSearchIndexUpdates }\r\n                            }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"rebuildSearchIndex()\"\r\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                    >\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <div class=\"flex wrap\">\r\n            <clr-checkbox-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\" />\r\n                <label>{{ 'catalog.group-by-product' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            [routerLink]=\"['./create']\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            <span class=\"full-label\">{{ 'catalog.create-new-product' | translate }}</span>\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <ng-template let-result=\"item\">\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"\r\n                        groupByProduct\r\n                            ? result.productAsset\r\n                            : result.productVariantAsset || result.productAsset as asset;\r\n                        else imagePlaceholder\r\n                    \"\r\n                    [src]=\"asset | assetPreview: 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            {{ groupByProduct ? result.productName : result.productVariantName }}\r\n        </td>\r\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-table-row-action\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', result.productId]\"\r\n            ></vdr-table-row-action>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"delete-button\"\r\n                        (click)=\"deleteProduct(result.productId)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\r\n                        vdrDropdownItem\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </td>\r\n    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%;margin-bottom:6px}.search-input{min-width:300px}@media screen and (max-width: 768px){.search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DataService }, { type: i1$1.ModalService }, { type: i1$1.NotificationService }, { type: i1$1.JobQueueService }, { type: i1$1.ServerConfigService }, { type: i1.Router }, { type: i1.ActivatedRoute }]; }, propDecorators: { productSearchInput: [{
+                type: ViewChild,
+                args: ['productSearchInputComponent', { static: true }]
+            }] } });
+
+class ProductOptionsEditorComponent extends BaseDetailComponent {
+    constructor(route, router, serverConfigService, dataService, productDetailService, formBuilder, changeDetector, notificationService) {
+        super(route, router, serverConfigService, dataService);
+        this.route = route;
+        this.router = router;
+        this.serverConfigService = serverConfigService;
+        this.dataService = dataService;
+        this.productDetailService = productDetailService;
+        this.formBuilder = formBuilder;
+        this.changeDetector = changeDetector;
+        this.notificationService = notificationService;
+        this.autoUpdateVariantNames = true;
+        this.updatePermission = [Permission.UpdateCatalog, Permission.UpdateProduct];
+        this.optionGroupCustomFields = this.getCustomFieldConfig('ProductOptionGroup');
+        this.optionCustomFields = this.getCustomFieldConfig('ProductOption');
+    }
+    ngOnInit() {
+        this.optionGroups$ = this.route.snapshot.data.entity.pipe(map((product) => product.optionGroups));
+        this.detailForm = new FormGroup({
+            optionGroups: new FormArray([]),
+        });
+        super.init();
+    }
+    getOptionGroups() {
+        const optionGroups = this.detailForm.get('optionGroups');
+        return optionGroups.controls;
+    }
+    getOptions(optionGroup) {
+        const options = optionGroup.get('options');
+        return options.controls;
+    }
+    save() {
+        if (this.detailForm.invalid || this.detailForm.pristine) {
+            return;
+        }
+        // tslint:disable-next-line:no-non-null-assertion
+        const $product = this.dataService.product.getProduct(this.id).mapSingle(data => data.product);
+        combineLatest(this.entity$, this.languageCode$, $product)
+            .pipe(take(1), mergeMap(([{ optionGroups }, languageCode, product]) => {
+            const updateOperations = [];
+            for (const optionGroupForm of this.getOptionGroups()) {
+                if (optionGroupForm.get('name')?.dirty || optionGroupForm.get('code')?.dirty) {
+                    const optionGroupEntity = optionGroups.find(og => og.id === optionGroupForm.value.id);
+                    if (optionGroupEntity) {
+                        const input = this.getUpdatedOptionGroup(optionGroupEntity, optionGroupForm, languageCode);
+                        updateOperations.push(this.dataService.product.updateProductOptionGroup(input));
+                    }
+                }
+                for (const optionForm of this.getOptions(optionGroupForm)) {
+                    if (optionForm.get('name')?.dirty || optionForm.get('code')?.dirty) {
+                        const optionGroup = optionGroups
+                            .find(og => og.id === optionGroupForm.value.id)
+                            ?.options.find(o => o.id === optionForm.value.id);
+                        if (optionGroup) {
+                            const input = this.getUpdatedOption(optionGroup, optionForm, languageCode);
+                            updateOperations.push(this.productDetailService.updateProductOption({ ...input, autoUpdate: this.autoUpdateVariantNames }, product, languageCode));
+                        }
+                    }
+                }
+            }
+            return forkJoin(updateOperations);
+        }))
+            .subscribe(() => {
+            this.detailForm.markAsPristine();
+            this.changeDetector.markForCheck();
+            this.notificationService.success(marker('common.notify-update-success'), {
+                entity: 'ProductOptionGroup',
+            });
+        }, err => {
+            this.notificationService.error(marker('common.notify-update-error'), {
+                entity: 'ProductOptionGroup',
+            });
+        });
+    }
+    getUpdatedOptionGroup(optionGroup, optionGroupFormGroup, languageCode) {
+        const input = createUpdatedTranslatable({
+            translatable: optionGroup,
+            updatedFields: optionGroupFormGroup.value,
+            customFieldConfig: this.optionGroupCustomFields,
+            languageCode,
+            defaultTranslation: {
+                languageCode,
+                name: optionGroup.name || '',
+            },
+        });
+        return input;
+    }
+    getUpdatedOption(option, optionFormGroup, languageCode) {
+        const input = createUpdatedTranslatable({
+            translatable: option,
+            updatedFields: optionFormGroup.value,
+            customFieldConfig: this.optionGroupCustomFields,
+            languageCode,
+            defaultTranslation: {
+                languageCode,
+                name: option.name || '',
+            },
+        });
+        return input;
+    }
+    setFormValues(entity, languageCode) {
+        const groupsFormArray = new FormArray([]);
+        for (const optionGroup of entity.optionGroups) {
+            const groupTranslation = findTranslation(optionGroup, languageCode);
+            const group = {
+                id: optionGroup.id,
+                createdAt: optionGroup.createdAt,
+                updatedAt: optionGroup.updatedAt,
+                code: optionGroup.code,
+                name: groupTranslation ? groupTranslation.name : '',
+            };
+            const optionsFormArray = new FormArray([]);
+            for (const option of optionGroup.options) {
+                const optionTranslation = findTranslation(option, languageCode);
+                const optionControl = this.formBuilder.group({
+                    id: option.id,
+                    createdAt: option.createdAt,
+                    updatedAt: option.updatedAt,
+                    code: option.code,
+                    name: optionTranslation ? optionTranslation.name : '',
+                });
+                optionsFormArray.push(optionControl);
+            }
+            const groupControl = this.formBuilder.group(group);
+            groupControl.addControl('options', optionsFormArray);
+            groupsFormArray.push(groupControl);
+        }
+        this.detailForm.setControl('optionGroups', groupsFormArray);
+    }
+}
+ProductOptionsEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductOptionsEditorComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i1$1.ServerConfigService }, { token: i1$1.DataService }, { token: ProductDetailService }, { token: i4.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$1.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
+ProductOptionsEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductOptionsEditorComponent, selector: "vdr-product-options-editor", usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-language-selector\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        <div class=\"flex center\">\r\n            <div class=\"mr2\">\r\n                <clr-checkbox-wrapper>\r\n                    <input\r\n                        clrCheckbox\r\n                        type=\"checkbox\"\r\n                        id=\"auto-update\"\r\n                        [(ngModel)]=\"autoUpdateVariantNames\"\r\n                    />\r\n                    <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                </clr-checkbox-wrapper>\r\n            </div>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.pristine || detailForm.invalid\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </div>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"optionGroups$ | async as optionGroups\">\r\n    <div formGroupName=\"optionGroups\" class=\"clr-row\">\r\n        <div class=\"clr-col-12 clr-col-xl-6\" *ngFor=\"let optionGroup of getOptionGroups(); index as i\">\r\n            <section class=\"card\" [formArrayName]=\"i\">\r\n                <div class=\"card-header option-group-header\">\r\n                    <vdr-entity-info [entity]=\"optionGroup.value\"></vdr-entity-info>\r\n                    <div class=\"ml2\">{{ optionGroup.value.code }}</div>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            [id]=\"'name-' + i\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\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-' + i\"\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                <section class=\"card-block\">\r\n                    <table class=\"facet-values-list table mt2 mb4\" formGroupName=\"options\">\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                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr\r\n                                class=\"facet-value\"\r\n                                *ngFor=\"let option of getOptions(optionGroup); let i = index\"\r\n                                [formGroupName]=\"i\"\r\n                            >\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-entity-info [entity]=\"option.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                                    />\r\n                                </td>\r\n                                <td class=\"align-middle\"><input type=\"text\" formControlName=\"code\" /></td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </section>\r\n            </section>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [".option-group-header{display:flex;align-items:baseline}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1$1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1$1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { type: i1$1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }], directives: [{ type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], pipes: { "async": i5.AsyncPipe, "translate": i5$1.TranslatePipe, "hasPermission": i1$1.HasPermissionPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductOptionsEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-product-options-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-action-bar>\r\n    <vdr-ab-left>\r\n        <vdr-language-selector\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        <div class=\"flex center\">\r\n            <div class=\"mr2\">\r\n                <clr-checkbox-wrapper>\r\n                    <input\r\n                        clrCheckbox\r\n                        type=\"checkbox\"\r\n                        id=\"auto-update\"\r\n                        [(ngModel)]=\"autoUpdateVariantNames\"\r\n                    />\r\n                    <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                </clr-checkbox-wrapper>\r\n            </div>\r\n            <button\r\n                *vdrIfPermissions=\"updatePermission\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"detailForm.pristine || detailForm.invalid\"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </div>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"optionGroups$ | async as optionGroups\">\r\n    <div formGroupName=\"optionGroups\" class=\"clr-row\">\r\n        <div class=\"clr-col-12 clr-col-xl-6\" *ngFor=\"let optionGroup of getOptionGroups(); index as i\">\r\n            <section class=\"card\" [formArrayName]=\"i\">\r\n                <div class=\"card-header option-group-header\">\r\n                    <vdr-entity-info [entity]=\"optionGroup.value\"></vdr-entity-info>\r\n                    <div class=\"ml2\">{{ optionGroup.value.code }}</div>\r\n                </div>\r\n                <div class=\"card-block\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            [id]=\"'name-' + i\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\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-' + i\"\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                <section class=\"card-block\">\r\n                    <table class=\"facet-values-list table mt2 mb4\" formGroupName=\"options\">\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                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr\r\n                                class=\"facet-value\"\r\n                                *ngFor=\"let option of getOptions(optionGroup); let i = index\"\r\n                                [formGroupName]=\"i\"\r\n                            >\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-entity-info [entity]=\"option.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                                    />\r\n                                </td>\r\n                                <td class=\"align-middle\"><input type=\"text\" formControlName=\"code\" /></td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                </section>\r\n            </section>\r\n        </div>\r\n    </div>\r\n</form>\r\n", styles: [".option-group-header{display:flex;align-items:baseline}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i1$1.ServerConfigService }, { type: i1$1.DataService }, { type: ProductDetailService }, { type: i4.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$1.NotificationService }]; } });
+
+class ConfirmVariantDeletionDialogComponent {
+    constructor() {
+        this.variants = [];
+    }
+    confirm() {
+        this.resolveWith(true);
+    }
+    cancel() {
+        this.resolveWith();
+    }
+}
+ConfirmVariantDeletionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfirmVariantDeletionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ConfirmVariantDeletionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ConfirmVariantDeletionDialogComponent, selector: "vdr-confirm-variant-deletion-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.confirm-deletion-of-unused-variants-title' | translate }}\r\n</ng-template>\r\n{{ 'catalog.confirm-deletion-of-unused-variants-body' | translate }}\r\n<ul>\r\n    <li *ngFor=\"let variant of variants\">{{ variant.name }} ({{ variant.sku }})</li>\r\n</ul>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], directives: [{ type: i1$1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }], pipes: { "translate": i5$1.TranslatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ConfirmVariantDeletionDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-confirm-variant-deletion-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.confirm-deletion-of-unused-variants-title' | translate }}\r\n</ng-template>\r\n{{ 'catalog.confirm-deletion-of-unused-variants-body' | translate }}\r\n<ul>\r\n    <li *ngFor=\"let variant of variants\">{{ variant.name }} ({{ variant.sku }})</li>\r\n</ul>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""] }]
+        }] });
+
+class GeneratedVariant {
+    constructor(config) {
+        for (const key of Object.keys(config)) {
+            this[key] = config[key];
+        }
+    }
+}
+class ProductVariantsEditorComponent {
+    constructor(route, dataService, productDetailService, notificationService, modalService) {
+        this.route = route;
+        this.dataService = dataService;
+        this.productDetailService = productDetailService;
+        this.notificationService = notificationService;
+        this.modalService = modalService;
+        this.formValueChanged = false;
+        this.generatedVariants = [];
+    }
+    ngOnInit() {
+        this.initOptionsAndVariants();
+        this.languageCode =
+            this.route.snapshot.paramMap.get('lang') || getDefaultUiLanguage();
+        this.dataService.settings.getActiveChannel().single$.subscribe(data => {
+            this.currencyCode = data.activeChannel.currencyCode;
+        });
+    }
+    onFormChanged(variantInfo) {
+        this.formValueChanged = true;
+        variantInfo.enabled = true;
+    }
+    canDeactivate() {
+        return !this.formValueChanged;
+    }
+    getVariantsToAdd() {
+        return this.generatedVariants.filter(v => !v.existing && v.enabled);
+    }
+    getVariantName(variant) {
+        return variant.options.length === 0
+            ? marker('catalog.default-variant')
+            : variant.options.map(o => o.name).join(' ');
+    }
+    addOption() {
+        this.optionGroups.push({
+            isNew: true,
+            name: '',
+            values: [],
+        });
+    }
+    generateVariants() {
+        const groups = this.optionGroups.map(g => g.values);
+        const previousVariants = this.generatedVariants;
+        const generatedVariantFactory = (isDefault, options, existingVariant, prototypeVariant) => {
+            const prototype = this.getVariantPrototype(options, previousVariants);
+            return new GeneratedVariant({
+                enabled: true,
+                existing: !!existingVariant,
+                productVariantId: existingVariant?.id,
+                isDefault,
+                options,
+                price: existingVariant?.price ?? prototypeVariant?.price ?? prototype.price,
+                sku: existingVariant?.sku ?? prototypeVariant?.sku ?? prototype.sku,
+                stock: existingVariant?.stockOnHand ?? prototypeVariant?.stockOnHand ?? prototype.stock,
+            });
+        };
+        this.generatedVariants = groups.length
+            ? generateAllCombinations(groups).map(options => {
+                const existingVariant = this.product.variants.find(v => this.optionsAreEqual(v.options, options));
+                const prototypeVariant = this.product.variants.find(v => this.optionsAreSubset(v.options, options));
+                return generatedVariantFactory(false, options, existingVariant, prototypeVariant);
+            })
+            : [generatedVariantFactory(true, [], this.product.variants[0])];
+    }
+    /**
+     * Returns one of the existing variants to base the newly-generated variant's
+     * details off.
+     */
+    getVariantPrototype(options, previousVariants) {
+        const variantsWithSimilarOptions = previousVariants.filter(v => options.map(o => o.name).filter(name => v.options.map(o => o.name).includes(name)));
+        if (variantsWithSimilarOptions.length) {
+            return pick(previousVariants[0], ['sku', 'price', 'stock']);
+        }
+        return {
+            sku: '',
+            price: 0,
+            stock: 0,
+        };
+    }
+    deleteVariant(id) {
+        this.modalService
+            .dialog({
+            title: marker('catalog.confirm-delete-product-variant'),
+            buttons: [
+                { type: 'secondary', label: marker('common.cancel') },
+                { type: 'danger', label: marker('common.delete'), returnValue: true },
+            ],
+        })
+            .pipe(switchMap(response => response ? this.productDetailService.deleteProductVariant(id, this.product.id) : EMPTY), switchMap(() => this.reFetchProduct(null)))
+            .subscribe(() => {
+            this.notificationService.success(marker('common.notify-delete-success'), {
+                entity: 'ProductVariant',
+            });
+            this.initOptionsAndVariants();
+        }, err => {
+            this.notificationService.error(marker('common.notify-delete-error'), {
+                entity: 'ProductVariant',
+            });
+        });
+    }
+    save() {
+        const newOptionGroups = this.optionGroups
+            .filter(og => og.isNew)
+            .map(og => ({
+            name: og.name,
+            values: [],
+        }));
+        this.checkUniqueSkus()
+            .pipe(mergeMap(() => this.confirmDeletionOfObsoleteVariants()), mergeMap(() => this.productDetailService.createProductOptionGroups(newOptionGroups, this.languageCode)), mergeMap(createdOptionGroups => this.addOptionGroupsToProduct(createdOptionGroups)), mergeMap(createdOptionGroups => this.addNewOptionsToGroups(createdOptionGroups)), mergeMap(groupsIds => this.fetchOptionGroups(groupsIds)), mergeMap(groups => this.createNewProductVariants(groups)), mergeMap(res => this.deleteObsoleteVariants(res.createProductVariants)), mergeMap(variants => this.reFetchProduct(variants)))
+            .subscribe({
+            next: variants => {
+                this.formValueChanged = false;
+                this.notificationService.success(marker('catalog.created-new-variants-success'), {
+                    count: variants.length,
+                });
+                this.initOptionsAndVariants();
+            },
+        });
+    }
+    checkUniqueSkus() {
+        const withDuplicateSkus = this.generatedVariants.filter((variant, index) => {
+            return this.generatedVariants.find(gv => gv.sku.trim() === variant.sku.trim() && gv !== variant);
+        });
+        if (withDuplicateSkus.length) {
+            return this.modalService
+                .dialog({
+                title: marker('catalog.duplicate-sku-warning'),
+                body: unique(withDuplicateSkus.map(v => `${v.sku}`)).join(', '),
+                buttons: [{ label: marker('common.close'), returnValue: false, type: 'primary' }],
+            })
+                .pipe(mergeMap(res => EMPTY));
+        }
+        else {
+            return of(true);
+        }
+    }
+    confirmDeletionOfObsoleteVariants() {
+        const obsoleteVariants = this.getObsoleteVariants();
+        if (obsoleteVariants.length) {
+            return this.modalService
+                .fromComponent(ConfirmVariantDeletionDialogComponent, {
+                locals: {
+                    variants: obsoleteVariants,
+                },
+            })
+                .pipe(mergeMap(res => {
+                return res === true ? of(true) : EMPTY;
+            }));
+        }
+        else {
+            return of(true);
+        }
+    }
+    getObsoleteVariants() {
+        return this.product.variants.filter(variant => !this.generatedVariants.find(gv => gv.productVariantId === variant.id));
+    }
+    hasOnlyDefaultVariant(product) {
+        return product.variants.length === 1 && product.optionGroups.length === 0;
+    }
+    addOptionGroupsToProduct(createdOptionGroups) {
+        if (createdOptionGroups.length) {
+            return forkJoin(createdOptionGroups.map(optionGroup => {
+                return this.dataService.product.addOptionGroupToProduct({
+                    productId: this.product.id,
+                    optionGroupId: optionGroup.id,
+                });
+            })).pipe(map(() => createdOptionGroups));
+        }
+        else {
+            return of([]);
+        }
+    }
+    addNewOptionsToGroups(createdOptionGroups) {
+        const newOptions = this.optionGroups
+            .map(og => {
+            const createdGroup = createdOptionGroups.find(cog => cog.name === og.name);
+            const productOptionGroupId = createdGroup ? createdGroup.id : og.id;
+            if (!productOptionGroupId) {
+                throw new Error('Could not get a productOptionGroupId');
+            }
+            return og.values
+                .filter(v => !v.locked)
+                .map(v => ({
+                productOptionGroupId,
+                code: normalizeString(v.name, '-'),
+                translations: [{ name: v.name, languageCode: this.languageCode }],
+            }));
+        })
+            .reduce((flat, options) => [...flat, ...options], []);
+        const allGroupIds = [
+            ...createdOptionGroups.map(g => g.id),
+            ...this.optionGroups.map(g => g.id).filter(notNullOrUndefined),
+        ];
+        if (newOptions.length) {
+            return forkJoin(newOptions.map(input => this.dataService.product.addOptionToGroup(input))).pipe(map(() => allGroupIds));
+        }
+        else {
+            return of(allGroupIds);
+        }
+    }
+    fetchOptionGroups(groupsIds) {
+        return forkJoin(groupsIds.map(id => this.dataService.product
+            .getProductOptionGroup(id)
+            .mapSingle(data => data.productOptionGroup)
+            .pipe(filter(notNullOrUndefined))));
+    }
+    createNewProductVariants(groups) {
+        const options = groups
+            .filter(notNullOrUndefined)
+            .map(og => og.options)
+            .reduce((flat, o) => [...flat, ...o], []);
+        const variants = this.generatedVariants
+            .filter(v => v.enabled && !v.existing)
+            .map(v => ({
+            price: v.price,
+            sku: v.sku,
+            stock: v.stock,
+            optionIds: v.options
+                .map(name => options.find(o => o.name === name.name))
+                .filter(notNullOrUndefined)
+                .map(o => o.id),
+        }));
+        return this.productDetailService.createProductVariants(this.product, variants, options, this.languageCode);
+    }
+    deleteObsoleteVariants(input) {
+        const obsoleteVariants = this.getObsoleteVariants();
+        if (obsoleteVariants.length) {
+            const deleteOperations = obsoleteVariants.map(v => this.dataService.product.deleteProductVariant(v.id).pipe(map(() => input)));
+            return forkJoin(...deleteOperations);
+        }
+        else {
+            return of(input);
+        }
+    }
+    reFetchProduct(input) {
+        // Re-fetch the Product to force an update to the view.
+        const id = this.route.snapshot.paramMap.get('id');
+        if (id) {
+            return this.dataService.product.getProduct(id).single$.pipe(map(() => input));
+        }
+        else {
+            return of(input);
+        }
+    }
+    initOptionsAndVariants() {
+        this.dataService.product
+            // tslint:disable-next-line:no-non-null-assertion
+            .getProductVariantsOptions(this.route.snapshot.paramMap.get('id'))
+            // tslint:disable-next-line:no-non-null-assertion
+            .mapSingle(({ product }) => product)
+            .subscribe(p => {
+            this.product = p;
+            this.optionGroups = p.optionGroups.map(og => {
+                return {
+                    id: og.id,
+                    isNew: false,
+                    name: og.name,
+                    values: og.options.map(o => ({
+                        id: o.id,
+                        name: o.name,
+                        locked: true,
+                    })),
+                };
+            });
+            this.generateVariants();
+        });
+    }
+    optionsAreEqual(a, b) {
+        return this.toOptionString(a) === this.toOptionString(b);
+    }
+    optionsAreSubset(a, b) {
+        return this.toOptionString(b).includes(this.toOptionString(a));
+    }
+    toOptionString(o) {
+        return o
+            .map(x => x.name)
+            .sort()
+            .join('|');
+    }
+}
+ProductVariantsEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsEditorComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1$1.DataService }, { token: ProductDetailService }, { token: i1$1.NotificationService }, { token: i1$1.ModalService }], target: i0.ɵɵFactoryTarget.Component });
+ProductVariantsEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantsEditorComponent, selector: "vdr-product-variants-editor", ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"!formValueChanged || getVariantsToAdd().length === 0\"\r\n        >\r\n            {{ 'common.add-new-variants' | translate: { count: getVariantsToAdd().length } }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n</div>\r\n<button\r\n    class=\"btn btn-primary-outline btn-sm\"\r\n    (click)=\"addOption()\"\r\n>\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.create' | translate }}</th>\r\n                <th>{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                <th></th>\r\n            </tr>\r\n        </thead>\r\n        <tr *ngFor=\"let variant of generatedVariants\" [class.disabled]=\"!variant.enabled || variant.existing\">\r\n            <td>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    *ngIf=\"!variant.existing\"\r\n                    [(ngModel)]=\"variant.enabled\"\r\n                    name=\"enabled\"\r\n                    clrCheckbox\r\n                    (ngModelChange)=\"formValueChanged = true\"\r\n                />\r\n            </td>\r\n            <td>\r\n                {{ getVariantName(variant) | translate }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        [(ngModel)]=\"variant.sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                        name=\"sku\"\r\n                        required\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.sku }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variant.price\"\r\n                        name=\"price\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.price | localeCurrency: currencyCode }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variant.stock\"\r\n                        name=\"stock\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.stock }}</span>\r\n            </td>\r\n            <td>\r\n                <vdr-dropdown *ngIf=\"variant.productVariantId as productVariantId\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"deleteVariant(productVariantId)\"\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    </table>\r\n</div>\r\n", styles: [".option-groups{display:flex}.option-groups:first-of-type{margin-top:24px}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i5$1.TranslatePipe, "localeCurrency": i1$1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-product-variants-editor', changeDetection: ChangeDetectionStrategy.Default, template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"!formValueChanged || getVariantsToAdd().length === 0\"\r\n        >\r\n            {{ 'common.add-new-variants' | translate: { count: getVariantsToAdd().length } }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n</div>\r\n<button\r\n    class=\"btn btn-primary-outline btn-sm\"\r\n    (click)=\"addOption()\"\r\n>\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.create' | translate }}</th>\r\n                <th>{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                <th></th>\r\n            </tr>\r\n        </thead>\r\n        <tr *ngFor=\"let variant of generatedVariants\" [class.disabled]=\"!variant.enabled || variant.existing\">\r\n            <td>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    *ngIf=\"!variant.existing\"\r\n                    [(ngModel)]=\"variant.enabled\"\r\n                    name=\"enabled\"\r\n                    clrCheckbox\r\n                    (ngModelChange)=\"formValueChanged = true\"\r\n                />\r\n            </td>\r\n            <td>\r\n                {{ getVariantName(variant) | translate }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        [(ngModel)]=\"variant.sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                        name=\"sku\"\r\n                        required\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.sku }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variant.price\"\r\n                        name=\"price\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.price | localeCurrency: currencyCode }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variant.stock\"\r\n                        name=\"stock\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.stock }}</span>\r\n            </td>\r\n            <td>\r\n                <vdr-dropdown *ngIf=\"variant.productVariantId as productVariantId\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"deleteVariant(productVariantId)\"\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    </table>\r\n</div>\r\n", styles: [".option-groups{display:flex}.option-groups:first-of-type{margin-top:24px}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1$1.DataService }, { type: ProductDetailService }, { type: i1$1.NotificationService }, { type: i1$1.ModalService }]; } });
+
+class AssetResolver extends BaseEntityResolver {
+    constructor(router, dataService) {
+        super(router, {
+            __typename: 'Asset',
+            id: '',
+            createdAt: '',
+            updatedAt: '',
+            name: '',
+            type: AssetType.IMAGE,
+            fileSize: 0,
+            mimeType: '',
+            width: 0,
+            height: 0,
+            source: '',
+            preview: '',
+            focalPoint: null,
+        }, id => dataService.product.getAsset(id).mapStream(data => data.asset));
+    }
+}
+AssetResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetResolver, deps: [{ token: i1.Router }, { token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Injectable });
+AssetResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetResolver, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: AssetResolver, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1$1.DataService }]; } });
+
+class CollectionResolver extends BaseEntityResolver {
+    constructor(router, dataService) {
+        super(router, {
+            __typename: 'Collection',
+            id: '',
+            createdAt: '',
+            updatedAt: '',
+            languageCode: getDefaultUiLanguage(),
+            name: '',
+            slug: '',
+            isPrivate: false,
+            description: '',
+            featuredAsset: null,
+            assets: [],
+            translations: [],
+            filters: [],
+            parent: {},
+            children: null,
+        }, id => dataService.collection.getCollection(id).mapStream(data => data.collection));
+    }
+}
+CollectionResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionResolver, deps: [{ token: i1.Router }, { token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Injectable });
+CollectionResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionResolver, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CollectionResolver, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1$1.DataService }]; } });
+
+class FacetResolver extends BaseEntityResolver {
+    constructor(router, dataService) {
+        super(router, {
+            __typename: 'Facet',
+            id: '',
+            createdAt: '',
+            updatedAt: '',
+            isPrivate: false,
+            languageCode: getDefaultUiLanguage(),
+            name: '',
+            code: '',
+            translations: [],
+            values: [],
+        }, id => dataService.facet.getFacet(id).mapStream(data => data.facet));
+    }
+}
+FacetResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetResolver, deps: [{ token: i1.Router }, { token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Injectable });
+FacetResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetResolver, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: FacetResolver, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1$1.DataService }]; } });
+
+class ProductResolver extends BaseEntityResolver {
+    constructor(dataService, router) {
+        super(router, {
+            __typename: 'Product',
+            id: '',
+            createdAt: '',
+            updatedAt: '',
+            enabled: true,
+            languageCode: getDefaultUiLanguage(),
+            name: '',
+            slug: '',
+            featuredAsset: null,
+            assets: [],
+            description: '',
+            translations: [],
+            optionGroups: [],
+            facetValues: [],
+            variantList: { items: [], totalItems: 0 },
+            channels: [],
+        }, id => dataService.product
+            .getProduct(id, { take: 10 })
+            .refetchOnChannelChange()
+            .mapStream(data => data.product));
+    }
+}
+ProductResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductResolver, deps: [{ token: i1$1.DataService }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+ProductResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductResolver, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductResolver, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.DataService }, { type: i1.Router }]; } });
+
+class ProductVariantsResolver extends BaseEntityResolver {
+    constructor(router, dataService) {
+        super(router, {
+            __typename: 'Product',
+            id: '',
+            createdAt: '',
+            updatedAt: '',
+            name: '',
+            optionGroups: [],
+            variants: [],
+        }, id => dataService.product.getProductVariantsOptions(id).mapStream(data => data.product));
+    }
+}
+ProductVariantsResolver.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsResolver, deps: [{ token: i1.Router }, { token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Injectable });
+ProductVariantsResolver.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsResolver, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsResolver, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1$1.DataService }]; } });
+
+const catalogRoutes = [
+    {
+        path: 'products',
+        component: ProductListComponent,
+        data: {
+            breadcrumb: marker('breadcrumb.products'),
+        },
+    },
+    {
+        path: 'products/:id',
+        component: ProductDetailComponent,
+        resolve: createResolveData(ProductResolver),
+        canDeactivate: [CanDeactivateDetailGuard],
+        data: {
+            breadcrumb: productBreadcrumb,
+        },
+    },
+    {
+        path: 'products/:id/manage-variants',
+        component: ProductVariantsEditorComponent,
+        resolve: createResolveData(ProductVariantsResolver),
+        canDeactivate: [CanDeactivateDetailGuard],
+        data: {
+            breadcrumb: productVariantEditorBreadcrumb,
+        },
+    },
+    {
+        path: 'products/:id/options',
+        component: ProductOptionsEditorComponent,
+        resolve: createResolveData(ProductVariantsResolver),
+        canDeactivate: [CanDeactivateDetailGuard],
+        data: {
+            breadcrumb: productOptionsEditorBreadcrumb,
+        },
+    },
+    {
+        path: 'facets',
+        component: FacetListComponent,
+        data: {
+            breadcrumb: marker('breadcrumb.facets'),
+        },
+    },
+    {
+        path: 'facets/:id',
+        component: FacetDetailComponent,
+        resolve: createResolveData(FacetResolver),
+        canDeactivate: [CanDeactivateDetailGuard],
+        data: {
+            breadcrumb: facetBreadcrumb,
+        },
+    },
+    {
+        path: 'collections',
+        component: CollectionListComponent,
+        data: {
+            breadcrumb: marker('breadcrumb.collections'),
+        },
+    },
+    {
+        path: 'collections/:id',
+        component: CollectionDetailComponent,
+        resolve: createResolveData(CollectionResolver),
+        canDeactivate: [CanDeactivateDetailGuard],
+        data: {
+            breadcrumb: collectionBreadcrumb,
+        },
+    },
+    {
+        path: 'assets',
+        component: AssetListComponent,
+        data: {
+            breadcrumb: marker('breadcrumb.assets'),
+        },
+    },
+    {
+        path: 'assets/:id',
+        component: AssetDetailComponent,
+        resolve: createResolveData(AssetResolver),
+        data: {
+            breadcrumb: assetBreadcrumb,
+        },
+    },
+];
+function productBreadcrumb(data, params) {
+    return detailBreadcrumb({
+        entity: data.entity,
+        id: params.id,
+        breadcrumbKey: 'breadcrumb.products',
+        getName: product => product.name,
+        route: 'products',
+    });
+}
+function productVariantEditorBreadcrumb(data, params) {
+    return data.entity.pipe(map((entity) => {
+        return [
+            {
+                label: marker('breadcrumb.products'),
+                link: ['../', 'products'],
+            },
+            {
+                label: `${entity.name}`,
+                link: ['../', 'products', params.id, { tab: 'variants' }],
+            },
+            {
+                label: marker('breadcrumb.manage-variants'),
+                link: ['manage-variants'],
+            },
+        ];
+    }));
+}
+function productOptionsEditorBreadcrumb(data, params) {
+    return data.entity.pipe(map((entity) => {
+        return [
+            {
+                label: marker('breadcrumb.products'),
+                link: ['../', 'products'],
+            },
+            {
+                label: `${entity.name}`,
+                link: ['../', 'products', params.id, { tab: 'variants' }],
+            },
+            {
+                label: marker('breadcrumb.product-options'),
+                link: ['options'],
+            },
+        ];
+    }));
+}
+function facetBreadcrumb(data, params) {
+    return detailBreadcrumb({
+        entity: data.entity,
+        id: params.id,
+        breadcrumbKey: 'breadcrumb.facets',
+        getName: facet => facet.name,
+        route: 'facets',
+    });
+}
+function collectionBreadcrumb(data, params) {
+    return detailBreadcrumb({
+        entity: data.entity,
+        id: params.id,
+        breadcrumbKey: 'breadcrumb.collections',
+        getName: collection => collection.name,
+        route: 'collections',
+    });
+}
+function assetBreadcrumb(data, params) {
+    return detailBreadcrumb({
+        entity: data.entity,
+        id: params.id,
+        breadcrumbKey: 'breadcrumb.assets',
+        getName: asset => asset.name,
+        route: 'assets',
+    });
+}
+
+const CATALOG_COMPONENTS = [
+    ProductListComponent,
+    ProductDetailComponent,
+    FacetListComponent,
+    FacetDetailComponent,
+    GenerateProductVariantsComponent,
+    ProductVariantsListComponent,
+    ApplyFacetDialogComponent,
+    AssetListComponent,
+    AssetsComponent,
+    VariantPriceDetailComponent,
+    CollectionListComponent,
+    CollectionDetailComponent,
+    CollectionTreeComponent,
+    CollectionTreeNodeComponent,
+    CollectionContentsComponent,
+    ProductVariantsTableComponent,
+    ProductSearchInputComponent,
+    OptionValueInputComponent,
+    UpdateProductOptionDialogComponent,
+    ProductVariantsEditorComponent,
+    AssignProductsToChannelDialogComponent,
+    AssetDetailComponent,
+    ConfirmVariantDeletionDialogComponent,
+    ProductOptionsEditorComponent,
+];
+class CatalogModule {
+}
+CatalogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CatalogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CatalogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CatalogModule, declarations: [ProductListComponent,
+        ProductDetailComponent,
+        FacetListComponent,
+        FacetDetailComponent,
+        GenerateProductVariantsComponent,
+        ProductVariantsListComponent,
+        ApplyFacetDialogComponent,
+        AssetListComponent,
+        AssetsComponent,
+        VariantPriceDetailComponent,
+        CollectionListComponent,
+        CollectionDetailComponent,
+        CollectionTreeComponent,
+        CollectionTreeNodeComponent,
+        CollectionContentsComponent,
+        ProductVariantsTableComponent,
+        ProductSearchInputComponent,
+        OptionValueInputComponent,
+        UpdateProductOptionDialogComponent,
+        ProductVariantsEditorComponent,
+        AssignProductsToChannelDialogComponent,
+        AssetDetailComponent,
+        ConfirmVariantDeletionDialogComponent,
+        ProductOptionsEditorComponent], imports: [SharedModule, i1.RouterModule], exports: [ProductListComponent,
+        ProductDetailComponent,
+        FacetListComponent,
+        FacetDetailComponent,
+        GenerateProductVariantsComponent,
+        ProductVariantsListComponent,
+        ApplyFacetDialogComponent,
+        AssetListComponent,
+        AssetsComponent,
+        VariantPriceDetailComponent,
+        CollectionListComponent,
+        CollectionDetailComponent,
+        CollectionTreeComponent,
+        CollectionTreeNodeComponent,
+        CollectionContentsComponent,
+        ProductVariantsTableComponent,
+        ProductSearchInputComponent,
+        OptionValueInputComponent,
+        UpdateProductOptionDialogComponent,
+        ProductVariantsEditorComponent,
+        AssignProductsToChannelDialogComponent,
+        AssetDetailComponent,
+        ConfirmVariantDeletionDialogComponent,
+        ProductOptionsEditorComponent] });
+CatalogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CatalogModule, imports: [[SharedModule, RouterModule.forChild(catalogRoutes)]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: CatalogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SharedModule, RouterModule.forChild(catalogRoutes)],
+                    exports: [...CATALOG_COMPONENTS],
+                    declarations: [...CATALOG_COMPONENTS],
+                }]
+        }] });
+
+// This file was generated by the build-public-api.ts script
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ApplyFacetDialogComponent, AssetDetailComponent, AssetListComponent, AssetResolver, AssetsComponent, AssignProductsToChannelDialogComponent, CatalogModule, CollectionContentsComponent, CollectionDetailComponent, CollectionListComponent, CollectionResolver, CollectionTreeComponent, CollectionTreeNodeComponent, CollectionTreeService, ConfirmVariantDeletionDialogComponent, FacetDetailComponent, FacetListComponent, FacetResolver, GenerateProductVariantsComponent, GeneratedVariant, OPTION_VALUE_INPUT_VALUE_ACCESSOR, OptionValueInputComponent, ProductDetailComponent, ProductDetailService, ProductListComponent, ProductOptionsEditorComponent, ProductResolver, ProductSearchInputComponent, ProductVariantsEditorComponent, ProductVariantsListComponent, ProductVariantsResolver, ProductVariantsTableComponent, UpdateProductOptionDialogComponent, VariantPriceDetailComponent, arrayToTree, assetBreadcrumb, catalogRoutes, collectionBreadcrumb, facetBreadcrumb, productBreadcrumb, productOptionsEditorBreadcrumb, productVariantEditorBreadcrumb, replaceLast };
+//# sourceMappingURL=vendure-admin-ui-catalog.mjs.map