npm - @vendure/admin-ui - Versions diffs - 2.2.0-next.0 → 2.2.0-next.2 - Mend

@vendure/admin-ui 2.2.0-next.0 → 2.2.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (233) hide show

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

@@ -4,11 +4,12 @@ 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, AssetPickerDialogComponent, AssetPreviewDialogComponent, DataTable2Component, COLLECTION_FRAGMENT, unicodePatternValidator, getConfigArgValue, encodeConfigArgValue, createBulkDeleteAction, ModalService, NotificationService, createBulkAssignToChannelAction, createBulkRemoveFromChannelAction, TypedBaseListComponent, GetCollectionListDocument, FACET_WITH_VALUE_LIST_FRAGMENT, GetFacetDetailDocument, getChannelCodeFromUserStatus, currentChannelIsNotDefault, 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 { SortOrder as SortOrder$1 } from '@vendure/common/lib/generated-types';
 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';
-import { forkJoin, of, throwError, combineLatest, Subject, EMPTY, BehaviorSubject, from, lastValueFrom, merge, Observable, concat } from 'rxjs';
+import { forkJoin, of, throwError, combineLatest, Subject, EMPTY, BehaviorSubject, from, lastValueFrom, merge, concat } from 'rxjs';
 import { normalizeString } from '@vendure/common/lib/normalize-string';
 import { notNullOrUndefined, generateAllCombinations } from '@vendure/common/lib/shared-utils';
 import * as i3 from '@clr/angular';
