@vendure/admin-ui 1.6.5 → 1.7.0

package/bundles/vendure-admin-ui-catalog.umd.js

@@ -2864,6 +2864,7 @@
             this.notificationService = notificationService;
             this.modalService = modalService;
             this.formValueChanged = false;
+            this.optionsChanged = false;
             this.generatedVariants = [];
         }
         ProductVariantsEditorComponent.prototype.ngOnInit = function () {
@@ -2890,16 +2891,110 @@
                 ? ngxTranslateExtractMarker.marker('catalog.default-variant')
                 : variant.options.map(function (o) { return o.name; }).join(' ');
         };
-        ProductVariantsEditorComponent.prototype.addOption = function () {
+        ProductVariantsEditorComponent.prototype.addOptionGroup = function () {
             this.optionGroups.push({
                 isNew: true,
+                locked: false,
                 name: '',
                 values: [],
             });
+            this.optionsChanged = true;
         };
-        ProductVariantsEditorComponent.prototype.removeOption = function (optionGroup) {
-            this.optionGroups = this.optionGroups.filter(function (og) { return og !== optionGroup; });
+        ProductVariantsEditorComponent.prototype.removeOptionGroup = function (optionGroup) {
+            var _this = this;
+            var id = optionGroup.id;
+            if (optionGroup.isNew) {
+                this.optionGroups = this.optionGroups.filter(function (og) { return og !== optionGroup; });
+                this.generateVariants();
+                this.optionsChanged = true;
+            }
+            else if (id) {
+                this.modalService
+                    .dialog({
+                    title: ngxTranslateExtractMarker.marker('catalog.confirm-delete-product-option-group'),
+                    translationVars: { name: optionGroup.name },
+                    buttons: [
+                        { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
+                        { type: 'danger', label: ngxTranslateExtractMarker.marker('common.delete'), returnValue: true },
+                    ],
+                })
+                    .pipe(operators.switchMap(function (val) {
+                    if (val) {
+                        return _this.dataService.product.removeOptionGroupFromProduct({
+                            optionGroupId: id,
+                            productId: _this.product.id,
+                        });
+                    }
+                    else {
+                        return rxjs.EMPTY;
+                    }
+                }))
+                    .subscribe(function (_g) {
+                    var removeOptionGroupFromProduct = _g.removeOptionGroupFromProduct;
+                    var _a;
+                    if (removeOptionGroupFromProduct.__typename === 'Product') {
+                        _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-delete-success'), {
+                            entity: 'ProductOptionGroup',
+                        });
+                        _this.initOptionsAndVariants();
+                        _this.optionsChanged = true;
+                    }
+                    else if (removeOptionGroupFromProduct.__typename === 'ProductOptionInUseError') {
+                        _this.notificationService.error((_a = removeOptionGroupFromProduct.message) !== null && _a !== void 0 ? _a : '');
+                    }
+                });
+            }
+        };
+        ProductVariantsEditorComponent.prototype.addOption = function (groupId, optionName) {
+            var _a;
+            (_a = this.optionGroups.find(function (g) { return g.id === groupId; })) === null || _a === void 0 ? void 0 : _a.values.push({ name: optionName, locked: false });
             this.generateVariants();
+            this.optionsChanged = true;
+        };
+        ProductVariantsEditorComponent.prototype.removeOption = function (groupId, _g) {
+            var _this = this;
+            var id = _g.id, name = _g.name;
+            var optionGroup = this.optionGroups.find(function (g) { return g.id === groupId; });
+            if (optionGroup) {
+                if (!id) {
+                    optionGroup.values = optionGroup.values.filter(function (v) { return v.name !== name; });
+                    this.generateVariants();
+                }
+                else {
+                    this.modalService
+                        .dialog({
+                        title: ngxTranslateExtractMarker.marker('catalog.confirm-delete-product-option'),
+                        translationVars: { name: name },
+                        buttons: [
+                            { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
+                            { type: 'danger', label: ngxTranslateExtractMarker.marker('common.delete'), returnValue: true },
+                        ],
+                    })
+                        .pipe(operators.switchMap(function (val) {
+                        if (val) {
+                            return _this.dataService.product.deleteProductOption(id);
+                        }
+                        else {
+                            return rxjs.EMPTY;
+                        }
+                    }))
+                        .subscribe(function (_g) {
+                        var deleteProductOption = _g.deleteProductOption;
+                        var _a;
+                        if (deleteProductOption.result === i2.DeletionResult.DELETED) {
+                            _this.notificationService.success(ngxTranslateExtractMarker.marker('common.notify-delete-success'), {
+                                entity: 'ProductOption',
+                            });
+                            optionGroup.values = optionGroup.values.filter(function (v) { return v.id !== id; });
+                            _this.generateVariants();
+                            _this.optionsChanged = true;
+                        }
+                        else {
+                            _this.notificationService.error((_a = deleteProductOption.message) !== null && _a !== void 0 ? _a : '');
+                        }
+                    });
+                }
+            }
         };
         ProductVariantsEditorComponent.prototype.generateVariants = function () {
             var _this = this;
@@ -2942,11 +3037,12 @@
                 stock: 0,
             };
         };
-        ProductVariantsEditorComponent.prototype.deleteVariant = function (id) {
+        ProductVariantsEditorComponent.prototype.deleteVariant = function (id, options) {
             var _this = this;
             this.modalService
                 .dialog({
                 title: ngxTranslateExtractMarker.marker('catalog.confirm-delete-product-variant'),
+                translationVars: { name: options.map(function (o) { return o.name; }).join(' ') },
                 buttons: [
                     { type: 'secondary', label: ngxTranslateExtractMarker.marker('common.cancel') },
                     { type: 'danger', label: ngxTranslateExtractMarker.marker('common.delete'), returnValue: true },
@@ -2982,13 +3078,15 @@
                         count: variants.length,
                     });
                     _this.initOptionsAndVariants();
+                    _this.optionsChanged = false;
                 },
             });
         };
         ProductVariantsEditorComponent.prototype.checkUniqueSkus = function () {
             var _this = this;
             var withDuplicateSkus = this.generatedVariants.filter(function (variant, index) {
-                return _this.generatedVariants.find(function (gv) { return gv.sku.trim() === variant.sku.trim() && gv !== variant; });
+                return (variant.enabled &&
+                    _this.generatedVariants.find(function (gv) { return gv.sku.trim() === variant.sku.trim() && gv !== variant; }));
             });
             if (withDuplicateSkus.length) {
                 return this.modalService
@@ -3072,7 +3170,7 @@
             return rxjs.forkJoin(groupsIds.map(function (id) { return _this.dataService.product
                 .getProductOptionGroup(id)
                 .mapSingle(function (data) { return data.productOptionGroup; })
-                .pipe(operators.filter(sharedUtils.notNullOrUndefined)); }));
+                .pipe(operators.filter(sharedUtils.notNullOrUndefined)); })).pipe(operators.defaultIfEmpty([]));
         };
         ProductVariantsEditorComponent.prototype.createNewProductVariants = function (groups) {
             var options = groups
@@ -3125,15 +3223,20 @@
             })
                 .subscribe(function (p) {
                 _this.product = p;
+                var allUsedOptionIds = p.variants.map(function (v) { return v.options.map(function (option) { return option.id; }); }).flat();
+                var allUsedOptionGroupIds = p.variants
+                    .map(function (v) { return v.options.map(function (option) { return option.groupId; }); })
+                    .flat();
                 _this.optionGroups = p.optionGroups.map(function (og) {
                     return {
                         id: og.id,
                         isNew: false,
                         name: og.name,
+                        locked: allUsedOptionGroupIds.includes(og.id),
                         values: og.options.map(function (o) { return ({
                             id: o.id,
                             name: o.name,
-                            locked: true,
+                            locked: allUsedOptionIds.includes(o.id),
                         }); }),
                     };
                 });
@@ -3157,7 +3260,7 @@
     ProductVariantsEditorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-product-variants-editor',
-                    template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"!formValueChanged || getVariantsToAdd().length === 0\"\r\n        >\r\n            {{ 'common.add-new-variants' | translate: { count: getVariantsToAdd().length } }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div>\r\n        <button *ngIf=\"group.isNew\" class=\"btn btn-icon btn-danger-outline mt5\" (click)=\"removeOption(group)\">\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button\r\n    class=\"btn btn-primary-outline btn-sm\"\r\n    (click)=\"addOption()\"\r\n>\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th>{{ 'common.create' | translate }}</th>\r\n                <th>{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                <th></th>\r\n            </tr>\r\n        </thead>\r\n        <tr *ngFor=\"let variant of generatedVariants\" [class.disabled]=\"!variant.enabled || variant.existing\">\r\n            <td>\r\n                <input\r\n                    type=\"checkbox\"\r\n                    *ngIf=\"!variant.existing\"\r\n                    [(ngModel)]=\"variant.enabled\"\r\n                    name=\"enabled\"\r\n                    clrCheckbox\r\n                    (ngModelChange)=\"formValueChanged = true\"\r\n                />\r\n            </td>\r\n            <td>\r\n                {{ getVariantName(variant) | translate }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        [(ngModel)]=\"variant.sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                        name=\"sku\"\r\n                        required\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.sku }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variant.price\"\r\n                        name=\"price\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.price | localeCurrency: currencyCode }}</span>\r\n            </td>\r\n            <td>\r\n                <clr-input-container *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variant.stock\"\r\n                        name=\"stock\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                        (ngModelChange)=\"onFormChanged(variant)\"\r\n                    />\r\n                </clr-input-container>\r\n                <span *ngIf=\"variant.existing\">{{ variant.stock }}</span>\r\n            </td>\r\n            <td>\r\n                <vdr-dropdown *ngIf=\"variant.productVariantId as productVariantId\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"deleteVariant(productVariantId)\"\r\n                            vdrDropdownItem\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.delete' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n",
+                    template: "<vdr-action-bar>\r\n    <vdr-ab-right>\r\n        <button\r\n            class=\"btn btn-primary\"\r\n            (click)=\"save()\"\r\n            [disabled]=\"(!formValueChanged && !optionsChanged) || getVariantsToAdd().length === 0\"\r\n        >\r\n            {{ 'common.add-new-variants' | translate: { count: getVariantsToAdd().length } }}\r\n        </button>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input clrInput [(ngModel)]=\"group.name\" name=\"name\" [readonly]=\"!group.isNew\" />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [options]=\"group.values\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n            (add)=\"addOption(group.id, $event.name)\"\r\n            (remove)=\"removeOption(group.id, $event)\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div>\r\n        <button\r\n            [disabled]=\"group.locked\"\r\n            class=\"btn btn-icon btn-danger-outline mt5\" (click)=\"removeOptionGroup(group)\">\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"btn btn-primary-outline btn-sm\" (click)=\"addOptionGroup()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th></th>\r\n                <th>{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n                <th></th>\r\n            </tr>\r\n        </thead>\r\n        <tr *ngFor=\"let variant of generatedVariants\" [class.disabled]=\"!variant.enabled || variant.existing\">\r\n            <td class=\"left\">\r\n                <clr-checkbox-wrapper *ngIf=\"!variant.existing\">\r\n                    <input\r\n                        type=\"checkbox\"\r\n                        [(ngModel)]=\"variant.enabled\"\r\n                        name=\"enabled\"\r\n                        clrCheckbox\r\n                        (ngModelChange)=\"formValueChanged = true\"\r\n                    />\r\n                    <label>{{ 'common.create' | translate }}</label>\r\n                </clr-checkbox-wrapper>\r\n            </td>\r\n            <td>\r\n                {{ getVariantName(variant) | translate }}\r\n            </td>\r\n            <td>\r\n                <div class=\"flex center\">\r\n                    <clr-input-container *ngIf=\"!variant.existing\">\r\n                        <input\r\n                            clrInput\r\n                            type=\"text\"\r\n                            [(ngModel)]=\"variant.sku\"\r\n                            [placeholder]=\"'catalog.sku' | translate\"\r\n                            name=\"sku\"\r\n                            required\r\n                            (ngModelChange)=\"onFormChanged(variant)\"\r\n                        />\r\n                    </clr-input-container>\r\n                    <span *ngIf=\"variant.existing\">{{ variant.sku }}</span>\r\n                </div>\r\n            </td>\r\n            <td>\r\n                <div class=\"flex center\">\r\n                    <clr-input-container *ngIf=\"!variant.existing\">\r\n                        <vdr-currency-input\r\n                            clrInput\r\n                            [(ngModel)]=\"variant.price\"\r\n                            name=\"price\"\r\n                            [currencyCode]=\"currencyCode\"\r\n                            (ngModelChange)=\"onFormChanged(variant)\"\r\n                        ></vdr-currency-input>\r\n                    </clr-input-container>\r\n                    <span *ngIf=\"variant.existing\">{{ variant.price | localeCurrency: currencyCode }}</span>\r\n                </div>\r\n            </td>\r\n            <td>\r\n                <div class=\"flex center\">\r\n                    <clr-input-container *ngIf=\"!variant.existing\">\r\n                        <input\r\n                            clrInput\r\n                            type=\"number\"\r\n                            [(ngModel)]=\"variant.stock\"\r\n                            name=\"stock\"\r\n                            min=\"0\"\r\n                            step=\"1\"\r\n                            (ngModelChange)=\"onFormChanged(variant)\"\r\n                        />\r\n                    </clr-input-container>\r\n                    <span *ngIf=\"variant.existing\">{{ variant.stock }}</span>\r\n                </div>\r\n            </td>\r\n            <td>\r\n                <vdr-dropdown *ngIf=\"variant.productVariantId as productVariantId\">\r\n                    <button class=\"icon-button\" vdrDropdownTrigger>\r\n                        <clr-icon shape=\"ellipsis-vertical\"></clr-icon>\r\n                    </button>\r\n                    <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"delete-button\"\r\n                            (click)=\"deleteVariant(productVariantId, variant.options)\"\r\n                            vdrDropdownItem\r\n                        >\r\n                            <clr-icon shape=\"trash\" class=\"is-danger\"></clr-icon>\r\n                            {{ 'common.delete' | translate }}\r\n                        </button>\r\n                    </vdr-dropdown-menu>\r\n                </vdr-dropdown>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.Default,
                     styles: [".option-groups{display:flex}.option-groups:first-of-type{margin-top:24px}.values{flex:1;margin:0 6px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"]
                 },] }
