@vendure/admin-ui 3.1.3 → 3.1.5

package/esm2022/catalog/components/product-variant-list/product-variant-list.component.mjs

@@ -103,7 +103,7 @@ export 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: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i4.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i4.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i4.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i4.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i4.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i4.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i4.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i4.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i4.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: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i4.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "component", type: i4.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i4.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i4.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i4.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i4.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i4.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.AssetPreviewPipe, name: "assetPreview" }, { kind: "pipe", type: i4.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i4.LocaleCurrencyPipe, name: "localeCurrency" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProductVariantListComponent, decorators: [{
             type: Component,

package/esm2022/catalog/components/product-variants-editor/product-variants-editor.component.mjs

@@ -283,7 +283,7 @@ export 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.ActivatedRoute }, { token: i2.DataService }, { token: i3.ProductDetailService }, { token: i2.NotificationService }, { token: i2.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: i4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.ClrInput, selector: "[clrInput]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.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: i2.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i2.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i2.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i2.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i2.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i2.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i2.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i2.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i8.OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i2.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: i4.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i4.ClrInput, selector: "[clrInput]" }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.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: i2.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "component", type: i2.FormFieldComponent, selector: "vdr-form-field", inputs: ["label", "for", "tooltip", "errors", "readOnlyToggle"], outputs: ["readOnlyToggleChange"] }, { kind: "directive", type: i2.FormFieldControlDirective, selector: "input, textarea, select, vdr-currency-input" }, { kind: "component", type: i2.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex", "trackByPath"], outputs: ["pageChange", "itemsPerPageChange", "visibleColumnsChange"] }, { kind: "component", type: i2.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i2.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i2.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i2.CardComponent, selector: "vdr-card", inputs: ["title", "paddingX"] }, { kind: "component", type: i8.OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.TranslatePipe, name: "translate" }, { kind: "pipe", type: i2.LocaleDatePipe, name: "localeDate" }, { kind: "pipe", type: i2.LocaleCurrencyPipe, name: "localeCurrency" }], changeDetection: i0.ChangeDetectionStrategy.Default }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProductVariantsEditorComponent, decorators: [{
             type: Component,