@@ -433,7 +434,7 @@ class ProductOptionsEditorComponent extends BaseDetailComponent {
         return optionForm;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductOptionsEditorComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i1.ServerConfigService }, { token: i1.DataService }, { token: ProductDetailService }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductOptionsEditorComponent, selector: "vdr-product-options-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-header>\r\n    <vdr-page-title></vdr-page-title>\r\n    <vdr-page-header-description>{{ 'catalog.page-description-options-editor' | translate }}</vdr-page-header-description>\r\n</vdr-page-header>\r\n<vdr-page-body>\r\n    <vdr-page-block>\r\n        <vdr-action-bar>\r\n            <vdr-ab-left>\r\n                <vdr-language-selector\r\n                    [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                    [currentLanguageCode]=\"languageCode$ | async\"\r\n                    (languageCodeChange)=\"setLanguage($event)\"\r\n                ></vdr-language-selector>\r\n            </vdr-ab-left>\r\n\r\n            <vdr-ab-right>\r\n                <div class=\"flex center\">\r\n                    <div class=\"mr-2\">\r\n                        <clr-checkbox-wrapper>\r\n                            <input\r\n                                clrCheckbox\r\n                                type=\"checkbox\"\r\n                                id=\"auto-update\"\r\n                                [(ngModel)]=\"autoUpdateVariantNames\"\r\n                            />\r\n                            <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </div>\r\n                    <button\r\n                        *vdrIfPermissions=\"updatePermission\"\r\n                        class=\"btn btn-primary\"\r\n                        (click)=\"save()\"\r\n                        [disabled]=\"detailForm.pristine || detailForm.invalid\"\r\n                    >\r\n                        {{ 'common.update' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-ab-right>\r\n        </vdr-action-bar>\r\n    </vdr-page-block>\r\n    <vdr-page-block>\r\n        <form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"optionGroups$ | async as optionGroups\">\r\n            <div formGroupName=\"optionGroups\">\r\n                <vdr-card\r\n                    *ngFor=\"let optionGroup of getOptionGroups(); index as i\"\r\n                    [formArrayName]=\"i\"\r\n                    [title]=\"optionGroup.value.code\"\r\n                >\r\n                    <vdr-page-entity-info [entity]=\"optionGroup.value\"></vdr-page-entity-info>\r\n                    <div class=\"form-grid\">\r\n                        <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                            <input\r\n                                [id]=\"'name-' + i\"\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            />\r\n                        </vdr-form-field>\r\n                        <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                            <input\r\n                                [id]=\"'code-' + i\"\r\n                                type=\"text\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                formControlName=\"code\"\r\n                            />\r\n                        </vdr-form-field>\r\n                    </div>\r\n                    <ng-container formGroupName=\"customFields\" *ngIf=\"optionGroupCustomFields.length\">\r\n                        <vdr-tabbed-custom-fields\r\n                            entityName=\"ProductOptionGroup\"\r\n                            [customFields]=\"optionGroupCustomFields\"\r\n                            [customFieldsFormGroup]=\"optionGroup.get('customFields')\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-tabbed-custom-fields>\r\n                    </ng-container>\r\n\r\n                    <vdr-data-table-2\r\n                        id=\"edit-options-list\"\r\n                        *ngIf=\"getOptions(optionGroup) as options\"\r\n                        [items]=\"options\"\r\n                        [itemsPerPage]=\"paginationSettings[optionGroup.value.id]?.itemsPerPage\"\r\n                        [currentPage]=\"paginationSettings[optionGroup.value.id]?.currentPage\"\r\n                        (pageChange)=\"paginationSettings[optionGroup.value.id].currentPage = $event\"\r\n                        [totalItems]=\"options.length\"\r\n                    >\r\n                        <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                            <ng-template let-optionControl=\"item\">\r\n                                {{ optionControl.value.id }}\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                        <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n                            <ng-template let-optionControl=\"item\">\r\n                                {{ optionControl.value.createdAt | localeDate : 'short' }}\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                        <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n                            <ng-template let-optionControl=\"item\">\r\n                                {{ optionControl.value.updatedAt | localeDate : 'short' }}\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                        <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\r\n                            <ng-template let-optionControl=\"item\">\r\n                                <input\r\n                                    type=\"text\"\r\n                                    [formControl]=\"optionControl.get('name')\"\r\n                                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                />\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                        <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n                            <ng-template let-optionControl=\"item\">\r\n                                <input type=\"text\" [formControl]=\"optionControl.get('code')\" />\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                        <vdr-dt2-column\r\n                            [heading]=\"'common.custom-fields' | translate\" id=\"custom-fields\"\r\n                            [hiddenByDefault]=\"optionCustomFields.length === 0\"\r\n                        >\r\n                            <ng-template let-optionControl=\"item\">\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"ProductOption\"\r\n                                    [customFields]=\"optionCustomFields\"\r\n                                    [compact]=\"true\"\r\n                                    [customFieldsFormGroup]=\"optionControl.get('customFields')\"\r\n                                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                    </vdr-data-table-2>\r\n                </vdr-card>\r\n            </div>\r\n        </form>\r\n    </vdr-page-block>\r\n</vdr-page-body>\r\n", styles: [".option-group-header{display:flex;align-items:baseline}\n"], dependencies: [{ 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.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: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageHeaderComponent, selector: "vdr-page-header" }, { kind: "component", type: i1.PageTitleComponent, selector: "vdr-page-title", inputs: ["title"] }, { kind: "component", type: i1.PageHeaderDescriptionComponent, selector: "vdr-page-header-description" }, { kind: "component", type: i1.PageBodyComponent, selector: "vdr-page-body" }, { 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.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductOptionsEditorComponent, selector: "vdr-product-options-editor", usesInheritance: true, ngImport: i0, template: "<vdr-page-header>\r\n    <vdr-page-title></vdr-page-title>\r\n    <vdr-page-header-description>{{ 'catalog.page-description-options-editor' | translate }}</vdr-page-header-description>\r\n</vdr-page-header>\r\n<vdr-page-body>\r\n    <vdr-page-block>\r\n        <vdr-action-bar>\r\n            <vdr-ab-left>\r\n                <vdr-language-selector\r\n                    [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                    [currentLanguageCode]=\"languageCode$ | async\"\r\n                    (languageCodeChange)=\"setLanguage($event)\"\r\n                ></vdr-language-selector>\r\n            </vdr-ab-left>\r\n\r\n            <vdr-ab-right>\r\n                <div class=\"flex center\">\r\n                    <div class=\"mr-2\">\r\n                        <clr-checkbox-wrapper>\r\n                            <input\r\n                                clrCheckbox\r\n                                type=\"checkbox\"\r\n                                id=\"auto-update\"\r\n                                [(ngModel)]=\"autoUpdateVariantNames\"\r\n                            />\r\n                            <label>{{ 'catalog.auto-update-product-variant-name' | translate }}</label>\r\n                        </clr-checkbox-wrapper>\r\n                    </div>\r\n                    <button\r\n                        *vdrIfPermissions=\"updatePermission\"\r\n                        class=\"btn btn-primary\"\r\n                        (click)=\"save()\"\r\n                        [disabled]=\"detailForm.pristine || detailForm.invalid\"\r\n                    >\r\n                        {{ 'common.update' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-ab-right>\r\n        </vdr-action-bar>\r\n    </vdr-page-block>\r\n    <vdr-page-block>\r\n        <form class=\"form\" [formGroup]=\"detailForm\" *ngIf=\"optionGroups$ | async as optionGroups\">\r\n            <div formGroupName=\"optionGroups\">\r\n                <vdr-card\r\n                    *ngFor=\"let optionGroup of getOptionGroups(); index as i\"\r\n                    [formArrayName]=\"i\"\r\n                    [title]=\"optionGroup.value.code\"\r\n                >\r\n                    <vdr-page-entity-info [entity]=\"optionGroup.value\"></vdr-page-entity-info>\r\n                    <div class=\"form-grid\">\r\n                        <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                            <input\r\n                                [id]=\"'name-' + i\"\r\n                                type=\"text\"\r\n                                formControlName=\"name\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            />\r\n                        </vdr-form-field>\r\n                        <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                            <input\r\n                                [id]=\"'code-' + i\"\r\n                                type=\"text\"\r\n                                [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                formControlName=\"code\"\r\n                            />\r\n                        </vdr-form-field>\r\n                    </div>\r\n                    <ng-container formGroupName=\"customFields\" *ngIf=\"optionGroupCustomFields.length\">\r\n                        <vdr-tabbed-custom-fields\r\n                            entityName=\"ProductOptionGroup\"\r\n                            [customFields]=\"optionGroupCustomFields\"\r\n                            [customFieldsFormGroup]=\"optionGroup.get('customFields')\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        ></vdr-tabbed-custom-fields>\r\n                    </ng-container>\r\n\r\n                    <vdr-data-table-2\r\n                        id=\"edit-options-list\"\r\n                        *ngIf=\"getOptions(optionGroup) as options\"\r\n                        [items]=\"options\"\r\n                        [itemsPerPage]=\"paginationSettings[optionGroup.value.id]?.itemsPerPage\"\r\n                        [currentPage]=\"paginationSettings[optionGroup.value.id]?.currentPage\"\r\n                        (pageChange)=\"paginationSettings[optionGroup.value.id].currentPage = $event\"\r\n                        [totalItems]=\"options.length\"\r\n                    >\r\n                        <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                            <ng-template let-optionControl=\"item\">\r\n                                {{ optionControl.value.id }}\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                        <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n                            <ng-template let-optionControl=\"item\">\r\n                                {{ optionControl.value.createdAt | localeDate : 'short' }}\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                        <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n                            <ng-template let-optionControl=\"item\">\r\n                                {{ optionControl.value.updatedAt | localeDate : 'short' }}\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                        <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\r\n                            <ng-template let-optionControl=\"item\">\r\n                                <input\r\n                                    type=\"text\"\r\n                                    [formControl]=\"optionControl.get('name')\"\r\n                                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                />\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                        <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [optional]=\"false\">\r\n                            <ng-template let-optionControl=\"item\">\r\n                                <input type=\"text\" [formControl]=\"optionControl.get('code')\" />\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                        <vdr-dt2-column\r\n                            [heading]=\"'common.custom-fields' | translate\" id=\"custom-fields\"\r\n                            [hiddenByDefault]=\"optionCustomFields.length === 0\"\r\n                        >\r\n                            <ng-template let-optionControl=\"item\">\r\n                                <vdr-tabbed-custom-fields\r\n                                    entityName=\"ProductOption\"\r\n                                    [customFields]=\"optionCustomFields\"\r\n                                    [compact]=\"true\"\r\n                                    [customFieldsFormGroup]=\"optionControl.get('customFields')\"\r\n                                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                ></vdr-tabbed-custom-fields>\r\n                            </ng-template>\r\n                        </vdr-dt2-column>\r\n                    </vdr-data-table-2>\r\n                </vdr-card>\r\n            </div>\r\n        </form>\r\n    </vdr-page-block>\r\n</vdr-page-body>\r\n", styles: [".option-group-header{display:flex;align-items:baseline}\n"], dependencies: [{ 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.PageHeaderComponent, selector: "vdr-page-header" }, { kind: "component", type: i1.PageTitleComponent, selector: "vdr-page-title", inputs: ["title"] }, { kind: "component", type: i1.PageHeaderDescriptionComponent, selector: "vdr-page-header-description" }, { kind: "component", type: i1.PageBodyComponent, selector: "vdr-page-body" }, { 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.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductOptionsEditorComponent, decorators: [{
             type: Component,
@@ -470,7 +471,7 @@ class CreateProductOptionGroupDialogComponent {
         this.resolveWith();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CreateProductOptionGroupDialogComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CreateProductOptionGroupDialogComponent, selector: "vdr-create-product-option-group-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-option-group' | translate }}\r\n</ng-template>\r\n<div class=\"form-grid\" [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input id=\"name\" type=\"text\" formControlName=\"name\" (input)=\"updateCode()\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'common.code' | translate\"\r\n        for=\"code\"\r\n    >\r\n        <input\r\n            id=\"code\"\r\n            type=\"text\"\r\n            formControlName=\"code\"\r\n        />\r\n    </vdr-form-field>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CreateProductOptionGroupDialogComponent, selector: "vdr-create-product-option-group-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-option-group' | translate }}\r\n</ng-template>\r\n<div class=\"form-grid\" [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input id=\"name\" type=\"text\" formControlName=\"name\" (input)=\"updateCode()\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'common.code' | translate\"\r\n        for=\"code\"\r\n    >\r\n        <input\r\n            id=\"code\"\r\n            type=\"text\"\r\n            formControlName=\"code\"\r\n        />\r\n    </vdr-form-field>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CreateProductOptionGroupDialogComponent, decorators: [{
             type: Component,
@@ -540,7 +541,7 @@ class CreateProductVariantDialogComponent {
         return this.product.optionGroups.find(og => og.code === code)?.id ?? '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CreateProductVariantDialogComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CreateProductVariantDialogComponent, selector: "vdr-create-product-variant-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-variant' | translate }}\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <div formGroupName=\"options\" class=\"form-grid\">\r\n        <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\r\n            <ng-select [items]=\"optionGroup.options\" [formControlName]=\"optionGroup.code\" bindLabel=\"name\"\r\n                bindValue=\"id\" appendTo=\"body\">\r\n            </ng-select>\r\n        </vdr-form-field>\r\n        <clr-alert *ngIf=\"product.optionGroups.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\"\r\n            class=\"form-grid-span\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.cannot-create-variants-without-options' | translate }}\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div *ngIf=\"existingVariant\" class=\"mt-2\">\r\n        <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\r\n                    existingVariant.sku\r\n                    }})\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div class=\"form-grid mt-2\">\r\n        <vdr-form-field [label]=\"'common.name' | translate\">\r\n            <input type=\"text\" formControlName=\"name\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.sku' | translate\">\r\n            <input type=\"text\" formControlName=\"sku\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.price' | translate\">\r\n            <vdr-currency-input name=\"price\" [currencyCode]=\"currencyCode\" formControlName=\"price\" />\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrAlertText, selector: ".alert-text" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { 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: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CreateProductVariantDialogComponent, selector: "vdr-create-product-variant-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-product-variant' | translate }}\r\n</ng-template>\r\n<form [formGroup]=\"form\">\r\n    <div formGroupName=\"options\" class=\"form-grid\">\r\n        <vdr-form-field [label]=\"optionGroup.name\" *ngFor=\"let optionGroup of product.optionGroups\">\r\n            <ng-select [items]=\"optionGroup.options\" [formControlName]=\"optionGroup.code\" bindLabel=\"name\"\r\n                bindValue=\"id\" appendTo=\"body\">\r\n            </ng-select>\r\n        </vdr-form-field>\r\n        <clr-alert *ngIf=\"product.optionGroups.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\"\r\n            class=\"form-grid-span\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.cannot-create-variants-without-options' | translate }}\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div *ngIf=\"existingVariant\" class=\"mt-2\">\r\n        <clr-alert clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n            <clr-alert-item>\r\n                <span class=\"alert-text\">\r\n                    {{ 'catalog.product-variant-exists' | translate }}: {{ existingVariant.name }} ({{\r\n                    existingVariant.sku\r\n                    }})\r\n                </span>\r\n            </clr-alert-item>\r\n        </clr-alert>\r\n    </div>\r\n    <div class=\"form-grid mt-2\">\r\n        <vdr-form-field [label]=\"'common.name' | translate\">\r\n            <input type=\"text\" formControlName=\"name\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.sku' | translate\">\r\n            <input type=\"text\" formControlName=\"sku\" />\r\n        </vdr-form-field>\r\n        <vdr-form-field [label]=\"'catalog.price' | translate\">\r\n            <vdr-currency-input name=\"price\" [currencyCode]=\"currencyCode\" formControlName=\"price\" />\r\n        </vdr-form-field>\r\n    </div>\r\n</form>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\"\r\n        [disabled]=\"form.invalid || existingVariant || product.optionGroups.length === 0\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>", styles: [""], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrAlertText, selector: ".alert-text" }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CreateProductVariantDialogComponent, decorators: [{
             type: Component,
@@ -671,7 +672,7 @@ class OptionValueInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OptionValueInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: { groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { add: "add", remove: "remove", edit: "edit" }, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }, { propertyName: "nameInputs", predicate: ["editNameInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < optionValues.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of optionValues; last as isLast; index as i\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            <span [hidden]=\"editingIndex !== i\">\r\n                <input\r\n                    #editNameInput\r\n                    type=\"text\"\r\n                    [ngModel]=\"option.name\"\r\n                    (blur)=\"updateOption(i, $event)\"\r\n                    (click)=\"$event.cancelBubble = true\"\r\n                />\r\n            </span>\r\n            <span\r\n                class=\"option-name\"\r\n                [class.editable]=\"!option.locked && !option.id\"\r\n                (click)=\"editName(i, $event)\" [hidden]=\"editingIndex === i\">{{ option.name }}</span>\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n", styles: [".input-wrapper{background-color:var(--color-form-input-bg);border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none;box-shadow:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}vdr-chip .option-name.editable:hover{outline:1px solid var(--color-component-bg-300);outline-offset:1px;border-radius:1px}vdr-chip input{padding:0!important;margin-top:-2px;margin-bottom:-2px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: { groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { add: "add", remove: "remove", edit: "edit" }, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }, { propertyName: "nameInputs", predicate: ["editNameInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < optionValues.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of optionValues; last as isLast; index as i\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            <span [hidden]=\"editingIndex !== i\">\r\n                <input\r\n                    #editNameInput\r\n                    type=\"text\"\r\n                    [ngModel]=\"option.name\"\r\n                    (blur)=\"updateOption(i, $event)\"\r\n                    (click)=\"$event.cancelBubble = true\"\r\n                />\r\n            </span>\r\n            <span\r\n                class=\"option-name\"\r\n                [class.editable]=\"!option.locked && !option.id\"\r\n                (click)=\"editName(i, $event)\" [hidden]=\"editingIndex === i\">{{ option.name }}</span>\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n", styles: [".input-wrapper{background-color:var(--color-form-input-bg);border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none;box-shadow:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}vdr-chip .option-name.editable:hover{outline:1px solid var(--color-component-bg-300);outline-offset:1px;border-radius:1px}vdr-chip input{padding:0!important;margin-top:-2px;margin-bottom:-2px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: OptionValueInputComponent, decorators: [{
             type: Component,
@@ -961,7 +962,7 @@ class ProductVariantsEditorComponent {
         return variant.options.find(o => o.groupId === groupId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductVariantsEditorComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1.DataService }, { token: ProductDetailService }, { token: i1.NotificationService }, { token: i1.ModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductVariantsEditorComponent, selector: "vdr-product-variants-editor", ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-card>\r\n        <div *ngFor=\"let group of optionGroups; index as i\" class=\"option-groups\">\r\n            <vdr-form-field [label]=\"'catalog.option' | translate\">\r\n                <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'catalog.option-values' | translate\" class=\"flex-spacer\">\r\n                <vdr-option-value-input\r\n                    #optionValueInputComponent\r\n                    [options]=\"group.values\"\r\n                    [groupName]=\"group.name\"\r\n                    [disabled]=\"group.name === ''\"\r\n                    (add)=\"addOption(i, $event.name)\"\r\n                    (remove)=\"removeOption(i, $event)\"\r\n                ></vdr-option-value-input>\r\n            </vdr-form-field>\r\n            <div>\r\n                <button class=\"button-small mt-4\" (click)=\"removeOptionGroup(group)\">\r\n                    <clr-icon shape=\"trash\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <button class=\"button mt-1\" (click)=\"addOptionGroup()\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-product-option-group' | translate }}\r\n        </button>\r\n    </vdr-card>\r\n    <vdr-card [paddingX]=\"false\">\r\n        <div class=\"mx-3\">\r\n            <button class=\"button\" (click)=\"createNewVariant()\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-product-variant' | translate }}\r\n            </button>\r\n        </div>\r\n        <vdr-data-table-2\r\n            id=\"manage-product-variant-list\"\r\n            [items]=\"variants$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n        >\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n            />\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.name }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [optional]=\"false\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.sku }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column *ngFor=\"let optionGroup of optionGroups$ | async\" [heading]=\"optionGroup.name\" [id]=\"optionGroup.code\">\r\n                <ng-template let-variant=\"item\">\r\n                    <vdr-chip\r\n                        *ngIf=\"getOption(variant, optionGroup.id) as option; else selectOption\"\r\n                        [colorFrom]=\"optionGroup.code\"\r\n                        >{{ option.name }}</vdr-chip\r\n                    >\r\n                    <ng-template #selectOption>\r\n                        <div class=\"flex center\">\r\n                            <ng-select\r\n                                [items]=\"optionGroup.options\"\r\n                                bindLabel=\"name\"\r\n                                bindValue=\"id\"\r\n                                appendTo=\"body\"\r\n                                (change)=\"setOptionToAddToVariant(variant.id, optionGroup.id, $event?.id)\"\r\n                            ></ng-select>\r\n                            <button\r\n                                class=\"button-small ml-1\"\r\n                                [class.primary]=\"!!optionsToAddToVariant[variant.id]?.[optionGroup.id]\"\r\n                                (click)=\"addOptionToVariant(variant)\"\r\n                                [disabled]=\"!optionsToAddToVariant[variant.id]?.[optionGroup.id]\"\r\n                            >\r\n                                <clr-icon shape=\"floppy\"></clr-icon>\r\n                            </button>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.price' | translate\" id=\"price\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.price | localeCurrency : variant.currencyCode }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" id=\"price-with-tax\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.delete' | translate\" id=\"delete\" [optional]=\"false\">\r\n                <ng-template let-variant=\"item\">\r\n                    <button class=\"button-small\" (click)=\"deleteVariant(variant)\">\r\n                        <clr-icon shape=\"trash is-danger\"></clr-icon>\r\n                    </button>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n        </vdr-data-table-2>\r\n    </vdr-card>\r\n</vdr-page-block>\r\n", styles: [".option-groups{display:flex;width:100%;gap:var(--space-unit)}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { 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.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductVariantsEditorComponent, selector: "vdr-product-variants-editor", ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-card>\r\n        <div *ngFor=\"let group of optionGroups; index as i\" class=\"option-groups\">\r\n            <vdr-form-field [label]=\"'catalog.option' | translate\">\r\n                <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n            </vdr-form-field>\r\n            <vdr-form-field [label]=\"'catalog.option-values' | translate\" class=\"flex-spacer\">\r\n                <vdr-option-value-input\r\n                    #optionValueInputComponent\r\n                    [options]=\"group.values\"\r\n                    [groupName]=\"group.name\"\r\n                    [disabled]=\"group.name === ''\"\r\n                    (add)=\"addOption(i, $event.name)\"\r\n                    (remove)=\"removeOption(i, $event)\"\r\n                ></vdr-option-value-input>\r\n            </vdr-form-field>\r\n            <div>\r\n                <button class=\"button-small mt-4\" (click)=\"removeOptionGroup(group)\">\r\n                    <clr-icon shape=\"trash\"></clr-icon>\r\n                </button>\r\n            </div>\r\n        </div>\r\n        <button class=\"button mt-1\" (click)=\"addOptionGroup()\">\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            {{ 'catalog.create-product-option-group' | translate }}\r\n        </button>\r\n    </vdr-card>\r\n    <vdr-card [paddingX]=\"false\">\r\n        <div class=\"mx-3\">\r\n            <button class=\"button\" (click)=\"createNewVariant()\">\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-product-variant' | translate }}\r\n            </button>\r\n        </div>\r\n        <vdr-data-table-2\r\n            id=\"manage-product-variant-list\"\r\n            [items]=\"variants$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n        >\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n            />\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.name }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [optional]=\"false\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.sku }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column *ngFor=\"let optionGroup of optionGroups$ | async\" [heading]=\"optionGroup.name\" [id]=\"optionGroup.code\">\r\n                <ng-template let-variant=\"item\">\r\n                    <vdr-chip\r\n                        *ngIf=\"getOption(variant, optionGroup.id) as option; else selectOption\"\r\n                        [colorFrom]=\"optionGroup.code\"\r\n                        >{{ option.name }}</vdr-chip\r\n                    >\r\n                    <ng-template #selectOption>\r\n                        <div class=\"flex center\">\r\n                            <ng-select\r\n                                [items]=\"optionGroup.options\"\r\n                                bindLabel=\"name\"\r\n                                bindValue=\"id\"\r\n                                appendTo=\"body\"\r\n                                (change)=\"setOptionToAddToVariant(variant.id, optionGroup.id, $event?.id)\"\r\n                            ></ng-select>\r\n                            <button\r\n                                class=\"button-small ml-1\"\r\n                                [class.primary]=\"!!optionsToAddToVariant[variant.id]?.[optionGroup.id]\"\r\n                                (click)=\"addOptionToVariant(variant)\"\r\n                                [disabled]=\"!optionsToAddToVariant[variant.id]?.[optionGroup.id]\"\r\n                            >\r\n                                <clr-icon shape=\"floppy\"></clr-icon>\r\n                            </button>\r\n                        </div>\r\n                    </ng-template>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.price' | translate\" id=\"price\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.price | localeCurrency : variant.currencyCode }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" id=\"price-with-tax\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-variant=\"item\">\r\n                    {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.delete' | translate\" id=\"delete\" [optional]=\"false\">\r\n                <ng-template let-variant=\"item\">\r\n                    <button class=\"button-small\" (click)=\"deleteVariant(variant)\">\r\n                        <clr-icon shape=\"trash is-danger\"></clr-icon>\r\n                    </button>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n        </vdr-data-table-2>\r\n    </vdr-card>\r\n</vdr-page-block>\r\n", styles: [".option-groups{display:flex;width:100%;gap:var(--space-unit)}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductVariantsEditorComponent, decorators: [{
             type: Component,
@@ -1504,7 +1505,7 @@ class AssignProductsToChannelDialogComponent {
         }).single$)).productVariants.items;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssignProductsToChannelDialogComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssignProductsToChannelDialogComponent, selector: "vdr-assign-products-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <ng-container *ngIf=\"isProductVariantMode; else productModeTitle\">{{\r\n        'catalog.assign-variants-to-channel' | translate\r\n    }}</ng-container>\r\n    <ng-template #productModeTitle>{{ 'catalog.assign-products-to-channel' | translate }}</ng-template>\r\n</ng-template>\r\n\r\n<div class=\"flex\">\r\n    <clr-input-container>\r\n        <label>{{ 'common.channel' | translate }}</label>\r\n        <vdr-channel-assignment-control\r\n            clrInput\r\n            [multiple]=\"false\"\r\n            [includeDefaultChannel]=\"false\"\r\n            [disableChannelIds]=\"currentChannelIds\"\r\n            [formControl]=\"selectedChannelIdControl\"\r\n        ></vdr-channel-assignment-control>\r\n    </clr-input-container>\r\n    <div class=\"flex-spacer\"></div>\r\n    <clr-input-container>\r\n        <label>{{ 'catalog.price-conversion-factor' | translate }}</label>\r\n        <input clrInput type=\"number\" min=\"0\" max=\"99999\" [formControl]=\"priceFactorControl\" />\r\n    </clr-input-container>\r\n</div>\r\n\r\n<div class=\"channel-price-preview\">\r\n    <label class=\"clr-control-label\">{{ 'catalog.channel-price-preview' | translate }}</label>\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.name' | translate }}</th>\r\n                <th>\r\n                    {{\r\n                        'catalog.price-in-channel'\r\n                            | translate: { channel: currentChannel?.code | channelCodeToLabel | translate }\r\n                    }}\r\n                </th>\r\n                <th>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n                        {{ 'catalog.price-in-channel' | translate: { channel: selectedChannel?.code } }}\r\n                    </ng-template>\r\n                    <ng-template #noSelection>\r\n                        {{ 'catalog.no-channel-selected' | translate }}\r\n                    </ng-template>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of variantsPreview$ | async\">\r\n                <td>{{ row.name }}</td>\r\n                <td>{{ row.price | localeCurrency: currentChannel?.defaultCurrencyCode }}</td>\r\n                <td>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noChannelSelected\">\r\n                        {{ row.pricePreview | localeCurrency: selectedChannel?.defaultCurrencyCode }}\r\n                    </ng-template>\r\n                    <ng-template #noChannelSelected> - </ng-template>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\r\n        <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n            {{ 'catalog.assign-to-named-channel' | translate: { channelCode: selectedChannel?.code } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'catalog.no-channel-selected' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: ["vdr-channel-assignment-control{min-width:200px}.channel-price-preview{margin-top:24px}.channel-price-preview table.table{margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AssignProductsToChannelDialogComponent, selector: "vdr-assign-products-to-channel-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    <ng-container *ngIf=\"isProductVariantMode; else productModeTitle\">{{\r\n        'catalog.assign-variants-to-channel' | translate\r\n    }}</ng-container>\r\n    <ng-template #productModeTitle>{{ 'catalog.assign-products-to-channel' | translate }}</ng-template>\r\n</ng-template>\r\n\r\n<div class=\"flex\">\r\n    <clr-input-container>\r\n        <label>{{ 'common.channel' | translate }}</label>\r\n        <vdr-channel-assignment-control\r\n            clrInput\r\n            [multiple]=\"false\"\r\n            [includeDefaultChannel]=\"false\"\r\n            [disableChannelIds]=\"currentChannelIds\"\r\n            [formControl]=\"selectedChannelIdControl\"\r\n        ></vdr-channel-assignment-control>\r\n    </clr-input-container>\r\n    <div class=\"flex-spacer\"></div>\r\n    <clr-input-container>\r\n        <label>{{ 'catalog.price-conversion-factor' | translate }}</label>\r\n        <input clrInput type=\"number\" min=\"0\" max=\"99999\" [formControl]=\"priceFactorControl\" />\r\n    </clr-input-container>\r\n</div>\r\n\r\n<div class=\"channel-price-preview\">\r\n    <label class=\"clr-control-label\">{{ 'catalog.channel-price-preview' | translate }}</label>\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.name' | translate }}</th>\r\n                <th>\r\n                    {{\r\n                        'catalog.price-in-channel'\r\n                            | translate: { channel: currentChannel?.code | channelCodeToLabel | translate }\r\n                    }}\r\n                </th>\r\n                <th>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n                        {{ 'catalog.price-in-channel' | translate: { channel: selectedChannel?.code } }}\r\n                    </ng-template>\r\n                    <ng-template #noSelection>\r\n                        {{ 'catalog.no-channel-selected' | translate }}\r\n                    </ng-template>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of variantsPreview$ | async\">\r\n                <td>{{ row.name }}</td>\r\n                <td>{{ row.price | localeCurrency: currentChannel?.defaultCurrencyCode }}</td>\r\n                <td>\r\n                    <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noChannelSelected\">\r\n                        {{ row.pricePreview | localeCurrency: selectedChannel?.defaultCurrencyCode }}\r\n                    </ng-template>\r\n                    <ng-template #noChannelSelected> - </ng-template>\r\n                </td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"assign()\" [disabled]=\"!selectedChannel\" class=\"btn btn-primary\">\r\n        <ng-template [ngIf]=\"selectedChannel\" [ngIfElse]=\"noSelection\">\r\n            {{ 'catalog.assign-to-named-channel' | translate: { channelCode: selectedChannel?.code } }}\r\n        </ng-template>\r\n        <ng-template #noSelection>\r\n            {{ 'catalog.no-channel-selected' | translate }}\r\n        </ng-template>\r\n    </button>\r\n</ng-template>\r\n", styles: ["vdr-channel-assignment-control{min-width:200px}.channel-price-preview{margin-top:24px}.channel-price-preview table.table{margin-top:6px}\n"], dependencies: [{ kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.ChannelAssignmentControlComponent, selector: "vdr-channel-assignment-control", inputs: ["multiple", "includeDefaultChannel", "disableChannelIds"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AssignProductsToChannelDialogComponent, decorators: [{
             type: Component,
@@ -1836,7 +1837,7 @@ class CollectionDataTableComponent extends DataTable2Component {
         this.changeDetectorRef.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionDataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.LocalStorageService }, { token: i1.DataService }, { token: i2$1.DragDrop }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: { subCollections: "subCollections" }, outputs: { changeOrder: "changeOrder" }, viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "collectionRowList", predicate: ["collectionRow"], descendants: true, read: CdkDrag }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\r\n    *ngIf=\"filters\"\r\n    [filters]=\"filters\"\r\n    [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n    <div class=\"bulk-actions\">\r\n        <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <div class=\"flex\">\r\n                        <div class=\"drag-handle-spacer\"></div>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                            (change)=\"onToggleAllClick()\"\r\n                        />\r\n                    </div>\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-add-filter-preset-button\r\n                                    [filters]=\"filters\"\r\n                                    [dataTableId]=\"id\"\r\n                                ></vdr-add-filter-preset-button>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody\r\n            cdkDropList\r\n            cdkDropListLockAxis=\"y\"\r\n            (cdkDropListDropped)=\"onDrop($event)\"\r\n            [cdkDropListSortPredicate]=\"sortPredicate\"\r\n        >\r\n            <ng-container\r\n                *ngFor=\"\r\n                let item of items\r\n                    | paginate\r\n                        : {\r\n                              itemsPerPage: itemsPerPage,\r\n                              currentPage: currentPage,\r\n                              totalItems: totalItems,\r\n                              id: id,\r\n                          };\r\n                index as i;\r\n                trackBy: trackByFn\r\n            \"\r\n            >\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"collectionRowTmp\"\r\n                    [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\r\n                ></ng-container>\r\n            </ng-container>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\r\n    <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\r\n        <td\r\n            *ngIf=\"selectionManager\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n            class=\"selection-col\"\r\n        >\r\n            <div class=\"flex\">\r\n                <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    [checked]=\"selectionManager?.isSelected(item)\"\r\n                    (click)=\"onRowClick(item, $event)\"\r\n                />\r\n            </div>\r\n        </td>\r\n        <td\r\n            *ngFor=\"let column of visibleSortedColumns\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n        >\r\n            <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                <ng-container\r\n                    *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                >\r\n                    <ng-container\r\n                        *ngComponentOutlet=\"\r\n                            componentConfig.config.component;\r\n                            inputs: { rowItem: item };\r\n                            injector: componentConfig.injector\r\n                        \"\r\n                    ></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultComponent>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\r\n                    ></ng-container>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\r\n    </tr>\r\n    <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\r\n        ></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-inline-start:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.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: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: i1.DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: i1.AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: { subCollections: "subCollections" }, outputs: { changeOrder: "changeOrder" }, viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }, { propertyName: "collectionRowList", predicate: ["collectionRow"], descendants: true, read: CdkDrag }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<vdr-data-table-filter-presets\r\n    *ngIf=\"filters\"\r\n    [filters]=\"filters\"\r\n    [dataTableId]=\"id\"\r\n></vdr-data-table-filter-presets>\r\n<div class=\"table-wrapper\">\r\n    <div class=\"bulk-actions\">\r\n        <ng-content select=\"vdr-bulk-action-menu\"></ng-content>\r\n    </div>\r\n    <table class=\"\" [class.no-select]=\"disableSelect\">\r\n        <thead [class.items-selected]=\"selectionManager?.selection.length\">\r\n            <tr class=\"heading-row\">\r\n                <th *ngIf=\"selectionManager\" class=\"selection-col\">\r\n                    <div class=\"flex\">\r\n                        <div class=\"drag-handle-spacer\"></div>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrCheckbox\r\n                            [checked]=\"selectionManager?.areAllCurrentItemsSelected()\"\r\n                            (change)=\"onToggleAllClick()\"\r\n                        />\r\n                    </div>\r\n                </th>\r\n                <th\r\n                    *ngFor=\"let column of visibleSortedColumns; last as isLast\"\r\n                    [class.expand]=\"column.expand\"\r\n                >\r\n                    <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                        <vdr-ui-extension-point\r\n                            [locationId]=\"id\"\r\n                            [metadata]=\"column.id\"\r\n                            api=\"dataTable\"\r\n                            [topPx]=\"-6\"\r\n                            [leftPx]=\"-24\"\r\n                            display=\"block\"\r\n                        >\r\n                            <span>{{ column.heading }}</span>\r\n                        </vdr-ui-extension-point>\r\n                        <div *ngIf=\"column.sort as sort\" class=\"sort-toggle\">\r\n                            <button (click)=\"sort.toggleSortOrder()\" [class.active]=\"sort.sortOrder\">\r\n                                <clr-icon *ngIf=\"!sort.sortOrder\" shape=\"two-way-arrows left\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'ASC'\" shape=\"arrow up\"></clr-icon>\r\n                                <clr-icon *ngIf=\"sort.sortOrder === 'DESC'\" shape=\"arrow down\"></clr-icon>\r\n                            </button>\r\n                            <div class=\"sort-label\" *ngIf=\"sort.sortOrder\">{{ sort.sortOrder }}</div>\r\n                        </div>\r\n                    </div>\r\n                </th>\r\n                <th>\r\n                    <div class=\"column-picker\">\r\n                        <vdr-data-table-colum-picker\r\n                            [uiLanguage]=\"uiLanguage$ | async\"\r\n                            [columns]=\"sortedColumns\"\r\n                            (reorder)=\"onColumnReorder($event)\"\r\n                            (resetColumns)=\"onColumnsReset()\"\r\n                        ></vdr-data-table-colum-picker>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n            <tr *ngIf=\"searchComponent || customSearchTemplate || filters?.length\">\r\n                <th\r\n                    [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\"\r\n                    class=\"filter-row\"\r\n                    [class.active]=\"showSearchFilterRow\"\r\n                >\r\n                    <button\r\n                        class=\"button-ghost toggle-search-filter-row\"\r\n                        [class.active]=\"showSearchFilterRow\"\r\n                        (click)=\"toggleSearchFilterRow()\"\r\n                        [title]=\"'common.search-and-filter-list' | translate\"\r\n                    >\r\n                        <clr-icon shape=\"search\"></clr-icon>\r\n                    </button>\r\n                    <div class=\"filter-row-wrapper\" [class.hidden]=\"!showSearchFilterRow\">\r\n                        <ng-container *ngTemplateOutlet=\"searchComponent?.template\"></ng-container>\r\n                        <ng-container *ngTemplateOutlet=\"customSearchTemplate\"></ng-container>\r\n                        <ng-container *ngIf=\"filters\">\r\n                            <div class=\"filters\">\r\n                                <vdr-data-table-filters\r\n                                    *ngFor=\"let activeFilter of filters.activeFilters\"\r\n                                    [filterWithValue]=\"activeFilter\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-data-table-filters\r\n                                    *ngIf=\"filters.length\"\r\n                                    [filters]=\"filters\"\r\n                                    class=\"mt-1\"\r\n                                ></vdr-data-table-filters>\r\n                                <vdr-add-filter-preset-button\r\n                                    [filters]=\"filters\"\r\n                                    [dataTableId]=\"id\"\r\n                                ></vdr-add-filter-preset-button>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </th>\r\n            </tr>\r\n        </thead>\r\n        <tbody\r\n            cdkDropList\r\n            cdkDropListLockAxis=\"y\"\r\n            (cdkDropListDropped)=\"onDrop($event)\"\r\n            [cdkDropListSortPredicate]=\"sortPredicate\"\r\n        >\r\n            <ng-container\r\n                *ngFor=\"\r\n                let item of items\r\n                    | paginate\r\n                        : {\r\n                              itemsPerPage: itemsPerPage,\r\n                              currentPage: currentPage,\r\n                              totalItems: totalItems,\r\n                              id: id,\r\n                          };\r\n                index as i;\r\n                trackBy: trackByFn\r\n            \"\r\n            >\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"collectionRowTmp\"\r\n                    [ngTemplateOutletContext]=\"{ item: item, i: i, depth: 0 }\"\r\n                ></ng-container>\r\n            </ng-container>\r\n            <ng-container>\r\n                <tr *ngIf=\"!items?.length\">\r\n                    <td [attr.colspan]=\"visibleSortedColumns.length + (selectionManager ? 2 : 1)\">\r\n                        <vdr-empty-placeholder [emptyStateLabel]=\"emptyStateLabel\"></vdr-empty-placeholder>\r\n                    </td>\r\n                </tr>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n</div>\r\n<div class=\"table-footer\">\r\n    <vdr-items-per-page-controls\r\n        *ngIf=\"totalItems\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        (itemsPerPageChange)=\"itemsPerPageChange.emit($event)\"\r\n    ></vdr-items-per-page-controls>\r\n    <div *ngIf=\"totalItems\" class=\"p5 total-items-count\">\r\n        {{ 'common.total-items' | translate : { currentStart, currentEnd, totalItems } }}\r\n    </div>\r\n\r\n    <vdr-pagination-controls\r\n        *ngIf=\"totalItems\"\r\n        [id]=\"id\"\r\n        [currentPage]=\"currentPage\"\r\n        [itemsPerPage]=\"itemsPerPage\"\r\n        [totalItems]=\"totalItems\"\r\n        (pageChange)=\"pageChange.emit($event)\"\r\n    ></vdr-pagination-controls>\r\n</div>\r\n\r\n<ng-template #collectionRowTmp let-item=\"item\" let-depth=\"depth\">\r\n    <tr #collectionRow cdkDrag [cdkDragData]=\"{ depth: depth, collection: item }\" cdkDragBoundary=\"tbody\">\r\n        <td\r\n            *ngIf=\"selectionManager\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n            class=\"selection-col\"\r\n        >\r\n            <div class=\"flex\">\r\n                <div class=\"drag-handle\" cdkDragHandle [title]=\"'catalog.reorder-collection' | translate\">\r\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\r\n                </div>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    [checked]=\"selectionManager?.isSelected(item)\"\r\n                    (click)=\"onRowClick(item, $event)\"\r\n                />\r\n            </div>\r\n        </td>\r\n        <td\r\n            *ngFor=\"let column of visibleSortedColumns\"\r\n            [class.active]=\"activeIndex === absoluteIndex[item.id]\"\r\n        >\r\n            <div class=\"cell-content\" [ngClass]=\"column.align\">\r\n                <ng-container\r\n                    *ngIf=\"customComponents.get(column.id) as componentConfig; else defaultComponent\"\r\n                >\r\n                    <ng-container\r\n                        *ngComponentOutlet=\"\r\n                            componentConfig.config.component;\r\n                            inputs: { rowItem: item };\r\n                            injector: componentConfig.injector\r\n                        \"\r\n                    ></ng-container>\r\n                </ng-container>\r\n                <ng-template #defaultComponent>\r\n                    <ng-container\r\n                        *ngTemplateOutlet=\"column.template; context: { item: item, depth: depth }\"\r\n                    ></ng-container>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td [class.active]=\"activeIndex === absoluteIndex[item.id]\"><!-- column select --></td>\r\n    </tr>\r\n    <ng-container *ngFor=\"let subCollection of getSubcollections(item)\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"collectionRowTmp; context: { item: subCollection, depth: depth + 1 }\"\r\n        ></ng-container>\r\n    </ng-container>\r\n</ng-template>\r\n", styles: [":host{display:block;max-width:100%;position:relative;margin-bottom:calc(var(--space-unit) * 4);container-type:inline-size}th{border-bottom:1px solid var(--color-table-header-border);font-size:var(--font-size-xs);font-weight:600;text-transform:uppercase;position:relative;white-space:nowrap}th,td{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1)}tr td:first-of-type,tr th:first-of-type{text-align:center}@media screen and (min-width: 992px){tr td:first-of-type,tr th:first-of-type{padding-inline-start:var(--surface-margin-left);text-align:start}}th:last-of-type,td:last-of-type{border-inline-end:1px solid var(--color-table-header-border)}tr:first-of-type th:last-of-type{border-image:linear-gradient(0deg,var(--color-table-header-border),transparent) 1}tr:last-of-type td:last-of-type{border-image:linear-gradient(180deg,var(--color-table-header-border),transparent) 1}tbody td{border-bottom:1px solid var(--color-table-row-separator)}tbody tr:hover{background-color:var(--color-table-row-hover-bg)}.bulk-actions{margin-inline-start:calc(var(--space-unit) * 5);background-color:var(--color-surface-bg);z-index:10;display:flex;position:absolute;top:5px;height:40px}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 8.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 10.5)}}.table-wrapper{display:block;overflow-y:hidden;overflow-x:auto;position:relative;width:100%;max-width:var(--surface-width)}table{width:100%}table.no-select{-webkit-user-select:none;user-select:none}.column-picker{width:24px}.sort-toggle{display:flex;align-items:center;margin-inline-start:calc(var(--space-unit) * .5)}.sort-toggle button{border:0;border-radius:var(--border-radius-lg);color:var(--color-weight-500);padding:0 2px;cursor:pointer;background-color:transparent}.sort-toggle button.active{color:var(--color-primary-700)}.sort-toggle .sort-label{margin-inline-start:calc(var(--space-unit) * .5);font-size:10px;color:var(--color-primary-600);font-weight:400}.toggle-search-filter-row{position:absolute;top:-12px;left:4px}@media screen and (min-width: 1280px){.toggle-search-filter-row{left:8px}}.toggle-search-filter-row.active{background-color:var(--color-primary-700);color:var(--color-primary-100);border-color:var(--color-primary-700)}th.filter-row{position:relative;font-size:var(--font-size-base);font-weight:400;background-color:var(--color-weight-100);box-shadow:var(--data-table-filter-box-shadow);border-left-width:0;border-right-width:0;text-align:initial;padding:0}th.filter-row input{width:100%}th.filter-row.active{border-bottom:1px solid var(--color-table-header-border)}th.filter-row .filters{margin-top:calc(var(--space-unit) * 1);display:flex;flex-wrap:wrap;gap:calc(var(--space-unit) * .5)}.filter-row-wrapper{padding:calc(var(--space-unit) * 4);padding-inline-start:0;max-height:150px;transition:max-height .2s,padding .2s,opacity .2s}.filter-row-wrapper.hidden{max-height:0px;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0}.cell-link{display:block;width:100%;height:100%}td.active{background-color:var(--color-table-row-active-bg)}.cell-content{display:flex;align-items:center;line-height:var(--font-size-sm);color:var(--color-weight-700)}.cell-content.left{justify-content:flex-start}.cell-content.center{justify-content:center}.cell-content.right{justify-content:flex-end}.selection-col{width:calc(var(--space-unit) * 8)}vdr-empty-placeholder{width:100%}.table-footer{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--space-unit);margin-inline-start:var(--surface-margin-left);margin-inline-end:var(--space-unit)}.total-items-count{font-size:var(--font-size-xs)}@container (max-width: 500px){.total-items-count{display:none}}\n", ".bulk-actions{margin-inline-start:calc(var(--space-unit) * 6);background-color:var(--color-surface-bg)}@media screen and (min-width: 992px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 9.5)}}@media screen and (min-width: 1280px){.bulk-actions{margin-inline-start:calc(var(--space-unit) * 11.5)}}.drag-handle{cursor:grab}.drag-handle-spacer{width:16px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.cdk-drag-placeholder{background-color:var(--color-primary-100)!important}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { 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.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: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.EmptyPlaceholderComponent, selector: "vdr-empty-placeholder", inputs: ["emptyStateLabel"] }, { kind: "component", type: i1.UiExtensionPointComponent, selector: "vdr-ui-extension-point", inputs: ["locationId", "metadata", "topPx", "leftPx", "display", "api"] }, { kind: "component", type: i1.DataTableFiltersComponent, selector: "vdr-data-table-filters", inputs: ["filters", "filterWithValue"] }, { kind: "component", type: i1.DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: ["columns", "uiLanguage"], outputs: ["reorder", "resetColumns"] }, { kind: "component", type: i1.DataTableFilterPresetsComponent, selector: "vdr-data-table-filter-presets", inputs: ["dataTableId", "filters"] }, { kind: "component", type: i1.AddFilterPresetButtonComponent, selector: "vdr-add-filter-preset-button", inputs: ["dataTableId", "filters"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionDataTableComponent, decorators: [{
             type: Component,
@@ -2090,11 +2091,11 @@ 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: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.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"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-collection-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <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:not(:last-child):after{content:\"\\203a\";top:0;color:var(--color-grey-400);margin-inline-start:10px}\n"] }]
+            args: [{ selector: 'vdr-collection-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2.FormBuilder }, { type: i1.NotificationService }, { type: i1.ModalService }, { type: i1.LocalStorageService }]; }, propDecorators: { contentsComponent: [{
                 type: ViewChild,
                 args: ['collectionContents']
@@ -2411,11 +2412,11 @@ class CollectionListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionListComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionListComponent, selector: "vdr-collection-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"collection-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n                [routerLink]=\"['./create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-collection' | translate }}\r\n            </a>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeCollectionId$ | async\" (closeClicked)=\"closeContents()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-collection-data-table\r\n            class=\"mt-2\"\r\n            id=\"collection-list\"\r\n            [items]=\"items$ | async\"\r\n            [subCollections]=\"subCollections$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeCollectionIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n            (changeOrder)=\"onRearrange($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"collection-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            ></vdr-bulk-action-menu>\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            ></vdr-dt2-search>\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.position' | translate\" id=\"position\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('position')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.position }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-collection=\"item\" let-depth=\"depth\">\r\n                    <div [ngClass]=\"'indent-' + depth\"></div>\r\n                    <clr-icon\r\n                        class=\"child-arrow\"\r\n                        [class.transparent]=\"depth === 0\"\r\n                        shape=\"child-arrow\"\r\n                        *ngIf=\"!collection.children?.length\"\r\n                    ></clr-icon>\r\n                    <button\r\n                        class=\"icon-button folder-button\"\r\n                        *ngIf=\"collection.children?.length\"\r\n                        (click)=\"toggleExpanded(collection)\"\r\n                    >\r\n                        <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\r\n                        <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\r\n                    </button>\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', collection.id]\"\r\n                        ><span>{{ collection.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\" id=\"breadcrumb\">\r\n                <ng-template let-collection=\"item\">\r\n                    <div class=\"breadcrumb\">\r\n                        <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\r\n                            <ng-container *ngIf=\"breadcrumbs.length\">\r\n                                <div *ngFor=\"let item of breadcrumbs\">\r\n                                    <span class=\"separator\">/</span>{{ item.name }}\r\n                                </div>\r\n                            </ng-container>\r\n                            <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.slug }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.visibility' | translate\" id=\"visibility\">\r\n                <ng-template let-collection=\"item\">\r\n                    <vdr-chip *ngIf=\"collection.isPrivate\" colorType=\"warning\">{{\r\n                        'common.private' | translate\r\n                        }}</vdr-chip>\r\n                    <vdr-chip *ngIf=\"!collection.isPrivate\" colorType=\"success\">{{\r\n                        'common.public' | translate\r\n                        }}</vdr-chip>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\r\n                <ng-template let-collection=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: collection.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <span>{{ 'common.view-contents' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column\r\n                *ngFor=\"let customField of customFields\"\r\n                [customField]=\"customField\"\r\n                [sorts]=\"sorts\"\r\n            />\r\n        </vdr-collection-data-table>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"activeCollectionTitle$ | async\">\r\n        <ng-container *ngIf=\"activeCollectionId$ | async as activeGroup\">\r\n            <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\"></vdr-collection-contents>\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", styles: ["", ":host{--indent-spacing: 18px}.indent-1{padding-inline-start:var(--indent-spacing)}.indent-2{padding-inline-start:calc(var(--indent-spacing) * 2)}.indent-3{padding-inline-start:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-inline-start:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.SplitViewComponent, selector: "vdr-split-view", inputs: ["rightPanelOpen"], outputs: ["closeClicked"] }, { kind: "directive", type: i1.SplitViewLeftDirective, selector: "[vdrSplitViewLeft]" }, { kind: "directive", type: i1.SplitViewRightDirective, selector: "[vdrSplitViewRight]", inputs: ["splitViewTitle"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }, { kind: "component", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: ["subCollections"], outputs: ["changeOrder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: CollectionBreadcrumbPipe, name: "collectionBreadcrumb" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionListComponent, selector: "vdr-collection-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"collection-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n                [routerLink]=\"['./create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-collection' | translate }}\r\n            </a>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeCollectionId$ | async\" (closeClicked)=\"closeContents()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-collection-data-table\r\n            class=\"mt-2\"\r\n            id=\"collection-list\"\r\n            [items]=\"items$ | async\"\r\n            [subCollections]=\"subCollections$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeCollectionIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n            (changeOrder)=\"onRearrange($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"collection-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            ></vdr-bulk-action-menu>\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            ></vdr-dt2-search>\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.position' | translate\" id=\"position\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('position')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.position }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-collection=\"item\" let-depth=\"depth\">\r\n                    <div [ngClass]=\"'indent-' + depth\"></div>\r\n                    <clr-icon\r\n                        class=\"child-arrow\"\r\n                        [class.transparent]=\"depth === 0\"\r\n                        shape=\"child-arrow\"\r\n                        *ngIf=\"!collection.children?.length\"\r\n                    ></clr-icon>\r\n                    <button\r\n                        class=\"icon-button folder-button\"\r\n                        *ngIf=\"collection.children?.length\"\r\n                        (click)=\"toggleExpanded(collection)\"\r\n                    >\r\n                        <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\r\n                        <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\r\n                    </button>\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', collection.id]\"\r\n                        ><span>{{ collection.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\" id=\"breadcrumb\">\r\n                <ng-template let-collection=\"item\">\r\n                    <div class=\"breadcrumb\">\r\n                        <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\r\n                            <ng-container *ngIf=\"breadcrumbs.length\">\r\n                                <div *ngFor=\"let item of breadcrumbs\">\r\n                                    <span class=\"separator\">/</span>{{ item.name }}\r\n                                </div>\r\n                            </ng-container>\r\n                            <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.slug }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.visibility' | translate\" id=\"visibility\">\r\n                <ng-template let-collection=\"item\">\r\n                    <vdr-chip *ngIf=\"collection.isPrivate\" colorType=\"warning\">{{\r\n                        'common.private' | translate\r\n                        }}</vdr-chip>\r\n                    <vdr-chip *ngIf=\"!collection.isPrivate\" colorType=\"success\">{{\r\n                        'common.public' | translate\r\n                        }}</vdr-chip>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\r\n                <ng-template let-collection=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: collection.id }]\"\r\n                        [queryParams]=\"{ contentsPage: 1 }\"\r\n                        queryParamsHandling=\"merge\"\r\n                    >\r\n                        <span>{{ 'common.view-contents' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column\r\n                *ngFor=\"let customField of customFields\"\r\n                [customField]=\"customField\"\r\n                [sorts]=\"sorts\"\r\n            />\r\n        </vdr-collection-data-table>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"activeCollectionTitle$ | async\">\r\n        <ng-container *ngIf=\"activeCollectionId$ | async as activeGroup\">\r\n            <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\"></vdr-collection-contents>\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", styles: ["", ":host{--indent-spacing: 18px}.indent-1{padding-inline-start:var(--indent-spacing)}.indent-2{padding-inline-start:calc(var(--indent-spacing) * 2)}.indent-3{padding-inline-start:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-inline-start:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.SplitViewComponent, selector: "vdr-split-view", inputs: ["rightPanelOpen"], outputs: ["closeClicked"] }, { kind: "directive", type: i1.SplitViewLeftDirective, selector: "[vdrSplitViewLeft]" }, { kind: "directive", type: i1.SplitViewRightDirective, selector: "[vdrSplitViewRight]", inputs: ["splitViewTitle"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: ["collectionId", "parentId", "inheritFilters", "updatedFilters", "previewUpdatedFilters"] }, { kind: "component", type: CollectionDataTableComponent, selector: "vdr-collection-data-table", inputs: ["subCollections"], outputs: ["changeOrder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: CollectionBreadcrumbPipe, name: "collectionBreadcrumb" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-collection-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"collection-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n                [routerLink]=\"['./create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-collection' | translate }}\r\n            </a>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeCollectionId$ | async\" (closeClicked)=\"closeContents()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-collection-data-table\r\n            class=\"mt-2\"\r\n            id=\"collection-list\"\r\n            [items]=\"items$ | async\"\r\n            [subCollections]=\"subCollections$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeCollectionIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n            (changeOrder)=\"onRearrange($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"collection-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            ></vdr-bulk-action-menu>\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            ></vdr-dt2-search>\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.position' | translate\" id=\"position\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('position')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.position }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-collection=\"item\" let-depth=\"depth\">\r\n                    <div [ngClass]=\"'indent-' + depth\"></div>\r\n                    <clr-icon\r\n                        class=\"child-arrow\"\r\n                        [class.transparent]=\"depth === 0\"\r\n                        shape=\"child-arrow\"\r\n                        *ngIf=\"!collection.children?.length\"\r\n                    ></clr-icon>\r\n                    <button\r\n                        class=\"icon-button folder-button\"\r\n                        *ngIf=\"collection.children?.length\"\r\n                        (click)=\"toggleExpanded(collection)\"\r\n                    >\r\n                        <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\r\n                        <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\r\n                    </button>\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', collection.id]\"\r\n                        ><span>{{ collection.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\" id=\"breadcrumb\">\r\n                <ng-template let-collection=\"item\">\r\n                    <div class=\"breadcrumb\">\r\n                        <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\r\n                            <ng-container *ngIf=\"breadcrumbs.length\">\r\n                                <div *ngFor=\"let item of breadcrumbs\">\r\n                                    <span class=\"separator\">/</span>{{ item.name }}\r\n                                </div>\r\n                            </ng-container>\r\n                            <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.slug }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.visibility' | translate\" id=\"visibility\">\r\n                <ng-template let-collection=\"item\">\r\n                    <vdr-chip *ngIf=\"collection.isPrivate\" colorType=\"warning\">{{\r\n                        'common.private' | translate\r\n                        }}</vdr-chip>\r\n                    <vdr-chip *ngIf=\"!collection.isPrivate\" colorType=\"success\">{{\r\n                        'common.public' | translate\r\n                        }}</vdr-chip>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\r\n                <ng-template let-collection=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: collection.id }]\"\r\n                        queryParamsHandling=\"preserve\"\r\n                    >\r\n                        <span>{{ 'common.view-contents' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column\r\n                *ngFor=\"let customField of customFields\"\r\n                [customField]=\"customField\"\r\n                [sorts]=\"sorts\"\r\n            />\r\n        </vdr-collection-data-table>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"activeCollectionTitle$ | async\">\r\n        <ng-container *ngIf=\"activeCollectionId$ | async as activeGroup\">\r\n            <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\"></vdr-collection-contents>\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", styles: [":host{--indent-spacing: 18px}.indent-1{padding-inline-start:var(--indent-spacing)}.indent-2{padding-inline-start:calc(var(--indent-spacing) * 2)}.indent-3{padding-inline-start:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-inline-start:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"] }]
+            args: [{ selector: 'vdr-collection-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"collection-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n                [routerLink]=\"['./create']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-collection' | translate }}\r\n            </a>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-split-view [rightPanelOpen]=\"activeCollectionId$ | async\" (closeClicked)=\"closeContents()\">\r\n    <ng-template vdrSplitViewLeft>\r\n        <vdr-collection-data-table\r\n            class=\"mt-2\"\r\n            id=\"collection-list\"\r\n            [items]=\"items$ | async\"\r\n            [subCollections]=\"subCollections$ | async\"\r\n            [itemsPerPage]=\"itemsPerPage$ | async\"\r\n            [totalItems]=\"totalItems$ | async\"\r\n            [currentPage]=\"currentPage$ | async\"\r\n            [filters]=\"filters\"\r\n            [activeIndex]=\"activeCollectionIndex$ | async\"\r\n            (pageChange)=\"setPageNumber($event)\"\r\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n            (changeOrder)=\"onRearrange($event)\"\r\n        >\r\n            <vdr-bulk-action-menu\r\n                locationId=\"collection-list\"\r\n                [hostComponent]=\"this\"\r\n                [selectionManager]=\"selectionManager\"\r\n            ></vdr-bulk-action-menu>\r\n            <vdr-dt2-search\r\n                [searchTermControl]=\"searchTermControl\"\r\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\r\n            ></vdr-dt2-search>\r\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.id }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('createdAt')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.createdAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('updatedAt')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.updatedAt | localeDate : 'short' }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.position' | translate\" id=\"position\"\r\n                [hiddenByDefault]=\"true\"\r\n                [sort]=\"sorts.get('position')\"\r\n            >\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.position }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column\r\n                [heading]=\"'common.name' | translate\" id=\"name\"\r\n                [optional]=\"false\"\r\n                [sort]=\"sorts.get('name')\"\r\n            >\r\n                <ng-template let-collection=\"item\" let-depth=\"depth\">\r\n                    <div [ngClass]=\"'indent-' + depth\"></div>\r\n                    <clr-icon\r\n                        class=\"child-arrow\"\r\n                        [class.transparent]=\"depth === 0\"\r\n                        shape=\"child-arrow\"\r\n                        *ngIf=\"!collection.children?.length\"\r\n                    ></clr-icon>\r\n                    <button\r\n                        class=\"icon-button folder-button\"\r\n                        *ngIf=\"collection.children?.length\"\r\n                        (click)=\"toggleExpanded(collection)\"\r\n                    >\r\n                        <clr-icon shape=\"folder\" *ngIf=\"!expandedIds.includes(collection.id)\"></clr-icon>\r\n                        <clr-icon shape=\"folder-open\" *ngIf=\"expandedIds.includes(collection.id)\"></clr-icon>\r\n                    </button>\r\n                    <a class=\"button-ghost\" [routerLink]=\"['./', collection.id]\"\r\n                        ><span>{{ collection.name }}</span>\r\n                        <clr-icon shape=\"arrow right\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.breadcrumb' | translate\" id=\"breadcrumb\">\r\n                <ng-template let-collection=\"item\">\r\n                    <div class=\"breadcrumb\">\r\n                        <ng-container *ngIf=\"collection | collectionBreadcrumb as breadcrumbs\">\r\n                            <ng-container *ngIf=\"breadcrumbs.length\">\r\n                                <div *ngFor=\"let item of breadcrumbs\">\r\n                                    <span class=\"separator\">/</span>{{ item.name }}\r\n                                </div>\r\n                            </ng-container>\r\n                            <span class=\"separator\" *ngIf=\"!breadcrumbs.length\">/</span>\r\n                        </ng-container>\r\n                    </div>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\r\n                <ng-template let-collection=\"item\">\r\n                    {{ collection.slug }}\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.visibility' | translate\" id=\"visibility\">\r\n                <ng-template let-collection=\"item\">\r\n                    <vdr-chip *ngIf=\"collection.isPrivate\" colorType=\"warning\">{{\r\n                        'common.private' | translate\r\n                        }}</vdr-chip>\r\n                    <vdr-chip *ngIf=\"!collection.isPrivate\" colorType=\"success\">{{\r\n                        'common.public' | translate\r\n                        }}</vdr-chip>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\r\n                <ng-template let-collection=\"item\">\r\n                    <a\r\n                        class=\"button-small bg-weight-150\"\r\n                        [routerLink]=\"['./', { contents: collection.id }]\"\r\n                        [queryParams]=\"{ contentsPage: 1 }\"\r\n                        queryParamsHandling=\"merge\"\r\n                    >\r\n                        <span>{{ 'common.view-contents' | translate }}</span>\r\n                        <clr-icon shape=\"file-group\"></clr-icon>\r\n                    </a>\r\n                </ng-template>\r\n            </vdr-dt2-column>\r\n            <vdr-dt2-custom-field-column\r\n                *ngFor=\"let customField of customFields\"\r\n                [customField]=\"customField\"\r\n                [sorts]=\"sorts\"\r\n            />\r\n        </vdr-collection-data-table>\r\n    </ng-template>\r\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"activeCollectionTitle$ | async\">\r\n        <ng-container *ngIf=\"activeCollectionId$ | async as activeGroup\">\r\n            <vdr-collection-contents [collectionId]=\"activeCollectionId$ | async\"></vdr-collection-contents>\r\n        </ng-container>\r\n    </ng-template>\r\n</vdr-split-view>\r\n", styles: [":host{--indent-spacing: 18px}.indent-1{padding-inline-start:var(--indent-spacing)}.indent-2{padding-inline-start:calc(var(--indent-spacing) * 2)}.indent-3{padding-inline-start:calc(var(--indent-spacing) * 3)}.indent-4,.indent-5,.indent-6,.indent-7,.indent-8,.indent-9{padding-inline-start:calc(var(--indent-spacing) * 4)}.child-arrow{margin:1px 6px}.child-arrow.transparent{opacity:0}.breadcrumb{display:flex}.separator{color:var(--color-weight-500);margin:0 3px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i1.NotificationService }]; } });
 /**
@@ -2577,7 +2578,7 @@ class CollectionTreeNodeComponent {
         this.collectionTreeService.onDelete(id);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionTreeNodeComponent, deps: [{ token: CollectionTreeNodeComponent, optional: true, skipSelf: true }, { token: i1.DataService }, { token: CollectionTreeService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: { collectionTree: "collectionTree", activeCollectionId: "activeCollectionId", expandAll: "expandAll", selectionManager: "selectionManager" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    cdkDropList\r\n    class=\"tree-node\"\r\n    #dropList\r\n    [cdkDropListData]=\"collectionTree\"\r\n    [cdkDropListDisabled]=\"!(hasUpdatePermission$ | async)\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n    <div\r\n        class=\"collection\"\r\n        [class.private]=\"collection.isPrivate\"\r\n        *ngFor=\"let collection of collectionTree.children; index as i; trackBy: trackByFn\"\r\n        cdkDrag\r\n        [cdkDragData]=\"collection\"\r\n    >\r\n        <div\r\n            class=\"collection-detail\"\r\n            [ngClass]=\"'depth-' + depth\"\r\n            [class.active]=\"collection.id === activeCollectionId\"\r\n        >\r\n            <div>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    [checked]=\"selectionManager.isSelected(collection)\"\r\n                    (click)=\"selectionManager.toggleSelection(collection, $event)\"\r\n                />\r\n            </div>\r\n            <div class=\"name\">\r\n                <button\r\n                    class=\"icon-button folder-button\"\r\n                    [disabled]=\"expandAll\"\r\n                    *ngIf=\"collection.children?.length; else folderSpacer\"\r\n                    (click)=\"toggleExpanded(collection)\"\r\n                >\r\n                    <clr-icon shape=\"folder\" *ngIf=\"!collection.expanded && !expandAll\"></clr-icon>\r\n                    <clr-icon shape=\"folder-open\" *ngIf=\"collection.expanded || expandAll\"></clr-icon>\r\n                </button>\r\n                <ng-template #folderSpacer>\r\n                    <div class=\"folder-button-spacer\"></div>\r\n                </ng-template>\r\n                {{ collection.name }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <vdr-chip *ngIf=\"collection.isPrivate\">{{ 'catalog.private' | translate }}</vdr-chip>\r\n            <a\r\n                class=\"btn btn-link btn-sm\"\r\n                [routerLink]=\"['./', { contents: collection.id }]\"\r\n                queryParamsHandling=\"preserve\"\r\n            >\r\n                <clr-icon shape=\"view-list\"></clr-icon>\r\n                {{ 'catalog.view-contents' | translate }}\r\n            </a>\r\n            <a class=\"btn btn-link btn-sm\" [routerLink]=\"['/catalog/collections/', collection.id]\">\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n                {{ 'common.edit' | translate }}\r\n            </a>\r\n            <div class=\"drag-handle\" cdkDragHandle *vdrIfPermissions=\"['UpdateCatalog', 'UpdateCollection']\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger (click)=\"getMoveListItems(collection)\">\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <a\r\n                        class=\"dropdown-item\"\r\n                        [routerLink]=\"['./', 'create', { parentId: collection.id }]\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n                    >\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'catalog.create-new-collection' | translate }}\r\n                    </a>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"i === 0 || !(hasUpdatePermission$ | async)\"\r\n                        (click)=\"moveUp(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret up\"></clr-icon>\r\n                        {{ 'catalog.move-up' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"\r\n                            i === collectionTree.children.length - 1 || !(hasUpdatePermission$ | async)\r\n                        \"\r\n                        (click)=\"moveDown(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret down\"></clr-icon>\r\n                        {{ 'catalog.move-down' | translate }}\r\n                    </button>\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.move-to' | translate }}</h4>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngFor=\"let item of moveListItems\"\r\n                        (click)=\"move(collection, item.id)\"\r\n                        [disabled]=\"!(hasUpdatePermission$ | async)\"\r\n                    >\r\n                        <div class=\"move-to-item\">\r\n                            <div class=\"move-icon\">\r\n                                <clr-icon shape=\"child-arrow\"></clr-icon>\r\n                            </div>\r\n                            <div class=\"path\">\r\n                                {{ item.path }}\r\n                            </div>\r\n                        </div>\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        class=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"delete(collection.id)\"\r\n                        [disabled]=\"!(hasDeletePermission$ | async)\"\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <vdr-collection-tree-node\r\n            *ngIf=\"collection.expanded || expandAll\"\r\n            [expandAll]=\"expandAll\"\r\n            [collectionTree]=\"collection\"\r\n            [activeCollectionId]=\"activeCollectionId\"\r\n            [selectionManager]=\"selectionManager\"\r\n        ></vdr-collection-tree-node>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.collection{background-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);font-size:.65rem;transition:transform .25s cubic-bezier(0,0,.2,1);margin-bottom:2px;border-inline-start:2px solid transparent;transition:border-left-color .2s}.collection.private{background-color:var(--color-component-bg-200)}.collection .collection-detail{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-component-border-100)}.collection .collection-detail.active{background-color:var(--clr-global-selection-color)}.collection .collection-detail.depth-1{padding-inline-start:36px}.collection .collection-detail.depth-2{padding-inline-start:60px}.collection .collection-detail.depth-3{padding-inline-start:84px}.collection .collection-detail.depth-4{padding-inline-start:108px}.collection .collection-detail .folder-button-spacer{display:inline-block;width:28px}.tree-node{display:block;background-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);overflow:hidden}.tree-node.cdk-drop-list-dragging>.collection{border-left-color:var(--color-primary-300)}.drag-placeholder{min-height:120px;background-color:var(--color-component-bg-300);transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.move-to-item{display:flex;white-space:normal;align-items:baseline}.move-to-item .move-icon{flex:none;margin-inline-end:3px}.move-to-item .path{line-height:18px}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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.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: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { 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: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: ["collectionTree", "activeCollectionId", "expandAll", "selectionManager"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: { collectionTree: "collectionTree", activeCollectionId: "activeCollectionId", expandAll: "expandAll", selectionManager: "selectionManager" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    cdkDropList\r\n    class=\"tree-node\"\r\n    #dropList\r\n    [cdkDropListData]=\"collectionTree\"\r\n    [cdkDropListDisabled]=\"!(hasUpdatePermission$ | async)\"\r\n    (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n    <div\r\n        class=\"collection\"\r\n        [class.private]=\"collection.isPrivate\"\r\n        *ngFor=\"let collection of collectionTree.children; index as i; trackBy: trackByFn\"\r\n        cdkDrag\r\n        [cdkDragData]=\"collection\"\r\n    >\r\n        <div\r\n            class=\"collection-detail\"\r\n            [ngClass]=\"'depth-' + depth\"\r\n            [class.active]=\"collection.id === activeCollectionId\"\r\n        >\r\n            <div>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    clrCheckbox\r\n                    [checked]=\"selectionManager.isSelected(collection)\"\r\n                    (click)=\"selectionManager.toggleSelection(collection, $event)\"\r\n                />\r\n            </div>\r\n            <div class=\"name\">\r\n                <button\r\n                    class=\"icon-button folder-button\"\r\n                    [disabled]=\"expandAll\"\r\n                    *ngIf=\"collection.children?.length; else folderSpacer\"\r\n                    (click)=\"toggleExpanded(collection)\"\r\n                >\r\n                    <clr-icon shape=\"folder\" *ngIf=\"!collection.expanded && !expandAll\"></clr-icon>\r\n                    <clr-icon shape=\"folder-open\" *ngIf=\"collection.expanded || expandAll\"></clr-icon>\r\n                </button>\r\n                <ng-template #folderSpacer>\r\n                    <div class=\"folder-button-spacer\"></div>\r\n                </ng-template>\r\n                {{ collection.name }}\r\n            </div>\r\n            <div class=\"flex-spacer\"></div>\r\n            <vdr-chip *ngIf=\"collection.isPrivate\">{{ 'catalog.private' | translate }}</vdr-chip>\r\n            <a\r\n                class=\"btn btn-link btn-sm\"\r\n                [routerLink]=\"['./', { contents: collection.id }]\"\r\n                queryParamsHandling=\"preserve\"\r\n            >\r\n                <clr-icon shape=\"view-list\"></clr-icon>\r\n                {{ 'catalog.view-contents' | translate }}\r\n            </a>\r\n            <a class=\"btn btn-link btn-sm\" [routerLink]=\"['/catalog/collections/', collection.id]\">\r\n                <clr-icon shape=\"edit\"></clr-icon>\r\n                {{ 'common.edit' | translate }}\r\n            </a>\r\n            <div class=\"drag-handle\" cdkDragHandle *vdrIfPermissions=\"['UpdateCatalog', 'UpdateCollection']\">\r\n                <clr-icon shape=\"drag-handle\" size=\"24\"></clr-icon>\r\n            </div>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger (click)=\"getMoveListItems(collection)\">\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <a\r\n                        class=\"dropdown-item\"\r\n                        [routerLink]=\"['./', 'create', { parentId: collection.id }]\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateCollection']\"\r\n                    >\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ 'catalog.create-new-collection' | translate }}\r\n                    </a>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"i === 0 || !(hasUpdatePermission$ | async)\"\r\n                        (click)=\"moveUp(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret up\"></clr-icon>\r\n                        {{ 'catalog.move-up' | translate }}\r\n                    </button>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        [disabled]=\"\r\n                            i === collectionTree.children.length - 1 || !(hasUpdatePermission$ | async)\r\n                        \"\r\n                        (click)=\"moveDown(collection, i)\"\r\n                    >\r\n                        <clr-icon shape=\"caret down\"></clr-icon>\r\n                        {{ 'catalog.move-down' | translate }}\r\n                    </button>\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.move-to' | translate }}</h4>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        *ngFor=\"let item of moveListItems\"\r\n                        (click)=\"move(collection, item.id)\"\r\n                        [disabled]=\"!(hasUpdatePermission$ | async)\"\r\n                    >\r\n                        <div class=\"move-to-item\">\r\n                            <div class=\"move-icon\">\r\n                                <clr-icon shape=\"child-arrow\"></clr-icon>\r\n                            </div>\r\n                            <div class=\"path\">\r\n                                {{ item.path }}\r\n                            </div>\r\n                        </div>\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <button\r\n                        class=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"delete(collection.id)\"\r\n                        [disabled]=\"!(hasDeletePermission$ | async)\"\r\n                    >\r\n                        <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                        {{ 'common.delete' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <vdr-collection-tree-node\r\n            *ngIf=\"collection.expanded || expandAll\"\r\n            [expandAll]=\"expandAll\"\r\n            [collectionTree]=\"collection\"\r\n            [activeCollectionId]=\"activeCollectionId\"\r\n            [selectionManager]=\"selectionManager\"\r\n        ></vdr-collection-tree-node>\r\n    </div>\r\n</div>\r\n", styles: [":host{display:block}.collection{background-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);font-size:.65rem;transition:transform .25s cubic-bezier(0,0,.2,1);margin-bottom:2px;border-inline-start:2px solid transparent;transition:border-left-color .2s}.collection.private{background-color:var(--color-component-bg-200)}.collection .collection-detail{padding:6px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-component-border-100)}.collection .collection-detail.active{background-color:var(--clr-global-selection-color)}.collection .collection-detail.depth-1{padding-inline-start:36px}.collection .collection-detail.depth-2{padding-inline-start:60px}.collection .collection-detail.depth-3{padding-inline-start:84px}.collection .collection-detail.depth-4{padding-inline-start:108px}.collection .collection-detail .folder-button-spacer{display:inline-block;width:28px}.tree-node{display:block;background-color:var(--clr-table-bgcolor);border-radius:var(--clr-global-borderradius);overflow:hidden}.tree-node.cdk-drop-list-dragging>.collection{border-left-color:var(--color-primary-300)}.drag-placeholder{min-height:120px;background-color:var(--color-component-bg-300);transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-list.cdk-drop-list-dragging .tree-node:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.move-to-item{display:flex;white-space:normal;align-items:baseline}.move-to-item .move-icon{flex:none;margin-inline-end:3px}.move-to-item .path{line-height:18px}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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.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: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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: CollectionTreeNodeComponent, selector: "vdr-collection-tree-node", inputs: ["collectionTree", "activeCollectionId", "expandAll", "selectionManager"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CollectionTreeNodeComponent, decorators: [{
             type: Component,
@@ -2711,13 +2712,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
             args: [{ selector: 'vdr-confirm-variant-deletion-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.confirm-deletion-of-unused-variants-title' | translate }}\r\n</ng-template>\r\n{{ 'catalog.confirm-deletion-of-unused-variants-body' | translate }}\r\n<ul>\r\n    <li *ngFor=\"let variant of variants\">{{ variant.name }} ({{ variant.sku }})</li>\r\n</ul>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n" }]
         }] });
+class CreateFacetValueDialogComponent {
+    constructor(formBuilder) {
+        this.formBuilder = formBuilder;
+        this.form = this.formBuilder.group({
+            name: ['', Validators.required],
+            code: ['', Validators.required],
+        });
+    }
+    updateCode() {
+        const nameControl = this.form.get('name');
+        const codeControl = this.form.get('code');
+        if (nameControl && codeControl && codeControl.pristine) {
+            codeControl.setValue(normalizeString(`${nameControl.value}`, '-'));
+        }
+    }
+    confirm() {
+        const { name, code } = this.form.value;
+        if (!name || !code) {
+            return;
+        }
+        this.resolveWith({
+            facetId: this.facetId,
+            code,
+            translations: [{ languageCode: this.languageCode, name }],
+        });
+    }
+    cancel() {
+        this.resolveWith();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CreateFacetValueDialogComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: CreateFacetValueDialogComponent, selector: "vdr-create-facet-value-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-facet-value' | translate }}\r\n</ng-template>\r\n<div class=\"form-grid\" [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input id=\"name\" type=\"text\" formControlName=\"name\" (input)=\"updateCode()\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'common.code' | translate\"\r\n        for=\"code\"\r\n    >\r\n        <input\r\n            id=\"code\"\r\n            type=\"text\"\r\n            formControlName=\"code\"\r\n        />\r\n    </vdr-form-field>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CreateFacetValueDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vdr-create-facet-value-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template vdrDialogTitle>\r\n    {{ 'catalog.create-facet-value' | translate }}\r\n</ng-template>\r\n<div class=\"form-grid\" [formGroup]=\"form\">\r\n    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n        <input id=\"name\" type=\"text\" formControlName=\"name\" (input)=\"updateCode()\" />\r\n    </vdr-form-field>\r\n    <vdr-form-field\r\n        [label]=\"'common.code' | translate\"\r\n        for=\"code\"\r\n    >\r\n        <input\r\n            id=\"code\"\r\n            type=\"text\"\r\n            formControlName=\"code\"\r\n        />\r\n    </vdr-form-field>\r\n</div>\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button type=\"submit\" (click)=\"confirm()\" class=\"btn btn-primary\" [disabled]=\"form.invalid\">\r\n        {{ 'common.confirm' | translate }}\r\n    </button>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i2.FormBuilder }]; } });
 const FACET_DETAIL_QUERY = gql `
-    query GetFacetDetail($id: ID!) {
+    query GetFacetDetail($id: ID!, $facetValueListOptions: FacetValueListOptions) {
         facet(id: $id) {
-            ...FacetWithValues
+            ...FacetWithValueList
         }
     }
-    ${FACET_WITH_VALUES_FRAGMENT}
+    ${FACET_WITH_VALUE_LIST_FRAGMENT}
 `;
 class FacetDetailComponent extends TypedBaseDetailComponent {
     constructor(changeDetector, dataService, formBuilder, notificationService, modalService) {
@@ -2740,25 +2778,19 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
         });
         this.currentPage = 1;
         this.itemsPerPage = 10;
+        this.totalItems = 0;
         this.filterControl = new FormControl('');
         this.values$ = new BehaviorSubject([]);
-        this.filteredValues$ = new Observable();
         this.updatePermission = [Permission.UpdateCatalog, Permission.UpdateFacet];
     }
     ngOnInit() {
         this.init();
-        this.filteredValues$ = combineLatest([
-            this.values$,
-            this.filterControl.valueChanges.pipe(startWith('')),
-        ]).pipe(map(([values, filterTerm]) => {
-            const filterString = filterTerm?.toLowerCase().trim();
-            return filterString
-                ? values.filter(v => v.name.toLowerCase().includes(filterString) ||
-                    v.code.toLowerCase().includes(filterString))
-                : values;
-        }), tap(() => {
+        this.filterControl.valueChanges
+            .pipe(debounceTime(200), takeUntil(this.destroy$))
+            .subscribe(filterTerm => {
             this.currentPage = 1;
-        }));
+            this.fetchFacetValues(this.currentPage, this.itemsPerPage, filterTerm);
+        });
     }
     ngOnDestroy() {
         this.destroy();
@@ -2783,31 +2815,30 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
         return !!this.detailForm.get(['values', index, 'customFields', name]);
     }
     addFacetValue() {
-        const valuesFormRecord = this.detailForm.get('values');
-        if (valuesFormRecord) {
-            const id = this.createTempId();
-            const valueGroup = this.formBuilder.group({
-                id,
-                name: ['', Validators.required],
-                code: '',
-                customFields: this.formBuilder.group({}),
-            });
-            const newValue = { id, name: '', code: '' };
-            if (this.customValueFields.length) {
-                const customValueFieldsGroup = new UntypedFormGroup({});
-                newValue.customFields = {};
-                for (const fieldDef of this.customValueFields) {
-                    const key = fieldDef.name;
-                    customValueFieldsGroup.addControl(key, new UntypedFormControl());
-                }
-                valueGroup.addControl('customFields', customValueFieldsGroup);
+        this.modalService
+            .fromComponent(CreateFacetValueDialogComponent, {
+            locals: {
+                languageCode: this.languageCode,
+                facetId: this.id,
+            },
+        })
+            .pipe(switchMap(result => {
+            if (!result) {
+                return EMPTY;
             }
-            valuesFormRecord.addControl(id, valueGroup);
-            const values = this.values$.value;
-            const endOfPageIndex = this.currentPage * this.itemsPerPage - 1;
-            values.splice(endOfPageIndex, 0, newValue);
-            this.values$.next(values);
-        }
+            else {
+                return this.dataService.facet.createFacetValues([result]);
+            }
+        }))
+            .subscribe(result => {
+            if (result.createFacetValues) {
+                this.notificationService.success(marker('common.notify-create-success'), {
+                    entity: 'FacetValue',
+                });
+                this.currentPage = 1;
+                this.fetchFacetValues(this.currentPage, this.itemsPerPage);
+            }
+        });
     }
     create() {
         const facetForm = this.detailForm.get('facet');
@@ -2823,7 +2854,6 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
             name: '',
             code: '',
             translations: [],
-            values: [],
         }, facetForm, this.languageCode);
         this.dataService.facet.createFacet(newFacet).subscribe(data => {
             this.notificationService.success(marker('common.notify-create-success'), { entity: 'Facet' });
@@ -2843,19 +2873,13 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
             const facetForm = this.detailForm.get('facet');
             const updateOperations = [];
             if (facetForm && facetForm.dirty) {
-                const newFacet = this.getUpdatedFacet(facet, facetForm, languageCode);
-                if (newFacet) {
-                    updateOperations.push(this.dataService.facet.updateFacet(newFacet));
+                const updatedFacetInput = this.getUpdatedFacet(facet, facetForm, languageCode);
+                if (updatedFacetInput) {
+                    updateOperations.push(this.dataService.facet.updateFacet(updatedFacetInput));
                 }
             }
             if (valuesFormRecord && valuesFormRecord.dirty) {
-                const createdValues = this.getCreatedFacetValues(facet, valuesFormRecord, languageCode);
-                if (createdValues.length) {
-                    updateOperations.push(this.dataService.facet.createFacetValues(createdValues).pipe(switchMap(() => this.dataService.query(GetFacetDetailDocument, {
-                        id: this.id,
-                    }).single$)));
-                }
-                const updatedValues = this.getUpdatedFacetValues(facet, valuesFormRecord, languageCode);
+                const updatedValues = this.getUpdatedFacetValues(valuesFormRecord, languageCode);
                 if (updatedValues.length) {
                     updateOperations.push(this.dataService.facet.updateFacetValues(updatedValues));
                 }
@@ -2873,16 +2897,6 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
         });
     }
     deleteFacetValue(facetValueId) {
-        if (this.isTempId(facetValueId)) {
-            // deleting a newly-added (not persisted) FacetValue
-            const valuesFormRecord = this.detailForm.get('values');
-            if (valuesFormRecord) {
-                valuesFormRecord.removeControl(facetValueId);
-            }
-            const values = this.values$.value;
-            this.values$.next(values.filter(v => v.id !== facetValueId));
-            return;
-        }
         this.showModalAndDelete(facetValueId)
             .pipe(switchMap(response => {
             if (response.result === DeletionResult.DELETED) {
@@ -2897,13 +2911,10 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
             }).single$
             : []))
             .subscribe(() => {
-            const valuesFormRecord = this.detailForm.get('values');
-            if (valuesFormRecord) {
-                valuesFormRecord.removeControl(facetValueId);
-            }
             this.notificationService.success(marker('common.notify-delete-success'), {
                 entity: 'FacetValue',
             });
+            this.fetchFacetValues(this.currentPage, this.itemsPerPage, this.filterControl.value);
         }, err => {
             this.notificationService.error(marker('common.notify-delete-error'), {
                 entity: 'FacetValue',
@@ -2922,6 +2933,35 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
         })
             .pipe(switchMap(result => result ? this.dataService.facet.deleteFacetValues([facetValueId], !!message) : EMPTY), map(result => result.deleteFacetValues[0]));
     }
+    setCurrentPage(newPage) {
+        this.currentPage = newPage;
+        this.fetchFacetValues(this.currentPage, this.itemsPerPage, this.filterControl.value);
+    }
+    setItemsPerPage(itemsPerPage) {
+        this.itemsPerPage = itemsPerPage;
+        this.fetchFacetValues(this.currentPage, this.itemsPerPage, this.filterControl.value);
+    }
+    fetchFacetValues(currentPage, itemsPerPage, filterTerm) {
+        this.dataService
+            .query(FACET_DETAIL_QUERY, {
+            id: this.id,
+            facetValueListOptions: {
+                take: itemsPerPage,
+                skip: (currentPage - 1) * itemsPerPage,
+                sort: {
+                    createdAt: SortOrder$1.DESC,
+                },
+                ...(filterTerm ? { filter: { name: { contains: filterTerm } } } : {}),
+            },
+        })
+            .single$.subscribe(({ facet }) => {
+            if (facet) {
+                this.values$.next([...facet.valueList.items]);
+                this.totalItems = facet.valueList.totalItems;
+                this.setFacetValueFormValues(facet, this.languageCode);
+            }
+        });
+    }
     /**
      * Sets the values of the form on changes to the facet or current language.
      */
@@ -2937,9 +2977,13 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
         if (this.customFields.length) {
             this.setCustomFieldFormValues(this.customFields, this.detailForm.get(['facet', 'customFields']), facet, currentTranslation);
         }
+        this.values$.next([...facet.valueList.items]);
+        this.totalItems = facet.valueList.totalItems;
+        this.setFacetValueFormValues(facet, languageCode);
+    }
+    setFacetValueFormValues(facet, languageCode) {
         const currentValuesFormGroup = this.detailForm.get('values');
-        this.values$.next([...facet.values]);
-        facet.values.forEach(value => {
+        facet.valueList.items.forEach(value => {
             const valueTranslation = findTranslation(value, languageCode);
             const group = {
                 id: value.id,
@@ -2947,12 +2991,7 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
                 name: valueTranslation ? valueTranslation.name : '',
             };
             let valueControl = currentValuesFormGroup.get(value.id);
-            if (valueControl) {
-                valueControl.get('id')?.setValue(group.id);
-                valueControl.get('code')?.setValue(group.code);
-                valueControl.get('name')?.setValue(group.name);
-            }
-            else {
+            if (!valueControl) {
                 valueControl = this.formBuilder.group(group);
                 currentValuesFormGroup.addControl(value.id, valueControl);
             }
@@ -2998,50 +3037,18 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
         input.isPrivate = !facetFormGroup.value.visible;
         return input;
     }
-    /**
-     * Given an array of facet values and the values from the detailForm, this method creates a new array
-     * which can be persisted to the API via a createFacetValues mutation.
-     */
-    getCreatedFacetValues(facet, valuesFormRecord, languageCode) {
-        return Object.values(valuesFormRecord.controls)
-            .filter(c => c.value.id && this.isTempId(c.value.id))
-            .map(c => c.value)
-            .map(value => createUpdatedTranslatable({
-            translatable: { ...value, translations: [] },
-            updatedFields: value ?? {},
-            customFieldConfig: this.customValueFields,
-            languageCode,
-            defaultTranslation: {
-                languageCode,
-                name: '',
-            },
-        }))
-            .map(input => ({
-            facetId: facet.id,
-            code: input.code ?? '',
-            ...input,
-            id: undefined,
-        }));
-    }
     /**
      * Given an array of facet values and the values from the detailForm, this method creates a new array
      * which can be persisted to the API via an updateFacetValues mutation.
      */
-    getUpdatedFacetValues(facet, valuesFormGroup, languageCode) {
-        const dirtyValues = facet.values.filter(v => {
-            const formRow = valuesFormGroup.get(v.id);
-            return formRow && formRow.dirty && formRow.value.id;
-        });
+    getUpdatedFacetValues(valuesFormGroup, languageCode) {
         const dirtyValueValues = Object.values(valuesFormGroup.controls)
-            .filter(c => c.dirty && !this.isTempId(c.value.id))
+            .filter(c => c.dirty)
             .map(c => c.value);
-        if (dirtyValues.length !== dirtyValueValues.length) {
-            throw new Error(marker(`error.facet-value-form-values-do-not-match`));
-        }
-        return dirtyValues
+        return dirtyValueValues
             .map((value, i) => createUpdatedTranslatable({
             translatable: value,
-            updatedFields: dirtyValueValues[i],
+            updatedFields: value,
             customFieldConfig: this.customValueFields,
             languageCode,
             defaultTranslation: {
@@ -3051,18 +3058,12 @@ class FacetDetailComponent extends TypedBaseDetailComponent {
         }))
             .filter(notNullOrUndefined);
     }
-    createTempId() {
-        return `temp-${Math.random().toString(36).substr(2, 9)}`;
-    }
-    isTempId(id) {
-        return id.startsWith('temp-');
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FacetDetailComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DataService }, { token: i2.FormBuilder }, { token: i1.NotificationService }, { token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FacetDetailComponent, selector: "vdr-facet-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"facet-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermission\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar formGroupName=\"facet\">\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"visible\"\r\n                            id=\"visibility\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <vdr-card>\r\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card formGroupName=\"facet\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateCode(entity?.code, $event.target.value)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                        <input\r\n                            id=\"code\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"code\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Facet\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"facet-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-card\r\n                *ngIf=\"!(isNew$ | async)\"\r\n                [title]=\"'catalog.facet-values' | translate\"\r\n                [paddingX]=\"false\"\r\n            >\r\n                <ng-template vdrCardControls>\r\n                    <input\r\n                        type=\"text\"\r\n                        class=\"mr-3\"\r\n                        [formControl]=\"filterControl\"\r\n                        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                    />\r\n                </ng-template>\r\n                <ng-container *ngIf=\"filteredValues$ | async as filteredValues\">\r\n                    <table class=\"facet-values-list table\" formArrayName=\"values\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th></th>\r\n                                <th>{{ 'common.name' | translate }}</th>\r\n                                <th>{{ 'common.code' | translate }}</th>\r\n                                <ng-container *ngIf=\"customValueFields.length\">\r\n                                    <th>{{ 'common.custom-fields' | translate }}</th>\r\n                                </ng-container>\r\n                                <th></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr\r\n                                class=\"facet-value\"\r\n                                *ngFor=\"\r\n                                    let value of filteredValues\r\n                                        | paginate\r\n                                            : {\r\n                                                  currentPage: currentPage,\r\n                                                  itemsPerPage: itemsPerPage,\r\n                                                  totalItems: filteredValues.length\r\n                                              };\r\n                                    let i = index\r\n                                \"\r\n                                [formGroup]=\"detailForm.get(['values', value.id])\"\r\n                            >\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input\r\n                                        type=\"text\"\r\n                                        formControlName=\"name\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        (input)=\"updateValueCode(value.code, $event.target.value, value.id)\"\r\n                                    />\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input type=\"text\" formControlName=\"code\" />\r\n                                </td>\r\n                                <td class=\"\" *ngIf=\"customValueFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"FacetValue\"\r\n                                        [customFields]=\"customValueFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"\r\n                                            detailForm.get(['values', value.id, 'customFields'])\r\n                                        \"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-dropdown>\r\n                                        <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n                                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                        </button>\r\n                                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                            <button\r\n                                                type=\"button\"\r\n                                                class=\"delete-button\"\r\n                                                (click)=\"deleteFacetValue(value.id)\"\r\n                                                [disabled]=\"!(updatePermission | hasPermission)\"\r\n                                                vdrDropdownItem\r\n                                            >\r\n                                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                                {{ 'common.delete' | translate }}\r\n                                            </button>\r\n                                        </vdr-dropdown-menu>\r\n                                    </vdr-dropdown>\r\n                                </td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                    <div class=\"pagination-wrapper\">\r\n                        <vdr-items-per-page-controls\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            (itemsPerPageChange)=\"itemsPerPage = $event\"\r\n                        ></vdr-items-per-page-controls>\r\n                        <vdr-pagination-controls\r\n                            [currentPage]=\"currentPage\"\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            [totalItems]=\"filteredValues.length\"\r\n                            (pageChange)=\"currentPage = $event\"\r\n                        ></vdr-pagination-controls>\r\n                    </div>\r\n                </ng-container>\r\n                <div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"button m-3\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n                        (click)=\"addFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"add\"></clr-icon>\r\n                        {{ 'catalog.add-facet-value' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}tr.facet-value td{vertical-align:middle}.pagination-wrapper{display:flex;justify-content:space-between;padding:var(--card-padding)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: FacetDetailComponent, selector: "vdr-facet-detail", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"facet-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermission\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar formGroupName=\"facet\">\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"visible\"\r\n                            id=\"visibility\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <vdr-card>\r\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card formGroupName=\"facet\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateCode(entity?.code, $event.target.value)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                        <input\r\n                            id=\"code\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"code\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Facet\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"facet-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-card\r\n                *ngIf=\"!(isNew$ | async)\"\r\n                [title]=\"'catalog.facet-values' | translate\"\r\n                [paddingX]=\"false\"\r\n            >\r\n                <ng-template vdrCardControls>\r\n                    <input\r\n                        type=\"text\"\r\n                        class=\"mr-3\"\r\n                        [formControl]=\"filterControl\"\r\n                        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                    />\r\n                </ng-template>\r\n                <ng-container *ngIf=\"values$ | async as filteredValues\">\r\n                    <table class=\"facet-values-list table\" formArrayName=\"values\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th></th>\r\n                                <th>{{ 'common.name' | translate }}</th>\r\n                                <th>{{ 'common.code' | translate }}</th>\r\n                                <ng-container *ngIf=\"customValueFields.length\">\r\n                                    <th>{{ 'common.custom-fields' | translate }}</th>\r\n                                </ng-container>\r\n                                <th></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr\r\n                                class=\"facet-value\"\r\n                                *ngFor=\"\r\n                                    let value of filteredValues\r\n                                        | paginate\r\n                                            : {\r\n                                                  currentPage: currentPage,\r\n                                                  itemsPerPage: itemsPerPage,\r\n                                                  totalItems: totalItems,\r\n                                              };\r\n                                    let i = index\r\n                                \"\r\n                                [formGroup]=\"detailForm.get(['values', value.id])\"\r\n                            >\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input\r\n                                        type=\"text\"\r\n                                        formControlName=\"name\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        (input)=\"updateValueCode(value.code, $event.target.value, value.id)\"\r\n                                    />\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input type=\"text\" formControlName=\"code\" />\r\n                                </td>\r\n                                <td class=\"\" *ngIf=\"customValueFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"FacetValue\"\r\n                                        [customFields]=\"customValueFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"\r\n                                            detailForm.get(['values', value.id, 'customFields'])\r\n                                        \"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-dropdown>\r\n                                        <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n                                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                        </button>\r\n                                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                            <button\r\n                                                type=\"button\"\r\n                                                class=\"delete-button\"\r\n                                                (click)=\"deleteFacetValue(value.id)\"\r\n                                                [disabled]=\"!(updatePermission | hasPermission)\"\r\n                                                vdrDropdownItem\r\n                                            >\r\n                                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                                {{ 'common.delete' | translate }}\r\n                                            </button>\r\n                                        </vdr-dropdown-menu>\r\n                                    </vdr-dropdown>\r\n                                </td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                    <div class=\"pagination-wrapper\">\r\n                        <vdr-items-per-page-controls\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n                        ></vdr-items-per-page-controls>\r\n                        <vdr-pagination-controls\r\n                            [currentPage]=\"currentPage\"\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            [totalItems]=\"totalItems\"\r\n                            (pageChange)=\"setCurrentPage($event)\"\r\n                        ></vdr-pagination-controls>\r\n                    </div>\r\n                </ng-container>\r\n                <div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"button m-3\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n                        (click)=\"addFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"add\"></clr-icon>\r\n                        {{ 'catalog.add-facet-value' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}tr.facet-value td{vertical-align:middle}.pagination-wrapper{display:flex;justify-content:space-between;padding:var(--card-padding)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ItemsPerPageControlsComponent, selector: "vdr-items-per-page-controls", inputs: ["itemsPerPage"], outputs: ["itemsPerPageChange"] }, { kind: "component", type: i1.PaginationControlsComponent, selector: "vdr-pagination-controls", inputs: ["id", "currentPage", "itemsPerPage", "totalItems"], outputs: ["pageChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.EntityInfoComponent, selector: "vdr-entity-info", inputs: ["small", "entity"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "directive", type: i1.CardControlsDirective, selector: "[vdrCardControls]" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: FacetDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-facet-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"facet-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermission\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar formGroupName=\"facet\">\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"visible\"\r\n                            id=\"visibility\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <vdr-card>\r\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card formGroupName=\"facet\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateCode(entity?.code, $event.target.value)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                        <input\r\n                            id=\"code\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"code\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Facet\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"facet-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-card\r\n                *ngIf=\"!(isNew$ | async)\"\r\n                [title]=\"'catalog.facet-values' | translate\"\r\n                [paddingX]=\"false\"\r\n            >\r\n                <ng-template vdrCardControls>\r\n                    <input\r\n                        type=\"text\"\r\n                        class=\"mr-3\"\r\n                        [formControl]=\"filterControl\"\r\n                        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                    />\r\n                </ng-template>\r\n                <ng-container *ngIf=\"filteredValues$ | async as filteredValues\">\r\n                    <table class=\"facet-values-list table\" formArrayName=\"values\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th></th>\r\n                                <th>{{ 'common.name' | translate }}</th>\r\n                                <th>{{ 'common.code' | translate }}</th>\r\n                                <ng-container *ngIf=\"customValueFields.length\">\r\n                                    <th>{{ 'common.custom-fields' | translate }}</th>\r\n                                </ng-container>\r\n                                <th></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr\r\n                                class=\"facet-value\"\r\n                                *ngFor=\"\r\n                                    let value of filteredValues\r\n                                        | paginate\r\n                                            : {\r\n                                                  currentPage: currentPage,\r\n                                                  itemsPerPage: itemsPerPage,\r\n                                                  totalItems: filteredValues.length\r\n                                              };\r\n                                    let i = index\r\n                                \"\r\n                                [formGroup]=\"detailForm.get(['values', value.id])\"\r\n                            >\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input\r\n                                        type=\"text\"\r\n                                        formControlName=\"name\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        (input)=\"updateValueCode(value.code, $event.target.value, value.id)\"\r\n                                    />\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input type=\"text\" formControlName=\"code\" />\r\n                                </td>\r\n                                <td class=\"\" *ngIf=\"customValueFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"FacetValue\"\r\n                                        [customFields]=\"customValueFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"\r\n                                            detailForm.get(['values', value.id, 'customFields'])\r\n                                        \"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-dropdown>\r\n                                        <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n                                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                        </button>\r\n                                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                            <button\r\n                                                type=\"button\"\r\n                                                class=\"delete-button\"\r\n                                                (click)=\"deleteFacetValue(value.id)\"\r\n                                                [disabled]=\"!(updatePermission | hasPermission)\"\r\n                                                vdrDropdownItem\r\n                                            >\r\n                                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                                {{ 'common.delete' | translate }}\r\n                                            </button>\r\n                                        </vdr-dropdown-menu>\r\n                                    </vdr-dropdown>\r\n                                </td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                    <div class=\"pagination-wrapper\">\r\n                        <vdr-items-per-page-controls\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            (itemsPerPageChange)=\"itemsPerPage = $event\"\r\n                        ></vdr-items-per-page-controls>\r\n                        <vdr-pagination-controls\r\n                            [currentPage]=\"currentPage\"\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            [totalItems]=\"filteredValues.length\"\r\n                            (pageChange)=\"currentPage = $event\"\r\n                        ></vdr-pagination-controls>\r\n                    </div>\r\n                </ng-container>\r\n                <div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"button m-3\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n                        (click)=\"addFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"add\"></clr-icon>\r\n                        {{ 'catalog.add-facet-value' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}tr.facet-value td{vertical-align:middle}.pagination-wrapper{display:flex;justify-content:space-between;padding:var(--card-padding)}\n"] }]
+            args: [{ selector: 'vdr-facet-detail', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [disabled]=\"isNew$ | async\"\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"languageCode$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"facet-detail\"></vdr-action-bar-items>\r\n            <button\r\n                class=\"btn btn-primary\"\r\n                *ngIf=\"isNew$ | async; else updateButton\"\r\n                (click)=\"create()\"\r\n                [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n            >\r\n                {{ 'common.create' | translate }}\r\n            </button>\r\n            <ng-template #updateButton>\r\n                <button\r\n                    *vdrIfPermissions=\"updatePermission\"\r\n                    class=\"btn btn-primary\"\r\n                    (click)=\"save()\"\r\n                    [disabled]=\"detailForm.invalid || detailForm.pristine\"\r\n                >\r\n                    {{ 'common.update' | translate }}\r\n                </button>\r\n            </ng-template>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<form class=\"form\" [formGroup]=\"detailForm\">\r\n    <vdr-page-detail-layout>\r\n        <vdr-page-detail-sidebar formGroupName=\"facet\">\r\n            <vdr-card>\r\n                <vdr-form-field [label]=\"'catalog.visibility' | translate\" for=\"visibility\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"visible\"\r\n                            id=\"visibility\"\r\n                        />\r\n                        <label class=\"visible-toggle\">\r\n                            <ng-container *ngIf=\"detailForm.value.facet?.visible; else private\">{{\r\n                                'catalog.public' | translate\r\n                            }}</ng-container>\r\n                            <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>\r\n                        </label>\r\n                    </clr-toggle-wrapper>\r\n                </vdr-form-field>\r\n            </vdr-card>\r\n            <vdr-card>\r\n                <vdr-page-entity-info *ngIf=\"entity$ | async as entity\" [entity]=\"entity\" />\r\n            </vdr-card>\r\n        </vdr-page-detail-sidebar>\r\n        <vdr-page-block>\r\n            <vdr-card formGroupName=\"facet\">\r\n                <div class=\"form-grid\">\r\n                    <vdr-form-field [label]=\"'common.name' | translate\" for=\"name\">\r\n                        <input\r\n                            id=\"name\"\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            (input)=\"updateCode(entity?.code, $event.target.value)\"\r\n                        />\r\n                    </vdr-form-field>\r\n                    <vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n                        <input\r\n                            id=\"code\"\r\n                            type=\"text\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"code\"\r\n                        />\r\n                    </vdr-form-field>\r\n                </div>\r\n            </vdr-card>\r\n            <vdr-card [title]=\"'common.custom-fields' | translate\" *ngIf=\"customFields.length\">\r\n                <vdr-tabbed-custom-fields\r\n                    entityName=\"Facet\"\r\n                    [customFields]=\"customFields\"\r\n                    [customFieldsFormGroup]=\"detailForm.get('facet.customFields')\"\r\n                    [readonly]=\"!(updatePermission | hasPermission)\"\r\n                />\r\n            </vdr-card>\r\n\r\n            <vdr-custom-detail-component-host\r\n                locationId=\"facet-detail\"\r\n                [entity$]=\"entity$\"\r\n                [detailForm]=\"detailForm\"\r\n            ></vdr-custom-detail-component-host>\r\n\r\n            <vdr-card\r\n                *ngIf=\"!(isNew$ | async)\"\r\n                [title]=\"'catalog.facet-values' | translate\"\r\n                [paddingX]=\"false\"\r\n            >\r\n                <ng-template vdrCardControls>\r\n                    <input\r\n                        type=\"text\"\r\n                        class=\"mr-3\"\r\n                        [formControl]=\"filterControl\"\r\n                        [placeholder]=\"'catalog.filter-by-name' | translate\"\r\n                    />\r\n                </ng-template>\r\n                <ng-container *ngIf=\"values$ | async as filteredValues\">\r\n                    <table class=\"facet-values-list table\" formArrayName=\"values\">\r\n                        <thead>\r\n                            <tr>\r\n                                <th></th>\r\n                                <th>{{ 'common.name' | translate }}</th>\r\n                                <th>{{ 'common.code' | translate }}</th>\r\n                                <ng-container *ngIf=\"customValueFields.length\">\r\n                                    <th>{{ 'common.custom-fields' | translate }}</th>\r\n                                </ng-container>\r\n                                <th></th>\r\n                            </tr>\r\n                        </thead>\r\n                        <tbody>\r\n                            <tr\r\n                                class=\"facet-value\"\r\n                                *ngFor=\"\r\n                                    let value of filteredValues\r\n                                        | paginate\r\n                                            : {\r\n                                                  currentPage: currentPage,\r\n                                                  itemsPerPage: itemsPerPage,\r\n                                                  totalItems: totalItems,\r\n                                              };\r\n                                    let i = index\r\n                                \"\r\n                                [formGroup]=\"detailForm.get(['values', value.id])\"\r\n                            >\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-entity-info [entity]=\"value\"></vdr-entity-info>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input\r\n                                        type=\"text\"\r\n                                        formControlName=\"name\"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                        (input)=\"updateValueCode(value.code, $event.target.value, value.id)\"\r\n                                    />\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <input type=\"text\" formControlName=\"code\" />\r\n                                </td>\r\n                                <td class=\"\" *ngIf=\"customValueFields.length\">\r\n                                    <vdr-tabbed-custom-fields\r\n                                        entityName=\"FacetValue\"\r\n                                        [customFields]=\"customValueFields\"\r\n                                        [compact]=\"true\"\r\n                                        [customFieldsFormGroup]=\"\r\n                                            detailForm.get(['values', value.id, 'customFields'])\r\n                                        \"\r\n                                        [readonly]=\"!(updatePermission | hasPermission)\"\r\n                                    ></vdr-tabbed-custom-fields>\r\n                                </td>\r\n                                <td class=\"align-middle\">\r\n                                    <vdr-dropdown>\r\n                                        <button type=\"button\" class=\"icon-button\" vdrDropdownTrigger>\r\n                                            <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                                        </button>\r\n                                        <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                                            <button\r\n                                                type=\"button\"\r\n                                                class=\"delete-button\"\r\n                                                (click)=\"deleteFacetValue(value.id)\"\r\n                                                [disabled]=\"!(updatePermission | hasPermission)\"\r\n                                                vdrDropdownItem\r\n                                            >\r\n                                                <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                                                {{ 'common.delete' | translate }}\r\n                                            </button>\r\n                                        </vdr-dropdown-menu>\r\n                                    </vdr-dropdown>\r\n                                </td>\r\n                            </tr>\r\n                        </tbody>\r\n                    </table>\r\n                    <div class=\"pagination-wrapper\">\r\n                        <vdr-items-per-page-controls\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n                        ></vdr-items-per-page-controls>\r\n                        <vdr-pagination-controls\r\n                            [currentPage]=\"currentPage\"\r\n                            [itemsPerPage]=\"itemsPerPage\"\r\n                            [totalItems]=\"totalItems\"\r\n                            (pageChange)=\"setCurrentPage($event)\"\r\n                        ></vdr-pagination-controls>\r\n                    </div>\r\n                </ng-container>\r\n                <div>\r\n                    <button\r\n                        type=\"button\"\r\n                        class=\"button m-3\"\r\n                        *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n                        (click)=\"addFacetValue()\"\r\n                    >\r\n                        <clr-icon shape=\"add\"></clr-icon>\r\n                        {{ 'catalog.add-facet-value' | translate }}\r\n                    </button>\r\n                </div>\r\n            </vdr-card>\r\n        </vdr-page-block>\r\n    </vdr-page-detail-layout>\r\n</form>\r\n", styles: [".visible-toggle{margin-top:-3px!important}tr.facet-value td{vertical-align:middle}.pagination-wrapper{display:flex;justify-content:space-between;padding:var(--card-padding)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DataService }, { type: i2.FormBuilder }, { type: i1.NotificationService }, { type: i1.ModalService }]; } });
 const deleteFacetsBulkAction = createBulkDeleteAction({
@@ -3186,7 +3187,7 @@ const removeFacetsFromChannelBulkAction2 = {
 };
 const FACET_LIST_QUERY = gql `
-    query GetFacetList($options: FacetListOptions) {
+    query GetFacetList($options: FacetListOptions, $facetValueListOptions: FacetValueListOptions) {
         facets(options: $options) {
             items {
                 ...FacetWithValueList
@@ -3240,6 +3241,9 @@ class FacetListComponent extends TypedBaseListComponent {
                     },
                     sort: this.sorts.createSortInput(),
                 },
+                facetValueListOptions: {
+                    take: 100,
+                },
             }),
             refreshListOnChanges: [this.filters.valueChanges, this.sorts.valueChanges],
         });
@@ -3371,7 +3375,7 @@ class GenerateProductVariantsComponent {
             : value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: GenerateProductVariantsComponent, deps: [{ token: i1.DataService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: { variantsChange: "variantsChange" }, viewQueries: [{ propertyName: "groupNameInputs", predicate: ["optionGroupName"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            #optionGroupName\r\n            placeholder=\"e.g. Size\"\r\n            clrInput\r\n            [(ngModel)]=\"group.name\"\r\n            name=\"name\"\r\n            required\r\n            (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\r\n        />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            (edit)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div class=\"remove-group\">\r\n        <button\r\n            class=\"button-small mt-2\"\r\n            [title]=\"'catalog.remove-option' | translate\"\r\n            (click)=\"removeOption(group.name)\"\r\n        >\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"button mb-2\" (click)=\"addOption()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<ng-container *ngIf=\"stockLocations$ | async as stockLocations\">\r\n    <clr-alert *ngIf=\"stockLocations.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n        <clr-alert-item>\r\n            <span class=\"alert-text\">\r\n                {{ 'catalog.no-stock-locations-available-on-current-channel' | translate }}\r\n            </span>\r\n        </clr-alert-item>\r\n    </clr-alert>\r\n\r\n    <div class=\"form-grid mb-2\">\r\n        <vdr-form-field *ngIf=\"stockLocations.length\" [label]=\"'catalog.add-stock-to-location' | translate\">\r\n            <select [(ngModel)]=\"selectedStockLocationId\">\r\n                <option *ngFor=\"let location of stockLocations\" [value]=\"location.id\">\r\n                    {{ location.name }}\r\n                </option>\r\n            </select>\r\n        </vdr-form-field>\r\n    </div>\r\n\r\n    <div class=\"variants-preview\" *ngIf=\"0 < stockLocations.length\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\r\n                    <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\r\n                    <th>{{ 'catalog.sku' | translate }}</th>\r\n                    <th>{{ 'catalog.price' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let variant of variants; trackBy: trackByFn\"\r\n                [class.disabled]=\"!variantFormValues[variant.id].value.enabled === false\"\r\n                [formGroup]=\"variantFormValues[variant.id]\"\r\n            >\r\n                <td *ngIf=\"1 < variants.length\">\r\n                    <input type=\"checkbox\" formControlName=\"enabled\" clrCheckbox />\r\n                </td>\r\n                <td *ngIf=\"1 < variants.length\">\r\n                    {{ variant.values.join(' ') }}\r\n                </td>\r\n                <td>\r\n                    <vdr-form-field>\r\n                        <input type=\"text\" formControlName=\"sku\" [placeholder]=\"'catalog.sku' | translate\" />\r\n                    </vdr-form-field>\r\n                </td>\r\n                <td>\r\n                    <vdr-form-field>\r\n                        <vdr-currency-input\r\n                            formControlName=\"price\"\r\n                            [currencyCode]=\"currencyCode\"\r\n                        ></vdr-currency-input>\r\n                    </vdr-form-field>\r\n                </td>\r\n                <td>\r\n                    <vdr-form-field>\r\n                        <input type=\"number\" formControlName=\"stock\" min=\"0\" step=\"1\" />\r\n                    </vdr-form-field>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:block;margin-bottom:120px}.option-groups{display:flex}.values{flex:1;margin:0 6px}.remove-group{padding-top:18px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrAlertText, selector: ".alert-text" }, { 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: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.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: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { 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: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: { variantsChange: "variantsChange" }, viewQueries: [{ propertyName: "groupNameInputs", predicate: ["optionGroupName"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            #optionGroupName\r\n            placeholder=\"e.g. Size\"\r\n            clrInput\r\n            [(ngModel)]=\"group.name\"\r\n            name=\"name\"\r\n            required\r\n            (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\r\n        />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            (edit)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div class=\"remove-group\">\r\n        <button\r\n            class=\"button-small mt-2\"\r\n            [title]=\"'catalog.remove-option' | translate\"\r\n            (click)=\"removeOption(group.name)\"\r\n        >\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"button mb-2\" (click)=\"addOption()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<ng-container *ngIf=\"stockLocations$ | async as stockLocations\">\r\n    <clr-alert *ngIf=\"stockLocations.length === 0\" clrAlertType=\"warning\" [clrAlertClosable]=\"false\" class=\"\">\r\n        <clr-alert-item>\r\n            <span class=\"alert-text\">\r\n                {{ 'catalog.no-stock-locations-available-on-current-channel' | translate }}\r\n            </span>\r\n        </clr-alert-item>\r\n    </clr-alert>\r\n\r\n    <div class=\"form-grid mb-2\">\r\n        <vdr-form-field *ngIf=\"stockLocations.length\" [label]=\"'catalog.add-stock-to-location' | translate\">\r\n            <select [(ngModel)]=\"selectedStockLocationId\">\r\n                <option *ngFor=\"let location of stockLocations\" [value]=\"location.id\">\r\n                    {{ location.name }}\r\n                </option>\r\n            </select>\r\n        </vdr-form-field>\r\n    </div>\r\n\r\n    <div class=\"variants-preview\" *ngIf=\"0 < stockLocations.length\">\r\n        <table class=\"table\">\r\n            <thead>\r\n                <tr>\r\n                    <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\r\n                    <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\r\n                    <th>{{ 'catalog.sku' | translate }}</th>\r\n                    <th>{{ 'catalog.price' | translate }}</th>\r\n                    <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                </tr>\r\n            </thead>\r\n            <tr\r\n                *ngFor=\"let variant of variants; trackBy: trackByFn\"\r\n                [class.disabled]=\"!variantFormValues[variant.id].value.enabled === false\"\r\n                [formGroup]=\"variantFormValues[variant.id]\"\r\n            >\r\n                <td *ngIf=\"1 < variants.length\">\r\n                    <input type=\"checkbox\" formControlName=\"enabled\" clrCheckbox />\r\n                </td>\r\n                <td *ngIf=\"1 < variants.length\">\r\n                    {{ variant.values.join(' ') }}\r\n                </td>\r\n                <td>\r\n                    <vdr-form-field>\r\n                        <input type=\"text\" formControlName=\"sku\" [placeholder]=\"'catalog.sku' | translate\" />\r\n                    </vdr-form-field>\r\n                </td>\r\n                <td>\r\n                    <vdr-form-field>\r\n                        <vdr-currency-input\r\n                            formControlName=\"price\"\r\n                            [currencyCode]=\"currencyCode\"\r\n                        ></vdr-currency-input>\r\n                    </vdr-form-field>\r\n                </td>\r\n                <td>\r\n                    <vdr-form-field>\r\n                        <input type=\"number\" formControlName=\"stock\" min=\"0\" step=\"1\" />\r\n                    </vdr-form-field>\r\n                </td>\r\n            </tr>\r\n        </table>\r\n    </div>\r\n</ng-container>\r\n", styles: [":host{display:block;margin-bottom:120px}.option-groups{display:flex}.values{flex:1;margin:0 6px}.remove-group{padding-top:18px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"], dependencies: [{ kind: "component", type: i3.ClrAlert, selector: "clr-alert", inputs: ["clrAlertSizeSmall", "clrAlertClosable", "clrAlertAppLevel", "clrCloseButtonAriaLabel", "clrAlertType", "clrAlertIcon", "clrAlertClosed"], outputs: ["clrAlertClosedChange"] }, { kind: "component", type: i3.ClrAlertItem, selector: "clr-alert-item" }, { kind: "directive", type: i3.ClrAlertText, selector: ".alert-text" }, { 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: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.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: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: GenerateProductVariantsComponent, decorators: [{
             type: Component,
@@ -3440,29 +3444,50 @@ class ProductVariantListComponent extends TypedBaseListComponent {
         this.configure({
             document: ProductVariantListQueryDocument,
             getItems: data => data.productVariants,
-            setVariables: (skip, take) => ({
-                options: {
-                    skip,
-                    take,
-                    filter: {
-                        sku: {
-                            contains: this.searchTermControl.value,
+            setVariables: (skip, take) => {
+                const searchTerm = this.searchTermControl.value;
+                const filterParam = { _and: [] };
+                const filterInput = this.filters.createFilterInput();
+                if (Object.keys(filterInput).length) {
+                    filterParam._and?.push(filterInput);
+                }
+                if (searchTerm) {
+                    filterParam._and?.push({
+                        _or: [
+                            {
+                                name: { contains: searchTerm },
+                            },
+                            {
+                                sku: { contains: searchTerm },
+                            },
+                        ],
+                    });
+                }
+                if (this.productId) {
+                    filterParam._and?.push({
+                        productId: {
+                            eq: this.productId,
                         },
-                        ...this.filters.createFilterInput(),
-                        ...(this.productId ? { productId: { eq: this.productId } } : {}),
+                    });
+                }
+                return {
+                    options: {
+                        skip,
+                        take,
+                        filter: filterParam,
+                        sort: this.sorts.createSortInput(),
                     },
-                    sort: this.sorts.createSortInput(),
-                },
-            }),
+                };
+            },
             refreshListOnChanges: [this.sorts.valueChanges, this.filters.valueChanges],
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductVariantListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductVariantListComponent, selector: "vdr-product-variant-list", inputs: { productId: "productId", hideLanguageSelect: "hideLanguageSelect", dataTableId: "dataTableId" }, usesInheritance: true, ngImport: i0, template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\r\n    <vdr-language-selector\r\n        [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n        [currentLanguageCode]=\"contentLanguage$ | async\"\r\n        (languageCodeChange)=\"setLanguage($event)\"\r\n    ></vdr-language-selector>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableId || 'product-variant-list'\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-variant-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-sku' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n        <ng-template let-variant=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"variant.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-variant=\"item\">\r\n            <a\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['/catalog/products', variant.productId, 'variants', variant.id]\"\r\n                ><span>{{ variant.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [sort]=\"sorts.get('sku')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.sku }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngIf=\"variant.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!variant.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.price' | translate\" id=\"price\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('price')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.price | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" id=\"price-with-tax\" [sort]=\"sorts.get('priceWithTax')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n\r\n    <vdr-dt2-column [heading]=\"'catalog.stock-on-hand' | translate\" id=\"stock-on-hand\" [hiddenByDefault]=\"false\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngFor=\"let stockLevel of variant.stockLevels\" [title]=\"stockLevel.stockLocation?.name\">\r\n                <div class=\"flex center\">\r\n                    <div>\r\n                        {{ stockLevel.stockOnHand\r\n                        }}<span class=\"ml-1\" *ngIf=\"stockLevel.stockAllocated\"\r\n                            >({{ stockLevel.stockAllocated }} allocated)</span\r\n                        >\r\n                    </div>\r\n                </div>\r\n            </vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductVariantListComponent, selector: "vdr-product-variant-list", inputs: { productId: "productId", hideLanguageSelect: "hideLanguageSelect", dataTableId: "dataTableId" }, usesInheritance: true, ngImport: i0, template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\r\n    <vdr-language-selector\r\n        [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n        [currentLanguageCode]=\"contentLanguage$ | async\"\r\n        (languageCodeChange)=\"setLanguage($event)\"\r\n    ></vdr-language-selector>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableId || 'product-variant-list'\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-variant-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n        <ng-template let-variant=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"variant.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-variant=\"item\">\r\n            <a\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['/catalog/products', variant.productId, 'variants', variant.id]\"\r\n                ><span>{{ variant.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [sort]=\"sorts.get('sku')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.sku }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngIf=\"variant.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!variant.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.price' | translate\" id=\"price\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('price')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.price | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" id=\"price-with-tax\" [sort]=\"sorts.get('priceWithTax')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n\r\n    <vdr-dt2-column [heading]=\"'catalog.stock-on-hand' | translate\" id=\"stock-on-hand\" [hiddenByDefault]=\"false\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngFor=\"let stockLevel of variant.stockLevels\" [title]=\"stockLevel.stockLocation?.name\">\r\n                <div class=\"flex center\">\r\n                    <div>\r\n                        {{ stockLevel.stockOnHand\r\n                        }}<span class=\"ml-1\" *ngIf=\"stockLevel.stockAllocated\"\r\n                            >({{ stockLevel.stockAllocated }} allocated)</span\r\n                        >\r\n                    </div>\r\n                </div>\r\n            </vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i1.LocaleCurrencyPipe, name: "localeCurrency" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductVariantListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-variant-list', template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\r\n    <vdr-language-selector\r\n        [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n        [currentLanguageCode]=\"contentLanguage$ | async\"\r\n        (languageCodeChange)=\"setLanguage($event)\"\r\n    ></vdr-language-selector>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableId || 'product-variant-list'\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-variant-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-sku' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n        <ng-template let-variant=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"variant.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-variant=\"item\">\r\n            <a\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['/catalog/products', variant.productId, 'variants', variant.id]\"\r\n                ><span>{{ variant.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [sort]=\"sorts.get('sku')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.sku }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngIf=\"variant.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!variant.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.price' | translate\" id=\"price\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('price')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.price | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" id=\"price-with-tax\" [sort]=\"sorts.get('priceWithTax')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n\r\n    <vdr-dt2-column [heading]=\"'catalog.stock-on-hand' | translate\" id=\"stock-on-hand\" [hiddenByDefault]=\"false\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngFor=\"let stockLevel of variant.stockLevels\" [title]=\"stockLevel.stockLocation?.name\">\r\n                <div class=\"flex center\">\r\n                    <div>\r\n                        {{ stockLevel.stockOnHand\r\n                        }}<span class=\"ml-1\" *ngIf=\"stockLevel.stockAllocated\"\r\n                            >({{ stockLevel.stockAllocated }} allocated)</span\r\n                        >\r\n                    </div>\r\n                </div>\r\n            </vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"] }]
+            args: [{ selector: 'vdr-product-variant-list', template: "<vdr-page-block *ngIf=\"!hideLanguageSelect\">\r\n    <vdr-language-selector\r\n        [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n        [currentLanguageCode]=\"contentLanguage$ | async\"\r\n        (languageCodeChange)=\"setLanguage($event)\"\r\n    ></vdr-language-selector>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    [id]=\"dataTableId || 'product-variant-list'\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-variant-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    />\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n        <ng-template let-variant=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"variant.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-variant=\"item\">\r\n            <a\r\n                class=\"button-ghost\"\r\n                [routerLink]=\"['/catalog/products', variant.productId, 'variants', variant.id]\"\r\n                ><span>{{ variant.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [sort]=\"sorts.get('sku')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.sku }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngIf=\"variant.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!variant.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.price' | translate\" id=\"price\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('price')\"\r\n    >\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.price | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.price-with-tax' | translate\" id=\"price-with-tax\" [sort]=\"sorts.get('priceWithTax')\">\r\n        <ng-template let-variant=\"item\">\r\n            {{ variant.priceWithTax | localeCurrency : variant.currencyCode }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n\r\n    <vdr-dt2-column [heading]=\"'catalog.stock-on-hand' | translate\" id=\"stock-on-hand\" [hiddenByDefault]=\"false\">\r\n        <ng-template let-variant=\"item\">\r\n            <vdr-chip *ngFor=\"let stockLevel of variant.stockLevels\" [title]=\"stockLevel.stockLocation?.name\">\r\n                <div class=\"flex center\">\r\n                    <div>\r\n                        {{ stockLevel.stockOnHand\r\n                        }}<span class=\"ml-1\" *ngIf=\"stockLevel.stockAllocated\"\r\n                            >({{ stockLevel.stockAllocated }} allocated)</span\r\n                        >\r\n                    </div>\r\n                </div>\r\n            </vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let field of customFields\" [customField]=\"field\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { productId: [{
                 type: Input
             }], hideLanguageSelect: [{
@@ -3700,7 +3725,7 @@ class ProductDetailComponent extends TypedBaseDetailComponent {
             return this.productDetailService.updateProduct({
                 product,
                 languageCode,
-                autoUpdate: this.detailForm.get(['product', 'autoUpdateVariantNames'])?.value ?? false,
+                autoUpdate: this.detailForm.get(['autoUpdateVariantNames'])?.value ?? false,
                 productInput,
                 variantsInput,
             });
@@ -3776,7 +3801,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.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"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductDetailComponent, decorators: [{
             type: Component,
@@ -3968,19 +3993,31 @@ class ProductListComponent extends TypedBaseListComponent {
         this.configure({
             document: ProductListQueryDocument,
             getItems: data => data.products,
-            setVariables: (skip, take) => ({
-                options: {
-                    skip,
-                    take,
-                    filter: {
+            setVariables: (skip, take) => {
+                const searchTerm = this.searchTermControl.value;
+                let filterInput = this.filters.createFilterInput();
+                if (searchTerm) {
+                    filterInput = {
                         name: {
-                            contains: this.searchTermControl.value,
+                            contains: searchTerm,
                         },
-                        ...this.filters.createFilterInput(),
+                        sku: {
+                            contains: searchTerm,
+                        },
+                    };
+                }
+                return {
+                    options: {
+                        skip,
+                        take,
+                        filter: {
+                            ...(filterInput ?? {}),
+                        },
+                        filterOperator: searchTerm ? LogicalOperator.OR : LogicalOperator.AND,
+                        sort: this.sorts.createSortInput(),
                     },
-                    sort: this.sorts.createSortInput(),
-                },
-            }),
+                };
+            },
             refreshListOnChanges: [this.sorts.valueChanges, this.filters.valueChanges],
         });
     }
@@ -4027,11 +4064,11 @@ class ProductListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductListComponent, deps: [{ token: i1.DataService }, { token: i1.ModalService }, { token: i1.NotificationService }, { token: i1.JobQueueService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductListComponent, selector: "vdr-products-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"button primary mr-1\"\r\n                [routerLink]=\"['./create']\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-product' | translate }}\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"rebuildSearchIndex()\">\r\n                        <clr-icon shape=\"refresh\" class=\"\"></clr-icon>\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n        <ng-template let-product=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"product.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-product=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', product.id]\"\r\n                ><span>{{ product.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-product=\"item\">\r\n            <vdr-chip *ngIf=\"product.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!product.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.number-of-variants' | translate\" id=\"number-of-variants\">\r\n        <ng-template let-product=\"item\">\r\n            {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductListComponent, selector: "vdr-products-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"button primary mr-1\"\r\n                [routerLink]=\"['./create']\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-product' | translate }}\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"rebuildSearchIndex()\">\r\n                        <clr-icon shape=\"refresh\" class=\"\"></clr-icon>\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n        <ng-template let-product=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"product.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-product=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', product.id]\"\r\n                ><span>{{ product.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-product=\"item\">\r\n            <vdr-chip *ngIf=\"product.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!product.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.number-of-variants' | translate\" id=\"number-of-variants\">\r\n        <ng-template let-product=\"item\">\r\n            {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-products-list', template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"button primary mr-1\"\r\n                [routerLink]=\"['./create']\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-product' | translate }}\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"rebuildSearchIndex()\">\r\n                        <clr-icon shape=\"refresh\" class=\"\"></clr-icon>\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n        <ng-template let-product=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"product.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-product=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', product.id]\"\r\n                ><span>{{ product.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-product=\"item\">\r\n            <vdr-chip *ngIf=\"product.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!product.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.number-of-variants' | translate\" id=\"number-of-variants\">\r\n        <ng-template let-product=\"item\">\r\n            {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"] }]
+            args: [{ selector: 'vdr-products-list', template: "<vdr-page-block>\r\n    <vdr-action-bar>\r\n        <vdr-ab-left>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </vdr-ab-left>\r\n        <vdr-ab-right>\r\n            <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n            <a\r\n                class=\"button primary mr-1\"\r\n                [routerLink]=\"['./create']\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-product' | translate }}\r\n            </a>\r\n            <vdr-dropdown>\r\n                <button class=\"icon-button\" vdrDropdownTrigger>\r\n                    <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <button type=\"button\" vdrDropdownItem (click)=\"rebuildSearchIndex()\">\r\n                        <clr-icon shape=\"refresh\" class=\"\"></clr-icon>\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </vdr-ab-right>\r\n    </vdr-action-bar>\r\n</vdr-page-block>\r\n<vdr-data-table-2\r\n    class=\"mt-2\"\r\n    id=\"product-list\"\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    [filters]=\"filters\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"product-list\"\r\n        [hostComponent]=\"this\"\r\n        [selectionManager]=\"selectionManager\"\r\n    ></vdr-bulk-action-menu>\r\n    <vdr-dt2-search\r\n        [searchTermControl]=\"searchTermControl\"\r\n        [searchTermPlaceholder]=\"'settings.search-by-product-name-or-sku' | translate\"\r\n    />\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.id }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('createdAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.createdAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column\r\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\r\n        [hiddenByDefault]=\"true\"\r\n        [sort]=\"sorts.get('updatedAt')\"\r\n    >\r\n        <ng-template let-product=\"item\">\r\n            {{ product.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.image' | translate\" id=\"image\">\r\n        <ng-template let-product=\"item\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"product.featuredAsset as asset; else imagePlaceholder\"\r\n                    [src]=\"asset | assetPreview : 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-product=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', product.id]\"\r\n                ><span>{{ product.name }}</span\r\n                ><clr-icon shape=\"arrow right\"\r\n            /></a>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.slug' | translate\" id=\"slug\" [sort]=\"sorts.get('slug')\">\r\n        <ng-template let-product=\"item\">\r\n            {{ product.slug }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.enabled' | translate\" id=\"enabled\">\r\n        <ng-template let-product=\"item\">\r\n            <vdr-chip *ngIf=\"product.enabled\" colorType=\"success\">{{\r\n                'common.enabled' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!product.enabled\" colorType=\"warning\">{{\r\n                'common.disabled' | translate\r\n            }}</vdr-chip>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'catalog.number-of-variants' | translate\" id=\"number-of-variants\">\r\n        <ng-template let-product=\"item\">\r\n            {{ 'catalog.variant-count' | translate : { count: product.variantList?.totalItems } }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column\r\n        *ngFor=\"let customField of customFields\"\r\n        [customField]=\"customField\"\r\n        [sorts]=\"sorts\"\r\n    />\r\n</vdr-data-table-2>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;margin-top:calc(var(--space-unit) * -1);margin-bottom:calc(var(--space-unit) * -1);background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%}vdr-product-search-input{min-width:300px}@media screen and (max-width: 768px){vdr-product-search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-inline-end:24px}.sku{color:var(--color-text-300)}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i1.ModalService }, { type: i1.NotificationService }, { type: i1.JobQueueService }]; } });
 class VariantPriceDetailComponent {
@@ -4368,7 +4405,7 @@ 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>\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"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i1.FormItemComponent, selector: "vdr-form-item", inputs: ["label", "tooltip"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "directive", type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { kind: "component", type: i1.CustomDetailComponentHostComponent, selector: "vdr-custom-detail-component-host", inputs: ["locationId", "entity$", "detailForm"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i1.PageEntityInfoComponent, selector: "vdr-page-entity-info", inputs: ["entity"] }, { kind: "component", type: i1.PageDetailLayoutComponent, selector: "vdr-page-detail-layout" }, { kind: "component", type: i1.PageDetailSidebarComponent, selector: "vdr-page-detail-sidebar" }, { kind: "component", type: i1.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: AssetsComponent, selector: "vdr-assets", inputs: ["assets", "featuredAsset", "compact", "updatePermissions"], outputs: ["change"] }, { kind: "component", type: VariantPriceDetailComponent, selector: "vdr-variant-price-detail", inputs: ["priceIncludesTax", "price", "currencyCode", "taxCategoryId"] }, { kind: "component", type: ProductVariantQuickJumpComponent, selector: "vdr-product-variant-quick-jump", inputs: ["productId"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleCurrencyNamePipe, name: "localeCurrencyName" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductVariantDetailComponent, decorators: [{
             type: Component,
@@ -4503,7 +4540,7 @@ class ProductVariantsTableComponent {
         this.changeDetector.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductVariantsTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductVariantsTableComponent, selector: "vdr-product-variants-table", inputs: { formArray: ["productVariantsFormArray", "formArray"], variants: "variants", paginationConfig: "paginationConfig", channelPriceIncludesTax: "channelPriceIncludesTax", optionGroups: "optionGroups", pendingAssetChanges: "pendingAssetChanges" }, ngImport: i0, template: "<table class=\"table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'common.name' | translate }}</th>\r\n            <th>{{ 'catalog.sku' | translate }}</th>\r\n            <ng-container *ngFor=\"let optionGroup of optionGroups | sort: 'id'\">\r\n                <th>{{ optionGroup.name }}</th>\r\n            </ng-container>\r\n            <th>{{ 'catalog.price' | translate }}</th>\r\n            <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            <th>{{ 'common.enabled' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <tr *ngFor=\"let variant of variants | paginate: paginationConfig; index as i; trackBy: trackByFn\">\r\n            <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <div class=\"card-img\">\r\n                        <div class=\"featured-asset\">\r\n                            <img\r\n                                *ngIf=\"getFeaturedAsset(variant) as featuredAsset; else placeholder\"\r\n                                [src]=\"featuredAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                            <ng-template #placeholder>\r\n                                <div class=\"placeholder\">\r\n                                    <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </td>\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            [placeholder]=\"'common.name' | translate\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"text\"\r\n                            formControlName=\"sku\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            [placeholder]=\"'catalog.sku' | translate\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <ng-container *ngFor=\"let option of variant.options | sort: 'groupId'\">\r\n                    <td\r\n                        class=\"left align-middle\"\r\n                        [class.disabled]=\"!formGroup.get('enabled')!.value\"\r\n                        [style.color]=\"optionGroupName(option.groupId) | stringToColor\"\r\n                    >\r\n                        {{ option.name }}\r\n                    </td>\r\n                </ng-container>\r\n                <td class=\"left align-middle price\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <vdr-currency-input\r\n                            *ngIf=\"!channelPriceIncludesTax\"\r\n                            clrInput\r\n                            [currencyCode]=\"variant.currencyCode\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"price\"\r\n                        ></vdr-currency-input>\r\n                        <vdr-currency-input\r\n                            *ngIf=\"channelPriceIncludesTax\"\r\n                            clrInput\r\n                            [currencyCode]=\"variant.currencyCode\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"priceWithTax\"\r\n                        ></vdr-currency-input>\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"number\"\r\n                            min=\"0\"\r\n                            step=\"1\"\r\n                            formControlName=\"stockOnHand\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            formControlName=\"enabled\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </clr-toggle-wrapper>\r\n                </td>\r\n            </ng-container>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n", styles: [".placeholder{color:var(--color-grey-300)}.stock input,.price input{max-width:96px}td{transition:background-color .2s}td.disabled{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.StringToColorPipe, name: "stringToColor" }, { kind: "pipe", type: i1.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i1.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductVariantsTableComponent, selector: "vdr-product-variants-table", inputs: { formArray: ["productVariantsFormArray", "formArray"], variants: "variants", paginationConfig: "paginationConfig", channelPriceIncludesTax: "channelPriceIncludesTax", optionGroups: "optionGroups", pendingAssetChanges: "pendingAssetChanges" }, ngImport: i0, template: "<table class=\"table\">\r\n    <thead>\r\n        <tr>\r\n            <th></th>\r\n            <th>{{ 'common.name' | translate }}</th>\r\n            <th>{{ 'catalog.sku' | translate }}</th>\r\n            <ng-container *ngFor=\"let optionGroup of optionGroups | sort: 'id'\">\r\n                <th>{{ optionGroup.name }}</th>\r\n            </ng-container>\r\n            <th>{{ 'catalog.price' | translate }}</th>\r\n            <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            <th>{{ 'common.enabled' | translate }}</th>\r\n        </tr>\r\n    </thead>\r\n    <tbody>\r\n        <tr *ngFor=\"let variant of variants | paginate: paginationConfig; index as i; trackBy: trackByFn\">\r\n            <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <div class=\"card-img\">\r\n                        <div class=\"featured-asset\">\r\n                            <img\r\n                                *ngIf=\"getFeaturedAsset(variant) as featuredAsset; else placeholder\"\r\n                                [src]=\"featuredAsset | assetPreview: 'tiny'\"\r\n                            />\r\n                            <ng-template #placeholder>\r\n                                <div class=\"placeholder\">\r\n                                    <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                                </div>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </td>\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"text\"\r\n                            formControlName=\"name\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            [placeholder]=\"'common.name' | translate\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"text\"\r\n                            formControlName=\"sku\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            [placeholder]=\"'catalog.sku' | translate\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <ng-container *ngFor=\"let option of variant.options | sort: 'groupId'\">\r\n                    <td\r\n                        class=\"left align-middle\"\r\n                        [class.disabled]=\"!formGroup.get('enabled')!.value\"\r\n                        [style.color]=\"optionGroupName(option.groupId) | stringToColor\"\r\n                    >\r\n                        {{ option.name }}\r\n                    </td>\r\n                </ng-container>\r\n                <td class=\"left align-middle price\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <vdr-currency-input\r\n                            *ngIf=\"!channelPriceIncludesTax\"\r\n                            clrInput\r\n                            [currencyCode]=\"variant.currencyCode\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"price\"\r\n                        ></vdr-currency-input>\r\n                        <vdr-currency-input\r\n                            *ngIf=\"channelPriceIncludesTax\"\r\n                            clrInput\r\n                            [currencyCode]=\"variant.currencyCode\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                            formControlName=\"priceWithTax\"\r\n                        ></vdr-currency-input>\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-input-container>\r\n                        <input\r\n                            clrInput\r\n                            type=\"number\"\r\n                            min=\"0\"\r\n                            step=\"1\"\r\n                            formControlName=\"stockOnHand\"\r\n                            [readonly]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </clr-input-container>\r\n                </td>\r\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\r\n                    <clr-toggle-wrapper>\r\n                        <input\r\n                            type=\"checkbox\"\r\n                            clrToggle\r\n                            name=\"enabled\"\r\n                            formControlName=\"enabled\"\r\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\r\n                        />\r\n                    </clr-toggle-wrapper>\r\n                </td>\r\n            </ng-container>\r\n        </tr>\r\n    </tbody>\r\n</table>\r\n", styles: [".placeholder{color:var(--color-grey-300)}.stock input,.price input{max-width:96px}td{transition:background-color .2s}td.disabled{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i3.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i3.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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: "component", type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "pipe", type: i5$2.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.SortPipe, name: "sort" }, { kind: "pipe", type: i1.StringToColorPipe, name: "stringToColor" }, { 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: ProductVariantsTableComponent, decorators: [{
             type: Component,
@@ -4570,7 +4607,7 @@ class UpdateProductOptionDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: UpdateProductOptionDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: UpdateProductOptionDialogComponent, selector: "vdr-update-product-option-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'catalog.update-product-option' | translate }}</ng-template>\r\n<vdr-form-field [label]=\"'catalog.option-name' | translate\" for=\"name\">\r\n    <input\r\n        id=\"name\"\r\n        type=\"text\"\r\n        #nameInput=\"ngModel\"\r\n        [(ngModel)]=\"name\"\r\n        required\r\n        (input)=\"updateCode($event.target.value)\"\r\n    />\r\n</vdr-form-field>\r\n<vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n    <input id=\"code\" type=\"text\" #codeInput=\"ngModel\" required [(ngModel)]=\"code\" pattern=\"[a-z0-9_-]+\" />\r\n</vdr-form-field>\r\n<clr-checkbox-wrapper>\r\n    <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"updateVariantName\" />\r\n    <label>{{ 'catalog.auto-update-option-variant-name' | translate }}</label>\r\n</clr-checkbox-wrapper>\r\n<section *ngIf=\"customFields.length\">\r\n    <label>{{ 'common.custom-fields' | translate }}</label>\r\n    <vdr-tabbed-custom-fields\r\n        entityName=\"ProductOption\"\r\n        [customFields]=\"customFields\"\r\n        [customFieldsFormGroup]=\"customFieldsForm\"\r\n        [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n    ></vdr-tabbed-custom-fields>\r\n</section>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"update()\"\r\n        [disabled]=\"\r\n            nameInput.invalid ||\r\n            codeInput.invalid ||\r\n            (nameInput.pristine && codeInput.pristine && customFieldsForm.pristine)\r\n        \"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'catalog.update-product-option' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { 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: UpdateProductOptionDialogComponent, selector: "vdr-update-product-option-dialog", ngImport: i0, template: "<ng-template vdrDialogTitle>{{ 'catalog.update-product-option' | translate }}</ng-template>\r\n<vdr-form-field [label]=\"'catalog.option-name' | translate\" for=\"name\">\r\n    <input\r\n        id=\"name\"\r\n        type=\"text\"\r\n        #nameInput=\"ngModel\"\r\n        [(ngModel)]=\"name\"\r\n        required\r\n        (input)=\"updateCode($event.target.value)\"\r\n    />\r\n</vdr-form-field>\r\n<vdr-form-field [label]=\"'common.code' | translate\" for=\"code\">\r\n    <input id=\"code\" type=\"text\" #codeInput=\"ngModel\" required [(ngModel)]=\"code\" pattern=\"[a-z0-9_-]+\" />\r\n</vdr-form-field>\r\n<clr-checkbox-wrapper>\r\n    <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"updateVariantName\" />\r\n    <label>{{ 'catalog.auto-update-option-variant-name' | translate }}</label>\r\n</clr-checkbox-wrapper>\r\n<section *ngIf=\"customFields.length\">\r\n    <label>{{ 'common.custom-fields' | translate }}</label>\r\n    <vdr-tabbed-custom-fields\r\n        entityName=\"ProductOption\"\r\n        [customFields]=\"customFields\"\r\n        [customFieldsFormGroup]=\"customFieldsForm\"\r\n        [readonly]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n    ></vdr-tabbed-custom-fields>\r\n</section>\r\n\r\n<ng-template vdrDialogButtons>\r\n    <button type=\"button\" class=\"btn\" (click)=\"cancel()\">{{ 'common.cancel' | translate }}</button>\r\n    <button\r\n        type=\"submit\"\r\n        (click)=\"update()\"\r\n        [disabled]=\"\r\n            nameInput.invalid ||\r\n            codeInput.invalid ||\r\n            (nameInput.pristine && codeInput.pristine && customFieldsForm.pristine)\r\n        \"\r\n        class=\"btn btn-primary\"\r\n    >\r\n        {{ 'catalog.update-product-option' | translate }}\r\n    </button>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i1.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i1.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "directive", type: i1.DialogButtonsDirective, selector: "[vdrDialogButtons]" }, { kind: "directive", type: i1.DialogTitleDirective, selector: "[vdrDialogTitle]" }, { kind: "component", type: i1.TabbedCustomFieldsComponent, selector: "vdr-tabbed-custom-fields", inputs: ["entityName", "customFields", "customFieldsFormGroup", "readonly", "compact", "showLabel"] }, { 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: UpdateProductOptionDialogComponent, decorators: [{
             type: Component,
@@ -4610,6 +4647,7 @@ const CATALOG_COMPONENTS = [
     CreateProductVariantDialogComponent,
     CreateProductOptionGroupDialogComponent,
     ProductVariantQuickJumpComponent,
+    CreateFacetValueDialogComponent,
 ];
 class CatalogModule {
     static { this.hasRegisteredTabsAndBulkActions = false; }
@@ -4698,6 +4736,15 @@ class CatalogModule {
             component: detailComponentWithResolver({
                 component: FacetDetailComponent,
                 query: GetFacetDetailDocument,
+                variables: {
+                    facetValueListOptions: {
+                        take: 10,
+                        skip: 0,
+                        sort: {
+                            createdAt: SortOrder$1.DESC,
+                        },
+                    },
+                },
                 entityKey: 'facet',
                 getBreadcrumbs: entity => [
                     {
@@ -4789,7 +4836,8 @@ class CatalogModule {
             ProductVariantDetailComponent,
             CreateProductVariantDialogComponent,
             CreateProductOptionGroupDialogComponent,
-            ProductVariantQuickJumpComponent], imports: [SharedModule, i1$1.RouterModule], exports: [ProductListComponent,
+            ProductVariantQuickJumpComponent,
+            CreateFacetValueDialogComponent], imports: [SharedModule, i1$1.RouterModule], exports: [ProductListComponent,
             ProductDetailComponent,
             FacetListComponent,
             FacetDetailComponent,
@@ -4820,7 +4868,8 @@ class CatalogModule {
             ProductVariantDetailComponent,
             CreateProductVariantDialogComponent,
             CreateProductOptionGroupDialogComponent,
-            ProductVariantQuickJumpComponent] }); }
+            ProductVariantQuickJumpComponent,
+            CreateFacetValueDialogComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CatalogModule, providers: [
             {
                 provide: ROUTES,
@@ -5066,5 +5115,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, AssetsComponent, AssignProductsToChannelDialogComponent, BulkAddFacetValuesDialogComponent, COLLECTION_DETAIL_QUERY, CatalogModule, CollectionBreadcrumbPipe, CollectionContentsComponent, CollectionDataTableComponent, CollectionDetailComponent, CollectionListComponent, CollectionTreeComponent, CollectionTreeNodeComponent, CollectionTreeService, ConfirmVariantDeletionDialogComponent, CreateFacetValueDialogComponent, CreateProductOptionGroupDialogComponent, CreateProductVariantDialogComponent, FACET_DETAIL_QUERY, FACET_LIST_QUERY, FacetDetailComponent, FacetListComponent, GET_PRODUCTS_WITH_FACET_VALUES_BY_IDS, GET_PRODUCT_DETAIL, GET_VARIANTS_WITH_FACET_VALUES_BY_IDS, GenerateProductVariantsComponent, GeneratedVariant, MoveCollectionsDialogComponent, OPTION_VALUE_INPUT_VALUE_ACCESSOR, OptionValueInputComponent, PRODUCT_LIST_QUERY, PRODUCT_VARIANT_DETAIL_QUERY, PRODUCT_VARIANT_DETAIL_QUERY_PRODUCT_VARIANT_FRAGMENT, PRODUCT_VARIANT_LIST_QUERY, PRODUCT_VARIANT_UPDATE_MUTATION, ProductDetailComponent, ProductDetailService, ProductListComponent, ProductOptionsEditorComponent, ProductVariantDetailComponent, ProductVariantListComponent, ProductVariantQuickJumpComponent, ProductVariantsEditorComponent, ProductVariantsResolver, ProductVariantsTableComponent, UPDATE_PRODUCTS_BULK, UPDATE_VARIANTS_BULK, UpdateProductOptionDialogComponent, VariantPriceDetailComponent, arrayToTree, assignCollectionsToChannelBulkAction, assignFacetValuesToProductsBulkAction, assignFacetsToChannelBulkAction, assignProductVariantsToChannelBulkAction, assignProductsToChannelBulkAction, createRoutes, deleteCollectionsBulkAction, deleteFacetsBulkAction, deleteProductVariantsBulkAction, deleteProductsBulkAction, moveCollectionsBulkAction, productOptionsEditorBreadcrumb, removeCollectionsFromChannelBulkAction, removeFacetsFromChannelBulkAction, removeFacetsFromChannelBulkAction2, removeProductVariantsFromChannelBulkAction, removeProductsFromChannelBulkAction, replaceLast };
 //# sourceMappingURL=vendure-admin-ui-catalog.mjs.map