@vendure/admin-ui 1.5.0 → 2.0.0-next.2

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

@@ -1,3787 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Injectable, EventEmitter, Input, HostBinding, Output, ContentChild, TemplateRef, SkipSelf, Optional, forwardRef, NgModule } from '@angular/core';
-import * as i1 from '@angular/router';
-import { Router, ActivatedRoute, RouterModule } from '@angular/router';
-import * as i2 from '@vendure/admin-ui/core';
-import { BaseDetailComponent, ServerConfigService, NotificationService, DataService, BaseListComponent, SortOrder, LogicalOperator, DeletionResult, ModalService, Permission, unicodePatternValidator, findTranslation, getConfigArgValue, createUpdatedTranslatable, encodeConfigArgValue, FacetValueSelectorComponent, flattenFacetValues, JobState, JobQueueService, getDefaultUiLanguage, BaseEntityResolver, AssetType, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, AssetPickerDialogComponent, AssetPreviewDialogComponent, SingleSearchSelectionModelFactory, GlobalFlag, SharedModule } from '@vendure/admin-ui/core';
-import { marker } from '@biesbjerg/ngx-translate-extract-marker';
-import { map, debounceTime, takeUntil, finalize, switchMap, take, mergeMap, shareReplay, distinctUntilChanged, tap, mapTo, filter, startWith, skipUntil, skip, withLatestFrom, delay } from 'rxjs/operators';
-import { FormGroup, FormControl, FormBuilder, Validators, FormArray, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { BehaviorSubject, combineLatest, EMPTY, Subject, forkJoin, of, throwError, from, merge } from 'rxjs';
-import { normalizeString } from '@vendure/common/lib/normalize-string';
-import { notNullOrUndefined, generateAllCombinations } from '@vendure/common/lib/shared-utils';
-import { SortOrder as SortOrder$1 } from '@vendure/common/lib/generated-shop-types';
-import { Location } from '@angular/common';
-import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
-import { unique } from '@vendure/common/lib/unique';
-import { __awaiter } from 'tslib';
-import { pick } from '@vendure/common/lib/pick';
-import { moveItemInArray } from '@angular/cdk/drag-drop';
-import { SELECTION_MODEL_FACTORY } from '@ng-select/ng-select';
-
-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) => (Object.assign(Object.assign({}, hash), { [field.name]: '' })), {})),
-        });
-        this.init();
-    }
-    ngOnDestroy() {
-        this.destroy();
-    }
-    onAssetChange(event) {
-        var _a, _b;
-        (_a = this.detailForm.get('name')) === null || _a === void 0 ? void 0 : _a.setValue(event.name);
-        (_b = this.detailForm.get('tags')) === null || _b === void 0 ? void 0 : _b.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) {
-        var _a, _b;
-        (_a = this.detailForm.get('name')) === null || _a === void 0 ? void 0 : _a.setValue(entity.name);
-        (_b = this.detailForm.get('tags')) === null || _b === void 0 ? void 0 : _b.setValue(entity.tags);
-        if (this.customFields.length) {
-            this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['customFields']), entity);
-        }
-    }
-}
-AssetDetailComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-asset-detail',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:column;height:100%}\n"]
-            },] }
-];
-AssetDetailComponent.ctorParameters = () => [
-    { type: Router },
-    { type: ActivatedRoute },
-    { type: ServerConfigService },
-    { type: NotificationService },
-    { type: DataService },
-    { type: 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) => {
-            var _a;
-            const searchTerm = this.searchTerm$.value;
-            const tags = (_a = this.filterByTags$.value) === null || _a === void 0 ? void 0 : _a.map(t => t.value);
-            return {
-                options: Object.assign(Object.assign({ 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.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"]
-            },] }
-];
-AssetListComponent.ctorParameters = () => [
-    { type: NotificationService },
-    { type: ModalService },
-    { type: DataService },
-    { type: Router },
-    { type: ActivatedRoute }
-];
-
-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) => (Object.assign(Object.assign({}, 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) => (Object.assign(Object.assign({}, 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) {
-        var _a, _b;
-        const updatedCategory = createUpdatedTranslatable({
-            translatable: category,
-            updatedFields: form.value,
-            customFieldConfig: this.customFields,
-            languageCode,
-            defaultTranslation: {
-                languageCode,
-                name: category.name || '',
-                slug: category.slug || '',
-                description: category.description || '',
-            },
-        });
-        return Object.assign(Object.assign({}, updatedCategory), { assetIds: (_a = this.assetChanges.assets) === null || _a === void 0 ? void 0 : _a.map(a => a.id), featuredAssetId: (_b = this.assetChanges.featuredAsset) === null || _b === void 0 ? void 0 : _b.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.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-collection-detail',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".visible-toggle{margin-top:-3px!important}\n"]
-            },] }
-];
-CollectionDetailComponent.ctorParameters = () => [
-    { type: Router },
-    { type: ActivatedRoute },
-    { type: ServerConfigService },
-    { type: ChangeDetectorRef },
-    { type: DataService },
-    { type: FormBuilder },
-    { type: NotificationService },
-    { type: ModalService }
-];
-CollectionDetailComponent.propDecorators = {
-    contentsComponent: [{ type: ViewChild, args: ['collectionContents',] }]
-};
-
-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 = Object.assign({}, 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: Object.assign({ skip: 0, take: 1000 }, (this.filterTermControl.value
-                ? {
-                    filter: {
-                        name: {
-                            contains: this.filterTermControl.value,
-                        },
-                    },
-                }
-                : {})),
-        });
-    }
-}
-CollectionListComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-collection-list',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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"]
-            },] }
-];
-CollectionListComponent.ctorParameters = () => [
-    { type: DataService },
-    { type: NotificationService },
-    { type: ModalService },
-    { type: Router },
-    { type: ActivatedRoute },
-    { type: 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) => (Object.assign(Object.assign({}, 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) {
-        var _a;
-        const currentTranslation = findTranslation(facet, languageCode);
-        this.detailForm.patchValue({
-            facet: {
-                code: facet.code,
-                visible: !facet.isPrivate,
-                name: (_a = currentTranslation === null || currentTranslation === void 0 ? void 0 : currentTranslation.name) !== null && _a !== void 0 ? _a : '',
-            },
-        });
-        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) => {
-            var _a, _b, _c;
-            const valueTranslation = findTranslation(value, languageCode);
-            const group = {
-                id: value.id,
-                code: value.code,
-                name: valueTranslation ? valueTranslation.name : '',
-            };
-            const valueControl = currentValuesFormArray.at(i);
-            if (valueControl) {
-                (_a = valueControl.get('id')) === null || _a === void 0 ? void 0 : _a.setValue(group.id);
-                (_b = valueControl.get('code')) === null || _b === void 0 ? void 0 : _b.setValue(group.code);
-                (_c = valueControl.get('name')) === null || _c === void 0 ? void 0 : _c.setValue(group.name);
-            }
-            else {
-                currentValuesFormArray.insert(i, this.formBuilder.group(group));
-            }
-            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: Object.assign(Object.assign({}, value), { translations: [] }),
-            updatedFields: value,
-            customFieldConfig: this.customValueFields,
-            languageCode,
-            defaultTranslation: {
-                languageCode,
-                name: '',
-            },
-        }))
-            .map(input => (Object.assign({ 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.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-facet-detail',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".visible-toggle{margin-top:-3px!important}\n"]
-            },] }
-];
-FacetDetailComponent.ctorParameters = () => [
-    { type: Router },
-    { type: ActivatedRoute },
-    { type: ServerConfigService },
-    { type: ChangeDetectorRef },
-    { type: DataService },
-    { type: FormBuilder },
-    { type: NotificationService },
-    { type: 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.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"]
-            },] }
-];
-FacetListComponent.ctorParameters = () => [
-    { type: DataService },
-    { type: ModalService },
-    { type: NotificationService },
-    { type: ServerConfigService },
-    { type: Router },
-    { type: ActivatedRoute }
-];
-
-/**
- * @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 Object.assign(Object.assign({}, 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 => {
-            var _a, _b, _c, _d;
-            if (productInput) {
-                updateOperations.push(this.dataService.product.updateProduct(productInput));
-                const productOldName = (_b = (_a = findTranslation(product, languageCode)) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : '';
-                const productNewName = (_c = findTranslation(productInput, languageCode)) === null || _c === void 0 ? void 0 : _c.name;
-                if (productNewName && productOldName !== productNewName && autoUpdate) {
-                    for (const variant of variants) {
-                        const currentVariantName = ((_d = findTranslation(variant, languageCode)) === null || _d === void 0 ? void 0 : _d.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 => {
-            var _a, _b, _c;
-            let updateProductVariantNames$ = of([]);
-            if (input.autoUpdate) {
-                // Update any ProductVariants' names which include the option name
-                let oldOptionName;
-                const newOptionName = (_a = findTranslation(input, languageCode)) === null || _a === void 0 ? void 0 : _a.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 = (_b = findTranslation(variant.options.find(o => o.id === input.id), languageCode)) === null || _b === void 0 ? void 0 : _b.name;
-                        }
-                        const variantName = ((_c = findTranslation(variant, languageCode)) === null || _c === void 0 ? void 0 : _c.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.ɵprov = i0.ɵɵdefineInjectable({ factory: function ProductDetailService_Factory() { return new ProductDetailService(i0.ɵɵinject(i2.DataService)); }, token: ProductDetailService, providedIn: "root" });
-ProductDetailService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-ProductDetailService.ctorParameters = () => [
-    { type: DataService }
-];
-
-class ApplyFacetDialogComponent {
-    constructor(changeDetector) {
-        this.changeDetector = changeDetector;
-        this.selectedValues = [];
-    }
-    ngAfterViewInit() {
-        setTimeout(() => this.selector.focus(), 0);
-    }
-    selectValues() {
-        this.resolveWith(this.selectedValues);
-    }
-    cancel() {
-        this.resolveWith();
-    }
-}
-ApplyFacetDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-apply-facet-dialog',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-ApplyFacetDialogComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-ApplyFacetDialogComponent.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();
-    }
-    getTopVariants(take) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const variants = [];
-            for (let i = 0; i < this.productIds.length && variants.length < take; i++) {
-                const productVariants = yield this.dataService.product
-                    .getProduct(this.productIds[i], { take: this.isProductVariantMode ? undefined : take })
-                    .mapSingle(({ product }) => {
-                    const _variants = product ? product.variantList.items : [];
-                    return _variants.filter(v => { var _a; return this.isProductVariantMode ? (_a = this.productVariantIds) === null || _a === void 0 ? void 0 : _a.includes(v.id) : true; });
-                })
-                    .toPromise();
-                variants.push(...(productVariants || []));
-            }
-            return variants.slice(0, take);
-        });
-    }
-}
-AssignProductsToChannelDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-assign-products-to-channel-dialog',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["vdr-channel-assignment-control{min-width:200px}.channel-price-preview{margin-top:24px}.channel-price-preview table.table{margin-top:6px}\n"]
-            },] }
-];
-AssignProductsToChannelDialogComponent.ctorParameters = () => [
-    { type: DataService },
-    { type: NotificationService }
-];
-
-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) => (Object.assign(Object.assign({}, 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(Object.assign(Object.assign({ 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(['./', Object.assign(Object.assign({}, 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]) => {
-            var _a, _b;
-            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: (_b = (_a = this.detailForm.get(['product', 'autoUpdateVariantNames'])) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 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(Object.assign(Object.assign({}, 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) => (Object.assign(Object.assign({}, 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) {
-        var _a, _b;
-        const updatedProduct = createUpdatedTranslatable({
-            translatable: product,
-            updatedFields: productFormGroup.value,
-            customFieldConfig: this.customFields,
-            languageCode,
-            defaultTranslation: {
-                languageCode,
-                name: product.name || '',
-                slug: product.slug || '',
-                description: product.description || '',
-            },
-        });
-        return Object.assign(Object.assign({}, updatedProduct), { assetIds: (_a = this.assetChanges.assets) === null || _a === void 0 ? void 0 : _a.map(a => a.id), featuredAssetId: (_b = this.assetChanges.featuredAsset) === null || _b === void 0 ? void 0 : _b.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) => {
-            var _a, _b;
-            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 = (_a = assetChanges.featuredAsset) === null || _a === void 0 ? void 0 : _a.id;
-                result.assetIds = (_b = assetChanges.assets) === null || _b === void 0 ? void 0 : _b.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.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-product-detail',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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"]
-            },] }
-];
-ProductDetailComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: Router },
-    { type: ServerConfigService },
-    { type: ProductDetailService },
-    { type: FormBuilder },
-    { type: ModalService },
-    { type: NotificationService },
-    { type: DataService },
-    { type: Location },
-    { type: ChangeDetectorRef }
-];
-
-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.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"]
-            },] }
-];
-ProductListComponent.ctorParameters = () => [
-    { type: DataService },
-    { type: ModalService },
-    { type: NotificationService },
-    { type: JobQueueService },
-    { type: ServerConfigService },
-    { type: Router },
-    { type: ActivatedRoute }
-];
-ProductListComponent.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]) => {
-            var _a, _b, _c, _d, _e;
-            const updateOperations = [];
-            for (const optionGroupForm of this.getOptionGroups()) {
-                if (((_a = optionGroupForm.get('name')) === null || _a === void 0 ? void 0 : _a.dirty) || ((_b = optionGroupForm.get('code')) === null || _b === void 0 ? void 0 : _b.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 (((_c = optionForm.get('name')) === null || _c === void 0 ? void 0 : _c.dirty) || ((_d = optionForm.get('code')) === null || _d === void 0 ? void 0 : _d.dirty)) {
-                        const optionGroup = (_e = optionGroups
-                            .find(og => og.id === optionGroupForm.value.id)) === null || _e === void 0 ? void 0 : _e.options.find(o => o.id === optionForm.value.id);
-                        if (optionGroup) {
-                            const input = this.getUpdatedOption(optionGroup, optionForm, languageCode);
-                            updateOperations.push(this.productDetailService.updateProductOption(Object.assign(Object.assign({}, 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.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-product-options-editor',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".option-group-header{display:flex;align-items:baseline}\n"]
-            },] }
-];
-ProductOptionsEditorComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: Router },
-    { type: ServerConfigService },
-    { type: DataService },
-    { type: ProductDetailService },
-    { type: FormBuilder },
-    { type: ChangeDetectorRef },
-    { type: NotificationService }
-];
-
-class ConfirmVariantDeletionDialogComponent {
-    constructor() {
-        this.variants = [];
-    }
-    confirm() {
-        this.resolveWith(true);
-    }
-    cancel() {
-        this.resolveWith();
-    }
-}
-ConfirmVariantDeletionDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-confirm-variant-deletion-dialog',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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) => {
-            var _a, _b, _c, _d, _e, _f;
-            const prototype = this.getVariantPrototype(options, previousVariants);
-            return new GeneratedVariant({
-                enabled: true,
-                existing: !!existingVariant,
-                productVariantId: existingVariant === null || existingVariant === void 0 ? void 0 : existingVariant.id,
-                isDefault,
-                options,
-                price: (_b = (_a = existingVariant === null || existingVariant === void 0 ? void 0 : existingVariant.price) !== null && _a !== void 0 ? _a : prototypeVariant === null || prototypeVariant === void 0 ? void 0 : prototypeVariant.price) !== null && _b !== void 0 ? _b : prototype.price,
-                sku: (_d = (_c = existingVariant === null || existingVariant === void 0 ? void 0 : existingVariant.sku) !== null && _c !== void 0 ? _c : prototypeVariant === null || prototypeVariant === void 0 ? void 0 : prototypeVariant.sku) !== null && _d !== void 0 ? _d : prototype.sku,
-                stock: (_f = (_e = existingVariant === null || existingVariant === void 0 ? void 0 : existingVariant.stockOnHand) !== null && _e !== void 0 ? _e : prototypeVariant === null || prototypeVariant === void 0 ? void 0 : prototypeVariant.stockOnHand) !== null && _f !== void 0 ? _f : 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.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-product-variants-editor',
-                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",
-                changeDetection: ChangeDetectionStrategy.Default,
-                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"]
-            },] }
-];
-ProductVariantsEditorComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: DataService },
-    { type: ProductDetailService },
-    { type: NotificationService },
-    { type: 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.ɵprov = i0.ɵɵdefineInjectable({ factory: function AssetResolver_Factory() { return new AssetResolver(i0.ɵɵinject(i1.Router), i0.ɵɵinject(i2.DataService)); }, token: AssetResolver, providedIn: "root" });
-AssetResolver.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-AssetResolver.ctorParameters = () => [
-    { type: Router },
-    { type: 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.ɵprov = i0.ɵɵdefineInjectable({ factory: function CollectionResolver_Factory() { return new CollectionResolver(i0.ɵɵinject(i1.Router), i0.ɵɵinject(i2.DataService)); }, token: CollectionResolver, providedIn: "root" });
-CollectionResolver.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-CollectionResolver.ctorParameters = () => [
-    { type: Router },
-    { type: 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.ɵprov = i0.ɵɵdefineInjectable({ factory: function FacetResolver_Factory() { return new FacetResolver(i0.ɵɵinject(i1.Router), i0.ɵɵinject(i2.DataService)); }, token: FacetResolver, providedIn: "root" });
-FacetResolver.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-FacetResolver.ctorParameters = () => [
-    { type: Router },
-    { type: 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.ɵprov = i0.ɵɵdefineInjectable({ factory: function ProductResolver_Factory() { return new ProductResolver(i0.ɵɵinject(i2.DataService), i0.ɵɵinject(i1.Router)); }, token: ProductResolver, providedIn: "root" });
-ProductResolver.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-ProductResolver.ctorParameters = () => [
-    { type: DataService },
-    { type: 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.ɵprov = i0.ɵɵdefineInjectable({ factory: function ProductVariantsResolver_Factory() { return new ProductVariantsResolver(i0.ɵɵinject(i1.Router), i0.ɵɵinject(i2.DataService)); }, token: ProductVariantsResolver, providedIn: "root" });
-ProductVariantsResolver.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-ProductVariantsResolver.ctorParameters = () => [
-    { type: Router },
-    { type: DataService }
-];
-
-const ɵ0$1 = {
-    breadcrumb: marker('breadcrumb.products'),
-}, ɵ1 = {
-    breadcrumb: productBreadcrumb,
-}, ɵ2 = {
-    breadcrumb: productVariantEditorBreadcrumb,
-}, ɵ3 = {
-    breadcrumb: productOptionsEditorBreadcrumb,
-}, ɵ4 = {
-    breadcrumb: marker('breadcrumb.facets'),
-}, ɵ5 = {
-    breadcrumb: facetBreadcrumb,
-}, ɵ6 = {
-    breadcrumb: marker('breadcrumb.collections'),
-}, ɵ7 = {
-    breadcrumb: collectionBreadcrumb,
-}, ɵ8 = {
-    breadcrumb: marker('breadcrumb.assets'),
-}, ɵ9 = {
-    breadcrumb: assetBreadcrumb,
-};
-const catalogRoutes = [
-    {
-        path: 'products',
-        component: ProductListComponent,
-        data: ɵ0$1,
-    },
-    {
-        path: 'products/:id',
-        component: ProductDetailComponent,
-        resolve: createResolveData(ProductResolver),
-        canDeactivate: [CanDeactivateDetailGuard],
-        data: ɵ1,
-    },
-    {
-        path: 'products/:id/manage-variants',
-        component: ProductVariantsEditorComponent,
-        resolve: createResolveData(ProductVariantsResolver),
-        canDeactivate: [CanDeactivateDetailGuard],
-        data: ɵ2,
-    },
-    {
-        path: 'products/:id/options',
-        component: ProductOptionsEditorComponent,
-        resolve: createResolveData(ProductVariantsResolver),
-        canDeactivate: [CanDeactivateDetailGuard],
-        data: ɵ3,
-    },
-    {
-        path: 'facets',
-        component: FacetListComponent,
-        data: ɵ4,
-    },
-    {
-        path: 'facets/:id',
-        component: FacetDetailComponent,
-        resolve: createResolveData(FacetResolver),
-        canDeactivate: [CanDeactivateDetailGuard],
-        data: ɵ5,
-    },
-    {
-        path: 'collections',
-        component: CollectionListComponent,
-        data: ɵ6,
-    },
-    {
-        path: 'collections/:id',
-        component: CollectionDetailComponent,
-        resolve: createResolveData(CollectionResolver),
-        canDeactivate: [CanDeactivateDetailGuard],
-        data: ɵ7,
-    },
-    {
-        path: 'assets',
-        component: AssetListComponent,
-        data: ɵ8,
-    },
-    {
-        path: 'assets/:id',
-        component: AssetDetailComponent,
-        resolve: createResolveData(AssetResolver),
-        data: ɵ9,
-    },
-];
-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',
-    });
-}
-
-/**
- * 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.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-assets',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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{width:50px}.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"]
-            },] }
-];
-AssetsComponent.ctorParameters = () => [
-    { type: ModalService },
-    { type: ChangeDetectorRef }
-];
-AssetsComponent.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(['./', Object.assign(Object.assign({}, this.route.snapshot.params), { [key]: value })], {
-            relativeTo: this.route,
-            queryParamsHandling: 'merge',
-        });
-    }
-}
-CollectionContentsComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-collection-contents',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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"]
-            },] }
-];
-CollectionContentsComponent.ctorParameters = () => [
-    { type: ActivatedRoute },
-    { type: Router },
-    { type: DataService }
-];
-CollectionContentsComponent.propDecorators = {
-    collectionId: [{ type: Input }],
-    headerTemplate: [{ type: ContentChild, args: [TemplateRef, { static: true },] }]
-};
-
-/**
- * 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) {
-    var _a, _b;
-    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] = Object.assign(Object.assign({}, node), { children: [] });
-    }
-    for (const id of nodes.map(n => n.id)) {
-        if (mappedArr.hasOwnProperty(id)) {
-            const mappedElem = mappedArr[id];
-            mappedElem.expanded = (_b = (_a = currentStateMap.get(id)) === null || _a === void 0 ? void 0 : _a.expanded) !== null && _b !== void 0 ? _b : 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;
-}
-
-class CollectionTreeComponent {
-    constructor() {
-        this.expandAll = false;
-        this.rearrange = new EventEmitter();
-        this.deleteCollection = new EventEmitter();
-        this.allMoveListItems = [];
-    }
-    ngOnChanges(changes) {
-        if ('collections' in changes && this.collections) {
-            this.collectionTree = arrayToTree(this.collections, this.collectionTree);
-            this.allMoveListItems = [];
-        }
-    }
-    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.emit({
-            collectionId: item.id,
-            parentId: newParentId,
-            index: event.currentIndex,
-        });
-    }
-    onMove(event) {
-        this.rearrange.emit(event);
-    }
-    onDelete(id) {
-        this.deleteCollection.emit(id);
-    }
-    getMoveListItems(collection) {
-        if (this.allMoveListItems.length === 0) {
-            this.allMoveListItems = this.calculateAllMoveListItems();
-        }
-        return this.allMoveListItems.filter(item => {
-            var _a;
-            return item.id !== collection.id &&
-                !item.ancestorIdPath.has(collection.id) &&
-                item.id !== ((_a = collection.parent) === null || _a === void 0 ? void 0 : _a.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(), []);
-    }
-    isRootNode(node) {
-        return !node.hasOwnProperty('parent');
-    }
-}
-CollectionTreeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-collection-tree',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-CollectionTreeComponent.propDecorators = {
-    collections: [{ type: Input }],
-    activeCollectionId: [{ type: Input }],
-    expandAll: [{ type: Input }],
-    rearrange: [{ type: Output }],
-    deleteCollection: [{ type: Output }]
-};
-
-class CollectionTreeNodeComponent {
-    constructor(parent, root, dataService) {
-        this.parent = parent;
-        this.root = root;
-        this.dataService = dataService;
-        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.root.getMoveListItems(collection);
-    }
-    move(collection, parentId) {
-        this.root.onMove({
-            index: 0,
-            parentId,
-            collectionId: collection.id,
-        });
-    }
-    moveUp(collection, currentIndex) {
-        if (!collection.parent) {
-            return;
-        }
-        this.root.onMove({
-            index: currentIndex - 1,
-            parentId: collection.parent.id,
-            collectionId: collection.id,
-        });
-    }
-    moveDown(collection, currentIndex) {
-        if (!collection.parent) {
-            return;
-        }
-        this.root.onMove({
-            index: currentIndex + 1,
-            parentId: collection.parent.id,
-            collectionId: collection.id,
-        });
-    }
-    drop(event) {
-        moveItemInArray(this.collectionTree.children, event.previousIndex, event.currentIndex);
-        this.root.onDrop(event);
-    }
-    delete(id) {
-        this.root.onDelete(id);
-    }
-}
-CollectionTreeNodeComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-collection-tree-node',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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"]
-            },] }
-];
-CollectionTreeNodeComponent.ctorParameters = () => [
-    { type: CollectionTreeNodeComponent, decorators: [{ type: SkipSelf }, { type: Optional }] },
-    { type: CollectionTreeComponent },
-    { type: DataService }
-];
-CollectionTreeNodeComponent.propDecorators = {
-    collectionTree: [{ type: Input }],
-    activeCollectionId: [{ type: Input }],
-    expandAll: [{ type: Input }]
-};
-
-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.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"]
-            },] }
-];
-GenerateProductVariantsComponent.ctorParameters = () => [
-    { type: DataService }
-];
-GenerateProductVariantsComponent.propDecorators = {
-    variantsChange: [{ type: Output }]
-};
-
-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.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-option-value-input',
-                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",
-                changeDetection: ChangeDetectionStrategy.Default,
-                providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR],
-                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"]
-            },] }
-];
-OptionValueInputComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-OptionValueInputComponent.propDecorators = {
-    groupName: [{ type: Input }],
-    textArea: [{ type: ViewChild, args: ['textArea', { static: true },] }]
-};
-
-const ɵ0 = SingleSearchSelectionModelFactory;
-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 === null || items === void 0 ? void 0 : 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.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-product-search-input',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                providers: [{ provide: SELECTION_MODEL_FACTORY, useValue: ɵ0 }],
-                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"]
-            },] }
-];
-ProductSearchInputComponent.propDecorators = {
-    facetValueResults: [{ type: Input }],
-    searchTermChange: [{ type: Output }],
-    facetValueChange: [{ type: Output }],
-    selectComponent: [{ type: ViewChild, args: ['selectComponent', { static: true },] }]
-};
-
-class UpdateProductOptionDialogComponent {
-    constructor() {
-        this.updateVariantName = true;
-        this.codeInputTouched = false;
-    }
-    ngOnInit() {
-        var _a;
-        const currentTranslation = this.productOption.translations.find(t => t.languageCode === this.activeLanguage);
-        this.name = (_a = currentTranslation === null || currentTranslation === void 0 ? void 0 : currentTranslation.name) !== null && _a !== void 0 ? _a : '';
-        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(Object.assign(Object.assign({}, result), { autoUpdate: this.updateVariantName }));
-    }
-    cancel() {
-        this.resolveWith();
-    }
-    updateCode(nameValue) {
-        if (!this.codeInputTouched && !this.productOption.code) {
-            this.code = normalizeString(nameValue, '-');
-        }
-    }
-}
-UpdateProductOptionDialogComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-update-product-option-dialog',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-
-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) {
-        var _a;
-        const trackInventory = (_a = formGroup.get('trackInventory')) === null || _a === void 0 ? void 0 : _a.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(Object.assign({ 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) {
-        var _a;
-        const group = this.optionGroups.find(g => g.id === optionGroupId);
-        if (group) {
-            const translation = (_a = group === null || group === void 0 ? void 0 : group.translations.find(t => t.languageCode === this.activeLanguage)) !== null && _a !== void 0 ? _a : group.translations[0];
-            return translation.name;
-        }
-    }
-    optionName(option) {
-        var _a;
-        const translation = (_a = option.translations.find(t => t.languageCode === this.activeLanguage)) !== null && _a !== void 0 ? _a : option.translations[0];
-        return translation.name;
-    }
-    pendingFacetValues(variant) {
-        if (this.facets) {
-            const formFacetValueIds = this.getFacetValueIds(variant.id);
-            const variantFacetValueIds = variant.facetValues.map(fv => fv.id);
-            return formFacetValueIds
-                .filter(x => !variantFacetValueIds.includes(x))
-                .map(id => this.facetValues.find(fv => fv.id === id))
-                .filter(notNullOrUndefined);
-        }
-        else {
-            return [];
-        }
-    }
-    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) {
-        var _a;
-        const formValue = (_a = this.formGroupMap.get(id)) === null || _a === void 0 ? void 0 : _a.value;
-        return formValue.facetValueIds;
-    }
-}
-ProductVariantsListComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-product-variants-list',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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"]
-            },] }
-];
-ProductVariantsListComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ModalService },
-    { type: DataService }
-];
-ProductVariantsListComponent.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 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) {
-        var _a;
-        return ((_a = this.pendingAssetChanges[variant.id]) === null || _a === void 0 ? void 0 : _a.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.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-product-variants-table',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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"]
-            },] }
-];
-ProductVariantsTableComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-ProductVariantsTableComponent.propDecorators = {
-    formArray: [{ type: Input, args: ['productVariantsFormArray',] }],
-    variants: [{ type: Input }],
-    paginationConfig: [{ type: Input }],
-    channelPriceIncludesTax: [{ type: Input }],
-    optionGroups: [{ type: Input }],
-    pendingAssetChanges: [{ type: Input }]
-};
-
-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.decorators = [
-    { type: Component, args: [{
-                selector: 'vdr-variant-price-detail',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:column}.value{margin-top:3px}\n"]
-            },] }
-];
-VariantPriceDetailComponent.ctorParameters = () => [
-    { type: DataService }
-];
-VariantPriceDetailComponent.propDecorators = {
-    priceIncludesTax: [{ type: Input }],
-    price: [{ type: Input }],
-    currencyCode: [{ type: Input }],
-    taxCategoryId: [{ type: Input }]
-};
-
-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.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, 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, ɵ1, ɵ2, ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, ɵ8, ɵ9 };
-//# sourceMappingURL=vendure-admin-ui-catalog.js.map