@vendure/admin-ui 2.1.7 → 2.1.8

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

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ChangeDetectionStrategy, forwardRef, EventEmitter, ElementRef, Input, ViewChild, ViewChildren, Output, inject, HostBinding, TemplateRef, ContentChild, Pipe, SkipSelf, Optional, NgModule } from '@angular/core';
+import { Injectable, Component, ChangeDetectionStrategy, forwardRef, EventEmitter, ElementRef, Input, ViewChild, ViewChildren, Output, inject, TemplateRef, ContentChild, Pipe, SkipSelf, Optional, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/router';
 import { ROUTES, RouterModule } from '@angular/router';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import * as i1 from '@vendure/admin-ui/core';
-import { findTranslation, DeletionResult, BaseDetailComponent, Permission, createUpdatedTranslatable, SelectionManager, getDefaultUiLanguage, BaseEntityResolver, PageComponent, CanDeactivateDetailGuard, DataService, createResolveData, FacetValueSelectorComponent, ASSET_FRAGMENT, TAG_FRAGMENT, TypedBaseDetailComponent, getCustomFieldsDefaults, BaseListComponent, SortOrder, LogicalOperator, AssetPickerDialogComponent, AssetPreviewDialogComponent, DataTable2Component, COLLECTION_FRAGMENT, unicodePatternValidator, getConfigArgValue, encodeConfigArgValue, createBulkDeleteAction, ModalService, NotificationService, createBulkAssignToChannelAction, createBulkRemoveFromChannelAction, TypedBaseListComponent, GetCollectionListDocument, FACET_WITH_VALUES_FRAGMENT, GetFacetDetailDocument, getChannelCodeFromUserStatus, currentChannelIsNotDefault, FACET_WITH_VALUE_LIST_FRAGMENT, GetFacetListDocument, GetStockLocationListDocument, ProductVariantListQueryDocument, PRODUCT_DETAIL_FRAGMENT, isMultiChannel, FacetValueFormInputComponent, ProductListQueryDocument, JobState, GetProductVariantsQuickJumpDocument, GlobalFlag, ProductVariantUpdateMutationDocument, detailComponentWithResolver, GetProductDetailDocument, GetProductVariantDetailDocument, CollectionDetailQueryDocument, AssetDetailQueryDocument, SharedModule, PageService } from '@vendure/admin-ui/core';
+import { findTranslation, DeletionResult, BaseDetailComponent, Permission, createUpdatedTranslatable, SelectionManager, getDefaultUiLanguage, BaseEntityResolver, PageComponent, CanDeactivateDetailGuard, DataService, createResolveData, FacetValueSelectorComponent, ASSET_FRAGMENT, TAG_FRAGMENT, TypedBaseDetailComponent, getCustomFieldsDefaults, BaseListComponent, SortOrder, LogicalOperator, DataTable2Component, COLLECTION_FRAGMENT, unicodePatternValidator, getConfigArgValue, encodeConfigArgValue, createBulkDeleteAction, ModalService, NotificationService, createBulkAssignToChannelAction, createBulkRemoveFromChannelAction, TypedBaseListComponent, GetCollectionListDocument, FACET_WITH_VALUES_FRAGMENT, GetFacetDetailDocument, getChannelCodeFromUserStatus, currentChannelIsNotDefault, FACET_WITH_VALUE_LIST_FRAGMENT, GetFacetListDocument, GetStockLocationListDocument, ProductVariantListQueryDocument, PRODUCT_DETAIL_FRAGMENT, isMultiChannel, FacetValueFormInputComponent, ProductListQueryDocument, JobState, GetProductVariantsQuickJumpDocument, GlobalFlag, ProductVariantUpdateMutationDocument, detailComponentWithResolver, GetProductDetailDocument, GetProductVariantDetailDocument, CollectionDetailQueryDocument, AssetDetailQueryDocument, SharedModule, PageService } from '@vendure/admin-ui/core';
 import { shareReplay, mergeMap, map, switchMap, tap, take, startWith, debounceTime, takeUntil, finalize, distinctUntilChanged, filter, catchError, delay, skip, switchMapTo } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
 import { UntypedFormGroup, UntypedFormArray, Validators, FormControl, NG_VALUE_ACCESSOR, FormGroup, UntypedFormControl } from '@angular/forms';
@@ -19,7 +19,7 @@ import * as i5$1 from '@ng-select/ng-select';
 import { gql } from 'apollo-angular';
 import * as i5$2 from 'ngx-pagination';
 import * as i2$1 from '@angular/cdk/drag-drop';
-import { moveItemInArray, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
+import { CdkDropList, CdkDrag, moveItemInArray } from '@angular/cdk/drag-drop';
 import { DEFAULT_CHANNEL_CODE } from '@vendure/common/lib/shared-constants';
 import { pick } from '@vendure/common/lib/pick';
 
@@ -1330,97 +1330,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
             args: [{ selector: 'vdr-asset-list', template: "<vdr-page-block>\r\n    <div class=\"my-2\">\r\n        <vdr-asset-search-input\r\n            [tags]=\"allTags$ | async\"\r\n            (searchTermChange)=\"searchTerm$.next($event)\"\r\n            (tagsChange)=\"filterByTags$.next($event)\"\r\n        >\r\n            <vdr-asset-file-input\r\n                (selectFiles)=\"filesSelected($event)\"\r\n                [uploading]=\"uploading\"\r\n                dropZoneTarget=\".content-area\"\r\n            ></vdr-asset-file-input>\r\n        </vdr-asset-search-input>\r\n    </div>\r\n    <vdr-asset-gallery\r\n        [assets]=\"(items$ | async)! | paginate : (paginationConfig$ | async) || {}\"\r\n        [multiSelect]=\"true\"\r\n        [canDelete]=\"['DeleteCatalog', 'DeleteAsset'] | hasPermission\"\r\n        (deleteAssets)=\"deleteAssets($event)\"\r\n    ></vdr-asset-gallery>\r\n\r\n    <div class=\"paging-controls\">\r\n        <vdr-items-per-page-controls\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n        ></vdr-items-per-page-controls>\r\n\r\n        <vdr-pagination-controls\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n        ></vdr-pagination-controls>\r\n    </div>\r\n</vdr-page-block>\r\n", styles: [":host{display:flex;flex-direction:column;height:100%}vdr-asset-gallery{flex:1}.paging-controls{padding-top:6px;border-top:1px solid var(--color-component-border-100);display:flex;justify-content:space-between}.search-input{margin-top:6px;min-width:300px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.NotificationService }, { type: i1.ModalService }, { type: i1.DataService }, { type: i1$1.Router }, { type: i1$1.ActivatedRoute }]; } });
 
-/**
- * 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 {
-    set assetsSetter(val) {
-        // create a new non-readonly array of assets
-        this.assets = (val || []).slice();
-    }
-    constructor(modalService, changeDetector) {
-        this.modalService = modalService;
-        this.changeDetector = changeDetector;
-        this.compact = false;
-        // eslint-disable-next-line @angular-eslint/no-output-native
-        this.change = new EventEmitter();
-        this.assets = [];
-    }
-    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, assets: this.assets },
-        })
-            .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);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetsComponent, deps: [{ token: i1.ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssetsComponent, selector: "vdr-assets", inputs: { assetsSetter: ["assets", "assetsSetter"], featuredAsset: "featuredAsset", compact: "compact", updatePermissions: "updatePermissions" }, outputs: { change: "change" }, host: { properties: { "class.compact": "this.compact" } }, ngImport: i0, template: "<div *ngIf=\"!compact; else compactView\" class=\"standard-view-container\">\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 class=\"all-assets-container\">\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <div *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</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()\">\r\n            <clr-icon shape=\"image\" size=\"150\"></clr-icon>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview : 'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block;container-type:inline-size}:host.compact{width:162px}.standard-view-container{display:flex;gap:calc(var(--space-unit) * 2)}.all-assets-container{display:flex;max-width:50%;flex-direction:column;justify-content:space-between}@container (max-width: 500px){.standard-view-container{flex-direction:column}.all-assets-container{max-width:100%}}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer;border-radius:var(--border-radius-img)}.featured-asset img{border-radius:var(--border-radius-img);max-height:400px;max-width:100%;object-fit:contain}.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);border-radius:var(--border-radius-img);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px;border-radius:var(--border-radius-img)}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500);border-radius:calc(var(--border-radius-img) + 2px)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssetsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'vdr-assets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!compact; else compactView\" class=\"standard-view-container\">\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 class=\"all-assets-container\">\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <div *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</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()\">\r\n            <clr-icon shape=\"image\" size=\"150\"></clr-icon>\r\n        </div>\r\n    </div>\r\n    <ng-container *ngTemplateOutlet=\"assetList\"></ng-container>\r\n    <button\r\n        *vdrIfPermissions=\"updatePermissions\"\r\n        class=\"compact-select btn btn-icon btn-sm btn-block\"\r\n        [title]=\"'asset.add-asset' | translate\"\r\n        (click)=\"selectAssets()\"\r\n    >\r\n        <clr-icon shape=\"attachment\"></clr-icon>\r\n        {{ 'asset.add-asset' | translate }}\r\n    </button>\r\n</ng-template>\r\n\r\n<ng-template #assetList>\r\n    <div class=\"all-assets\" [class.compact]=\"compact\" cdkDropListGroup>\r\n        <div\r\n            *ngFor=\"let asset of assets; let index = index\"\r\n            class=\"drop-list\"\r\n            cdkDropList\r\n            cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListData]=\"index\"\r\n            [cdkDropListDisabled]=\"!(updatePermissions | hasPermission)\"\r\n            (cdkDropListDropped)=\"dropListDropped($event)\"\r\n        >\r\n            <vdr-dropdown cdkDrag>\r\n                <div\r\n                    class=\"asset-thumb\"\r\n                    vdrDropdownTrigger\r\n                    [class.featured]=\"isFeatured(asset)\"\r\n                    [title]=\"\"\r\n                    tabindex=\"0\"\r\n                >\r\n                    <img [src]=\"asset | assetPreview : 'tiny'\" />\r\n                </div>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"previewAsset(asset)\">\r\n                        {{ 'asset.preview' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        [disabled]=\"isFeatured(asset) || !(updatePermissions | hasPermission)\"\r\n                        vdrDropdownItem\r\n                        (click)=\"setAsFeatured(asset)\"\r\n                    >\r\n                        {{ 'asset.set-as-featured-asset' | translate }}\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"remove-asset\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        (click)=\"removeAsset(asset)\"\r\n                    >\r\n                        {{ 'asset.remove-asset' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{display:block;container-type:inline-size}:host.compact{width:162px}.standard-view-container{display:flex;gap:calc(var(--space-unit) * 2)}.all-assets-container{display:flex;max-width:50%;flex-direction:column;justify-content:space-between}@container (max-width: 500px){.standard-view-container{flex-direction:column}.all-assets-container{max-width:100%}}.placeholder{text-align:center;color:var(--color-grey-300)}.featured-asset{text-align:center;background:var(--color-component-bg-200);padding:6px;cursor:pointer;border-radius:var(--border-radius-img)}.featured-asset img{border-radius:var(--border-radius-img);max-height:400px;max-width:100%;object-fit:contain}.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);border-radius:var(--border-radius-img);cursor:pointer}.all-assets .asset-thumb img{width:50px;height:50px;border-radius:var(--border-radius-img)}.all-assets .asset-thumb.featured{border-color:var(--color-primary-500);border-radius:calc(var(--border-radius-img) + 2px)}.all-assets .remove-asset{color:var(--color-warning-500)}.all-assets.compact .drop-list{min-width:54px}.all-assets.compact .asset-thumb{margin:1px;border-width:1px}.all-assets.compact .cdk-drag-placeholder,.all-assets.compact .cdk-drag-placeholder .asset-thumb{width:50px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.all-assets.cdk-drop-list-dragging vdr-dropdown:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging>*:not(.cdk-drag-placeholder){display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.ModalService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { assetsSetter: [{
-                type: Input,
-                args: ['assets']
-            }], featuredAsset: [{
-                type: Input
-            }], compact: [{
-                type: HostBinding,
-                args: ['class.compact']
-            }, {
-                type: Input
-            }], change: [{
-                type: Output
-            }], updatePermissions: [{
-                type: Input
-            }] } });
-
 class AssignProductsToChannelDialogComponent {
     get isProductVariantMode() {
         return this.productVariantIds != null;
@@ -2090,7 +1999,7 @@ class CollectionDetailComponent extends TypedBaseDetailComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2.FormBuilder }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: i1.LocalStorageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionDetailComponent, selector: "vdr-collection-detail", viewQueries: [{ propertyName: "contentsComponent", first: true, predicate: ["collectionContents"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <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></vdr-ab-right\r\n        >\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            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\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block *ngIf=\"entity$ | async as entity\"\r\n            ><nav role=\"navigation\">\r\n                <ul class=\"collection-breadcrumbs\">\r\n                    <li *ngFor=\"let breadcrumb of entity.breadcrumbs; let isFirst = first; let isLast = last\">\r\n                        <a [routerLink]=\"['/catalog/collections']\" *ngIf=\"isFirst\">{{\r\n                            'catalog.root-collection' | translate\r\n                        }}</a>\r\n                        <a\r\n                            [routerLink]=\"['/catalog/collections', breadcrumb.id]\"\r\n                            *ngIf=\"!isFirst && !isLast\"\r\n                            >{{ breadcrumb.name | translate }}</a\r\n                        >\r\n                        <ng-container *ngIf=\"isLast\">{{ breadcrumb.name | translate }}</ng-container>\r\n                    </li>\r\n                </ul>\r\n            </nav>\r\n        </vdr-page-block>\r\n\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(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-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Collection\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"entity?.assets\"\r\n                    [featuredAsset]=\"entity?.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermission\"\r\n                    (change)=\"assetChanges = $event\"\r\n                ></vdr-assets>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.filters' | translate\">\r\n                <vdr-form-field\r\n                    [label]=\"'catalog.filter-inheritance' | translate\"\r\n                    for=\"inheritFilters\"\r\n                >\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            formControlName=\"inheritFilters\"\r\n                            id=\"inheritFilters\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.inheritFilters; else noInherit\">{{\r\n                                'catalog.inherit-filters-from-parent' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #noInherit>{{\r\n                                'catalog.do-not-inherit-filters' | translate\r\n                            }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n                <div formArrayName=\"filters\">\r\n                    <ng-container *ngFor=\"let filter of filters; index as i; trackBy: trackByFn\">\r\n                        <vdr-configurable-input\r\n                            (remove)=\"removeFilter(i)\"\r\n                            [position]=\"i\"\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                </div>\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                            <span>{{ 'marketing.add-condition' | translate }}</span>\r\n                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\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            </vdr-card>\r\n\r\n            <vdr-card [title]=\"'common.contents' | translate\" [paddingX]=\"false\">\r\n                <vdr-collection-contents\r\n                    [collectionId]=\"id\"\r\n                    [parentId]=\"parentId$ | async\"\r\n                    [updatedFilters]=\"updatedFilters$ | async\"\r\n                    [inheritFilters]=\"inheritFilters$ | async\"\r\n                    [previewUpdatedFilters]=\"livePreview\"\r\n                    #collectionContents\r\n                >\r\n                    <ng-template let-count>\r\n                        <div class=\"ml-3\">\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                            <clr-checkbox-wrapper [class.disabled]=\"detailForm.get('filters')?.pristine\">\r\n                                <input\r\n                                    type=\"checkbox\"\r\n                                    clrCheckbox\r\n                                    [ngModelOptions]=\"{ standalone: true }\"\r\n                                    [disabled]=\"detailForm.get('filters')?.pristine\"\r\n                                    [ngModel]=\"livePreview\"\r\n                                    (ngModelChange)=\"toggleLivePreview()\"\r\n                                />\r\n                                <label>{{ 'catalog.live-preview-contents' | translate }}</label>\r\n                            </clr-checkbox-wrapper>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-collection-contents>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["@charset \"UTF-8\";.visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}.collection-breadcrumbs{list-style-type:none;background-color:var(--color-component-bg-200);padding:2px 6px;margin-bottom:6px;border-radius:var(--clr-global-borderradius)}.collection-breadcrumbs li{font-size:.65rem;display:inline-block;margin-inline-end:10px}.collection-breadcrumbs li:last-child{font-weight:600}.collection-breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-inline-start:10px}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionDetailComponent, selector: "vdr-collection-detail", viewQueries: [{ propertyName: "contentsComponent", first: true, predicate: ["collectionContents"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <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></vdr-ab-right\r\n        >\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            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\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block *ngIf=\"entity$ | async as entity\"\r\n            ><nav role=\"navigation\">\r\n                <ul class=\"collection-breadcrumbs\">\r\n                    <li *ngFor=\"let breadcrumb of entity.breadcrumbs; let isFirst = first; let isLast = last\">\r\n                        <a [routerLink]=\"['/catalog/collections']\" *ngIf=\"isFirst\">{{\r\n                            'catalog.root-collection' | translate\r\n                        }}</a>\r\n                        <a\r\n                            [routerLink]=\"['/catalog/collections', breadcrumb.id]\"\r\n                            *ngIf=\"!isFirst && !isLast\"\r\n                            >{{ breadcrumb.name | translate }}</a\r\n                        >\r\n                        <ng-container *ngIf=\"isLast\">{{ breadcrumb.name | translate }}</ng-container>\r\n                    </li>\r\n                </ul>\r\n            </nav>\r\n        </vdr-page-block>\r\n\r\n        <vdr-page-block>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(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-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card\r\n                formGroupName=\"customFields\"\r\n                *ngIf=\"customFields.length\"\r\n                [title]=\"'common.custom-fields' | translate\"\r\n            >\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Collection\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\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            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"entity?.assets\"\r\n                    [featuredAsset]=\"entity?.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermission\"\r\n                    (change)=\"assetChanges = $event\"\r\n                ></vdr-assets>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.filters' | translate\">\r\n                <vdr-form-field\r\n                    [label]=\"'catalog.filter-inheritance' | translate\"\r\n                    for=\"inheritFilters\"\r\n                >\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            formControlName=\"inheritFilters\"\r\n                            id=\"inheritFilters\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.inheritFilters; else noInherit\">{{\r\n                                'catalog.inherit-filters-from-parent' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #noInherit>{{\r\n                                'catalog.do-not-inherit-filters' | translate\r\n                            }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n                <div formArrayName=\"filters\">\r\n                    <ng-container *ngFor=\"let filter of filters; index as i; trackBy: trackByFn\">\r\n                        <vdr-configurable-input\r\n                            (remove)=\"removeFilter(i)\"\r\n                            [position]=\"i\"\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                </div>\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                            <span>{{ 'marketing.add-condition' | translate }}</span>\r\n                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\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            </vdr-card>\r\n\r\n            <vdr-card [title]=\"'common.contents' | translate\" [paddingX]=\"false\">\r\n                <vdr-collection-contents\r\n                    [collectionId]=\"id\"\r\n                    [parentId]=\"parentId$ | async\"\r\n                    [updatedFilters]=\"updatedFilters$ | async\"\r\n                    [inheritFilters]=\"inheritFilters$ | async\"\r\n                    [previewUpdatedFilters]=\"livePreview\"\r\n                    #collectionContents\r\n                >\r\n                    <ng-template let-count>\r\n                        <div class=\"ml-3\">\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                            <clr-checkbox-wrapper [class.disabled]=\"detailForm.get('filters')?.pristine\">\r\n                                <input\r\n                                    type=\"checkbox\"\r\n                                    clrCheckbox\r\n                                    [ngModelOptions]=\"{ standalone: true }\"\r\n                                    [disabled]=\"detailForm.get('filters')?.pristine\"\r\n                                    [ngModel]=\"livePreview\"\r\n                                    (ngModelChange)=\"toggleLivePreview()\"\r\n                                />\r\n                                <label>{{ 'catalog.live-preview-contents' | translate }}</label>\r\n                            </clr-checkbox-wrapper>\r\n                        </div>\r\n                    </ng-template>\r\n                </vdr-collection-contents>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: ["@charset \"UTF-8\";.visible-toggle{margin-top:-3px!important}clr-checkbox-wrapper{transition:opacity .3s}clr-checkbox-wrapper.disabled{opacity:.5}.collection-breadcrumbs{list-style-type:none;background-color:var(--color-component-bg-200);padding:2px 6px;margin-bottom:6px;border-radius:var(--clr-global-borderradius)}.collection-breadcrumbs li{font-size:.65rem;display:inline-block;margin-inline-end:10px}.collection-breadcrumbs li:last-child{font-weight:600}.collection-breadcrumbs li:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-inline-start:10px}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: i1.ConfigurableInputComponent, selector: "vdr-configurable-input", inputs: ["operation", "operationDefinition", "readonly", "removable", "position"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionDetailComponent, decorators: [{
             type: Component,
@@ -3776,7 +3685,7 @@ class ProductDetailComponent extends TypedBaseDetailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductDetailComponent, deps: [{ token: ProductDetailService }, { token: i2.FormBuilder }, { token: i1.ModalService }, { token: i1.NotificationService }, { token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductDetailComponent, selector: "vdr-product-detail2", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-flex-row\"></div>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine || createVariantsConfig.variants.length === 0\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermissions\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermissions\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            [formControl]=\"detailForm.get(['enabled'])\"\r\n                        />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <ng-container *ngIf=\"!(isNew$ | async)\">\r\n                <vdr-card *vdrIfMultichannel [title]=\"'common.channels' | translate\">\r\n                    <vdr-form-item *vdrIfDefaultChannelActive>\r\n                        <div class=\"flex channel-assignment\">\r\n                            <div class=\"mb-2\">\r\n                                <ng-container *ngFor=\"let channel of productChannels$ | async\">\r\n                                    <vdr-chip\r\n                                        *ngIf=\"!isDefaultChannel(channel.code)\"\r\n                                        icon=\"times-circle\"\r\n                                        (iconClick)=\"removeFromChannel(channel.id)\"\r\n                                    >\r\n                                        <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                        {{ channel.code | channelCodeToLabel }}\r\n                                    </vdr-chip>\r\n                                </ng-container>\r\n                            </div>\r\n                            <button class=\"button-small\" (click)=\"assignToChannel()\">\r\n                                <clr-icon shape=\"layers\"></clr-icon>\r\n                                {{ 'catalog.assign-to-channel' | translate }}\r\n                            </button>\r\n                        </div>\r\n                    </vdr-form-item>\r\n                </vdr-card>\r\n            </ng-container>\r\n            <vdr-card *ngIf=\"entity?.optionGroups.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let optionGroup of entity?.optionGroups | sort : 'id'\"\r\n                        [colorFrom]=\"optionGroup.code\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        {{ optionGroup.name }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a [routerLink]=\"['options']\" class=\"button-small mt-2\" *vdrIfPermissions=\"updatePermissions\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'catalog.edit-options' | translate }}\r\n                    </a>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.facets' | translate\">\r\n                <div class=\"facets\">\r\n                    <vdr-facet-value-chip\r\n                        *ngFor=\"let facetValue of facetValues$ | async\"\r\n                        [facetValue]=\"facetValue\"\r\n                        [removable]=\"updatePermissions | hasPermission\"\r\n                        (remove)=\"removeProductFacetValue(facetValue.id)\"\r\n                    ></vdr-facet-value-chip>\r\n                </div>\r\n                <div>\r\n                    <button\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\r\n                        (click)=\"selectProductFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'catalog.add-facets' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block>\r\n            <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <div>\r\n                        <vdr-form-field [label]=\"'catalog.product-name' | translate\" for=\"name\">\r\n                            <input\r\n                                id=\"name\"\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                                (input)=\"updateSlug($event.target.value)\"\r\n                            />\r\n                        </vdr-form-field>\r\n                        <div *ngIf=\"(isNew$ | async) === false && detailForm.get(['name'])?.dirty\">\r\n                            <clr-checkbox-wrapper>\r\n                                <input\r\n                                    clrCheckbox\r\n                                    type=\"checkbox\"\r\n                                    id=\"auto-update\"\r\n                                    formControlName=\"autoUpdateVariantNames\"\r\n                                />\r\n                                <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                            </clr-checkbox-wrapper>\r\n                        </div>\r\n                    </div>\r\n                    <vdr-form-field\r\n                        [label]=\"'catalog.slug' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <input\r\n                            id=\"slug\"\r\n                            type=\"text\"\r\n                            formControlName=\"slug\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Product\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"product-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || entity?.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || entity?.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                ></vdr-assets>\r\n            </vdr-card>\r\n\r\n            <vdr-card [title]=\"'catalog.product-variants' | translate\" [paddingX]=\"isNew$ | async\">\r\n                <div *ngIf=\"isNew$ | async; else variantList\">\r\n                    <vdr-generate-product-variants\r\n                        (variantsChange)=\"createVariantsConfig = $event\"\r\n                    ></vdr-generate-product-variants>\r\n                </div>\r\n                <ng-template #variantList>\r\n                    <vdr-product-variant-list\r\n                        [productId]=\"this.id\"\r\n                        dataTableId=\"product-detail-variants-list\"\r\n                        [hideLanguageSelect]=\"true\"\r\n                    ></vdr-product-variant-list>\r\n                </ng-template>\r\n                <div class=\"mx-3\" *ngIf=\"(isNew$ | async) === false\">\r\n                    <a class=\"button\" [routerLink]=\"['manage-variants']\">\r\n                        <clr-icon shape=\"add-text\"></clr-icon>\r\n                        {{ 'catalog.manage-variants' | translate }}</a\r\n                    >\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-action-bar clr-toggle-wrapper{margin-top:12px}.variant-filter{flex:1;display:flex}.variant-filter input{flex:1;max-width:initial;border-radius:3px 0 0 3px!important}.variant-filter .icon-button{border:1px solid var(--color-component-border-300);background-color:var(--color-component-bg-100);border-radius:0 3px 3px 0;border-inline-start:none}.group-name{padding-inline-end:6px}.view-mode{display:flex;flex-direction:column;justify-content:space-between}@media screen and (min-width: 768px){.view-mode{flex-direction:row}}.edit-variants-btn{margin-top:0}.channel-assignment{flex-wrap:wrap;max-height:144px}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "directive", type: i1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "directive", type: i1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: ["variantsChange"] }, { kind: "component", type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: ProductVariantListComponent, selector: "vdr-product-variant-list", inputs: ["productId", "hideLanguageSelect", "dataTableId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductDetailComponent, selector: "vdr-product-detail2", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <div class=\"flex clr-flex-row\"></div>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine || createVariantsConfig.variants.length === 0\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermissions\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"(detailForm.invalid || detailForm.pristine) && !assetsChanged()\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar>\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"updatePermissions\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            [formControl]=\"detailForm.get(['enabled'])\"\r\n                        />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <ng-container *ngIf=\"!(isNew$ | async)\">\r\n                <vdr-card *vdrIfMultichannel [title]=\"'common.channels' | translate\">\r\n                    <vdr-form-item *vdrIfDefaultChannelActive>\r\n                        <div class=\"flex channel-assignment\">\r\n                            <div class=\"mb-2\">\r\n                                <ng-container *ngFor=\"let channel of productChannels$ | async\">\r\n                                    <vdr-chip\r\n                                        *ngIf=\"!isDefaultChannel(channel.code)\"\r\n                                        icon=\"times-circle\"\r\n                                        (iconClick)=\"removeFromChannel(channel.id)\"\r\n                                    >\r\n                                        <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\r\n                                        {{ channel.code | channelCodeToLabel }}\r\n                                    </vdr-chip>\r\n                                </ng-container>\r\n                            </div>\r\n                            <button class=\"button-small\" (click)=\"assignToChannel()\">\r\n                                <clr-icon shape=\"layers\"></clr-icon>\r\n                                {{ 'catalog.assign-to-channel' | translate }}\r\n                            </button>\r\n                        </div>\r\n                    </vdr-form-item>\r\n                </vdr-card>\r\n            </ng-container>\r\n            <vdr-card *ngIf=\"entity?.optionGroups.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let optionGroup of entity?.optionGroups | sort : 'id'\"\r\n                        [colorFrom]=\"optionGroup.code\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        {{ optionGroup.name }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a [routerLink]=\"['options']\" class=\"button-small mt-2\" *vdrIfPermissions=\"updatePermissions\">\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'catalog.edit-options' | translate }}\r\n                    </a>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.facets' | translate\">\r\n                <div class=\"facets\">\r\n                    <vdr-facet-value-chip\r\n                        *ngFor=\"let facetValue of facetValues$ | async\"\r\n                        [facetValue]=\"facetValue\"\r\n                        [removable]=\"updatePermissions | hasPermission\"\r\n                        (remove)=\"removeProductFacetValue(facetValue.id)\"\r\n                    ></vdr-facet-value-chip>\r\n                </div>\r\n                <div>\r\n                    <button\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\r\n                        (click)=\"selectProductFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'catalog.add-facets' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card *ngIf=\"entity$ | async as entity\">\r\n                <vdr-page-entity-info [entity]=\"entity\"></vdr-page-entity-info>\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block>\r\n            <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <div>\r\n                        <vdr-form-field [label]=\"'catalog.product-name' | translate\" for=\"name\">\r\n                            <input\r\n                                id=\"name\"\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                                (input)=\"updateSlug($event.target.value)\"\r\n                            />\r\n                        </vdr-form-field>\r\n                        <div *ngIf=\"(isNew$ | async) === false && detailForm.get(['name'])?.dirty\">\r\n                            <clr-checkbox-wrapper>\r\n                                <input\r\n                                    clrCheckbox\r\n                                    type=\"checkbox\"\r\n                                    id=\"auto-update\"\r\n                                    formControlName=\"autoUpdateVariantNames\"\r\n                                />\r\n                                <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                            </clr-checkbox-wrapper>\r\n                        </div>\r\n                    </div>\r\n                    <vdr-form-field\r\n                        [label]=\"'catalog.slug' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <input\r\n                            id=\"slug\"\r\n                            type=\"text\"\r\n                            formControlName=\"slug\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field\r\n                        class=\"form-grid-span\"\r\n                        [label]=\"'common.description' | translate\"\r\n                        for=\"slug\"\r\n                        [errors]=\"{ pattern: 'catalog.slug-pattern-error' | translate }\"\r\n                    >\r\n                        <vdr-rich-text-editor\r\n                            formControlName=\"description\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        ></vdr-rich-text-editor>\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Product\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                ></vdr-tabbed-custom-fields>\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"product-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || entity?.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || entity?.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                ></vdr-assets>\r\n            </vdr-card>\r\n\r\n            <vdr-card [title]=\"'catalog.product-variants' | translate\" [paddingX]=\"isNew$ | async\">\r\n                <div *ngIf=\"isNew$ | async; else variantList\">\r\n                    <vdr-generate-product-variants\r\n                        (variantsChange)=\"createVariantsConfig = $event\"\r\n                    ></vdr-generate-product-variants>\r\n                </div>\r\n                <ng-template #variantList>\r\n                    <vdr-product-variant-list\r\n                        [productId]=\"this.id\"\r\n                        dataTableId=\"product-detail-variants-list\"\r\n                        [hideLanguageSelect]=\"true\"\r\n                    ></vdr-product-variant-list>\r\n                </ng-template>\r\n                <div class=\"mx-3\" *ngIf=\"(isNew$ | async) === false\">\r\n                    <a class=\"button\" [routerLink]=\"['manage-variants']\">\r\n                        <clr-icon shape=\"add-text\"></clr-icon>\r\n                        {{ 'catalog.manage-variants' | translate }}</a\r\n                    >\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [":host ::ng-deep trix-toolbar{top:24px}.facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-action-bar clr-toggle-wrapper{margin-top:12px}.variant-filter{flex:1;display:flex}.variant-filter input{flex:1;max-width:initial;border-radius:3px 0 0 3px!important}.variant-filter .icon-button{border:1px solid var(--color-component-border-300);background-color:var(--color-component-bg-100);border-radius:0 3px 3px 0;border-inline-start:none}.group-name{padding-inline-end:6px}.view-mode{display:flex;flex-direction:column;justify-content:space-between}@media screen and (min-width: 768px){.view-mode{flex-direction:row}}.edit-variants-btn{margin-top:0}.channel-assignment{flex-wrap:wrap;max-height:144px}.pagination-row{display:flex;align-items:baseline;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.RichTextEditorComponent, selector: "vdr-rich-text-editor", inputs: ["label", "readonly"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "directive", type: i1.IfMultichannelDirective, selector: "[vdrIfMultichannel]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "directive", type: i1.IfDefaultChannelActiveDirective, selector: "[vdrIfDefaultChannelActive]", inputs: ["vdrIfMultichannelElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: ["variantsChange"] }, { kind: "component", type: ProductVariantListComponent, selector: "vdr-product-variant-list", inputs: ["productId", "hideLanguageSelect", "dataTableId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductDetailComponent, decorators: [{
             type: Component,
@@ -4085,6 +3994,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
                 type: Input
             }] } });
 
+class VariantPriceStrategyDetailComponent {
+    calculatedPriceDiffersFromInputPrice() {
+        const defaultPrice = this.variant.prices.find(p => p.currencyCode === this.channelDefaultCurrencyCode) ??
+            this.variant.prices[0];
+        if (!defaultPrice) {
+            return false;
+        }
+        if (this.channelPriceIncludesTax) {
+            return this.variant.priceWithTax !== defaultPrice.price;
+        }
+        else {
+            return this.variant.price !== defaultPrice.price;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: VariantPriceStrategyDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: VariantPriceStrategyDetailComponent, selector: "vdr-variant-price-strategy-detail", inputs: { channelPriceIncludesTax: "channelPriceIncludesTax", variant: "variant", channelDefaultCurrencyCode: "channelDefaultCurrencyCode" }, ngImport: i0, template: "<div *ngIf=\"calculatedPriceDiffersFromInputPrice()\" class=\"price-strategy-detail\">\n    <vdr-form-item\n        [label]=\"'catalog.calculated-price' | translate\"\n        [tooltip]=\"'catalog.calculated-price-tooltip' | translate\"\n        for=\"price\"\n    >\n    </vdr-form-item>\n    <div class=\"form-grid mt-2\">\n        <vdr-form-item [label]=\"'common.price' | translate\">\n            {{ variant.price | localeCurrency : variant.currencyCode }}\n        </vdr-form-item>\n        <vdr-form-item [label]=\"'common.price-with-tax' | translate\">\n            {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\n        </vdr-form-item>\n    </div>\n</div>\n", styles: [":host{display:block}.price-strategy-detail{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: VariantPriceStrategyDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-variant-price-strategy-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"calculatedPriceDiffersFromInputPrice()\" class=\"price-strategy-detail\">\n    <vdr-form-item\n        [label]=\"'catalog.calculated-price' | translate\"\n        [tooltip]=\"'catalog.calculated-price-tooltip' | translate\"\n        for=\"price\"\n    >\n    </vdr-form-item>\n    <div class=\"form-grid mt-2\">\n        <vdr-form-item [label]=\"'common.price' | translate\">\n            {{ variant.price | localeCurrency : variant.currencyCode }}\n        </vdr-form-item>\n        <vdr-form-item [label]=\"'common.price-with-tax' | translate\">\n            {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\n        </vdr-form-item>\n    </div>\n</div>\n", styles: [":host{display:block}.price-strategy-detail{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}\n"] }]
+        }], propDecorators: { channelPriceIncludesTax: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], channelDefaultCurrencyCode: [{
+                type: Input
+            }] } });
+
 const GET_PRODUCT_VARIANTS_QUICK_JUMP = gql `
     query GetProductVariantsQuickJump($id: ID!) {
         product(id: $id) {
@@ -4368,11 +4305,11 @@ class ProductVariantDetailComponent extends TypedBaseDetailComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductVariantDetailComponent, deps: [{ token: ProductDetailService }, { token: i2.FormBuilder }, { token: i1.ModalService }, { token: i1.NotificationService }, { token: i1.DataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductVariantDetailComponent, selector: "vdr-product-variant-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left [grow]=\"true\">\r\n            <div class=\"flex center\">\r\n                <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\r\n                    <vdr-language-selector\r\n                        *ngIf=\"availableLanguages.length > 1\"\r\n                        class=\"mr-2\"\r\n                        [disabled]=\"isNew$ | async\"\r\n                        [availableLanguageCodes]=\"availableLanguages\"\r\n                        [currentLanguageCode]=\"languageCode$ | async\"\r\n                        (languageCodeChange)=\"setLanguage($event)\"\r\n                    ></vdr-language-selector>\r\n                </ng-container>\r\n                <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\r\n            <button\r\n                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"\r\n                    (detailForm.invalid ||\r\n                        stockLevelsForm.invalid ||\r\n                        pricesForm.invalid ||\r\n                        (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\r\n                    !assetsChanged()\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar\r\n            ><vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            [formControl]=\"detailForm.get(['enabled'])\"\r\n                        />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let option of variant.options | sort : 'groupId'\"\r\n                        [colorFrom]=\"optionGroupCode(option.groupId)\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        <span>{{ optionGroupCode(option.groupId) }}:</span>\r\n                        {{ optionName(option) }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a\r\n                        [routerLink]=\"['../../', 'options']\"\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\r\n                    >\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'catalog.edit-options' | translate }}\r\n                    </a>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.facets' | translate\">\r\n                <div class=\"facets\">\r\n                    <vdr-facet-value-chip\r\n                        *ngFor=\"let facetValue of facetValues$ | async\"\r\n                        [facetValue]=\"facetValue\"\r\n                        [removable]=\"updatePermissions | hasPermission\"\r\n                        (remove)=\"removeFacetValue(facetValue.id)\"\r\n                    ></vdr-facet-value-chip>\r\n                </div>\r\n                <div>\r\n                    <button\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\r\n                        (click)=\"selectFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'catalog.add-facets' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card>\r\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block>\r\n            <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\r\n                        <input\r\n                            id=\"sku\"\r\n                            type=\"text\"\r\n                            formControlName=\"sku\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"ProductVariant\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"product-variant-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            />\r\n            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || variant.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\r\n                        <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\r\n                            <option\r\n                                *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n                                [value]=\"taxCategory.id\"\r\n                            >\r\n                                {{ taxCategory.name }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                </div>\r\n                <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            ('catalog.price' | translate) +\r\n                            (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\r\n                        \"\r\n                        [tooltip]=\"\r\n                            1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\r\n                                ? ('catalog.default-currency' | translate)\r\n                                : undefined\r\n                        \"\r\n                        for=\"price\"\r\n                    >\r\n                        <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\r\n                            <vdr-currency-input\r\n                                name=\"price\"\r\n                                [currencyCode]=\"price.value.currencyCode\"\r\n                                [readonly]=\"\r\n                                    !(updatePermissions | hasPermission) || price.value.delete === true\r\n                                \"\r\n                                formControlName=\"price\"\r\n                            />\r\n                            <div *ngIf=\"1 < pricesForm.controls.length\">\r\n                                <button\r\n                                    class=\"button-small delete-button\"\r\n                                    [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\r\n                                    (click)=\"toggleDeletePrice(price.get('delete'))\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </vdr-form-field>\r\n                    <vdr-variant-price-detail\r\n                        [price]=\"price.value.price\"\r\n                        [currencyCode]=\"price.value.currencyCode\"\r\n                        [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\r\n                    />\r\n                </div>\r\n                <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\r\n                    <div *ngIf=\"unusedCurrencyCodes.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-price-in-another-currency' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let currencyCode of unusedCurrencyCodes\"\r\n                                    (click)=\"addPriceInCurrency(currencyCode)\"\r\n                                >\r\n                                    {{ currencyCode | localeCurrencyName }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.stock-levels' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        for=\"track-inventory\"\r\n                        [label]=\"'catalog.track-inventory' | translate\"\r\n                        [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                    >\r\n                        <select\r\n                            name=\"track-inventory\"\r\n                            formControlName=\"trackInventory\"\r\n                            [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        >\r\n                            <option [value]=\"GlobalFlag.TRUE\">\r\n                                {{ 'catalog.track-inventory-true' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.FALSE\">\r\n                                {{ 'catalog.track-inventory-false' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.INHERIT\">\r\n                                {{ 'catalog.track-inventory-inherit' | translate }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n\r\n                    <vdr-form-item\r\n                        [label]=\"'catalog.out-of-stock-threshold' | translate\"\r\n                        [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                    >\r\n                        <input\r\n                            type=\"number\"\r\n                            formControlName=\"outOfStockThreshold\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                            [vdrDisabled]=\"\r\n                                detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\r\n                                inventoryIsNotTracked(detailForm)\r\n                            \"\r\n                        />\r\n                        <clr-toggle-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrToggle\r\n                                name=\"useGlobalOutOfStockThreshold\"\r\n                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                [vdrDisabled]=\"\r\n                                    !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\r\n                                \"\r\n                            />\r\n                            <label\r\n                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                    globalOutOfStockThreshold\r\n                                }})</label\r\n                            >\r\n                        </clr-toggle-wrapper>\r\n                    </vdr-form-item>\r\n                </div>\r\n                <div\r\n                    class=\"form-grid stock-levels\"\r\n                    *ngFor=\"let stockLevel of stockLevelsForm.controls\"\r\n                    [formGroup]=\"stockLevel\"\r\n                >\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-on-hand' | translate)\r\n                        \"\r\n                        [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                    >\r\n                        <input\r\n                            [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                            type=\"number\"\r\n                            formControlName=\"stockOnHand\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-item\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-allocated' | translate)\r\n                        \"\r\n                    >\r\n                        {{ stockLevel.get('stockAllocated')?.value }}\r\n                    </vdr-form-item>\r\n                </div>\r\n                <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\r\n                    <div *ngIf=\"unusedStockLocations.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-stock-location' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let stockLocation of unusedStockLocations\"\r\n                                    (click)=\"addStockLocation(stockLocation)\"\r\n                                >\r\n                                    <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-inline-end:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { kind: "component", type: ProductVariantQuickJumpComponent, selector: "vdr-product-variant-quick-jump", inputs: ["productId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductVariantDetailComponent, selector: "vdr-product-variant-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left [grow]=\"true\">\n            <div class=\"flex center\">\n                <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\n                    <vdr-language-selector\n                        *ngIf=\"availableLanguages.length > 1\"\n                        class=\"mr-2\"\n                        [disabled]=\"isNew$ | async\"\n                        [availableLanguageCodes]=\"availableLanguages\"\n                        [currentLanguageCode]=\"languageCode$ | async\"\n                        (languageCodeChange)=\"setLanguage($event)\"\n                    ></vdr-language-selector>\n                </ng-container>\n                <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\n            </div>\n        </vdr-ab-left>\n\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\n            <button\n                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\n                class=\"btn btn-primary\"\n                (click)=\"save()\"\n                [disabled]=\"\n                    (detailForm.invalid ||\n                        stockLevelsForm.invalid ||\n                        pricesForm.invalid ||\n                        (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\n                    !assetsChanged()\n                \"\n            >\n                {{ 'common.update' | translate }}\n            </button>\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\n    <vdr-page-detail-layout>\n        <vdr-page-detail-sidebar\n            ><vdr-card>\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\n                    <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\n                        <input\n                            type=\"checkbox\"\n                            clrToggle\n                            name=\"enabled\"\n                            [formControl]=\"detailForm.get(['enabled'])\"\n                        />\n                        <label>{{ 'common.enabled' | translate }}</label>\n                    </clr-toggle-wrapper>\n                </vdr-form-field>\n            </vdr-card>\n            <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\n                <div class=\"options\">\n                    <vdr-chip\n                        *ngFor=\"let option of variant.options | sort : 'groupId'\"\n                        [colorFrom]=\"optionGroupCode(option.groupId)\"\n                        [invert]=\"true\"\n                    >\n                        <span>{{ optionGroupCode(option.groupId) }}:</span>\n                        {{ optionName(option) }}\n                    </vdr-chip>\n                </div>\n                <div>\n                    <a\n                        [routerLink]=\"['../../', 'options']\"\n                        class=\"button-small mt-2\"\n                        *vdrIfPermissions=\"updatePermissions\"\n                    >\n                        <clr-icon shape=\"pencil\"></clr-icon>\n                        {{ 'catalog.edit-options' | translate }}\n                    </a>\n                </div>\n            </vdr-card>\n            <vdr-card [title]=\"'catalog.facets' | translate\">\n                <div class=\"facets\">\n                    <vdr-facet-value-chip\n                        *ngFor=\"let facetValue of facetValues$ | async\"\n                        [facetValue]=\"facetValue\"\n                        [removable]=\"updatePermissions | hasPermission\"\n                        (remove)=\"removeFacetValue(facetValue.id)\"\n                    ></vdr-facet-value-chip>\n                </div>\n                <div>\n                    <button\n                        class=\"button-small mt-2\"\n                        *vdrIfPermissions=\"updatePermissions\"\n                        (click)=\"selectFacetValue()\"\n                    >\n                        <clr-icon shape=\"plus\"></clr-icon>\n                        {{ 'catalog.add-facets' | translate }}\n                    </button>\n                </div>\n            </vdr-card>\n\n            <vdr-card>\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\n            </vdr-card>\n        </vdr-page-detail-sidebar>\n\n        <vdr-page-block>\n            <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\n            <vdr-card>\n                <div class=\"form-grid\">\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n                        <input\n                            id=\"name\"\n                            type=\"text\"\n                            formControlName=\"name\"\n                            [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\n                        />\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\n                        <input\n                            id=\"sku\"\n                            type=\"text\"\n                            formControlName=\"sku\"\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\n                        />\n                    </vdr-form-field>\n                </div>\n            </vdr-card>\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\n                <vdr-tabbed-custom-fields\n                    entityName=\"ProductVariant\"\n                    [customFields]=\"customFields\"\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\n                />\n            </vdr-card>\n            <vdr-custom-detail-component-host\n                locationId=\"product-variant-detail\"\n                [entity$]=\"entity$\"\n                [detailForm]=\"detailForm\"\n            />\n            <vdr-card [title]=\"'catalog.assets' | translate\">\n                <vdr-assets\n                    [assets]=\"assetChanges.assets || variant.assets\"\n                    [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\n                    [updatePermissions]=\"updatePermissions\"\n                    (change)=\"assetChanges = $event\"\n                />\n            </vdr-card>\n            <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\n                <div class=\"form-grid\">\n                    <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\n                        <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\n                            <option\n                                *ngFor=\"let taxCategory of taxCategories$ | async\"\n                                [value]=\"taxCategory.id\"\n                            >\n                                {{ taxCategory.name }}\n                            </option>\n                        </select>\n                    </vdr-form-field>\n                </div>\n                <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\n                    <vdr-form-field\n                        [label]=\"\n                            ('catalog.price' | translate) +\n                            (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\n                        \"\n                        [tooltip]=\"\n                            1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\n                                ? ('catalog.default-currency' | translate)\n                                : undefined\n                        \"\n                        for=\"price\"\n                    >\n                        <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\n                            <vdr-currency-input\n                                name=\"price\"\n                                [currencyCode]=\"price.value.currencyCode\"\n                                [readonly]=\"\n                                    !(updatePermissions | hasPermission) || price.value.delete === true\n                                \"\n                                formControlName=\"price\"\n                            />\n                            <div *ngIf=\"1 < pricesForm.controls.length\">\n                                <button\n                                    class=\"button-small delete-button\"\n                                    [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\n                                    (click)=\"toggleDeletePrice(price.get('delete'))\"\n                                >\n                                    <clr-icon shape=\"trash\"></clr-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </vdr-form-field>\n                    <vdr-variant-price-detail\n                        [price]=\"price.value.price\"\n                        [currencyCode]=\"price.value.currencyCode\"\n                        [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\n                        [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\n                    />\n                </div>\n                <vdr-variant-price-strategy-detail\n                    [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\n                    [channelDefaultCurrencyCode]=\"channelDefaultCurrencyCode\"\n                    [variant]=\"variant\"\n                />\n                <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\n                    <div *ngIf=\"unusedCurrencyCodes.length\">\n                        <vdr-dropdown>\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\n                                <clr-icon shape=\"plus\"></clr-icon>\n                                {{ 'catalog.add-price-in-another-currency' | translate }}\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n                            </button>\n                            <vdr-dropdown-menu>\n                                <button\n                                    vdrDropdownItem\n                                    *ngFor=\"let currencyCode of unusedCurrencyCodes\"\n                                    (click)=\"addPriceInCurrency(currencyCode)\"\n                                >\n                                    {{ currencyCode | localeCurrencyName }}\n                                </button>\n                            </vdr-dropdown-menu>\n                        </vdr-dropdown>\n                    </div>\n                </ng-container>\n            </vdr-card>\n            <vdr-card [title]=\"'catalog.stock-levels' | translate\">\n                <div class=\"form-grid\">\n                    <vdr-form-field\n                        for=\"track-inventory\"\n                        [label]=\"'catalog.track-inventory' | translate\"\n                        [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\n                    >\n                        <select\n                            name=\"track-inventory\"\n                            formControlName=\"trackInventory\"\n                            [disabled]=\"!(updatePermissions | hasPermission)\"\n                        >\n                            <option [value]=\"GlobalFlag.TRUE\">\n                                {{ 'catalog.track-inventory-true' | translate }}\n                            </option>\n                            <option [value]=\"GlobalFlag.FALSE\">\n                                {{ 'catalog.track-inventory-false' | translate }}\n                            </option>\n                            <option [value]=\"GlobalFlag.INHERIT\">\n                                {{ 'catalog.track-inventory-inherit' | translate }}\n                            </option>\n                        </select>\n                    </vdr-form-field>\n\n                    <vdr-form-item\n                        [label]=\"'catalog.out-of-stock-threshold' | translate\"\n                        [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\n                    >\n                        <input\n                            type=\"number\"\n                            formControlName=\"outOfStockThreshold\"\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\n                            [vdrDisabled]=\"\n                                detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\n                                inventoryIsNotTracked(detailForm)\n                            \"\n                        />\n                        <clr-toggle-wrapper>\n                            <input\n                                type=\"checkbox\"\n                                clrToggle\n                                name=\"useGlobalOutOfStockThreshold\"\n                                formControlName=\"useGlobalOutOfStockThreshold\"\n                                [vdrDisabled]=\"\n                                    !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\n                                \"\n                            />\n                            <label\n                                >{{ 'catalog.use-global-value' | translate }} ({{\n                                    globalOutOfStockThreshold\n                                }})</label\n                            >\n                        </clr-toggle-wrapper>\n                    </vdr-form-item>\n                </div>\n                <div\n                    class=\"form-grid stock-levels\"\n                    *ngFor=\"let stockLevel of stockLevelsForm.controls\"\n                    [formGroup]=\"stockLevel\"\n                >\n                    <vdr-form-field\n                        [label]=\"\n                            stockLevel.get('stockLocationName')?.value +\n                            ': ' +\n                            ('catalog.stock-on-hand' | translate)\n                        \"\n                        [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\n                    >\n                        <input\n                            [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\n                            type=\"number\"\n                            formControlName=\"stockOnHand\"\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\n                        />\n                    </vdr-form-field>\n                    <vdr-form-item\n                        [label]=\"\n                            stockLevel.get('stockLocationName')?.value +\n                            ': ' +\n                            ('catalog.stock-allocated' | translate)\n                        \"\n                    >\n                        {{ stockLevel.get('stockAllocated')?.value }}\n                    </vdr-form-item>\n                </div>\n                <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\n                    <div *ngIf=\"unusedStockLocations.length\">\n                        <vdr-dropdown>\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\n                                <clr-icon shape=\"plus\"></clr-icon>\n                                {{ 'catalog.add-stock-location' | translate }}\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n                            </button>\n                            <vdr-dropdown-menu>\n                                <button\n                                    vdrDropdownItem\n                                    *ngFor=\"let stockLocation of unusedStockLocations\"\n                                    (click)=\"addStockLocation(stockLocation)\"\n                                >\n                                    <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\n                                </button>\n                            </vdr-dropdown-menu>\n                        </vdr-dropdown>\n                    </div>\n                </ng-container>\n            </vdr-card>\n        </vdr-page-block>\n    </vdr-page-detail-layout>\n</form>\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-inline-end:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FacetValueChipComponent, selector: "vdr-facet-value-chip", inputs: ["facetValue", "removable", "displayFacetName"], outputs: ["remove"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { kind: "component", type: VariantPriceStrategyDetailComponent, selector: "vdr-variant-price-strategy-detail", inputs: ["channelPriceIncludesTax", "variant", "channelDefaultCurrencyCode"] }, { kind: "component", type: ProductVariantQuickJumpComponent, selector: "vdr-product-variant-quick-jump", inputs: ["productId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductVariantDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-variant-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left [grow]=\"true\">\r\n            <div class=\"flex center\">\r\n                <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\r\n                    <vdr-language-selector\r\n                        *ngIf=\"availableLanguages.length > 1\"\r\n                        class=\"mr-2\"\r\n                        [disabled]=\"isNew$ | async\"\r\n                        [availableLanguageCodes]=\"availableLanguages\"\r\n                        [currentLanguageCode]=\"languageCode$ | async\"\r\n                        (languageCodeChange)=\"setLanguage($event)\"\r\n                    ></vdr-language-selector>\r\n                </ng-container>\r\n                <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\r\n            </div>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\r\n            <button\r\n                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\r\n                class=\"btn btn-primary\"\r\n                (click)=\"save()\"\r\n                [disabled]=\"\r\n                    (detailForm.invalid ||\r\n                        stockLevelsForm.invalid ||\r\n                        pricesForm.invalid ||\r\n                        (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\r\n                    !assetsChanged()\r\n                \"\r\n            >\r\n                {{ 'common.update' | translate }}\r\n            </button>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar\r\n            ><vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            [formControl]=\"detailForm.get(['enabled'])\"\r\n                        />\r\n                        <label>{{ 'common.enabled' | translate }}</label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\r\n                <div class=\"options\">\r\n                    <vdr-chip\r\n                        *ngFor=\"let option of variant.options | sort : 'groupId'\"\r\n                        [colorFrom]=\"optionGroupCode(option.groupId)\"\r\n                        [invert]=\"true\"\r\n                    >\r\n                        <span>{{ optionGroupCode(option.groupId) }}:</span>\r\n                        {{ optionName(option) }}\r\n                    </vdr-chip>\r\n                </div>\r\n                <div>\r\n                    <a\r\n                        [routerLink]=\"['../../', 'options']\"\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\r\n                    >\r\n                        <clr-icon shape=\"pencil\"></clr-icon>\r\n                        {{ 'catalog.edit-options' | translate }}\r\n                    </a>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.facets' | translate\">\r\n                <div class=\"facets\">\r\n                    <vdr-facet-value-chip\r\n                        *ngFor=\"let facetValue of facetValues$ | async\"\r\n                        [facetValue]=\"facetValue\"\r\n                        [removable]=\"updatePermissions | hasPermission\"\r\n                        (remove)=\"removeFacetValue(facetValue.id)\"\r\n                    ></vdr-facet-value-chip>\r\n                </div>\r\n                <div>\r\n                    <button\r\n                        class=\"button-small mt-2\"\r\n                        *vdrIfPermissions=\"updatePermissions\"\r\n                        (click)=\"selectFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'catalog.add-facets' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n\r\n            <vdr-card>\r\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n\r\n        <vdr-page-block>\r\n            <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\r\n            <vdr-card>\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\r\n                        <input\r\n                            id=\"sku\"\r\n                            type=\"text\"\r\n                            formControlName=\"sku\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"ProductVariant\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\r\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"product-variant-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            />\r\n            <vdr-card [title]=\"'catalog.assets' | translate\">\r\n                <vdr-assets\r\n                    [assets]=\"assetChanges.assets || variant.assets\"\r\n                    [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\r\n                    [updatePermissions]=\"updatePermissions\"\r\n                    (change)=\"assetChanges = $event\"\r\n                />\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\r\n                        <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\r\n                            <option\r\n                                *ngFor=\"let taxCategory of taxCategories$ | async\"\r\n                                [value]=\"taxCategory.id\"\r\n                            >\r\n                                {{ taxCategory.name }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n                </div>\r\n                <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            ('catalog.price' | translate) +\r\n                            (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\r\n                        \"\r\n                        [tooltip]=\"\r\n                            1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\r\n                                ? ('catalog.default-currency' | translate)\r\n                                : undefined\r\n                        \"\r\n                        for=\"price\"\r\n                    >\r\n                        <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\r\n                            <vdr-currency-input\r\n                                name=\"price\"\r\n                                [currencyCode]=\"price.value.currencyCode\"\r\n                                [readonly]=\"\r\n                                    !(updatePermissions | hasPermission) || price.value.delete === true\r\n                                \"\r\n                                formControlName=\"price\"\r\n                            />\r\n                            <div *ngIf=\"1 < pricesForm.controls.length\">\r\n                                <button\r\n                                    class=\"button-small delete-button\"\r\n                                    [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\r\n                                    (click)=\"toggleDeletePrice(price.get('delete'))\"\r\n                                >\r\n                                    <clr-icon shape=\"trash\"></clr-icon>\r\n                                </button>\r\n                            </div>\r\n                        </div>\r\n                    </vdr-form-field>\r\n                    <vdr-variant-price-detail\r\n                        [price]=\"price.value.price\"\r\n                        [currencyCode]=\"price.value.currencyCode\"\r\n                        [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\r\n                        [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\r\n                    />\r\n                </div>\r\n                <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\r\n                    <div *ngIf=\"unusedCurrencyCodes.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-price-in-another-currency' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let currencyCode of unusedCurrencyCodes\"\r\n                                    (click)=\"addPriceInCurrency(currencyCode)\"\r\n                                >\r\n                                    {{ currencyCode | localeCurrencyName }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'catalog.stock-levels' | translate\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field\r\n                        for=\"track-inventory\"\r\n                        [label]=\"'catalog.track-inventory' | translate\"\r\n                        [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\r\n                    >\r\n                        <select\r\n                            name=\"track-inventory\"\r\n                            formControlName=\"trackInventory\"\r\n                            [disabled]=\"!(updatePermissions | hasPermission)\"\r\n                        >\r\n                            <option [value]=\"GlobalFlag.TRUE\">\r\n                                {{ 'catalog.track-inventory-true' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.FALSE\">\r\n                                {{ 'catalog.track-inventory-false' | translate }}\r\n                            </option>\r\n                            <option [value]=\"GlobalFlag.INHERIT\">\r\n                                {{ 'catalog.track-inventory-inherit' | translate }}\r\n                            </option>\r\n                        </select>\r\n                    </vdr-form-field>\r\n\r\n                    <vdr-form-item\r\n                        [label]=\"'catalog.out-of-stock-threshold' | translate\"\r\n                        [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\r\n                    >\r\n                        <input\r\n                            type=\"number\"\r\n                            formControlName=\"outOfStockThreshold\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                            [vdrDisabled]=\"\r\n                                detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\r\n                                inventoryIsNotTracked(detailForm)\r\n                            \"\r\n                        />\r\n                        <clr-toggle-wrapper>\r\n                            <input\r\n                                type=\"checkbox\"\r\n                                clrToggle\r\n                                name=\"useGlobalOutOfStockThreshold\"\r\n                                formControlName=\"useGlobalOutOfStockThreshold\"\r\n                                [vdrDisabled]=\"\r\n                                    !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\r\n                                \"\r\n                            />\r\n                            <label\r\n                                >{{ 'catalog.use-global-value' | translate }} ({{\r\n                                    globalOutOfStockThreshold\r\n                                }})</label\r\n                            >\r\n                        </clr-toggle-wrapper>\r\n                    </vdr-form-item>\r\n                </div>\r\n                <div\r\n                    class=\"form-grid stock-levels\"\r\n                    *ngFor=\"let stockLevel of stockLevelsForm.controls\"\r\n                    [formGroup]=\"stockLevel\"\r\n                >\r\n                    <vdr-form-field\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-on-hand' | translate)\r\n                        \"\r\n                        [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                    >\r\n                        <input\r\n                            [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\r\n                            type=\"number\"\r\n                            formControlName=\"stockOnHand\"\r\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-item\r\n                        [label]=\"\r\n                            stockLevel.get('stockLocationName')?.value +\r\n                            ': ' +\r\n                            ('catalog.stock-allocated' | translate)\r\n                        \"\r\n                    >\r\n                        {{ stockLevel.get('stockAllocated')?.value }}\r\n                    </vdr-form-item>\r\n                </div>\r\n                <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\r\n                    <div *ngIf=\"unusedStockLocations.length\">\r\n                        <vdr-dropdown>\r\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\r\n                                <clr-icon shape=\"plus\"></clr-icon>\r\n                                {{ 'catalog.add-stock-location' | translate }}\r\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                            </button>\r\n                            <vdr-dropdown-menu>\r\n                                <button\r\n                                    vdrDropdownItem\r\n                                    *ngFor=\"let stockLocation of unusedStockLocations\"\r\n                                    (click)=\"addStockLocation(stockLocation)\"\r\n                                >\r\n                                    <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\r\n                                </button>\r\n                            </vdr-dropdown-menu>\r\n                        </vdr-dropdown>\r\n                    </div>\r\n                </ng-container>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-inline-end:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}\n"] }]
+            args: [{ selector: 'vdr-product-variant-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left [grow]=\"true\">\n            <div class=\"flex center\">\n                <ng-container *ngIf=\"availableLanguages$ | async as availableLanguages\">\n                    <vdr-language-selector\n                        *ngIf=\"availableLanguages.length > 1\"\n                        class=\"mr-2\"\n                        [disabled]=\"isNew$ | async\"\n                        [availableLanguageCodes]=\"availableLanguages\"\n                        [currentLanguageCode]=\"languageCode$ | async\"\n                        (languageCodeChange)=\"setLanguage($event)\"\n                    ></vdr-language-selector>\n                </ng-container>\n                <vdr-product-variant-quick-jump [productId]=\"entity?.product.id\" />\n            </div>\n        </vdr-ab-left>\n\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"product-variant-detail\"></vdr-action-bar-items>\n            <button\n                *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\"\n                class=\"btn btn-primary\"\n                (click)=\"save()\"\n                [disabled]=\"\n                    (detailForm.invalid ||\n                        stockLevelsForm.invalid ||\n                        pricesForm.invalid ||\n                        (detailForm.pristine && stockLevelsForm.pristine && pricesForm.pristine)) &&\n                    !assetsChanged()\n                \"\n            >\n                {{ 'common.update' | translate }}\n            </button>\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"entity$ | async as variant\">\n    <vdr-page-detail-layout>\n        <vdr-page-detail-sidebar\n            ><vdr-card>\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\n                    <clr-toggle-wrapper *vdrIfPermissions=\"['UpdateCatalog', 'UpdateProduct']\">\n                        <input\n                            type=\"checkbox\"\n                            clrToggle\n                            name=\"enabled\"\n                            [formControl]=\"detailForm.get(['enabled'])\"\n                        />\n                        <label>{{ 'common.enabled' | translate }}</label>\n                    </clr-toggle-wrapper>\n                </vdr-form-field>\n            </vdr-card>\n            <vdr-card *ngIf=\"variant.options.length\" [title]=\"'catalog.product-options' | translate\">\n                <div class=\"options\">\n                    <vdr-chip\n                        *ngFor=\"let option of variant.options | sort : 'groupId'\"\n                        [colorFrom]=\"optionGroupCode(option.groupId)\"\n                        [invert]=\"true\"\n                    >\n                        <span>{{ optionGroupCode(option.groupId) }}:</span>\n                        {{ optionName(option) }}\n                    </vdr-chip>\n                </div>\n                <div>\n                    <a\n                        [routerLink]=\"['../../', 'options']\"\n                        class=\"button-small mt-2\"\n                        *vdrIfPermissions=\"updatePermissions\"\n                    >\n                        <clr-icon shape=\"pencil\"></clr-icon>\n                        {{ 'catalog.edit-options' | translate }}\n                    </a>\n                </div>\n            </vdr-card>\n            <vdr-card [title]=\"'catalog.facets' | translate\">\n                <div class=\"facets\">\n                    <vdr-facet-value-chip\n                        *ngFor=\"let facetValue of facetValues$ | async\"\n                        [facetValue]=\"facetValue\"\n                        [removable]=\"updatePermissions | hasPermission\"\n                        (remove)=\"removeFacetValue(facetValue.id)\"\n                    ></vdr-facet-value-chip>\n                </div>\n                <div>\n                    <button\n                        class=\"button-small mt-2\"\n                        *vdrIfPermissions=\"updatePermissions\"\n                        (click)=\"selectFacetValue()\"\n                    >\n                        <clr-icon shape=\"plus\"></clr-icon>\n                        {{ 'catalog.add-facets' | translate }}\n                    </button>\n                </div>\n            </vdr-card>\n\n            <vdr-card>\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\n            </vdr-card>\n        </vdr-page-detail-sidebar>\n\n        <vdr-page-block>\n            <button type=\"submit\" hidden x-data=\"prevents enter key from triggering other buttons\"></button>\n            <vdr-card>\n                <div class=\"form-grid\">\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\n                        <input\n                            id=\"name\"\n                            type=\"text\"\n                            formControlName=\"name\"\n                            [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\n                        />\n                    </vdr-form-field>\n                    <vdr-form-field [label]=\"'catalog.sku' | translate\" for=\"sku\">\n                        <input\n                            id=\"sku\"\n                            type=\"text\"\n                            formControlName=\"sku\"\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\n                        />\n                    </vdr-form-field>\n                </div>\n            </vdr-card>\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\n                <vdr-tabbed-custom-fields\n                    entityName=\"ProductVariant\"\n                    [customFields]=\"customFields\"\n                    [customFieldsFormGroup]=\"detailForm.get('customFields')\"\n                    [readonly]=\"!(updatePermissions | hasPermission)\"\n                />\n            </vdr-card>\n            <vdr-custom-detail-component-host\n                locationId=\"product-variant-detail\"\n                [entity$]=\"entity$\"\n                [detailForm]=\"detailForm\"\n            />\n            <vdr-card [title]=\"'catalog.assets' | translate\">\n                <vdr-assets\n                    [assets]=\"assetChanges.assets || variant.assets\"\n                    [featuredAsset]=\"assetChanges.featuredAsset || variant.featuredAsset\"\n                    [updatePermissions]=\"updatePermissions\"\n                    (change)=\"assetChanges = $event\"\n                />\n            </vdr-card>\n            <vdr-card [title]=\"'catalog.price-and-tax' | translate\">\n                <div class=\"form-grid\">\n                    <vdr-form-field [label]=\"'catalog.tax-category' | translate\" for=\"taxCategory\">\n                        <select name=\"taxCategory\" formControlName=\"taxCategoryId\">\n                            <option\n                                *ngFor=\"let taxCategory of taxCategories$ | async\"\n                                [value]=\"taxCategory.id\"\n                            >\n                                {{ taxCategory.name }}\n                            </option>\n                        </select>\n                    </vdr-form-field>\n                </div>\n                <div class=\"form-grid prices\" *ngFor=\"let price of pricesForm.controls\" [formGroup]=\"price\">\n                    <vdr-form-field\n                        [label]=\"\n                            ('catalog.price' | translate) +\n                            (1 < pricesForm.length ? ' (' + price.value.currencyCode + ')' : '')\n                        \"\n                        [tooltip]=\"\n                            1 < pricesForm.length && price.value.currencyCode === channelDefaultCurrencyCode\n                                ? ('catalog.default-currency' | translate)\n                                : undefined\n                        \"\n                        for=\"price\"\n                    >\n                        <div class=\"price-wrapper\" [class.pending-deletion]=\"price.value.delete === true\">\n                            <vdr-currency-input\n                                name=\"price\"\n                                [currencyCode]=\"price.value.currencyCode\"\n                                [readonly]=\"\n                                    !(updatePermissions | hasPermission) || price.value.delete === true\n                                \"\n                                formControlName=\"price\"\n                            />\n                            <div *ngIf=\"1 < pricesForm.controls.length\">\n                                <button\n                                    class=\"button-small delete-button\"\n                                    [disabled]=\"price.value.currencyCode === channelDefaultCurrencyCode\"\n                                    (click)=\"toggleDeletePrice(price.get('delete'))\"\n                                >\n                                    <clr-icon shape=\"trash\"></clr-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </vdr-form-field>\n                    <vdr-variant-price-detail\n                        [price]=\"price.value.price\"\n                        [currencyCode]=\"price.value.currencyCode\"\n                        [priceIncludesTax]=\"channelPriceIncludesTax$ | async\"\n                        [taxCategoryId]=\"detailForm.get('taxCategoryId')!.value\"\n                    />\n                </div>\n                <vdr-variant-price-strategy-detail\n                    [channelPriceIncludesTax]=\"channelPriceIncludesTax$ | async\"\n                    [channelDefaultCurrencyCode]=\"channelDefaultCurrencyCode\"\n                    [variant]=\"variant\"\n                />\n                <ng-container *ngIf=\"unusedCurrencyCodes$ | async as unusedCurrencyCodes\">\n                    <div *ngIf=\"unusedCurrencyCodes.length\">\n                        <vdr-dropdown>\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\n                                <clr-icon shape=\"plus\"></clr-icon>\n                                {{ 'catalog.add-price-in-another-currency' | translate }}\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n                            </button>\n                            <vdr-dropdown-menu>\n                                <button\n                                    vdrDropdownItem\n                                    *ngFor=\"let currencyCode of unusedCurrencyCodes\"\n                                    (click)=\"addPriceInCurrency(currencyCode)\"\n                                >\n                                    {{ currencyCode | localeCurrencyName }}\n                                </button>\n                            </vdr-dropdown-menu>\n                        </vdr-dropdown>\n                    </div>\n                </ng-container>\n            </vdr-card>\n            <vdr-card [title]=\"'catalog.stock-levels' | translate\">\n                <div class=\"form-grid\">\n                    <vdr-form-field\n                        for=\"track-inventory\"\n                        [label]=\"'catalog.track-inventory' | translate\"\n                        [tooltip]=\"'catalog.track-inventory-tooltip' | translate\"\n                    >\n                        <select\n                            name=\"track-inventory\"\n                            formControlName=\"trackInventory\"\n                            [disabled]=\"!(updatePermissions | hasPermission)\"\n                        >\n                            <option [value]=\"GlobalFlag.TRUE\">\n                                {{ 'catalog.track-inventory-true' | translate }}\n                            </option>\n                            <option [value]=\"GlobalFlag.FALSE\">\n                                {{ 'catalog.track-inventory-false' | translate }}\n                            </option>\n                            <option [value]=\"GlobalFlag.INHERIT\">\n                                {{ 'catalog.track-inventory-inherit' | translate }}\n                            </option>\n                        </select>\n                    </vdr-form-field>\n\n                    <vdr-form-item\n                        [label]=\"'catalog.out-of-stock-threshold' | translate\"\n                        [tooltip]=\"'catalog.out-of-stock-threshold-tooltip' | translate\"\n                    >\n                        <input\n                            type=\"number\"\n                            formControlName=\"outOfStockThreshold\"\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\n                            [vdrDisabled]=\"\n                                detailForm.get('useGlobalOutOfStockThreshold')?.value !== false ||\n                                inventoryIsNotTracked(detailForm)\n                            \"\n                        />\n                        <clr-toggle-wrapper>\n                            <input\n                                type=\"checkbox\"\n                                clrToggle\n                                name=\"useGlobalOutOfStockThreshold\"\n                                formControlName=\"useGlobalOutOfStockThreshold\"\n                                [vdrDisabled]=\"\n                                    !(updatePermissions | hasPermission) || inventoryIsNotTracked(detailForm)\n                                \"\n                            />\n                            <label\n                                >{{ 'catalog.use-global-value' | translate }} ({{\n                                    globalOutOfStockThreshold\n                                }})</label\n                            >\n                        </clr-toggle-wrapper>\n                    </vdr-form-item>\n                </div>\n                <div\n                    class=\"form-grid stock-levels\"\n                    *ngFor=\"let stockLevel of stockLevelsForm.controls\"\n                    [formGroup]=\"stockLevel\"\n                >\n                    <vdr-form-field\n                        [label]=\"\n                            stockLevel.get('stockLocationName')?.value +\n                            ': ' +\n                            ('catalog.stock-on-hand' | translate)\n                        \"\n                        [for]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\n                    >\n                        <input\n                            [id]=\"'stockOnHand_' + stockLevel.get('stockLocationId')?.value\"\n                            type=\"number\"\n                            formControlName=\"stockOnHand\"\n                            [readonly]=\"!(updatePermissions | hasPermission)\"\n                        />\n                    </vdr-form-field>\n                    <vdr-form-item\n                        [label]=\"\n                            stockLevel.get('stockLocationName')?.value +\n                            ': ' +\n                            ('catalog.stock-allocated' | translate)\n                        \"\n                    >\n                        {{ stockLevel.get('stockAllocated')?.value }}\n                    </vdr-form-item>\n                </div>\n                <ng-container *ngIf=\"unusedStockLocation$ | async as unusedStockLocations\">\n                    <div *ngIf=\"unusedStockLocations.length\">\n                        <vdr-dropdown>\n                            <button class=\"button mt-2\" vdrDropdownTrigger>\n                                <clr-icon shape=\"plus\"></clr-icon>\n                                {{ 'catalog.add-stock-location' | translate }}\n                                <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\n                            </button>\n                            <vdr-dropdown-menu>\n                                <button\n                                    vdrDropdownItem\n                                    *ngFor=\"let stockLocation of unusedStockLocations\"\n                                    (click)=\"addStockLocation(stockLocation)\"\n                                >\n                                    <clr-icon shape=\"map-marker\"></clr-icon> {{ stockLocation.name }}\n                                </button>\n                            </vdr-dropdown-menu>\n                        </vdr-dropdown>\n                    </div>\n                </ng-container>\n            </vdr-card>\n        </vdr-page-block>\n    </vdr-page-detail-layout>\n</form>\n", styles: [".facets,.options{display:flex;flex-wrap:wrap;gap:3px}vdr-product-variant-quick-jump{flex:1;margin-inline-end:calc(var(--space-unit) * 2)}.stock-levels,.prices{margin-top:calc(var(--space-unit) * 2);padding-top:calc(var(--space-unit) * 2);border-top:1px solid var(--color-weight-150)}.price-wrapper{display:flex;align-items:center;gap:var(--space-unit);width:100%}.price-wrapper.pending-deletion vdr-currency-input{opacity:.7}.price-wrapper.pending-deletion .delete-button{background-color:var(--color-error-700);color:var(--color-error-100)}\n"] }]
         }], ctorParameters: function () { return [{ type: ProductDetailService }, { type: i2.FormBuilder }, { type: i1.ModalService }, { type: i1.NotificationService }, { type: i1.DataService }, { type: i0.ChangeDetectorRef }]; } });
 
 const assignProductVariantsToChannelBulkAction = {
@@ -4585,8 +4522,8 @@ const CATALOG_COMPONENTS = [
     GenerateProductVariantsComponent,
     ApplyFacetDialogComponent,
     AssetListComponent,
-    AssetsComponent,
     VariantPriceDetailComponent,
+    VariantPriceStrategyDetailComponent,
     CollectionListComponent,
     CollectionDetailComponent,
     CollectionTreeComponent,
@@ -4765,8 +4702,8 @@ class CatalogModule {
             GenerateProductVariantsComponent,
             ApplyFacetDialogComponent,
             AssetListComponent,
-            AssetsComponent,
             VariantPriceDetailComponent,
+            VariantPriceStrategyDetailComponent,
             CollectionListComponent,
             CollectionDetailComponent,
             CollectionTreeComponent,
@@ -4796,8 +4733,8 @@ class CatalogModule {
             GenerateProductVariantsComponent,
             ApplyFacetDialogComponent,
             AssetListComponent,
-            AssetsComponent,
             VariantPriceDetailComponent,
+            VariantPriceStrategyDetailComponent,
             CollectionListComponent,
             CollectionDetailComponent,
             CollectionTreeComponent,
@@ -5066,5 +5003,5 @@ const PRODUCT_VARIANT_LIST_QUERY = gql `
  * Generated bundle index. Do not edit.
  */
 
-export { ASSET_DETAIL_QUERY, ApplyFacetDialogComponent, AssetDetailComponent, AssetListComponent, AssetsComponent, AssignProductsToChannelDialogComponent, BulkAddFacetValuesDialogComponent, COLLECTION_DETAIL_QUERY, CatalogModule, CollectionBreadcrumbPipe, CollectionContentsComponent, CollectionDataTableComponent, CollectionDetailComponent, CollectionListComponent, CollectionTreeComponent, CollectionTreeNodeComponent, CollectionTreeService, ConfirmVariantDeletionDialogComponent, CreateProductOptionGroupDialogComponent, CreateProductVariantDialogComponent, FACET_DETAIL_QUERY, FACET_LIST_QUERY, FacetDetailComponent, FacetListComponent, GET_PRODUCTS_WITH_FACET_VALUES_BY_IDS, GET_PRODUCT_DETAIL, GET_VARIANTS_WITH_FACET_VALUES_BY_IDS, GenerateProductVariantsComponent, GeneratedVariant, MoveCollectionsDialogComponent, OPTION_VALUE_INPUT_VALUE_ACCESSOR, OptionValueInputComponent, PRODUCT_LIST_QUERY, PRODUCT_VARIANT_DETAIL_QUERY, PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT, PRODUCT_VARIANT_LIST_QUERY, PRODUCT_VARIANT_UPDATE_MUTATION, ProductDetailComponent, ProductDetailService, ProductListComponent, ProductOptionsEditorComponent, ProductVariantDetailComponent, ProductVariantListComponent, ProductVariantQuickJumpComponent, ProductVariantsEditorComponent, ProductVariantsResolver, ProductVariantsTableComponent, UPDATE_PRODUCTS_BULK, UPDATE_VARIANTS_BULK, UpdateProductOptionDialogComponent, VariantPriceDetailComponent, arrayToTree, assignCollectionsToChannelBulkAction, assignFacetValuesToProductsBulkAction, assignFacetsToChannelBulkAction, assignProductVariantsToChannelBulkAction, assignProductsToChannelBulkAction, createRoutes, deleteCollectionsBulkAction, deleteFacetsBulkAction, deleteProductVariantsBulkAction, deleteProductsBulkAction, moveCollectionsBulkAction, productOptionsEditorBreadcrumb, removeCollectionsFromChannelBulkAction, removeFacetsFromChannelBulkAction, removeFacetsFromChannelBulkAction2, removeProductVariantsFromChannelBulkAction, removeProductsFromChannelBulkAction, replaceLast };
+export { ASSET_DETAIL_QUERY, ApplyFacetDialogComponent, AssetDetailComponent, AssetListComponent, AssignProductsToChannelDialogComponent, BulkAddFacetValuesDialogComponent, COLLECTION_DETAIL_QUERY, CatalogModule, CollectionBreadcrumbPipe, CollectionContentsComponent, CollectionDataTableComponent, CollectionDetailComponent, CollectionListComponent, CollectionTreeComponent, CollectionTreeNodeComponent, CollectionTreeService, ConfirmVariantDeletionDialogComponent, CreateProductOptionGroupDialogComponent, CreateProductVariantDialogComponent, FACET_DETAIL_QUERY, FACET_LIST_QUERY, FacetDetailComponent, FacetListComponent, GET_PRODUCTS_WITH_FACET_VALUES_BY_IDS, GET_PRODUCT_DETAIL, GET_VARIANTS_WITH_FACET_VALUES_BY_IDS, GenerateProductVariantsComponent, GeneratedVariant, MoveCollectionsDialogComponent, OPTION_VALUE_INPUT_VALUE_ACCESSOR, OptionValueInputComponent, PRODUCT_LIST_QUERY, PRODUCT_VARIANT_DETAIL_QUERY, PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT, PRODUCT_VARIANT_LIST_QUERY, PRODUCT_VARIANT_UPDATE_MUTATION, ProductDetailComponent, ProductDetailService, ProductListComponent, ProductOptionsEditorComponent, ProductVariantDetailComponent, ProductVariantListComponent, ProductVariantQuickJumpComponent, ProductVariantsEditorComponent, ProductVariantsResolver, ProductVariantsTableComponent, UPDATE_PRODUCTS_BULK, UPDATE_VARIANTS_BULK, UpdateProductOptionDialogComponent, VariantPriceDetailComponent, VariantPriceStrategyDetailComponent, arrayToTree, assignCollectionsToChannelBulkAction, assignFacetValuesToProductsBulkAction, assignFacetsToChannelBulkAction, assignProductVariantsToChannelBulkAction, assignProductsToChannelBulkAction, createRoutes, deleteCollectionsBulkAction, deleteFacetsBulkAction, deleteProductVariantsBulkAction, deleteProductsBulkAction, moveCollectionsBulkAction, productOptionsEditorBreadcrumb, removeCollectionsFromChannelBulkAction, removeFacetsFromChannelBulkAction, removeFacetsFromChannelBulkAction2, removeProductVariantsFromChannelBulkAction, removeProductsFromChannelBulkAction, replaceLast };
 //# sourceMappingURL=vendure-admin-ui-catalog.mjs.map