npm - @vendure/admin-ui - Versions diffs - 3.1.4 → 3.1.6 - Mend

@vendure/admin-ui 3.1.4 → 3.1.6

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 (50) hide show

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

@@ -455,11 +455,11 @@ class ProductOptionsEditorComponent extends BaseDetailComponent {
         return optionForm;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProductOptionsEditorComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i1.ServerConfigService }, { token: i1.DataService }, { token: i1.PermissionsService }, { 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: "17.2.4", 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", "visibleColumnsChange"] }, { 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: "17.2.4", 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                        [trackByPath]=\"'value.id'\"\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                        (itemsPerPageChange)=\"paginationSettings[optionGroup.value.id].itemsPerPage = $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", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { 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: "17.2.4", ngImport: i0, type: ProductOptionsEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-options-editor', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'vdr-product-options-editor', changeDetection: ChangeDetectionStrategy.OnPush, 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                        [trackByPath]=\"'value.id'\"\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                        (itemsPerPageChange)=\"paginationSettings[optionGroup.value.id].itemsPerPage = $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"] }]
         }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i1.ServerConfigService }, { type: i1.DataService }, { type: i1.PermissionsService }, { type: ProductDetailService }, { type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1.NotificationService }] });
 class CreateProductOptionGroupDialogComponent {
@@ -983,7 +983,7 @@ class ProductVariantsEditorComponent {
         return variant.options.find(o => o.groupId === groupId);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", 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: "17.2.4", 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", "visibleColumnsChange"] }, { 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: "17.2.4", 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", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { 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: "17.2.4", ngImport: i0, type: ProductVariantsEditorComponent, decorators: [{
             type: Component,
@@ -1679,7 +1679,7 @@ class CollectionContentsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CollectionContentsComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: { collectionId: "collectionId", parentId: "parentId", inheritFilters: "inheritFilters", updatedFilters: "updatedFilters", previewUpdatedFilters: "previewUpdatedFilters" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-wrapper\">\r\n    <div class=\"progress loop\" [class.visible]=\"isLoading\"></div>\r\n    <div class=\"header-title-row\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\r\n        ></ng-container>\r\n    </div>\r\n    <vdr-data-table-2\r\n        id=\"collection-contents\"\r\n        [class.loading]=\"isLoading\"\r\n        [items]=\"contents$ | async\"\r\n        [itemsPerPage]=\"contentsItemsPerPage$ | async\"\r\n        [totalItems]=\"contentsTotalItems$ | async\"\r\n        [currentPage]=\"contentsCurrentPage$ | async\"\r\n        (pageChange)=\"setContentsPageNumber($event)\"\r\n        (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n    >\r\n        <vdr-dt2-search\r\n            [searchTermControl]=\"filterTermControl\"\r\n            [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n        />\r\n        <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.id }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.createdAt | localeDate : 'short' }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.updatedAt | localeDate : 'short' }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                <a class=\"button-ghost\" [routerLink]=\"['/catalog/products', variant.productId]\"\r\n                    ><span>{{ variant.name }}</span\r\n                    ><clr-icon shape=\"arrow right\"\r\n                /></a>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.sku }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep table{margin-top:-1px}vdr-data-table{opacity:1;transition:opacity .3s}vdr-data-table.loading{opacity:.5}.table-wrapper{position:relative}.progress{position:absolute;top:0;left:0;overflow:hidden;height:6px;opacity:0;transition:opacity .1s}.progress.visible{opacity:1}.sku{color:var(--color-text-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CollectionContentsComponent, selector: "vdr-collection-contents", inputs: { collectionId: "collectionId", parentId: "parentId", inheritFilters: "inheritFilters", updatedFilters: "updatedFilters", previewUpdatedFilters: "previewUpdatedFilters" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-wrapper\">\r\n    <div class=\"progress loop\" [class.visible]=\"isLoading\"></div>\r\n    <div class=\"header-title-row\">\r\n        <ng-container\r\n            *ngTemplateOutlet=\"headerTemplate; context: { $implicit: contentsTotalItems$ | async }\"\r\n        ></ng-container>\r\n    </div>\r\n    <vdr-data-table-2\r\n        id=\"collection-contents\"\r\n        [class.loading]=\"isLoading\"\r\n        [items]=\"contents$ | async\"\r\n        [itemsPerPage]=\"contentsItemsPerPage$ | async\"\r\n        [totalItems]=\"contentsTotalItems$ | async\"\r\n        [currentPage]=\"contentsCurrentPage$ | async\"\r\n        (pageChange)=\"setContentsPageNumber($event)\"\r\n        (itemsPerPageChange)=\"setContentsItemsPerPage($event)\"\r\n    >\r\n        <vdr-dt2-search\r\n            [searchTermControl]=\"filterTermControl\"\r\n            [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\r\n        />\r\n        <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.id }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'common.created-at' | translate\" id=\"created-at\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.createdAt | localeDate : 'short' }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'common.updated-at' | translate\" id=\"updated-at\" [hiddenByDefault]=\"true\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.updatedAt | localeDate : 'short' }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                <a class=\"button-ghost\" [routerLink]=\"['/catalog/products', variant.productId]\"\r\n                    ><span>{{ variant.name }}</span\r\n                    ><clr-icon shape=\"arrow right\"\r\n                /></a>\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n        <vdr-dt2-column [heading]=\"'catalog.sku' | translate\" id=\"sku\" [optional]=\"false\">\r\n            <ng-template let-variant=\"item\">\r\n                {{ variant.sku }}\r\n            </ng-template>\r\n        </vdr-dt2-column>\r\n    </vdr-data-table-2>\r\n</div>\r\n", styles: [":host{display:block}:host ::ng-deep table{margin-top:-1px}vdr-data-table{opacity:1;transition:opacity .3s}vdr-data-table.loading{opacity:.5}.table-wrapper{position:relative}.progress{position:absolute;top:0;left:0;overflow:hidden;height:6px;opacity:0;transition:opacity .1s}.progress.visible{opacity:1}.sku{color:var(--color-text-200)}\n"], dependencies: [{ kind: "directive", type: i3.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CollectionContentsComponent, decorators: [{
             type: Component,
@@ -3239,7 +3239,7 @@ class FacetListComponent extends TypedBaseListComponent {
         this.dataService.client.setContentLanguage(code).subscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FacetListComponent, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FacetListComponent, selector: "vdr-facet-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=\"facet-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                [routerLink]=\"['./create']\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-facet' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"facet-list\" />\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]=\"dataTableListId\"\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    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"facet-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    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-facet=\"item\">\r\n            {{ facet.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-facet=\"item\">\r\n            {{ facet.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-facet=\"item\">\r\n            {{ facet.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-facet=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', facet.id]\"\r\n                ><span>{{ facet.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.code' | translate\" id=\"code\">\r\n        <ng-template let-facet=\"item\">\r\n            {{ facet.code }}\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-facet=\"item\">\r\n            <vdr-chip *ngIf=\"facet.isPrivate\" colorType=\"warning\">{{\r\n                'common.private' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!facet.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]=\"'catalog.values' | translate\" id=\"values\">\r\n        <ng-template let-facet=\"item\">\r\n            <div class=\"facet-values-list\">\r\n                <vdr-facet-value-chip\r\n                    *ngFor=\"let value of facet.valueList.items | slice : 0 : displayLimit[facet.id] || 3\"\r\n                    [facetValue]=\"value\"\r\n                    [removable]=\"false\"\r\n                    [displayFacetName]=\"false\"\r\n                ></vdr-facet-value-chip>\r\n                <vdr-chip *ngIf=\"displayLimit[facet.id] < facet.valueList.totalItems && (displayLimit[facet.id] || 0) === facet.valueList.items.length\">\r\n                    ... + {{ facet.valueList.totalItems - facet.valueList.items.length }}\r\n                </vdr-chip>\r\n                <button\r\n                    class=\"button-small\"\r\n                    *ngIf=\"facet.valueList.items.length > initialLimit\"\r\n                    (click)=\"toggleDisplayLimit(facet)\"\r\n                >\r\n                    <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.valueList.items.length; else collapse\">\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ facet.valueList.totalItems - initialLimit }}\r\n                    </ng-container>\r\n                    <ng-template #collapse>\r\n                        <clr-icon shape=\"minus\"></clr-icon>\r\n                    </ng-template>\r\n                </button>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".facet-values-list{max-width:500px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}\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", "info", "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.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { 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.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" }, { 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", "visibleColumnsChange"] }, { 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: i3$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FacetListComponent, selector: "vdr-facet-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=\"facet-list\" />\r\n            <a\r\n                class=\"btn btn-primary\"\r\n                [routerLink]=\"['./create']\"\r\n                *vdrIfPermissions=\"['CreateCatalog', 'CreateFacet']\"\r\n            >\r\n                <clr-icon shape=\"plus\"></clr-icon>\r\n                {{ 'catalog.create-new-facet' | translate }}\r\n            </a>\r\n            <vdr-action-bar-dropdown-menu locationId=\"facet-list\" />\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]=\"dataTableListId\"\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    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        locationId=\"facet-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    ></vdr-dt2-search>\r\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\" [sort]=\"sorts.get('id')\">\r\n        <ng-template let-facet=\"item\">\r\n            {{ facet.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-facet=\"item\">\r\n            {{ facet.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-facet=\"item\">\r\n            {{ facet.updatedAt | localeDate : 'short' }}\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-column [heading]=\"'common.name' | translate\" id=\"name\" [optional]=\"false\" [sort]=\"sorts.get('name')\">\r\n        <ng-template let-facet=\"item\">\r\n            <a class=\"button-ghost\" [routerLink]=\"['./', facet.id]\"\r\n                ><span>{{ facet.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.code' | translate\" id=\"code\">\r\n        <ng-template let-facet=\"item\">\r\n            {{ facet.code }}\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-facet=\"item\">\r\n            <vdr-chip *ngIf=\"facet.isPrivate\" colorType=\"warning\">{{\r\n                'common.private' | translate\r\n            }}</vdr-chip>\r\n            <vdr-chip *ngIf=\"!facet.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]=\"'catalog.values' | translate\" id=\"values\">\r\n        <ng-template let-facet=\"item\">\r\n            <div class=\"facet-values-list\">\r\n                <vdr-facet-value-chip\r\n                    *ngFor=\"let value of facet.valueList.items | slice : 0 : displayLimit[facet.id] || 3\"\r\n                    [facetValue]=\"value\"\r\n                    [removable]=\"false\"\r\n                    [displayFacetName]=\"false\"\r\n                ></vdr-facet-value-chip>\r\n                <vdr-chip *ngIf=\"displayLimit[facet.id] < facet.valueList.totalItems && (displayLimit[facet.id] || 0) === facet.valueList.items.length\">\r\n                    ... + {{ facet.valueList.totalItems - facet.valueList.items.length }}\r\n                </vdr-chip>\r\n                <button\r\n                    class=\"button-small\"\r\n                    *ngIf=\"facet.valueList.items.length > initialLimit\"\r\n                    (click)=\"toggleDisplayLimit(facet)\"\r\n                >\r\n                    <ng-container *ngIf=\"(displayLimit[facet.id] || 0) < facet.valueList.items.length; else collapse\">\r\n                        <clr-icon shape=\"plus\"></clr-icon>\r\n                        {{ facet.valueList.totalItems - initialLimit }}\r\n                    </ng-container>\r\n                    <ng-template #collapse>\r\n                        <clr-icon shape=\"minus\"></clr-icon>\r\n                    </ng-template>\r\n                </button>\r\n            </div>\r\n        </ng-template>\r\n    </vdr-dt2-column>\r\n    <vdr-dt2-custom-field-column *ngFor=\"let customField of customFields\" [customField]=\"customField\" [sorts]=\"sorts\" />\r\n</vdr-data-table-2>\r\n", styles: [".facet-values-list{max-width:500px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}\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", "info", "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.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { 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.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" }, { 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", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { 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: i3$1.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FacetListComponent, decorators: [{
             type: Component,
@@ -3464,7 +3464,7 @@ class ProductVariantListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProductVariantListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", 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", "info", "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", "visibleColumnsChange"] }, { 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: "17.2.4", 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", "info", "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", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { 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: "17.2.4", ngImport: i0, type: ProductVariantListComponent, decorators: [{
             type: Component,
@@ -4053,7 +4053,7 @@ class ProductListComponent extends TypedBaseListComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", 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: "17.2.4", 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]=\"pageLocationId\"></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-action-bar-dropdown-menu [alwaysShow]=\"true\" [locationId]=\"pageLocationId\">\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-action-bar-dropdown-menu>\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]=\"dataTableListId\"\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    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        [locationId]=\"dataTableListId\"\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", "info", "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.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { 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.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { 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", "visibleColumnsChange"] }, { 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: "17.2.4", 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]=\"pageLocationId\"></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-action-bar-dropdown-menu [alwaysShow]=\"true\" [locationId]=\"pageLocationId\">\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-action-bar-dropdown-menu>\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]=\"dataTableListId\"\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    (visibleColumnsChange)=\"setVisibleColumns($event)\"\r\n>\r\n    <vdr-bulk-action-menu\r\n        [locationId]=\"dataTableListId\"\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", "info", "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.ActionBarDropdownMenuComponent, selector: "vdr-action-bar-dropdown-menu", inputs: ["alwaysShow"] }, { 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.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items" }, { 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", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { 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: "17.2.4", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,