@@ -3976,7 +4079,14 @@
             this.generateVariants();
         };
         GenerateProductVariantsComponent.prototype.addOption = function () {
+            var _this = this;
             this.optionGroups.push({ name: '', values: [] });
+            var index = this.optionGroups.length - 1;
+            setTimeout(function () {
+                var _a;
+                var input = (_a = _this.groupNameInputs.get(index)) === null || _a === void 0 ? void 0 : _a.nativeElement;
+                input === null || input === void 0 ? void 0 : input.focus();
+            });
         };
         GenerateProductVariantsComponent.prototype.removeOption = function (name) {
             this.optionGroups = this.optionGroups.filter(function (g) { return g.name !== name; });
@@ -4028,7 +4138,7 @@
     GenerateProductVariantsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-generate-product-variants',
-                    template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            placeholder=\"e.g. Size\"\r\n            clrInput\r\n            [(ngModel)]=\"group.name\"\r\n            name=\"name\"\r\n            required\r\n            (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\r\n        />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div class=\"remove-group\">\r\n        <button\r\n            class=\"btn btn-icon btn-warning-outline\"\r\n            [title]=\"'catalog.remove-option' | translate\"\r\n            (click)=\"removeOption(group.name)\"\r\n        >\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"btn btn-primary-outline btn-sm\" (click)=\"addOption()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tr\r\n            *ngFor=\"let variant of variants; trackBy: trackByFn\"\r\n            [class.disabled]=\"!variantFormValues[variant.id].enabled\"\r\n        >\r\n            <td *ngIf=\"1 < variants.length\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    (change)=\"onFormChange()\"\r\n                    [(ngModel)]=\"variantFormValues[variant.id].enabled\"\r\n                    clrCheckbox\r\n                />\r\n            </td>\r\n            <td *ngIf=\"1 < variants.length\">\r\n                {{ variant.values.join(' ') }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        (change)=\"onFormChange()\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variantFormValues[variant.id].price\"\r\n                        (ngModelChange)=\"onFormChange()\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].stock\"\r\n                        (change)=\"onFormChange()\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n",
+                    template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            #optionGroupName\r\n            placeholder=\"e.g. Size\"\r\n            clrInput\r\n            [(ngModel)]=\"group.name\"\r\n            name=\"name\"\r\n            required\r\n            (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\r\n        />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            (edit)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div class=\"remove-group\">\r\n        <button\r\n            class=\"btn btn-icon btn-warning-outline\"\r\n            [title]=\"'catalog.remove-option' | translate\"\r\n            (click)=\"removeOption(group.name)\"\r\n        >\r\n            <clr-icon shape=\"trash\"></clr-icon>\r\n        </button>\r\n    </div>\r\n</div>\r\n<button class=\"btn btn-primary-outline btn-sm\" (click)=\"addOption()\">\r\n    <clr-icon shape=\"plus\"></clr-icon>\r\n    {{ 'catalog.add-option' | translate }}\r\n</button>\r\n\r\n<div class=\"variants-preview\">\r\n    <table class=\"table\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'common.create' | translate }}</th>\r\n                <th *ngIf=\"1 < variants.length\">{{ 'catalog.variant' | translate }}</th>\r\n                <th>{{ 'catalog.sku' | translate }}</th>\r\n                <th>{{ 'catalog.price' | translate }}</th>\r\n                <th>{{ 'catalog.stock-on-hand' | translate }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tr\r\n            *ngFor=\"let variant of variants; trackBy: trackByFn\"\r\n            [class.disabled]=\"!variantFormValues[variant.id].enabled\"\r\n        >\r\n            <td *ngIf=\"1 < variants.length\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    (change)=\"onFormChange()\"\r\n                    [(ngModel)]=\"variantFormValues[variant.id].enabled\"\r\n                    clrCheckbox\r\n                />\r\n            </td>\r\n            <td *ngIf=\"1 < variants.length\">\r\n                {{ variant.values.join(' ') }}\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"text\"\r\n                        (change)=\"onFormChange()\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].sku\"\r\n                        [placeholder]=\"'catalog.sku' | translate\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <vdr-currency-input\r\n                        clrInput\r\n                        [(ngModel)]=\"variantFormValues[variant.id].price\"\r\n                        (ngModelChange)=\"onFormChange()\"\r\n                        [currencyCode]=\"currencyCode\"\r\n                    ></vdr-currency-input>\r\n                </clr-input-container>\r\n            </td>\r\n            <td>\r\n                <clr-input-container>\r\n                    <input\r\n                        clrInput\r\n                        type=\"number\"\r\n                        [(ngModel)]=\"variantFormValues[variant.id].stock\"\r\n                        (change)=\"onFormChange()\"\r\n                        min=\"0\"\r\n                        step=\"1\"\r\n                    />\r\n                </clr-input-container>\r\n            </td>\r\n        </tr>\r\n    </table>\r\n</div>\r\n",
                     styles: [":host{display:block;margin-bottom:120px}.option-groups{display:flex}.values{flex:1;margin:0 6px}.remove-group{padding-top:18px}.variants-preview tr.disabled td{background-color:var(--color-component-bg-100);color:var(--color-grey-400)}\n"]
                 },] }
     ];
