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

package/package/esm2020/catalog/components/generate-product-variants/generate-product-variants.component.mjs

@@ -0,0 +1,87 @@
+import { Component, ElementRef, EventEmitter, Output, ViewChildren } from '@angular/core';
+import { generateAllCombinations } from '@vendure/common/lib/shared-utils';
+import * as i0 from "@angular/core";
+import * as i1 from "@vendure/admin-ui/core";
+import * as i2 from "../option-value-input/option-value-input.component";
+import * as i3 from "@clr/angular";
+import * as i4 from "@angular/common";
+import * as i5 from "@angular/forms";
+import * as i6 from "@ngx-translate/core";
+const DEFAULT_VARIANT_CODE = '__DEFAULT_VARIANT__';
+export class GenerateProductVariantsComponent {
+    constructor(dataService) {
+        this.dataService = dataService;
+        this.variantsChange = new EventEmitter();
+        this.optionGroups = [];
+        this.variantFormValues = {};
+    }
+    ngOnInit() {
+        this.dataService.settings.getActiveChannel().single$.subscribe(data => {
+            this.currencyCode = data.activeChannel.currencyCode;
+        });
+        this.generateVariants();
+    }
+    addOption() {
+        this.optionGroups.push({ name: '', values: [] });
+        const index = this.optionGroups.length - 1;
+        setTimeout(() => {
+            const input = this.groupNameInputs.get(index)?.nativeElement;
+            input?.focus();
+        });
+    }
+    removeOption(name) {
+        this.optionGroups = this.optionGroups.filter(g => g.name !== name);
+        this.generateVariants();
+    }
+    generateVariants() {
+        const totalValuesCount = this.optionGroups.reduce((sum, group) => sum + group.values.length, 0);
+        const groups = totalValuesCount
+            ? this.optionGroups.map(g => g.values.map(v => v.name))
+            : [[DEFAULT_VARIANT_CODE]];
+        this.variants = generateAllCombinations(groups).map(values => ({ id: values.join('|'), values }));
+        this.variants.forEach(variant => {
+            if (!this.variantFormValues[variant.id]) {
+                this.variantFormValues[variant.id] = {
+                    optionValues: variant.values,
+                    enabled: true,
+                    price: this.copyFromDefault(variant.id, 'price', 0),
+                    sku: this.copyFromDefault(variant.id, 'sku', ''),
+                    stock: this.copyFromDefault(variant.id, 'stock', 0),
+                };
+            }
+        });
+        this.onFormChange();
+    }
+    trackByFn(index, variant) {
+        return variant.values.join('|');
+    }
+    handleEnter(event, optionValueInputComponent) {
+        event.preventDefault();
+        event.stopPropagation();
+        optionValueInputComponent.focus();
+    }
+    onFormChange() {
+        const variantsToCreate = this.variants.map(v => this.variantFormValues[v.id]).filter(v => v.enabled);
+        this.variantsChange.emit({
+            groups: this.optionGroups.map(og => ({ name: og.name, values: og.values.map(v => v.name) })),
+            variants: variantsToCreate,
+        });
+    }
+    copyFromDefault(variantId, prop, value) {
+        return variantId !== DEFAULT_VARIANT_CODE
+            ? this.variantFormValues[DEFAULT_VARIANT_CODE][prop]
+            : value;
+    }
+}
+GenerateProductVariantsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: GenerateProductVariantsComponent, deps: [{ token: i1.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" }, 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: i2.OptionValueInputComponent, selector: "vdr-option-value-input", inputs: ["groupName", "options", "disabled"], outputs: ["add", "remove", "edit"] }, { type: i3.ClrInputContainer, selector: "clr-input-container" }, { type: i1.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i5.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: i3.ClrInput, selector: "[clrInput]" }, { type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.ClrIconCustomTag, selector: "clr-icon" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }], pipes: { "translate": i6.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            #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.DataService }]; }, propDecorators: { variantsChange: [{
+                type: Output
+            }], groupNameInputs: [{
+                type: ViewChildren,
+                args: ['optionGroupName', { read: ElementRef }]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2VuZXJhdGUtcHJvZHVjdC12YXJpYW50cy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NhdGFsb2cvc3JjL2NvbXBvbmVudHMvZ2VuZXJhdGUtcHJvZHVjdC12YXJpYW50cy9nZW5lcmF0ZS1wcm9kdWN0LXZhcmlhbnRzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY2F0YWxvZy9zcmMvY29tcG9uZW50cy9nZW5lcmF0ZS1wcm9kdWN0LXZhcmlhbnRzL2dlbmVyYXRlLXByb2R1Y3QtdmFyaWFudHMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFVLE1BQU0sRUFBYSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFN0csT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sa0NBQWtDLENBQUM7Ozs7Ozs7O0FBSTNFLE1BQU0sb0JBQW9CLEdBQUcscUJBQXFCLENBQUM7QUFrQm5ELE1BQU0sT0FBTyxnQ0FBZ0M7SUFPekMsWUFBb0IsV0FBd0I7UUFBeEIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFObEMsbUJBQWMsR0FBRyxJQUFJLFlBQVksRUFBK0IsQ0FBQztRQUUzRSxpQkFBWSxHQUE4RSxFQUFFLENBQUM7UUFHN0Ysc0JBQWlCLEdBQTBDLEVBQUUsQ0FBQztJQUNmLENBQUM7SUFFaEQsUUFBUTtRQUNKLElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLGdCQUFnQixFQUFFLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUNsRSxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDO1FBQ3hELENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDNUIsQ0FBQztJ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T25Jbml0LCBPdXRwdXQsIFF1ZXJ5TGlzdCwgVmlld0NoaWxkcmVuIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDdXJyZW5jeUNvZGUsIERhdGFTZXJ2aWNlIH0gZnJvbSAnQHZlbmR1cmUvYWRtaW4tdWkvY29yZSc7XG5pbXBvcnQgeyBnZW5lcmF0ZUFsbENvbWJpbmF0aW9ucyB9IGZyb20gJ0B2ZW5kdXJlL2NvbW1vbi9saWIvc2hhcmVkLXV0aWxzJztcblxuaW1wb3J0IHsgT3B0aW9uVmFsdWVJbnB1dENvbXBvbmVudCB9IGZyb20gJy4uL29wdGlvbi12YWx1ZS1pbnB1dC9vcHRpb24tdmFsdWUtaW5wdXQuY29tcG9uZW50JztcblxuY29uc3QgREVGQVVMVF9WQVJJQU5UX0NPREUgPSAnX19ERUZBVUxUX1ZBUklBTlRfXyc7XG5leHBvcnQgdHlwZSBDcmVhdGVWYXJpYW50VmFsdWVzID0ge1xuICAgIG9wdGlvblZhbHVlczogc3RyaW5nW107XG4gICAgZW5hYmxlZDogYm9vbGVhbjtcbiAgICBza3U6IHN0cmluZztcbiAgICBwcmljZTogbnVtYmVyO1xuICAgIHN0b2NrOiBudW1iZXI7XG59O1xuZXhwb3J0IHR5cGUgQ3JlYXRlUHJvZHVjdFZhcmlhbnRzQ29uZmlnID0ge1xuICAgIGdyb3VwczogQXJyYXk8eyBuYW1lOiBzdHJpbmc7IHZhbHVlczogc3RyaW5nW10gfT47XG4gICAgdmFyaWFudHM6IENyZWF0ZVZhcmlhbnRWYWx1ZXNbXTtcbn07XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAndmRyLWdlbmVyYXRlLXByb2R1Y3QtdmFyaWFudHMnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9nZW5lcmF0ZS1wcm9kdWN0LXZhcmlhbnRzLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9nZW5lcmF0ZS1wcm9kdWN0LXZhcmlhbnRzLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEdlbmVyYXRlUHJvZHVjdFZhcmlhbnRzQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgICBAT3V0cHV0KCkgdmFyaWFudHNDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPENyZWF0ZVByb2R1Y3RWYXJpYW50c0NvbmZpZz4oKTtcbiAgICBAVmlld0NoaWxkcmVuKCdvcHRpb25Hcm91cE5hbWUnLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSkgZ3JvdXBOYW1lSW5wdXRzOiBRdWVyeUxpc3Q8RWxlbWVudFJlZj47XG4gICAgb3B0aW9uR3JvdXBzOiBBcnJheTx7IG5hbWU6IHN0cmluZzsgdmFsdWVzOiBBcnJheTx7IG5hbWU6IHN0cmluZzsgbG9ja2VkOiBib29sZWFuIH0+IH0+ID0gW107XG4gICAgY3VycmVuY3lDb2RlOiBDdXJyZW5jeUNvZGU7XG4gICAgdmFyaWFudHM6IEFycmF5PHsgaWQ6IHN0cmluZzsgdmFsdWVzOiBzdHJpbmdbXSB9PjtcbiAgICB2YXJpYW50Rm9ybVZhbHVlczogeyBbaWQ6IHN0cmluZ106IENyZWF0ZVZhcmlhbnRWYWx1ZXMgfSA9IHt9O1xuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgZGF0YVNlcnZpY2U6IERhdGFTZXJ2aWNlKSB7fVxuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIHRoaXMuZGF0YVNlcnZpY2Uuc2V0dGluZ3MuZ2V0QWN0aXZlQ2hhbm5lbCgpLnNpbmdsZSQuc3Vic2NyaWJlKGRhdGEgPT4ge1xuICAgICAgICAgICAgdGhpcy5jdXJyZW5jeUNvZGUgPSBkYXRhLmFjdGl2ZUNoYW5uZWwuY3VycmVuY3lDb2RlO1xuICAgICAgICB9KTtcblxuICAgICAgICB0aGlzLmdlbmVyYXRlVmFyaWFudHMoKTtcbiAgICB9XG5cbiAgICBhZGRPcHRpb24oKSB7XG4gICAgICAgIHRoaXMub3B0aW9uR3JvdXBzLnB1c2goeyBuYW1lOiAnJywgdmFsdWVzOiBbXSB9KTtcbiAgICAgICAgY29uc3QgaW5kZXggPSB0aGlzLm9wdGlvbkdyb3Vwcy5sZW5ndGggLSAxO1xuICAgICAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgICAgIGNvbnN0IGlucHV0ID0gdGhpcy5ncm91cE5hbWVJbnB1dHMuZ2V0KGluZGV4KT8ubmF0aXZlRWxlbWVudDtcbiAgICAgICAgICAgIGlucHV0Py5mb2N1cygpO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICByZW1vdmVPcHRpb24obmFtZTogc3RyaW5nKSB7XG4gICAgICAgIHRoaXMub3B0aW9uR3JvdXBzID0gdGhpcy5vcHRpb25Hcm91cHMuZmlsdGVyKGcgPT4gZy5uYW1lICE9PSBuYW1lKTtcbiAgICAgICAgdGhpcy5nZW5lcmF0ZVZhcmlhbnRzKCk7XG4gICAgfVxuXG4gICAgZ2VuZXJhdGVWYXJpYW50cygpIHtcbiAgICAgICAgY29uc3QgdG90YWxWYWx1ZXNDb3VudCA9IHRoaXMub3B0aW9uR3JvdXBzLnJlZHVjZSgoc3VtLCBncm91cCkgPT4gc3VtICsgZ3JvdXAudmFsdWVzLmxlbmd0aCwgMCk7XG4gICAgICAgIGNvbnN0IGdyb3VwcyA9IHRvdGFsVmFsdWVzQ291bnRcbiAgICAgICAgICAgID8gdGhpcy5vcHRpb25Hcm91cHMubWFwKGcgPT4gZy52YWx1ZXMubWFwKHYgPT4gdi5uYW1lKSlcbiAgICAgICAgICAgIDogW1tERUZBVUxUX1ZBUklBTlRfQ09ERV1dO1xuICAgICAgICB0aGlzLnZhcmlhbnRzID0gZ2VuZXJhdGVBbGxDb21iaW5hdGlvbnMoZ3JvdXBzKS5tYXAodmFsdWVzID0+ICh7IGlkOiB2YWx1ZXMuam9pbignfCcpLCB2YWx1ZXMgfSkpO1xuXG4gICAgICAgIHRoaXMudmFyaWFudHMuZm9yRWFjaCh2YXJpYW50ID0+IHtcbiAgICAgICAgICAgIGlmICghdGhpcy52YXJpYW50Rm9ybVZhbHVlc1t2YXJpYW50LmlkXSkge1xuICAgICAgICAgICAgICAgIHRoaXMudmFyaWFudEZvcm1WYWx1ZXNbdmFyaWFudC5pZF0gPSB7XG4gICAgICAgICAgICAgICAgICAgIG9wdGlvblZhbHVlczogdmFyaWFudC52YWx1ZXMsXG4gICAgICAgICAgICAgICAgICAgIGVuYWJsZWQ6IHRydWUsXG4gICAgICAgICAgICAgICAgICAgIHByaWNlOiB0aGlzLmNvcHlGcm9tRGVmYXVsdCh2YXJpYW50LmlkLCAncHJpY2UnLCAwKSxcbiAgICAgICAgICAgICAgICAgICAgc2t1OiB0aGlzLmNvcHlGcm9tRGVmYXVsdCh2YXJpYW50LmlkLCAnc2t1JywgJycpLFxuICAgICAgICAgICAgICAgICAgICBzdG9jazogdGhpcy5jb3B5RnJvbURlZmF1bHQodmFyaWFudC5pZCwgJ3N0b2NrJywgMCksXG4gICAgICAgICAgICAgICAgfTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgICAgIHRoaXMub25Gb3JtQ2hhbmdlKCk7XG4gICAgfVxuXG4gICAgdHJhY2tCeUZuKGluZGV4OiBudW1iZXIsIHZhcmlhbnQ6IHsgbmFtZTogc3RyaW5nOyB2YWx1ZXM6IHN0cmluZ1tdIH0pIHtcbiAgICAgICAgcmV0dXJuIHZhcmlhbnQudmFsdWVzLmpvaW4oJ3wnKTtcbiAgICB9XG5cbiAgICBoYW5kbGVFbnRlcihldmVudDogS2V5Ym9hcmRFdmVudCwgb3B0aW9uVmFsdWVJbnB1dENvbXBvbmVudDogT3B0aW9uVmFsdWVJbnB1dENvbXBvbmVudCkge1xuICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICAgICAgb3B0aW9uVmFsdWVJbnB1dENvbXBvbmVudC5mb2N1cygpO1xuICAgIH1cblxuICAgIG9uRm9ybUNoYW5nZSgpIHtcbiAgICAgICAgY29uc3QgdmFyaWFudHNUb0NyZWF0ZSA9IHRoaXMudmFyaWFudHMubWFwKHYgPT4gdGhpcy52YXJpYW50Rm9ybVZhbHVlc1t2LmlkXSkuZmlsdGVyKHYgPT4gdi5lbmFibGVkKTtcbiAgICAgICAgdGhpcy52YXJpYW50c0NoYW5nZS5lbWl0KHtcbiAgICAgICAgICAgIGdyb3VwczogdGhpcy5vcHRpb25Hcm91cHMubWFwKG9nID0+ICh7IG5hbWU6IG9nLm5hbWUsIHZhbHVlczogb2cudmFsdWVzLm1hcCh2ID0+IHYubmFtZSkgfSkpLFxuICAgICAgICAgICAgdmFyaWFudHM6IHZhcmlhbnRzVG9DcmVhdGUsXG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIHByaXZhdGUgY29weUZyb21EZWZhdWx0PFQgZXh0ZW5kcyBrZXlvZiBDcmVhdGVWYXJpYW50VmFsdWVzPihcbiAgICAgICAgdmFyaWFudElkOiBzdHJpbmcsXG4gICAgICAgIHByb3A6IFQsXG4gICAgICAgIHZhbHVlOiBDcmVhdGVWYXJpYW50VmFsdWVzW1RdLFxuICAgICk6IENyZWF0ZVZhcmlhbnRWYWx1ZXNbVF0ge1xuICAgICAgICByZXR1cm4gdmFyaWFudElkICE9PSBERUZBVUxUX1ZBUklBTlRfQ09ERVxuICAgICAgICAgICAgPyB0aGlzLnZhcmlhbnRGb3JtVmFsdWVzW0RFRkFVTFRfVkFSSUFOVF9DT0RFXVtwcm9wXVxuICAgICAgICAgICAgOiB2YWx1ZTtcbiAgICB9XG59XG4iLCI8ZGl2ICpuZ0Zvcj1cImxldCBncm91cCBvZiBvcHRpb25Hcm91cHNcIiBjbGFzcz1cIm9wdGlvbi1ncm91cHNcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJuYW1lXCI+XHJcbiAgICAgICAgPGxhYmVsPnt7ICdjYXRhbG9nLm9wdGlvbicgfCB0cmFuc2xhdGUgfX08L2xhYmVsPlxyXG4gICAgICAgIDxpbnB1dFxyXG4gICAgICAgICAgICAjb3B0aW9uR3JvdXBOYW1lXHJcbiAgICAgICAgICAgIHBsYWNlaG9sZGVyPVwiZS5nLiBTaXplXCJcclxuICAgICAgICAgICAgY2xySW5wdXRcclxuICAgICAgICAgICAgWyhuZ01vZGVsKV09XCJncm91cC5uYW1lXCJcclxuICAgICAgICAgICAgbmFtZT1cIm5hbWVcIlxyXG4gICAgICAgICAgICByZXF1aXJlZFxyXG4gICAgICAgICAgICAoa2V5ZG93bi5lbnRlcik9XCJoYW5kbGVFbnRlcigkZXZlbnQsIG9wdGlvblZhbHVlSW5wdXRDb21wb25lbnQpXCJcclxuICAgICAgICAvPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8ZGl2IGNsYXNzPVwidmFsdWVzXCI+XHJcbiAgICAgICAgPGxhYmVsPnt7ICdjYXRhbG9nLm9wdGlvbi12YWx1ZXMnIHwgdHJhbnNsYXRlIH19PC9sYWJlbD5cclxuICAgICAgICA8dmRyLW9wdGlvbi12YWx1ZS1pbnB1dFxyXG4gICAgICAgICAgICAjb3B0aW9uVmFsdWVJbnB1dENvbXBvbmVudFxyXG4gICAgICAgICAgICBbKG5nTW9kZWwpXT1cImdyb3VwLnZhbHVlc1wiXHJcbiAgICAgICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cImdlbmVyYXRlVmFyaWFudHMoKVwiXHJcbiAgICAgICAgICAgIChlZGl0KT1cImdlbmVyYXRlVmFyaWFudHMoKVwiXHJcbiAgICAgICAgICAgIFtncm91cE5hbWVdPVwiZ3JvdXAubmFtZVwiXHJcbiAgICAgICAgICAgIFtkaXNhYmxlZF09XCJncm91cC5uYW1lID09PSAnJ1wiXHJcbiAgICAgICAgPjwvdmRyLW9wdGlvbi12YWx1ZS1pbnB1dD5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cInJlbW92ZS1ncm91cFwiPlxyXG4gICAgICAgIDxidXR0b25cclxuICAgICAgICAgICAgY2xhc3M9XCJidG4gYnRuLWljb24gYnRuLXdhcm5pbmctb3V0bGluZVwiXHJcbiAgICAgICAgICAgIFt0aXRsZV09XCInY2F0YWxvZy5yZW1vdmUtb3B0aW9uJyB8IHRyYW5zbGF0ZVwiXHJcbiAgICAgICAgICAgIChjbGljayk9XCJyZW1vdmVPcHRpb24oZ3JvdXAubmFtZSlcIlxyXG4gICAgICAgID5cclxuICAgICAgICAgICAgPGNsci1pY29uIHNoYXBlPVwidHJhc2hcIj48L2Nsci1pY29uPlxyXG4gICAgICAgIDwvYnV0dG9uPlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG48YnV0dG9uIGNsYXNzPVwiYnRuIGJ0bi1wcmltYXJ5LW91dGxpbmUgYnRuLXNtXCIgKGNsaWNrKT1cImFkZE9wdGlvbigpXCI+XHJcbiAgICA8Y2xyLWljb24gc2hhcGU9XCJwbHVzXCI+PC9jbHItaWNvbj5cclxuICAgIHt7ICdjYXRhbG9nLmFkZC1vcHRpb24nIHwgdHJhbnNsYXRlIH19XHJcbjwvYnV0dG9uPlxyXG5cclxuPGRpdiBjbGFzcz1cInZhcmlhbnRzLXByZXZpZXdcIj5cclxuICAgIDx0YWJsZSBjbGFzcz1cInRhYmxlXCI+XHJcbiAgICAgICAgPHRoZWFkPlxyXG4gICAgICAgICAgICA8dHI+XHJcbiAgICAgICAgICAgICAgICA8dGggKm5nSWY9XCIxIDwgdmFyaWFudHMubGVuZ3RoXCI+e3sgJ2NvbW1vbi5jcmVhdGUnIHwgdHJhbnNsYXRlIH19PC90aD5cclxuICAgICAgICAgICAgICAgIDx0aCAqbmdJZj1cIjEgPCB2YXJpYW50cy5sZW5ndGhcIj57eyAnY2F0YWxvZy52YXJpYW50JyB8IHRyYW5zbGF0ZSB9fTwvdGg+XHJcbiAgICAgICAgICAgICAgICA8dGg+e3sgJ2NhdGFsb2cuc2t1JyB8IHRyYW5zbGF0ZSB9fTwvdGg+XHJcbiAgICAgICAgICAgICAgICA8dGg+e3sgJ2NhdGFsb2cucHJpY2UnIHwgdHJhbnNsYXRlIH19PC90aD5cclxuICAgICAgICAgICAgICAgIDx0aD57eyAnY2F0YWxvZy5zdG9jay1vbi1oYW5kJyB8IHRyYW5zbGF0ZSB9fTwvdGg+XHJcbiAgICAgICAgICAgIDwvdHI+XHJcbiAgICAgICAgPC90aGVhZD5cclxuICAgICAgICA8dHJcclxuICAgICAgICAgICAgKm5nRm9yPVwibGV0IHZhcmlhbnQgb2YgdmFyaWFudHM7IHRyYWNrQnk6IHRyYWNrQnlGblwiXHJcbiAgICAgICAgICAgIFtjbGFzcy5kaXNhYmxlZF09XCIhdmFyaWFudEZvcm1WYWx1ZXNbdmFyaWFudC5pZF0uZW5hYmxlZFwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgICAgICA8dGQgKm5nSWY9XCIxIDwgdmFyaWFudHMubGVuZ3RoXCI+XHJcbiAgICAgICAgICAgICAgICA8aW5wdXRcclxuICAgICAgICAgICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxyXG4gICAgICAgICAgICAgICAgICAgIChjaGFuZ2UpPVwib25Gb3JtQ2hhbmdlKClcIlxyXG4gICAgICAgICAgICAgICAgICAgIFsobmdNb2RlbCldPVwidmFyaWFudEZvcm1WYWx1ZXNbdmFyaWFudC5pZF0uZW5hYmxlZFwiXHJcbiAgICAgICAgICAgICAgICAgICAgY2xyQ2hlY2tib3hcclxuICAgICAgICAgICAgICAgIC8+XHJcbiAgICAgICAgICAgIDwvdGQ+XHJcbiAgICAgICAgICAgIDx0ZCAqbmdJZj1cIjEgPCB2YXJpYW50cy5sZW5ndGhcIj5cclxuICAgICAgICAgICAgICAgIHt7IHZhcmlhbnQudmFsdWVzLmpvaW4oJyAnKSB9fVxyXG4gICAgICAgICAgICA8L3RkPlxyXG4gICAgICAgICAgICA8dGQ+XHJcbiAgICAgICAgICAgICAgICA8Y2xyLWlucHV0LWNvbnRhaW5lcj5cclxuICAgICAgICAgICAgICAgICAgICA8aW5wdXRcclxuICAgICAgICAgICAgICAgICAgICAgICAgY2xySW5wdXRcclxuICAgICAgICAgICAgICAgICAgICAgICAgdHlwZT1cInRleHRcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAoY2hhbmdlKT1cIm9uRm9ybUNoYW5nZSgpXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgWyhuZ01vZGVsKV09XCJ2YXJpYW50Rm9ybVZhbHVlc1t2YXJpYW50LmlkXS5za3VcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBbcGxhY2Vob2xkZXJdPVwiJ2NhdGFsb2cuc2t1JyB8IHRyYW5zbGF0ZVwiXHJcbiAgICAgICAgICAgICAgICAgICAgLz5cclxuICAgICAgICAgICAgICAgIDwvY2xyLWlucHV0LWNvbnRhaW5lcj5cclxuICAgICAgICAgICAgPC90ZD5cclxuICAgICAgICAgICAgPHRkPlxyXG4gICAgICAgICAgICAgICAgPGNsci1pbnB1dC1jb250YWluZXI+XHJcbiAgICAgICAgICAgICAgICAgICAgPHZkci1jdXJyZW5jeS1pbnB1dFxyXG4gICAgICAgICAgICAgICAgICAgICAgICBjbHJJbnB1dFxyXG4gICAgICAgICAgICAgICAgICAgICAgICBbKG5nTW9kZWwpXT1cInZhcmlhbnRGb3JtVmFsdWVzW3ZhcmlhbnQuaWRdLnByaWNlXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwib25Gb3JtQ2hhbmdlKClcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBbY3VycmVuY3lDb2RlXT1cImN1cnJlbmN5Q29kZVwiXHJcbiAgICAgICAgICAgICAgICAgICAgPjwvdmRyLWN1cnJlbmN5LWlucHV0PlxyXG4gICAgICAgICAgICAgICAgPC9jbHItaW5wdXQtY29udGFpbmVyPlxyXG4gICAgICAgICAgICA8L3RkPlxyXG4gICAgICAgICAgICA8dGQ+XHJcbiAgICAgICAgICAgICAgICA8Y2xyLWlucHV0LWNvbnRhaW5lcj5cclxuICAgICAgICAgICAgICAgICAgICA8aW5wdXRcclxuICAgICAgICAgICAgICAgICAgICAgICAgY2xySW5wdXRcclxuICAgICAgICAgICAgICAgICAgICAgICAgdHlwZT1cIm51bWJlclwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIFsobmdNb2RlbCldPVwidmFyaWFudEZvcm1WYWx1ZXNbdmFyaWFudC5pZF0uc3RvY2tcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAoY2hhbmdlKT1cIm9uRm9ybUNoYW5nZSgpXCJcclxuICAgICAgICAgICAgICAgICAgICAgICAgbWluPVwiMFwiXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHN0ZXA9XCIxXCJcclxuICAgICAgICAgICAgICAgICAgICAvPlxyXG4gICAgICAgICAgICAgICAgPC9jbHItaW5wdXQtY29udGFpbmVyPlxyXG4gICAgICAgICAgICA8L3RkPlxyXG4gICAgICAgIDwvdHI+XHJcbiAgICA8L3RhYmxlPlxyXG48L2Rpdj5cclxuIl19

package/package/esm2020/catalog/components/option-value-input/option-value-input.component.mjs

@@ -0,0 +1,151 @@
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, forwardRef, Input, Output, ViewChild, ViewChildren, } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { unique } from '@vendure/common/lib/unique';
+import * as i0 from "@angular/core";
+import * as i1 from "@vendure/admin-ui/core";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/forms";
+export const OPTION_VALUE_INPUT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => OptionValueInputComponent),
+    multi: true,
+};
+export 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() {
+        return this.formValue ?? this.options ?? [];
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.changeDetector.markForCheck();
+    }
+    writeValue(obj) {
+        this.formValue = obj || [];
+    }
+    focus() {
+        this.textArea.nativeElement.focus();
+    }
+    editName(index, event) {
+        const optionValue = this.optionValues[index];
+        if (!optionValue.locked && !optionValue.id) {
+            event.cancelBubble = true;
+            this.editingIndex = index;
+            const input = this.nameInputs.get(index)?.nativeElement;
+            setTimeout(() => 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) {
+        if (!option.locked) {
+            if (this.formValue) {
+                this.formValue = this.formValue?.filter(o => o.name !== option.name);
+                this.onChangeFn(this.formValue);
+            }
+            else {
+                this.remove.emit(option);
+            }
+        }
+    }
+    handleKey(event) {
+        switch (event.key) {
+            case ',':
+            case 'Enter':
+                this.addOptionValue();
+                event.preventDefault();
+                break;
+            case 'Backspace':
+                if (this.lastSelected) {
+                    this.removeLastOption();
+                    this.lastSelected = false;
+                }
+                else if (this.input === '') {
+                    this.lastSelected = true;
+                }
+                break;
+            default:
+                this.lastSelected = false;
+        }
+    }
+    handleBlur() {
+        this.isFocussed = false;
+        this.addOptionValue();
+    }
+    addOptionValue() {
+        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 = '';
+    }
+    parseInputIntoOptions(input) {
+        return input
+            .split(/[,\n]/)
+            .map(s => s.trim())
+            .filter(s => s !== '')
+            .map(s => ({ name: s, locked: false }));
+    }
+    removeLastOption() {
+        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", 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.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.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 < 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
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9uLXZhbHVlLWlucHV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY2F0YWxvZy9zcmMvY29tcG9uZW50cy9vcHRpb24tdmFsdWUtaW5wdXQvb3B0aW9uLXZhbHVlLWlucHV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY2F0YWxvZy9zcmMvY29tcG9uZW50cy9vcHRpb24tdmFsdWUtaW5wdXQvb3B0aW9uLXZhbHVlLWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULFVBQVUsRUFDVixZQUFZLEVBQ1osVUFBVSxFQUNWLEtBQUssRUFHTCxNQUFNLEVBSU4sU0FBUyxFQUNULFlBQVksR0FDZixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekUsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLDRCQUE0QixDQUFDOzs7OztBQUVwRCxNQUFNLENBQUMsTUFBTSxpQ0FBaUMsR0FBYTtJQUN2RCxPQUFPLEVBQUUsaUJBQWlCO0lBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMseUJBQXlCLENBQUM7SUFDeEQsS0FBSyxFQUFFLElBQUk7Q0FDZCxDQUFDO0FBZUYsTUFBTSxPQUFPLHlCQUF5QjtJQXFCbEMsWUFBb0IsY0FBaUM7UUFBakMsbUJBQWMsR0FBZCxjQUFjLENBQW1CO1FBcEI1QyxjQUFTLEdBQUcsRUFBRSxDQUFDO1FBSWQsUUFBRyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDakMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDcEMsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFxQyxDQUFDO1FBQzlELGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDMUIsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQUNYLGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsaUJBQVksR0FBRyxLQUFLLENBQUM7UUFFckIsaUJBQVksR0FBRyxDQUFDLENBQUMsQ0FBQztJQVFzQyxDQUFDO0lBSnpELElBQUksWUFBWTtRQUNaLE9BQU8sSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsT0FBTyxJQUFJLEVBQUUsQ0FBQztJQUNoRCxDQUFDO0lBSUQsZ0JBQWdCLENBQUMsRUFBTztRQUNwQixJQUFJLENBQUMsVUFBVSxHQUFHLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBTztRQUNyQixJQUFJLENBQUMsU0FBUyxHQUFHLEVBQUUsQ0FBQztJQUN4QixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsVUFBbUI7UUFDaEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7UUFDM0IsSUFBSSxDQUFDLGNBQWMsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUN2QyxDQUFDO0lBRUQsVUFBVSxDQUFDLEdBQVE7UUFDZixJQUFJLENBQUMsU0FBUyxHQUFHLEdBQUcsSUFBSSxFQUFFLENBQUM7SUFDL0IsQ0FBQztJQUVELEtBQUs7UUFDRCxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUN4QyxDQUFDO0lBRUQsUUFBUSxDQUFDLEtBQWEsRUFBRSxLQUFpQjtRQUNyQyxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzdDLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQUUsRUFBRTtZQUN4QyxLQUFLLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztZQUMxQixJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztZQUMxQixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsRUFBRSxhQUFhLENBQUM7WUFDeEQsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLEtBQUssRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO1NBQ3BDO0lBQ0wsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFhLEVBQUUsS0FBaUI7UUFDekMsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM3QyxNQUFNLE9BQU8sR0FBSSxLQUFLLENBQUMsTUFBMkIsQ0FBQyxLQUFLLENBQUM7UUFDekQsSUFBSSxXQUFXLEVBQUU7WUFDYixJQUFJLE9BQU8sRUFBRTtnQkFDVCxXQUFXLENBQUMsSUFBSSxHQUFHLE9BQU8sQ0FBQztnQkFDM0IsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFdBQVcsRUFBRSxDQUFDLENBQUM7YUFDbEQ7WUFDRCxJQUFJLENBQUMsWUFBWSxHQUFHLENBQUMsQ0FBQyxDQUFDO1NBQzFCO0lBQ0wsQ0FBQztJQUVELFlBQVksQ0FBQyxNQUFjO1FBQ3ZCLElBQUksQ0FBQyxNQUFNLENBQUMsTUFBTSxFQUFFO1lBQ2hCLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtnQkFDaEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsU0FBUyxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLEtBQUssTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUNyRSxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQzthQUNuQztpQkFBTTtnQkFDSCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQzthQUM1QjtTQUNKO0lBQ0wsQ0FBQztJQUVELFNBQVMsQ0FBQyxLQUFvQjtRQUMxQixRQUFRLEtBQUssQ0FBQyxHQUFHLEVBQUU7WUFDZixLQUFLLEdBQUcsQ0FBQztZQUNULEtBQUssT0FBTztnQkFDUixJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7Z0JBQ3RCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztnQkFDdkIsTUFBTTtZQUNWLEtBQUssV0FBVztnQkFDWixJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUU7b0JBQ25CLElBQUksQ0FBQyxnQkFBZ0IsRUFBRSxDQUFDO29CQUN4QixJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztpQkFDN0I7cUJBQU0sSUFBSSxJQUFJLENBQUMsS0FBSyxLQUFLLEVBQUUsRUFBRTtvQkFDMUIsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7aUJBQzVCO2dCQUNELE1BQU07WUFDVjtnQkFDSSxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztTQUNqQztJQUNMLENBQUM7SUFFRCxVQUFVO1FBQ04sSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7UUFDeEIsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFTyxjQUFjO1FBQ2xCLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDdkQsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtZQUNqQyxLQUFLLE1BQU0sTUFBTSxJQUFJLE9BQU8sRUFBRTtnQkFDMUIsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7YUFDekI7U0FDSjthQUFNO1lBQ0gsSUFBSSxDQUFDLFNBQVMsR0FBRyxNQUFNLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxTQUFTLEVBQUUsR0FBRyxPQUFPLENBQUMsQ0FBQyxDQUFDO1lBQ3pELElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1NBQ25DO1FBQ0QsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVPLHFCQUFxQixDQUFDLEtBQWE7UUFDdkMsT0FBTyxLQUFLO2FBQ1AsS0FBSyxDQUFDLE9BQU8sQ0FBQzthQUNkLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQzthQUNsQixNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDO2FBQ3JCLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxJQUFJLEVBQUUsQ0FBQyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDaEQsQ0FBQztJQUVPLGdCQUFnQjtRQUNwQixJQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFO1lBQzFCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUM7WUFDL0QsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUM3QjtJQUNMLENBQUM7O3NIQWhJUSx5QkFBeUI7MEdBQXpCLHlCQUF5Qix3TEFGdkIsQ0FBQyxpQ0FBaUMsQ0FBQywwTUFLUCxVQUFVLDZCQzFDckQsbzVDQWtDQTsyRkRLYSx5QkFBeUI7a0JBUHJDLFNBQVM7K0JBQ0ksd0JBQXdCLG1CQUdqQix1QkFBdUIsQ0FBQyxPQUFPLGFBQ3JDLENBQUMsaUNBQWlDLENBQUM7d0dBR3JDLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ21DLFFBQVE7c0JBQWhELFNBQVM7dUJBQUMsVUFBVSxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFDYyxVQUFVO3NCQUE5RCxZQUFZO3VCQUFDLGVBQWUsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7Z0JBQzFDLE9BQU87c0JBQWYsS0FBSztnQkFDSSxHQUFHO3NCQUFaLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNO2dCQUNHLElBQUk7c0JBQWIsTUFBTTtnQkFDRSxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICBDb21wb25lbnQsXG4gICAgRWxlbWVudFJlZixcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgZm9yd2FyZFJlZixcbiAgICBJbnB1dCxcbiAgICBPbkNoYW5nZXMsXG4gICAgT25Jbml0LFxuICAgIE91dHB1dCxcbiAgICBQcm92aWRlcixcbiAgICBRdWVyeUxpc3QsXG4gICAgU2ltcGxlQ2hhbmdlcyxcbiAgICBWaWV3Q2hpbGQsXG4gICAgVmlld0NoaWxkcmVuLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENvbnRyb2xWYWx1ZUFjY2Vzc29yLCBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IHVuaXF1ZSB9IGZyb20gJ0B2ZW5kdXJlL2NvbW1vbi9saWIvdW5pcXVlJztcblxuZXhwb3J0IGNvbnN0IE9QVElPTl9WQUxVRV9JTlBVVF9WQUxVRV9BQ0NFU1NPUjogUHJvdmlkZXIgPSB7XG4gICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gT3B0aW9uVmFsdWVJbnB1dENvbXBvbmVudCksXG4gICAgbXVsdGk6IHRydWUsXG59O1xuXG5pbnRlcmZhY2UgT3B0aW9uIHtcbiAgICBpZD86IHN0cmluZztcbiAgICBuYW1lOiBzdHJpbmc7XG4gICAgbG9ja2VkOiBib29sZWFuO1xufVxuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3Zkci1vcHRpb24tdmFsdWUtaW5wdXQnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9vcHRpb24tdmFsdWUtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL29wdGlvbi12YWx1ZS1pbnB1dC5jb21wb25lbnQuc2NzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuRGVmYXVsdCxcbiAgICBwcm92aWRlcnM6IFtPUFRJT05fVkFMVUVfSU5QVVRfVkFMVUVfQUNDRVNTT1JdLFxufSlcbmV4cG9ydCBjbGFzcyBPcHRpb25WYWx1ZUlucHV0Q29tcG9uZW50IGltcGxlbWVudHMgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xuICAgIEBJbnB1dCgpIGdyb3VwTmFtZSA9ICcnO1xuICAgIEBWaWV3Q2hpbGQoJ3RleHRBcmVhJywgeyBzdGF0aWM6IHRydWUgfSkgdGV4dEFyZWE6IEVsZW1lbnRSZWY8SFRNTFRleHRBcmVhRWxlbWVudD47XG4gICAgQFZpZXdDaGlsZHJlbignZWRpdE5hbWVJbnB1dCcsIHsgcmVhZDogRWxlbWVudFJlZiB9KSBuYW1lSW5wdXRzOiBRdWVyeUxpc3Q8RWxlbWVudFJlZj47XG4gICAgQElucHV0KCkgb3B0aW9uczogT3B0aW9uW107XG4gICAgQE91dHB1dCgpIGFkZCA9IG5ldyBFdmVudEVtaXR0ZXI8T3B0aW9uPigpO1xuICAgIEBPdXRwdXQoKSByZW1vdmUgPSBuZXcgRXZlbnRFbWl0dGVyPE9wdGlvbj4oKTtcbiAgICBAT3V0cHV0KCkgZWRpdCA9IG5ldyBFdmVudEVtaXR0ZXI8eyBpbmRleDogbnVtYmVyOyBvcHRpb246IE9wdGlvbiB9PigpO1xuICAgIEBJbnB1dCgpIGRpc2FibGVkID0gZmFsc2U7XG4gICAgaW5wdXQgPSAnJztcbiAgICBpc0ZvY3Vzc2VkID0gZmFsc2U7XG4gICAgbGFzdFNlbGVjdGVkID0gZmFsc2U7XG4gICAgZm9ybVZhbHVlOiBPcHRpb25bXTtcbiAgICBlZGl0aW5nSW5kZXggPSAtMTtcbiAgICBvbkNoYW5nZUZuOiAodmFsdWU6IGFueSkgPT4gdm9pZDtcbiAgICBvblRvdWNoRm46ICh2YWx1ZTogYW55KSA9PiB2b2lkO1xuXG4gICAgZ2V0IG9wdGlvblZhbHVlcygpOiBPcHRpb25bXSB7XG4gICAgICAgIHJldHVybiB0aGlzLmZvcm1WYWx1ZSA/PyB0aGlzLm9wdGlvbnMgPz8gW107XG4gICAgfVxuXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBjaGFuZ2VEZXRlY3RvcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHt9XG5cbiAgICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5vbkNoYW5nZUZuID0gZm47XG4gICAgfVxuXG4gICAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgICAgICB0aGlzLm9uVG91Y2hGbiA9IGZuO1xuICAgIH1cblxuICAgIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgICAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgICAgICAgdGhpcy5jaGFuZ2VEZXRlY3Rvci5tYXJrRm9yQ2hlY2soKTtcbiAgICB9XG5cbiAgICB3cml0ZVZhbHVlKG9iajogYW55KTogdm9pZCB7XG4gICAgICAgIHRoaXMuZm9ybVZhbHVlID0gb2JqIHx8IFtdO1xuICAgIH1cblxuICAgIGZvY3VzKCkge1xuICAgICAgICB0aGlzLnRleHRBcmVhLm5hdGl2ZUVsZW1lbnQuZm9jdXMoKTtcbiAgICB9XG5cbiAgICBlZGl0TmFtZShpbmRleDogbnVtYmVyLCBldmVudDogTW91c2VFdmVudCkge1xuICAgICAgICBjb25zdCBvcHRpb25WYWx1ZSA9IHRoaXMub3B0aW9uVmFsdWVzW2luZGV4XTtcbiAgICAgICAgaWYgKCFvcHRpb25WYWx1ZS5sb2NrZWQgJiYgIW9wdGlvblZhbHVlLmlkKSB7XG4gICAgICAgICAgICBldmVudC5jYW5jZWxCdWJibGUgPSB0cnVlO1xuICAgICAgICAgICAgdGhpcy5lZGl0aW5nSW5kZXggPSBpbmRleDtcbiAgICAgICAgICAgIGNvbnN0IGlucHV0ID0gdGhpcy5uYW1lSW5wdXRzLmdldChpbmRleCk/Lm5hdGl2ZUVsZW1lbnQ7XG4gICAgICAgICAgICBzZXRUaW1lb3V0KCgpID0+IGlucHV0Py5mb2N1cygpKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHVwZGF0ZU9wdGlvbihpbmRleDogbnVtYmVyLCBldmVudDogSW5wdXRFdmVudCkge1xuICAgICAgICBjb25zdCBvcHRpb25WYWx1ZSA9IHRoaXMub3B0aW9uVmFsdWVzW2luZGV4XTtcbiAgICAgICAgY29uc3QgbmV3TmFtZSA9IChldmVudC50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudCkudmFsdWU7XG4gICAgICAgIGlmIChvcHRpb25WYWx1ZSkge1xuICAgICAgICAgICAgaWYgKG5ld05hbWUpIHtcbiAgICAgICAgICAgICAgICBvcHRpb25WYWx1ZS5uYW1lID0gbmV3TmFtZTtcbiAgICAgICAgICAgICAgICB0aGlzLmVkaXQuZW1pdCh7IGluZGV4LCBvcHRpb246IG9wdGlvblZhbHVlIH0pO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgdGhpcy5lZGl0aW5nSW5kZXggPSAtMTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIHJlbW92ZU9wdGlvbihvcHRpb246IE9wdGlvbikge1xuICAgICAgICBpZiAoIW9wdGlvbi5sb2NrZWQpIHtcbiAgICAgICAgICAgIGlmICh0aGlzLmZvcm1WYWx1ZSkge1xuICAgICAgICAgICAgICAgIHRoaXMuZm9ybVZhbHVlID0gdGhpcy5mb3JtVmFsdWU/LmZpbHRlcihvID0+IG8ubmFtZSAhPT0gb3B0aW9uLm5hbWUpO1xuICAgICAgICAgICAgICAgIHRoaXMub25DaGFuZ2VGbih0aGlzLmZvcm1WYWx1ZSk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIHRoaXMucmVtb3ZlLmVtaXQob3B0aW9uKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgIH1cblxuICAgIGhhbmRsZUtleShldmVudDogS2V5Ym9hcmRFdmVudCkge1xuICAgICAgICBzd2l0Y2ggKGV2ZW50LmtleSkge1xuICAgICAgICAgICAgY2FzZSAnLCc6XG4gICAgICAgICAgICBjYXNlICdFbnRlcic6XG4gICAgICAgICAgICAgICAgdGhpcy5hZGRPcHRpb25WYWx1ZSgpO1xuICAgICAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgICBjYXNlICdCYWNrc3BhY2UnOlxuICAgICAgICAgICAgICAgIGlmICh0aGlzLmxhc3RTZWxlY3RlZCkge1xuICAgICAgICAgICAgICAgICAgICB0aGlzLnJlbW92ZUxhc3RPcHRpb24oKTtcbiAgICAgICAgICAgICAgICAgICAgdGhpcy5sYXN0U2VsZWN0ZWQgPSBmYWxzZTtcbiAgICAgICAgICAgICAgICB9IGVsc2UgaWYgKHRoaXMuaW5wdXQgPT09ICcnKSB7XG4gICAgICAgICAgICAgICAgICAgIHRoaXMubGFzdFNlbGVjdGVkID0gdHJ1ZTtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgYnJlYWs7XG4gICAgICAgICAgICBkZWZhdWx0OlxuICAgICAgICAgICAgICAgIHRoaXMubGFzdFNlbGVjdGVkID0gZmFsc2U7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBoYW5kbGVCbHVyKCkge1xuICAgICAgICB0aGlzLmlzRm9jdXNzZWQgPSBmYWxzZTtcbiAgICAgICAgdGhpcy5hZGRPcHRpb25WYWx1ZSgpO1xuICAgIH1cblxuICAgIHByaXZhdGUgYWRkT3B0aW9uVmFsdWUoKSB7XG4gICAgICAgIGNvbnN0IG9wdGlvbnMgPSB0aGlzLnBhcnNlSW5wdXRJbnRvT3B0aW9ucyh0aGlzLmlucHV0KTtcbiAgICAgICAgaWYgKCF0aGlzLmZvcm1WYWx1ZSAmJiB0aGlzLm9wdGlvbnMpIHtcbiAgICAgICAgICAgIGZvciAoY29uc3Qgb3B0aW9uIG9mIG9wdGlvbnMpIHtcbiAgICAgICAgICAgICAgICB0aGlzLmFkZC5lbWl0KG9wdGlvbik7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0aGlzLmZvcm1WYWx1ZSA9IHVuaXF1ZShbLi4udGhpcy5mb3JtVmFsdWUsIC4uLm9wdGlvbnNdKTtcbiAgICAgICAgICAgIHRoaXMub25DaGFuZ2VGbih0aGlzLmZvcm1WYWx1ZSk7XG4gICAgICAgIH1cbiAgICAgICAgdGhpcy5pbnB1dCA9ICcnO1xuICAgIH1cblxuICAgIHByaXZhdGUgcGFyc2VJbnB1dEludG9PcHRpb25zKGlucHV0OiBzdHJpbmcpOiBPcHRpb25bXSB7XG4gICAgICAgIHJldHVybiBpbnB1dFxuICAgICAgICAgICAgLnNwbGl0KC9bLFxcbl0vKVxuICAgICAgICAgICAgLm1hcChzID0+IHMudHJpbSgpKVxuICAgICAgICAgICAgLmZpbHRlcihzID0+IHMgIT09ICcnKVxuICAgICAgICAgICAgLm1hcChzID0+ICh7IG5hbWU6IHMsIGxvY2tlZDogZmFsc2UgfSkpO1xuICAgIH1cblxuICAgIHByaXZhdGUgcmVtb3ZlTGFzdE9wdGlvbigpIHtcbiAgICAgICAgaWYgKHRoaXMub3B0aW9uVmFsdWVzLmxlbmd0aCkge1xuICAgICAgICAgICAgY29uc3Qgb3B0aW9uID0gdGhpcy5vcHRpb25WYWx1ZXNbdGhpcy5vcHRpb25WYWx1ZXMubGVuZ3RoIC0gMV07XG4gICAgICAgICAgICB0aGlzLnJlbW92ZU9wdGlvbihvcHRpb24pO1xuICAgICAgICB9XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImlucHV0LXdyYXBwZXJcIiBbY2xhc3MuZm9jdXNdPVwiaXNGb2N1c3NlZFwiIChjbGljayk9XCJ0ZXh0QXJlYS5mb2N1cygpXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwiY2hpcHNcIiAqbmdJZj1cIjAgPCBvcHRpb25WYWx1ZXMubGVuZ3RoXCI+XHJcbiAgICAgICAgPHZkci1jaGlwXHJcbiAgICAgICAgICAgICpuZ0Zvcj1cImxldCBvcHRpb24gb2Ygb3B0aW9uVmFsdWVzOyBsYXN0IGFzIGlzTGFzdDsgaW5kZXggYXMgaVwiXHJcbiAgICAgICAgICAgIFtpY29uXT1cIm9wdGlvbi5sb2NrZWQgPyAnbG9jaycgOiAndGltZXMnXCJcclxuICAgICAgICAgICAgW2NsYXNzLnNlbGVjdGVkXT1cImlzTGFzdCAmJiBsYXN0U2VsZWN0ZWRcIlxyXG4gICAgICAgICAgICBbY2xhc3MubG9ja2VkXT1cIm9wdGlvbi5sb2NrZWRcIlxyXG4gICAgICAgICAgICBbY29sb3JGcm9tXT1cImdyb3VwTmFtZVwiXHJcbiAgICAgICAgICAgIChpY29uQ2xpY2spPVwicmVtb3ZlT3B0aW9uKG9wdGlvbilcIlxyXG4gICAgICAgID5cclxuICAgICAgICAgICAgPHNwYW4gW2hpZGRlbl09XCJlZGl0aW5nSW5kZXggIT09IGlcIj5cclxuICAgICAgICAgICAgICAgIDxpbnB1dFxyXG4gICAgICAgICAgICAgICAgICAgICNlZGl0TmFtZUlucHV0XHJcbiAgICAgICAgICAgICAgICAgICAgdHlwZT1cInRleHRcIlxyXG4gICAgICAgICAgICAgICAgICAgIFtuZ01vZGVsXT1cIm9wdGlvbi5uYW1lXCJcclxuICAgICAgICAgICAgICAgICAgICAoYmx1cik9XCJ1cGRhdGVPcHRpb24oaSwgJGV2ZW50KVwiXHJcbiAgICAgICAgICAgICAgICAgICAgKGNsaWNrKT1cIiRldmVudC5jYW5jZWxCdWJibGUgPSB0cnVlXCJcclxuICAgICAgICAgICAgICAgIC8+XHJcbiAgICAgICAgICAgIDwvc3Bhbj5cclxuICAgICAgICAgICAgPHNwYW5cclxuICAgICAgICAgICAgICAgIGNsYXNzPVwib3B0aW9uLW5hbWVcIlxyXG4gICAgICAgICAgICAgICAgW2NsYXNzLmVkaXRhYmxlXT1cIiFvcHRpb24ubG9ja2VkICYmICFvcHRpb24uaWRcIlxyXG4gICAgICAgICAgICAgICAgKGNsaWNrKT1cImVkaXROYW1lKGksICRldmVudClcIiBbaGlkZGVuXT1cImVkaXRpbmdJbmRleCA9PT0gaVwiPnt7IG9wdGlvbi5uYW1lIH19PC9zcGFuPlxyXG4gICAgICAgIDwvdmRyLWNoaXA+XHJcbiAgICA8L2Rpdj5cclxuICAgIDx0ZXh0YXJlYVxyXG4gICAgICAgICN0ZXh0QXJlYVxyXG4gICAgICAgIChrZXl1cCk9XCJoYW5kbGVLZXkoJGV2ZW50KVwiXHJcbiAgICAgICAgKGZvY3VzKT1cImlzRm9jdXNzZWQgPSB0cnVlXCJcclxuICAgICAgICAoYmx1cik9XCJoYW5kbGVCbHVyKClcIlxyXG4gICAgICAgIFsobmdNb2RlbCldPVwiaW5wdXRcIlxyXG4gICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXHJcbiAgICA+PC90ZXh0YXJlYT5cclxuPC9kaXY+XHJcbiJdfQ==

package/{esm2020 → package/esm2020}/catalog/components/product-list/product-list.component.mjs

@@ -138,7 +138,7 @@ export class ProductListComponent extends BaseListComponent {
     }
 }
 ProductListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductListComponent, deps: [{ token: i1.DataService }, { token: i1.ModalService }, { token: i1.NotificationService }, { token: i1.JobQueueService }, { token: i1.ServerConfigService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-ProductListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductListComponent, selector: "vdr-products-list", viewQueries: [{ propertyName: "productSearchInput", first: true, predicate: ["productSearchInputComponent"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <div class=\"search-form\">\r\n            <vdr-product-search-input\r\n                #productSearchInputComponent\r\n                [facetValueResults]=\"facetValues$ | async\"\r\n                (searchTermChange)=\"setSearchTerm($event)\"\r\n                (facetValueChange)=\"setFacetValueIds($event)\"\r\n            ></vdr-product-search-input>\r\n            <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"icon-button search-index-button\"\r\n                    [title]=\"\r\n                        (pendingSearchIndexUpdates\r\n                            ? 'catalog.pending-search-index-updates'\r\n                            : 'catalog.search-index-controls'\r\n                        ) | translate\r\n                    \"\r\n                    vdrDropdownTrigger\r\n                >\r\n                    <clr-icon shape=\"cog\"></clr-icon>\r\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"run-updates-button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"runPendingSearchIndexUpdates()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                            {{\r\n                            'catalog.run-pending-search-index-updates'\r\n                                | translate: {count: pendingSearchIndexUpdates}\r\n                            }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"rebuildSearchIndex()\"\r\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                    >\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <div class=\"flex wrap\">\r\n            <clr-checkbox-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\"/>\r\n                <label>{{ 'catalog.group-by-product' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            [routerLink]=\"['./create']\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            <span class=\"full-label\">{{ 'catalog.create-new-product' | translate }}</span>\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <ng-template let-result=\"item\">\r\n        <td class=\"left align-middle image-col\" [class.disabled]=\"!result.enabled\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"\r\n                        groupByProduct\r\n                            ? result.productAsset\r\n                            : result.productVariantAsset || result.productAsset as asset;\r\n                        else imagePlaceholder\r\n                    \"\r\n                    [src]=\"asset | assetPreview: 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            {{ groupByProduct ? result.productName : result.productVariantName }}\r\n        </td>\r\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-table-row-action\r\n                class=\"edit-button\"\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', result.productId]\"\r\n            ></vdr-table-row-action>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></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)=\"deleteProduct(result.productId)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\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    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%;margin-bottom:6px}.search-input{min-width:300px}@media screen and (max-width: 768px){.search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}\n"], components: [{ type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1.ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition"] }, { type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }], directives: [{ type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i3.ClrIconCustomTag, selector: "clr-icon" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "async": i4.AsyncPipe, "translate": i6.TranslatePipe, "hasPermission": i1.HasPermissionPipe, "assetPreview": i1.AssetPreviewPipe } });
+ProductListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.3", type: ProductListComponent, selector: "vdr-products-list", viewQueries: [{ propertyName: "productSearchInput", first: true, predicate: ["productSearchInputComponent"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <div class=\"search-form\">\r\n            <vdr-product-search-input\r\n                #productSearchInputComponent\r\n                [facetValueResults]=\"facetValues$ | async\"\r\n                (searchTermChange)=\"setSearchTerm($event)\"\r\n                (facetValueChange)=\"setFacetValueIds($event)\"\r\n            ></vdr-product-search-input>\r\n            <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"icon-button search-index-button\"\r\n                    [title]=\"\r\n                        (pendingSearchIndexUpdates\r\n                            ? 'catalog.pending-search-index-updates'\r\n                            : 'catalog.search-index-controls'\r\n                        ) | translate\r\n                    \"\r\n                    vdrDropdownTrigger\r\n                >\r\n                    <clr-icon shape=\"cog\"></clr-icon>\r\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"run-updates-button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"runPendingSearchIndexUpdates()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                            {{\r\n                            'catalog.run-pending-search-index-updates'\r\n                                | translate: {count: pendingSearchIndexUpdates}\r\n                            }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"rebuildSearchIndex()\"\r\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                    >\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <div class=\"flex wrap\">\r\n            <clr-checkbox-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\"/>\r\n                <label>{{ 'catalog.group-by-product' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            [routerLink]=\"['./create']\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            <span class=\"full-label\">{{ 'catalog.create-new-product' | translate }}</span>\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <ng-template let-result=\"item\">\r\n        <td class=\"left align-middle image-col\" [class.disabled]=\"!result.enabled\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"\r\n                        groupByProduct\r\n                            ? result.productAsset\r\n                            : result.productVariantAsset || result.productAsset as asset;\r\n                        else imagePlaceholder\r\n                    \"\r\n                    [src]=\"asset | assetPreview: 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            {{ groupByProduct ? result.productName : result.productVariantName }}\r\n        </td>\r\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-table-row-action\r\n                class=\"edit-button\"\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', result.productId]\"\r\n            ></vdr-table-row-action>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></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)=\"deleteProduct(result.productId)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\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    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%;margin-bottom:6px}.search-input{min-width:300px}@media screen and (max-width: 768px){.search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}\n"], components: [{ type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { type: i1.ProductSearchInputComponent, selector: "vdr-product-search-input", inputs: ["facetValueResults"], outputs: ["searchTermChange", "facetValueChange"] }, { type: i1.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { type: i1.StatusBadgeComponent, selector: "vdr-status-badge", inputs: ["type"] }, { type: i1.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { type: i3.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { type: i1.DataTableComponent, selector: "vdr-data-table", inputs: ["items", "itemsPerPage", "currentPage", "totalItems", "allSelected", "isRowSelectedFn", "emptyStateLabel"], outputs: ["allSelectChange", "rowSelectChange", "pageChange", "itemsPerPageChange"] }, { type: i1.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { type: i1.TableRowActionComponent, selector: "vdr-table-row-action", inputs: ["linkTo", "label", "iconShape", "disabled"] }], directives: [{ type: i1.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { type: i3.ClrIconCustomTag, selector: "clr-icon" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.DropdownItemDirective, selector: "[vdrDropdownItem]" }, { type: i1.FormFieldControlDirective, selector: "input, textarea, select" }, { type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i3.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.ClrLabel, selector: "label", inputs: ["for"] }, { type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "async": i4.AsyncPipe, "translate": i6.TranslatePipe, "hasPermission": i1.HasPermissionPipe, "assetPreview": i1.AssetPreviewPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.3", ngImport: i0, type: ProductListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'vdr-products-list', template: "<vdr-action-bar>\r\n    <vdr-ab-left [grow]=\"true\">\r\n        <div class=\"search-form\">\r\n            <vdr-product-search-input\r\n                #productSearchInputComponent\r\n                [facetValueResults]=\"facetValues$ | async\"\r\n                (searchTermChange)=\"setSearchTerm($event)\"\r\n                (facetValueChange)=\"setFacetValueIds($event)\"\r\n            ></vdr-product-search-input>\r\n            <vdr-dropdown class=\"search-settings-menu mr3\">\r\n                <button\r\n                    type=\"button\"\r\n                    class=\"icon-button search-index-button\"\r\n                    [title]=\"\r\n                        (pendingSearchIndexUpdates\r\n                            ? 'catalog.pending-search-index-updates'\r\n                            : 'catalog.search-index-controls'\r\n                        ) | translate\r\n                    \"\r\n                    vdrDropdownTrigger\r\n                >\r\n                    <clr-icon shape=\"cog\"></clr-icon>\r\n                    <vdr-status-badge *ngIf=\"pendingSearchIndexUpdates\" type=\"warning\"></vdr-status-badge>\r\n                </button>\r\n                <vdr-dropdown-menu vdrPosition=\"bottom-right\">\r\n                    <h4 class=\"dropdown-header\">{{ 'catalog.search-index-controls' | translate }}</h4>\r\n                    <ng-container *ngIf=\"pendingSearchIndexUpdates\">\r\n                        <button\r\n                            type=\"button\"\r\n                            class=\"run-updates-button\"\r\n                            vdrDropdownItem\r\n                            (click)=\"runPendingSearchIndexUpdates()\"\r\n                            [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                        >\r\n                            <vdr-status-badge type=\"warning\"></vdr-status-badge>\r\n                            {{\r\n                            'catalog.run-pending-search-index-updates'\r\n                                | translate: {count: pendingSearchIndexUpdates}\r\n                            }}\r\n                        </button>\r\n                        <div class=\"dropdown-divider\"></div>\r\n                    </ng-container>\r\n                    <button\r\n                        type=\"button\"\r\n                        vdrDropdownItem\r\n                        (click)=\"rebuildSearchIndex()\"\r\n                        [disabled]=\"!(['UpdateCatalog', 'UpdateProduct'] | hasPermission)\"\r\n                    >\r\n                        {{ 'catalog.rebuild-search-index' | translate }}\r\n                    </button>\r\n                </vdr-dropdown-menu>\r\n            </vdr-dropdown>\r\n        </div>\r\n        <div class=\"flex wrap\">\r\n            <clr-checkbox-wrapper class=\"mt2\">\r\n                <input type=\"checkbox\" clrCheckbox [(ngModel)]=\"groupByProduct\" (ngModelChange)=\"refresh()\"/>\r\n                <label>{{ 'catalog.group-by-product' | translate }}</label>\r\n            </clr-checkbox-wrapper>\r\n            <vdr-language-selector\r\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\r\n                [currentLanguageCode]=\"contentLanguage$ | async\"\r\n                (languageCodeChange)=\"setLanguage($event)\"\r\n            ></vdr-language-selector>\r\n        </div>\r\n    </vdr-ab-left>\r\n    <vdr-ab-right>\r\n        <vdr-action-bar-items locationId=\"product-list\"></vdr-action-bar-items>\r\n        <a\r\n            class=\"btn btn-primary\"\r\n            [routerLink]=\"['./create']\"\r\n            *vdrIfPermissions=\"['CreateCatalog', 'CreateProduct']\"\r\n        >\r\n            <clr-icon shape=\"plus\"></clr-icon>\r\n            <span class=\"full-label\">{{ 'catalog.create-new-product' | translate }}</span>\r\n        </a>\r\n    </vdr-ab-right>\r\n</vdr-action-bar>\r\n\r\n<vdr-data-table\r\n    [items]=\"items$ | async\"\r\n    [itemsPerPage]=\"itemsPerPage$ | async\"\r\n    [totalItems]=\"totalItems$ | async\"\r\n    [currentPage]=\"currentPage$ | async\"\r\n    (pageChange)=\"setPageNumber($event)\"\r\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\r\n>\r\n    <ng-template let-result=\"item\">\r\n        <td class=\"left align-middle image-col\" [class.disabled]=\"!result.enabled\">\r\n            <div class=\"image-placeholder\">\r\n                <img\r\n                    *ngIf=\"\r\n                        groupByProduct\r\n                            ? result.productAsset\r\n                            : result.productVariantAsset || result.productAsset as asset;\r\n                        else imagePlaceholder\r\n                    \"\r\n                    [src]=\"asset | assetPreview: 'tiny'\"\r\n                />\r\n                <ng-template #imagePlaceholder>\r\n                    <div class=\"placeholder\">\r\n                        <clr-icon shape=\"image\" size=\"48\"></clr-icon>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n        </td>\r\n        <td class=\"left align-middle\" [class.disabled]=\"!result.enabled\">\r\n            {{ groupByProduct ? result.productName : result.productVariantName }}\r\n        </td>\r\n        <td class=\"align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-chip *ngIf=\"!result.enabled\">{{ 'common.disabled' | translate }}</vdr-chip>\r\n        </td>\r\n        <td class=\"right align-middle\" [class.disabled]=\"!result.enabled\">\r\n            <vdr-table-row-action\r\n                class=\"edit-button\"\r\n                iconShape=\"edit\"\r\n                [label]=\"'common.edit' | translate\"\r\n                [linkTo]=\"['./', result.productId]\"\r\n            ></vdr-table-row-action>\r\n            <vdr-dropdown>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm\" vdrDropdownTrigger>\r\n                    {{ 'common.actions' | translate }}\r\n                    <clr-icon shape=\"caret down\"></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)=\"deleteProduct(result.productId)\"\r\n                        [disabled]=\"!(['DeleteCatalog', 'DeleteProduct'] | hasPermission)\"\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    </ng-template>\r\n</vdr-data-table>\r\n", styles: [".image-col{width:70px}.image-placeholder{width:50px;height:50px;background-color:var(--color-component-bg-200)}.image-placeholder img{border-radius:var(--border-radius-img)}.image-placeholder .placeholder{text-align:center;color:var(--color-grey-300)}.search-form{display:flex;align-items:center;width:100%;margin-bottom:6px}.search-input{min-width:300px}@media screen and (max-width: 768px){.search-input{min-width:100px}}.search-settings-menu{margin:0 12px}td.disabled{background-color:var(--color-component-bg-200)}.search-index-button{position:relative}.search-index-button vdr-status-badge{right:0;top:0}.run-updates-button{position:relative}.run-updates-button vdr-status-badge{left:10px;top:10px}.edit-button{margin-right:24px}\n"] }]