@vendure/admin-ui 1.6.3 → 1.7.0

package/fesm2015/vendure-admin-ui-catalog.js

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Injectable, EventEmitter, Input, HostBinding, Output, ContentChild, TemplateRef, SkipSelf, Optional, forwardRef, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Injectable, EventEmitter, Input, HostBinding, Output, ContentChild, TemplateRef, SkipSelf, Optional, ViewChildren, ElementRef, forwardRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/router';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
 import * as i2 from '@vendure/admin-ui/core';
 import { BaseDetailComponent, ServerConfigService, NotificationService, DataService, BaseListComponent, SortOrder, LogicalOperator, DeletionResult, ModalService, Permission, unicodePatternValidator, findTranslation, getConfigArgValue, createUpdatedTranslatable, encodeConfigArgValue, LocalStorageService, FacetValueSelectorComponent, flattenFacetValues, JobState, JobQueueService, getDefaultUiLanguage, BaseEntityResolver, AssetType, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, AssetPickerDialogComponent, AssetPreviewDialogComponent, GlobalFlag, SharedModule } from '@vendure/admin-ui/core';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
-import { map, debounceTime, takeUntil, finalize, switchMap, filter, take, mergeMap, shareReplay, distinctUntilChanged, tap, mapTo, startWith, skipUntil, skip, withLatestFrom, delay, catchError } from 'rxjs/operators';
+import { map, debounceTime, takeUntil, finalize, switchMap, filter, take, mergeMap, shareReplay, distinctUntilChanged, tap, mapTo, startWith, skipUntil, skip, withLatestFrom, delay, defaultIfEmpty, catchError } from 'rxjs/operators';
 import { FormGroup, FormControl, FormBuilder, Validators, FormArray, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BehaviorSubject, combineLatest, EMPTY, Subject, merge, of, forkJoin, throwError, from } from 'rxjs';
 import { normalizeString } from '@vendure/common/lib/normalize-string';