@@ -4036,7 +4146,8 @@
         { type: i2.DataService }
     ]; };
     GenerateProductVariantsComponent.propDecorators = {
-        variantsChange: [{ type: i0.Output }]
+        variantsChange: [{ type: i0.Output }],
+        groupNameInputs: [{ type: i0.ViewChildren, args: ['optionGroupName', { read: i0.ElementRef },] }]
     };
 
     var OPTION_VALUE_INPUT_VALUE_ACCESSOR = {
@@ -4048,11 +4159,23 @@
         function OptionValueInputComponent(changeDetector) {
             this.changeDetector = changeDetector;
             this.groupName = '';
+            this.add = new i0.EventEmitter();
+            this.remove = new i0.EventEmitter();
+            this.edit = new i0.EventEmitter();
             this.disabled = false;
             this.input = '';
             this.isFocussed = false;
             this.lastSelected = false;
+            this.editingIndex = -1;
         }
+        Object.defineProperty(OptionValueInputComponent.prototype, "optionValues", {
+            get: function () {
+                var _a, _b;
+                return (_b = (_a = this.formValue) !== null && _a !== void 0 ? _a : this.options) !== null && _b !== void 0 ? _b : [];
+            },
+            enumerable: false,
+            configurable: true
+        });
         OptionValueInputComponent.prototype.registerOnChange = function (fn) {
             this.onChangeFn = fn;
         };
@@ -4064,15 +4187,42 @@
             this.changeDetector.markForCheck();
         };
         OptionValueInputComponent.prototype.writeValue = function (obj) {
-            this.options = obj || [];
+            this.formValue = obj || [];
         };
         OptionValueInputComponent.prototype.focus = function () {
             this.textArea.nativeElement.focus();
         };
