@vendure/admin-ui 2.0.0-next.11 → 2.0.0-next.12

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, EventEmitter, Input, HostBinding, Output, TemplateRef, ContentChild, ViewChild, Injectable, SkipSelf, Optional, forwardRef, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, EventEmitter, Input, HostBinding, Output, TemplateRef, ContentChild, ViewChild, Injectable, SkipSelf, Optional, forwardRef, ElementRef, ViewChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i1$1 from '@vendure/admin-ui/core';
 import { BaseDetailComponent, BaseListComponent, SortOrder, LogicalOperator, DeletionResult, AssetPickerDialogComponent, AssetPreviewDialogComponent, Permission, unicodePatternValidator, findTranslation, getConfigArgValue, createUpdatedTranslatable, encodeConfigArgValue, FacetValueSelectorComponent, GlobalFlag, flattenFacetValues, JobState, getDefaultUiLanguage, BaseEntityResolver, AssetType, createResolveData, CanDeactivateDetailGuard, detailBreadcrumb, SharedModule } from '@vendure/admin-ui/core';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
-import { map, debounceTime, takeUntil, finalize, switchMap, startWith, distinctUntilChanged, tap, filter, catchError, take, mergeMap, shareReplay, mapTo, skipUntil, skip, withLatestFrom, delay } from 'rxjs/operators';
+import { map, debounceTime, takeUntil, finalize, switchMap, startWith, distinctUntilChanged, tap, filter, catchError, take, mergeMap, shareReplay, mapTo, skipUntil, skip, withLatestFrom, delay, defaultIfEmpty } from 'rxjs/operators';
 import * as i4 from '@angular/forms';
 import { FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR, FormArray } from '@angular/forms';
 import * as i5 from '@angular/common';
@@ -1774,10 +1774,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;
@@ -1790,15 +1798,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) {
@@ -1826,9 +1861,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
@@ -1838,21 +1881,35 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OptionValueInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionValueInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: { groupName: "groupName" }, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }], ngImport: i0, 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", 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"], components: [{ type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+OptionValueInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: { groupName: "groupName", options: "options", disabled: "disabled" }, outputs: { add: "add", remove: "remove", edit: "edit" }, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true, static: true }, { propertyName: "nameInputs", predicate: ["editNameInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < optionValues.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of optionValues; last as isLast; index as i\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            <span [hidden]=\"editingIndex !== i\">\r\n                <input\r\n                    #editNameInput\r\n                    type=\"text\"\r\n                    [ngModel]=\"option.name\"\r\n                    (blur)=\"updateOption(i, $event)\"\r\n                    (click)=\"$event.cancelBubble = true\"\r\n                />\r\n            </span>\r\n            <span\r\n                class=\"option-name\"\r\n                [class.editable]=\"!option.locked && !option.id\"\r\n                (click)=\"editName(i, $event)\" [hidden]=\"editingIndex === i\">{{ option.name }}</span>\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n", styles: [".input-wrapper{background-color:#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"], components: [{ type: i1$1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: OptionValueInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-option-value-input', changeDetection: ChangeDetectionStrategy.Default, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], 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", 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"] }]
+            args: [{ selector: 'vdr-option-value-input', changeDetection: ChangeDetectionStrategy.Default, providers: [OPTION_VALUE_INPUT_VALUE_ACCESSOR], template: "<div class=\"input-wrapper\" [class.focus]=\"isFocussed\" (click)=\"textArea.focus()\">\r\n    <div class=\"chips\" *ngIf=\"0 < optionValues.length\">\r\n        <vdr-chip\r\n            *ngFor=\"let option of optionValues; last as isLast; index as i\"\r\n            [icon]=\"option.locked ? 'lock' : 'times'\"\r\n            [class.selected]=\"isLast && lastSelected\"\r\n            [class.locked]=\"option.locked\"\r\n            [colorFrom]=\"groupName\"\r\n            (iconClick)=\"removeOption(option)\"\r\n        >\r\n            <span [hidden]=\"editingIndex !== i\">\r\n                <input\r\n                    #editNameInput\r\n                    type=\"text\"\r\n                    [ngModel]=\"option.name\"\r\n                    (blur)=\"updateOption(i, $event)\"\r\n                    (click)=\"$event.cancelBubble = true\"\r\n                />\r\n            </span>\r\n            <span\r\n                class=\"option-name\"\r\n                [class.editable]=\"!option.locked && !option.id\"\r\n                (click)=\"editName(i, $event)\" [hidden]=\"editingIndex === i\">{{ option.name }}</span>\r\n        </vdr-chip>\r\n    </div>\r\n    <textarea\r\n        #textArea\r\n        (keyup)=\"handleKey($event)\"\r\n        (focus)=\"isFocussed = true\"\r\n        (blur)=\"handleBlur()\"\r\n        [(ngModel)]=\"input\"\r\n        [disabled]=\"disabled\"\r\n    ></textarea>\r\n</div>\r\n", styles: [".input-wrapper{background-color:#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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { groupName: [{
                 type: Input
             }], 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
             }] } });
 
 const DEFAULT_VARIANT_CODE = '__DEFAULT_VARIANT__';
@@ -1871,6 +1928,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);
@@ -1917,12 +1980,15 @@ class GenerateProductVariantsComponent {
     }
 }
 GenerateProductVariantsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: GenerateProductVariantsComponent, deps: [{ token: i1$1.DataService }], target: i0.ɵɵFactoryTarget.Component });
-GenerateProductVariantsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: { variantsChange: "variantsChange" }, ngImport: i0, template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            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", 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"], components: [{ type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "translate": i5$1.TranslatePipe } });
+GenerateProductVariantsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: GenerateProductVariantsComponent, selector: "vdr-generate-product-variants", outputs: { variantsChange: "variantsChange" }, viewQueries: [{ propertyName: "groupNameInputs", predicate: ["optionGroupName"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div *ngFor=\"let group of optionGroups\" class=\"option-groups\">\r\n    <div class=\"name\">\r\n        <label>{{ 'catalog.option' | translate }}</label>\r\n        <input\r\n            #optionGroupName\r\n            placeholder=\"e.g. Size\"\r\n            clrInput\r\n            [(ngModel)]=\"group.name\"\r\n            name=\"name\"\r\n            required\r\n            (keydown.enter)=\"handleEnter($event, optionValueInputComponent)\"\r\n        />\r\n    </div>\r\n    <div class=\"values\">\r\n        <label>{{ 'catalog.option-values' | translate }}</label>\r\n        <vdr-option-value-input\r\n            #optionValueInputComponent\r\n            [(ngModel)]=\"group.values\"\r\n            (ngModelChange)=\"generateVariants()\"\r\n            (edit)=\"generateVariants()\"\r\n            [groupName]=\"group.name\"\r\n            [disabled]=\"group.name === ''\"\r\n        ></vdr-option-value-input>\r\n    </div>\r\n    <div class=\"remove-group\">\r\n        <button\r\n            class=\"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"], components: [{ type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "translate": i5$1.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: 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", 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"] }]
+            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            #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"] }]
         }], ctorParameters: function () { return [{ type: i1$1.DataService }]; }, propDecorators: { variantsChange: [{
                 type: Output
+            }], groupNameInputs: [{
+                type: ViewChildren,
+                args: ['optionGroupName', { read: ElementRef }]
             }] } });
 
 class ProductVariantsTableComponent {
@@ -3106,6 +3172,7 @@ class ProductVariantsEditorComponent {
         this.notificationService = notificationService;
         this.modalService = modalService;
         this.formValueChanged = false;
+        this.optionsChanged = false;
         this.generatedVariants = [];
     }
     ngOnInit() {
@@ -3131,16 +3198,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;
+    }
+    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 : '');
+                }
+            });
+        }
     }
-    removeOption(optionGroup) {
-        this.optionGroups = this.optionGroups.filter(og => og !== optionGroup);
+    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);
@@ -3182,10 +3338,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 },
@@ -3220,12 +3377,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
@@ -3308,7 +3467,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
@@ -3356,15 +3515,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),
                     })),
                 };
             });
@@ -3385,10 +3549,10 @@ class ProductVariantsEditorComponent {
     }
 }
 ProductVariantsEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsEditorComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1$1.DataService }, { token: ProductDetailService }, { token: i1$1.NotificationService }, { token: i1$1.ModalService }], target: i0.ɵɵFactoryTarget.Component });
-ProductVariantsEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantsEditorComponent, selector: "vdr-product-variants-editor", ngImport: i0, 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", 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"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName"] }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i5$1.TranslatePipe, "localeCurrency": i1$1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
+ProductVariantsEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductVariantsEditorComponent, selector: "vdr-product-variants-editor", ngImport: i0, 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", 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"], components: [{ type: i1$1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1$1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { type: i2.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i2.ClrInputContainer, selector: "clr-input-container" }, { type: i1$1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { type: i1$1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1$1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1$1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.ClrInput, selector: "[clrInput]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.ClrIconCustomTag, selector: "clr-icon" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i1$1.DropdownItemDirective, selector: "[vdrDropdownItem]" }], pipes: { "translate": i5$1.TranslatePipe, "localeCurrency": i1$1.LocaleCurrencyPipe }, changeDetection: i0.ChangeDetectionStrategy.Default });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductVariantsEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'vdr-product-variants-editor', changeDetection: ChangeDetectionStrategy.Default, 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", 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"] }]
+            args: [{ selector: 'vdr-product-variants-editor', changeDetection: ChangeDetectionStrategy.Default, 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", 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"] }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1$1.DataService }, { type: ProductDetailService }, { type: i1$1.NotificationService }, { type: i1$1.ModalService }]; } });
 
 class AssetResolver extends BaseEntityResolver {