@@ -2184,6 +2184,7 @@ class ProductVariantsEditorComponent {
         this.notificationService = notificationService;
         this.modalService = modalService;
         this.formValueChanged = false;
+        this.optionsChanged = false;
         this.generatedVariants = [];
     }
     ngOnInit() {
@@ -2209,16 +2210,105 @@ class ProductVariantsEditorComponent {
             ? marker('catalog.default-variant')
             : variant.options.map(o => o.name).join(' ');
     }
-    addOption() {
+    addOptionGroup() {
         this.optionGroups.push({
             isNew: true,
+            locked: false,
             name: '',
             values: [],
         });
+        this.optionsChanged = true;
     }
-    removeOption(optionGroup) {
-        this.optionGroups = this.optionGroups.filter(og => og !== optionGroup);
+    removeOptionGroup(optionGroup) {
+        const id = optionGroup.id;
+        if (optionGroup.isNew) {
+            this.optionGroups = this.optionGroups.filter(og => og !== optionGroup);
+            this.generateVariants();
+            this.optionsChanged = true;
+        }
+        else if (id) {
+            this.modalService
+                .dialog({
+                title: marker('catalog.confirm-delete-product-option-group'),
+                translationVars: { name: optionGroup.name },
+                buttons: [
+                    { type: 'secondary', label: marker('common.cancel') },
+                    { type: 'danger', label: marker('common.delete'), returnValue: true },
+                ],
+            })
+                .pipe(switchMap(val => {
+                if (val) {
+                    return this.dataService.product.removeOptionGroupFromProduct({
+                        optionGroupId: id,
+                        productId: this.product.id,
+                    });
+                }
+                else {
+                    return EMPTY;
+                }
+            }))
+                .subscribe(({ removeOptionGroupFromProduct }) => {
+                var _a;
+                if (removeOptionGroupFromProduct.__typename === 'Product') {
+                    this.notificationService.success(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 : '');
+                }
+            });
+        }
+    }
+    addOption(groupId, optionName) {
+        var _a;
+        (_a = this.optionGroups.find(g => g.id === groupId)) === null || _a === void 0 ? void 0 : _a.values.push({ name: optionName, locked: false });
         this.generateVariants();
+        this.optionsChanged = true;
+    }
+    removeOption(groupId, { id, name }) {
+        const optionGroup = this.optionGroups.find(g => g.id === groupId);
+        if (optionGroup) {
+            if (!id) {
+                optionGroup.values = optionGroup.values.filter(v => v.name !== name);
+                this.generateVariants();
+            }
+            else {
+                this.modalService
+                    .dialog({
+                    title: marker('catalog.confirm-delete-product-option'),
+                    translationVars: { name },
+                    buttons: [
+                        { type: 'secondary', label: marker('common.cancel') },
+                        { type: 'danger', label: marker('common.delete'), returnValue: true },
+                    ],
+                })
+                    .pipe(switchMap(val => {
+                    if (val) {
+                        return this.dataService.product.deleteProductOption(id);
+                    }
+                    else {
+                        return EMPTY;
+                    }
+                }))
+                    .subscribe(({ deleteProductOption }) => {
+                    var _a;
+                    if (deleteProductOption.result === DeletionResult.DELETED) {
+                        this.notificationService.success(marker('common.notify-delete-success'), {
+                            entity: 'ProductOption',
+                        });
+                        optionGroup.values = optionGroup.values.filter(v => v.id !== id);
+                        this.generateVariants();
+                        this.optionsChanged = true;
+                    }
+                    else {
+                        this.notificationService.error((_a = deleteProductOption.message) !== null && _a !== void 0 ? _a : '');
+                    }
+                });
+            }
+        }
     }
     generateVariants() {
         const groups = this.optionGroups.map(g => g.values);
@@ -2260,10 +2350,11 @@ class ProductVariantsEditorComponent {
             stock: 0,
         };
     }
-    deleteVariant(id) {
+    deleteVariant(id, options) {
         this.modalService
             .dialog({
             title: marker('catalog.confirm-delete-product-variant'),
+            translationVars: { name: options.map(o => o.name).join(' ') },
             buttons: [
                 { type: 'secondary', label: marker('common.cancel') },
                 { type: 'danger', label: marker('common.delete'), returnValue: true },
@@ -2298,12 +2389,14 @@ class ProductVariantsEditorComponent {
                     count: variants.length,
                 });
                 this.initOptionsAndVariants();
+                this.optionsChanged = false;
             },
         });
     }
     checkUniqueSkus() {
         const withDuplicateSkus = this.generatedVariants.filter((variant, index) => {
-            return this.generatedVariants.find(gv => gv.sku.trim() === variant.sku.trim() && gv !== variant);
+            return (variant.enabled &&
+                this.generatedVariants.find(gv => gv.sku.trim() === variant.sku.trim() && gv !== variant));
         });
         if (withDuplicateSkus.length) {
             return this.modalService
@@ -2386,7 +2479,7 @@ class ProductVariantsEditorComponent {
         return forkJoin(groupsIds.map(id => this.dataService.product
             .getProductOptionGroup(id)
             .mapSingle(data => data.productOptionGroup)
-            .pipe(filter(notNullOrUndefined))));
+            .pipe(filter(notNullOrUndefined)))).pipe(defaultIfEmpty([]));
     }
     createNewProductVariants(groups) {
         const options = groups
@@ -2434,15 +2527,20 @@ class ProductVariantsEditorComponent {
             .mapSingle(({ product }) => product)
             .subscribe(p => {
             this.product = p;
+            const allUsedOptionIds = p.variants.map(v => v.options.map(option => option.id)).flat();
+            const allUsedOptionGroupIds = p.variants
+                .map(v => v.options.map(option => option.groupId))
+                .flat();
             this.optionGroups = p.optionGroups.map(og => {
                 return {
                     id: og.id,
                     isNew: false,
                     name: og.name,
+                    locked: allUsedOptionGroupIds.includes(og.id),
                     values: og.options.map(o => ({
                         id: o.id,
                         name: o.name,
-                        locked: true,
+                        locked: allUsedOptionIds.includes(o.id),
                     })),
                 };
             });
@@ -2465,7 +2563,7 @@ class ProductVariantsEditorComponent {
 ProductVariantsEditorComponent.decorators = [
     { type: 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: 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"]
             },] }
@@ -3240,6 +3338,12 @@ class GenerateProductVariantsComponent {
     }
     addOption() {
         this.optionGroups.push({ name: '', values: [] });
+        const index = this.optionGroups.length - 1;
+        setTimeout(() => {
+            var _a;
+            const input = (_a = this.groupNameInputs.get(index)) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            input === null || input === void 0 ? void 0 : input.focus();
+        });
     }
     removeOption(name) {
         this.optionGroups = this.optionGroups.filter(g => g.name !== name);
@@ -3288,7 +3392,7 @@ class GenerateProductVariantsComponent {
 GenerateProductVariantsComponent.decorators = [
     { type: 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"]
             },] }
 ];
@@ -3296,7 +3400,8 @@ GenerateProductVariantsComponent.ctorParameters = () => [
     { type: DataService }
 ];
 GenerateProductVariantsComponent.propDecorators = {
-    variantsChange: [{ type: Output }]
+    variantsChange: [{ type: Output }],
+    groupNameInputs: [{ type: ViewChildren, args: ['optionGroupName', { read: ElementRef },] }]
 };
 
 const OPTION_VALUE_INPUT_VALUE_ACCESSOR = {
@@ -3308,10 +3413,18 @@ class OptionValueInputComponent {
     constructor(changeDetector) {
         this.changeDetector = changeDetector;
         this.groupName = '';
+        this.add = new EventEmitter();
+        this.remove = new EventEmitter();
+        this.edit = new EventEmitter();
         this.disabled = false;
         this.input = '';
         this.isFocussed = false;
         this.lastSelected = false;
+        this.editingIndex = -1;
+    }
+    get optionValues() {
+        var _a, _b;
+        return (_b = (_a = this.formValue) !== null && _a !== void 0 ? _a : this.options) !== null && _b !== void 0 ? _b : [];
     }
     registerOnChange(fn) {
         this.onChangeFn = fn;
@@ -3324,15 +3437,42 @@ class OptionValueInputComponent {
         this.changeDetector.markForCheck();
     }
     writeValue(obj) {
-        this.options = obj || [];
+        this.formValue = obj || [];
     }
     focus() {
         this.textArea.nativeElement.focus();
     }
+    editName(index, event) {
+        var _a;
+        const optionValue = this.optionValues[index];
+        if (!optionValue.locked && !optionValue.id) {
+            event.cancelBubble = true;
+            this.editingIndex = index;
+            const input = (_a = this.nameInputs.get(index)) === null || _a === void 0 ? void 0 : _a.nativeElement;
+            setTimeout(() => input === null || input === void 0 ? void 0 : input.focus());
+        }
+    }
+    updateOption(index, event) {
+        const optionValue = this.optionValues[index];
+        const newName = event.target.value;
+        if (optionValue) {
+            if (newName) {
+                optionValue.name = newName;
+                this.edit.emit({ index, option: optionValue });
+            }
+            this.editingIndex = -1;
+        }
+    }
     removeOption(option) {
+        var _a;
         if (!option.locked) {
-            this.options = this.options.filter(o => o.name !== option.name);
-            this.onChangeFn(this.options);
+            if (this.formValue) {
+                this.formValue = (_a = this.formValue) === null || _a === void 0 ? void 0 : _a.filter(o => o.name !== option.name);
+                this.onChangeFn(this.formValue);
+            }
+            else {
+                this.remove.emit(option);
+            }
         }
     }
     handleKey(event) {
@@ -3360,9 +3500,17 @@ class OptionValueInputComponent {
         this.addOptionValue();
     }
     addOptionValue() {
-        this.options = unique([...this.options, ...this.parseInputIntoOptions(this.input)]);
+        const options = this.parseInputIntoOptions(this.input);
+        if (!this.formValue && this.options) {
+            for (const option of options) {
+                this.add.emit(option);
+            }
+        }
+        else {
+            this.formValue = unique([...this.formValue, ...options]);
+            this.onChangeFn(this.formValue);
+        }
         this.input = '';
-        this.onChangeFn(this.options);
     }
     parseInputIntoOptions(input) {
         return input
@@ -3372,18 +3520,19 @@ class OptionValueInputComponent {
             .map(s => ({ name: s, locked: false }));
     }
     removeLastOption() {
-        if (!this.options[this.options.length - 1].locked) {
-            this.options = this.options.slice(0, this.options.length - 1);
+        if (this.optionValues.length) {
+            const option = this.optionValues[this.optionValues.length - 1];
+            this.removeOption(option);
         }
     }
 }
 OptionValueInputComponent.decorators = [
     { type: 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: 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 = () => [
@@ -3391,7 +3540,13 @@ OptionValueInputComponent.ctorParameters = () => [
 ];
 OptionValueInputComponent.propDecorators = {
     groupName: [{ type: Input }],
-    textArea: [{ type: ViewChild, args: ['textArea', { static: true },] }]
+    textArea: [{ type: ViewChild, args: ['textArea', { static: true },] }],
+    nameInputs: [{ type: ViewChildren, args: ['editNameInput', { read: ElementRef },] }],
+    options: [{ type: Input }],
+    add: [{ type: Output }],
+    remove: [{ type: Output }],
+    edit: [{ type: Output }],
+    disabled: [{ type: Input }]
 };
 
 class UpdateProductOptionDialogComponent {