+        OptionValueInputComponent.prototype.editName = function (index, event) {
+            var _a;
+            var optionValue = this.optionValues[index];
+            if (!optionValue.locked && !optionValue.id) {
+                event.cancelBubble = true;
+                this.editingIndex = index;
+                var input_1 = (_a = this.nameInputs.get(index)) === null || _a === void 0 ? void 0 : _a.nativeElement;
+                setTimeout(function () { return input_1 === null || input_1 === void 0 ? void 0 : input_1.focus(); });
+            }
+        };
+        OptionValueInputComponent.prototype.updateOption = function (index, event) {
+            var optionValue = this.optionValues[index];
+            var newName = event.target.value;
+            if (optionValue) {
+                if (newName) {
+                    optionValue.name = newName;
+                    this.edit.emit({ index: index, option: optionValue });
+                }
+                this.editingIndex = -1;
+            }
+        };
         OptionValueInputComponent.prototype.removeOption = function (option) {
+            var _a;
             if (!option.locked) {
-                this.options = this.options.filter(function (o) { return o.name !== option.name; });
-                this.onChangeFn(this.options);
+                if (this.formValue) {
+                    this.formValue = (_a = this.formValue) === null || _a === void 0 ? void 0 : _a.filter(function (o) { return o.name !== option.name; });
+                    this.onChangeFn(this.formValue);
+                }
+                else {
+                    this.remove.emit(option);
+                }
             }
         };
         OptionValueInputComponent.prototype.handleKey = function (event) {
@@ -4100,9 +4250,28 @@
             this.addOptionValue();
         };
         OptionValueInputComponent.prototype.addOptionValue = function () {
-            this.options = unique.unique(__spreadArray(__spreadArray([], __read(this.options)), __read(this.parseInputIntoOptions(this.input))));
+            var e_1, _c;
+            var options = this.parseInputIntoOptions(this.input);
+            if (!this.formValue && this.options) {
+                try {
+                    for (var options_1 = __values(options), options_1_1 = options_1.next(); !options_1_1.done; options_1_1 = options_1.next()) {
+                        var option = options_1_1.value;
+                        this.add.emit(option);
+                    }
+                }
+                catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                finally {
+                    try {
+                        if (options_1_1 && !options_1_1.done && (_c = options_1.return)) _c.call(options_1);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                }
+            }
+            else {
+                this.formValue = unique.unique(__spreadArray(__spreadArray([], __read(this.formValue)), __read(options)));
+                this.onChangeFn(this.formValue);
+            }
             this.input = '';
-            this.onChangeFn(this.options);
         };
         OptionValueInputComponent.prototype.parseInputIntoOptions = function (input) {
             return input
@@ -4112,8 +4281,9 @@
                 .map(function (s) { return ({ name: s, locked: false }); });
         };
         OptionValueInputComponent.prototype.removeLastOption = function () {
-            if (!this.options[this.options.length - 1].locked) {
-                this.options = this.options.slice(0, this.options.length - 1);
+            if (this.optionValues.length) {
+                var option = this.optionValues[this.optionValues.length - 1];
+                this.removeOption(option);
             }
         };
         return OptionValueInputComponent;
@@ -4121,10 +4291,10 @@
     OptionValueInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'vdr-option-value-input',
-                    template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < options.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of options; last as isLast\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            {{ option.name }}\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n",
+                    template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < optionValues.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of optionValues; last as isLast; index as i\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            <span [hidden]=\"editingIndex !== i\">\r\n                <input\r\n                    #editNameInput\r\n                    type=\"text\"\r\n                    [ngModel]=\"option.name\"\r\n                    (blur)=\"updateOption(i, $event)\"\r\n                    (click)=\"$event.cancelBubble = true\"\r\n                />\r\n            </span>\r\n            <span\r\n                class=\"option-name\"\r\n                [class.editable]=\"!option.locked && !option.id\"\r\n                (click)=\"editName(i, $event)\" [hidden]=\"editingIndex === i\">{{ option.name }}</span>\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n",
                     changeDetection: i0.ChangeDetectionStrategy.Default,
                     providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR],
-                    styles: [".input-wrapper{background-color:#fff;border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}\n"]
+                    styles: [".input-wrapper{background-color:#fff;border-radius:3px!important;border:1px solid var(--color-grey-300)!important;cursor:text}.input-wrapper.focus{border-color:var(--color-primary-500)!important;box-shadow:0 0 1px 1px var(--color-primary-100)}.input-wrapper .chips{padding:5px}.input-wrapper textarea{border:none;width:100%;height:24px;margin-top:3px;padding:0 6px}.input-wrapper textarea:focus{outline:none}.input-wrapper textarea:disabled{background-color:var(--color-component-bg-100)}vdr-chip ::ng-deep .wrapper{margin:0 3px}vdr-chip.locked{opacity:.8}vdr-chip.selected ::ng-deep .wrapper{border-color:var(--color-warning-500)!important;box-shadow:0 0 1px 1px var(--color-warning-400);opacity:.6}vdr-chip .option-name.editable:hover{outline:1px solid var(--color-component-bg-300);outline-offset:1px;border-radius:1px}vdr-chip input{padding:0!important;margin-top:-2px;margin-bottom:-2px}\n"]
                 },] }
     ];
     OptionValueInputComponent.ctorParameters = function () { return [
@@ -4132,7 +4302,13 @@
     ]; };
     OptionValueInputComponent.propDecorators = {
         groupName: [{ type: i0.Input }],
-        textArea: [{ type: i0.ViewChild, args: ['textArea', { static: true },] }]
+        textArea: [{ type: i0.ViewChild, args: ['textArea', { static: true },] }],
+        nameInputs: [{ type: i0.ViewChildren, args: ['editNameInput', { read: i0.ElementRef },] }],
+        options: [{ type: i0.Input }],
+        add: [{ type: i0.Output }],
+        remove: [{ type: i0.Output }],
+        edit: [{ type: i0.Output }],
+        disabled: [{ type: i0.Input }]
     };
 
     var UpdateProductOptionDialogComponent = /** @class */ (function () {