import { ChangeDetectionStrategy, Component, Input, } from '@angular/core';
import { Permission } from '@vendure/admin-ui/core';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@clr/angular";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@vendure/admin-ui/core";
import * as i5 from "ngx-pagination";
import * as i6 from "@ngx-translate/core";
export class ProductVariantsTableComponent {
    constructor(changeDetector) {
        this.changeDetector = changeDetector;
        this.formGroupMap = new Map();
        this.updatePermission = [Permission.UpdateCatalog, Permission.UpdateProduct];
    }
    ngOnInit() {
        this.subscription = this.formArray.valueChanges
            .pipe(map(value => value.length), debounceTime(1), distinctUntilChanged())
            .subscribe(() => {
            this.buildFormGroupMap();
        });
        this.buildFormGroupMap();
    }
    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
    trackByFn(index, item) {
        if (item.id != null) {
            return item.id;
        }
        else {
            return index;
        }
    }
    getFeaturedAsset(variant) {
        return this.pendingAssetChanges[variant.id]?.featuredAsset || variant.featuredAsset;
    }
    optionGroupName(optionGroupId) {
        const group = this.optionGroups.find(g => g.id === optionGroupId);
        return group && group.name;
    }
    buildFormGroupMap() {
        this.formGroupMap.clear();
        for (const controlGroup of this.formArray.controls) {
            this.formGroupMap.set(controlGroup.value.id, controlGroup);
        }
        this.changeDetector.markForCheck();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductVariantsTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ProductVariantsTableComponent, selector: "vdr-product-variants-table", inputs: { formArray: ["productVariantsFormArray", "formArray"], variants: "variants", paginationConfig: "paginationConfig", channelPriceIncludesTax: "channelPriceIncludesTax", optionGroups: "optionGroups", pendingAssetChanges: "pendingAssetChanges" }, ngImport: i0, template: "<table class=\"table\">\n    <thead>\n        <tr>\n            <th></th>\n            <th>{{ 'common.name' | translate }}</th>\n            <th>{{ 'catalog.sku' | translate }}</th>\n            <ng-container *ngFor=\"let optionGroup of optionGroups | sort: 'id'\">\n                <th>{{ optionGroup.name }}</th>\n            </ng-container>\n            <th>{{ 'catalog.price' | translate }}</th>\n            <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n            <th>{{ 'common.enabled' | translate }}</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr *ngFor=\"let variant of variants | paginate: paginationConfig; index as i; trackBy: trackByFn\">\n            <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <div class=\"card-img\">\n                        <div class=\"featured-asset\">\n                            <img\n                                *ngIf=\"getFeaturedAsset(variant) as featuredAsset; else placeholder\"\n                                [src]=\"featuredAsset | assetPreview: 'tiny'\"\n                            />\n                            <ng-template #placeholder>\n                                <div class=\"placeholder\">\n                                    <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                                </div>\n                            </ng-template>\n                        </div>\n                    </div>\n                </td>\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <clr-input-container>\n                        <input\n                            clrInput\n                            type=\"text\"\n                            formControlName=\"name\"\n                            [readonly]=\"!(updatePermission | hasPermission)\"\n                            [placeholder]=\"'common.name' | translate\"\n                        />\n                    </clr-input-container>\n                </td>\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <clr-input-container>\n                        <input\n                            clrInput\n                            type=\"text\"\n                            formControlName=\"sku\"\n                            [readonly]=\"!(updatePermission | hasPermission)\"\n                            [placeholder]=\"'catalog.sku' | translate\"\n                        />\n                    </clr-input-container>\n                </td>\n                <ng-container *ngFor=\"let option of variant.options | sort: 'groupId'\">\n                    <td\n                        class=\"left align-middle\"\n                        [class.disabled]=\"!formGroup.get('enabled')!.value\"\n                        [style.color]=\"optionGroupName(option.groupId) | stringToColor\"\n                    >\n                        {{ option.name }}\n                    </td>\n                </ng-container>\n                <td class=\"left align-middle price\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <clr-input-container>\n                        <vdr-currency-input\n                            *ngIf=\"!channelPriceIncludesTax\"\n                            clrInput\n                            [currencyCode]=\"variant.currencyCode\"\n                            [readonly]=\"!(updatePermission | hasPermission)\"\n                            formControlName=\"price\"\n                        ></vdr-currency-input>\n                        <vdr-currency-input\n                            *ngIf=\"channelPriceIncludesTax\"\n                            clrInput\n                            [currencyCode]=\"variant.currencyCode\"\n                            [readonly]=\"!(updatePermission | hasPermission)\"\n                            formControlName=\"priceWithTax\"\n                        ></vdr-currency-input>\n                    </clr-input-container>\n                </td>\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <clr-input-container>\n                        <input\n                            clrInput\n                            type=\"number\"\n                            min=\"0\"\n                            step=\"1\"\n                            formControlName=\"stockOnHand\"\n                            [readonly]=\"!(updatePermission | hasPermission)\"\n                        />\n                    </clr-input-container>\n                </td>\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <clr-toggle-wrapper>\n                        <input\n                            type=\"checkbox\"\n                            clrToggle\n                            name=\"enabled\"\n                            formControlName=\"enabled\"\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\n                        />\n                    </clr-toggle-wrapper>\n                </td>\n            </ng-container>\n        </tr>\n    </tbody>\n</table>\n", styles: [".placeholder{color:var(--color-grey-300)}.stock input,.price input{max-width:96px}td{transition:background-color .2s}td.disabled{background-color:var(--color-component-bg-200)}\n"], dependencies: [{ kind: "directive", type: i1.ClrDatagridItemsTrackBy, selector: "[ngForTrackBy]", inputs: ["ngForTrackBy"] }, { kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i1.ClrInput, selector: "[clrInput]" }, { kind: "component", type: i1.ClrInputContainer, selector: "clr-input-container" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.CurrencyInputComponent, selector: "vdr-currency-input", inputs: ["disabled", "readonly", "value", "currencyCode"], outputs: ["valueChange"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "directive", type: i4.DisabledDirective, selector: "[vdrDisabled]", inputs: ["vdrDisabled"] }, { kind: "pipe", type: i5.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.SortPipe, name: "sort" }, { kind: "pipe", type: i4.StringToColorPipe, name: "stringToColor" }, { kind: "pipe", type: i4.HasPermissionPipe, name: "hasPermission" }, { kind: "pipe", type: i4.AssetPreviewPipe, name: "assetPreview" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ProductVariantsTableComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-product-variants-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table class=\"table\">\n    <thead>\n        <tr>\n            <th></th>\n            <th>{{ 'common.name' | translate }}</th>\n            <th>{{ 'catalog.sku' | translate }}</th>\n            <ng-container *ngFor=\"let optionGroup of optionGroups | sort: 'id'\">\n                <th>{{ optionGroup.name }}</th>\n            </ng-container>\n            <th>{{ 'catalog.price' | translate }}</th>\n            <th>{{ 'catalog.stock-on-hand' | translate }}</th>\n            <th>{{ 'common.enabled' | translate }}</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr *ngFor=\"let variant of variants | paginate: paginationConfig; index as i; trackBy: trackByFn\">\n            <ng-container *ngIf=\"formGroupMap.get(variant.id) as formGroup\" [formGroup]=\"formGroup\">\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <div class=\"card-img\">\n                        <div class=\"featured-asset\">\n                            <img\n                                *ngIf=\"getFeaturedAsset(variant) as featuredAsset; else placeholder\"\n                                [src]=\"featuredAsset | assetPreview: 'tiny'\"\n                            />\n                            <ng-template #placeholder>\n                                <div class=\"placeholder\">\n                                    <clr-icon shape=\"image\" size=\"48\"></clr-icon>\n                                </div>\n                            </ng-template>\n                        </div>\n                    </div>\n                </td>\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <clr-input-container>\n                        <input\n                            clrInput\n                            type=\"text\"\n                            formControlName=\"name\"\n                            [readonly]=\"!(updatePermission | hasPermission)\"\n                            [placeholder]=\"'common.name' | translate\"\n                        />\n                    </clr-input-container>\n                </td>\n                <td class=\"left align-middle\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <clr-input-container>\n                        <input\n                            clrInput\n                            type=\"text\"\n                            formControlName=\"sku\"\n                            [readonly]=\"!(updatePermission | hasPermission)\"\n                            [placeholder]=\"'catalog.sku' | translate\"\n                        />\n                    </clr-input-container>\n                </td>\n                <ng-container *ngFor=\"let option of variant.options | sort: 'groupId'\">\n                    <td\n                        class=\"left align-middle\"\n                        [class.disabled]=\"!formGroup.get('enabled')!.value\"\n                        [style.color]=\"optionGroupName(option.groupId) | stringToColor\"\n                    >\n                        {{ option.name }}\n                    </td>\n                </ng-container>\n                <td class=\"left align-middle price\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <clr-input-container>\n                        <vdr-currency-input\n                            *ngIf=\"!channelPriceIncludesTax\"\n                            clrInput\n                            [currencyCode]=\"variant.currencyCode\"\n                            [readonly]=\"!(updatePermission | hasPermission)\"\n                            formControlName=\"price\"\n                        ></vdr-currency-input>\n                        <vdr-currency-input\n                            *ngIf=\"channelPriceIncludesTax\"\n                            clrInput\n                            [currencyCode]=\"variant.currencyCode\"\n                            [readonly]=\"!(updatePermission | hasPermission)\"\n                            formControlName=\"priceWithTax\"\n                        ></vdr-currency-input>\n                    </clr-input-container>\n                </td>\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <clr-input-container>\n                        <input\n                            clrInput\n                            type=\"number\"\n                            min=\"0\"\n                            step=\"1\"\n                            formControlName=\"stockOnHand\"\n                            [readonly]=\"!(updatePermission | hasPermission)\"\n                        />\n                    </clr-input-container>\n                </td>\n                <td class=\"left align-middle stock\" [class.disabled]=\"!formGroup.get('enabled')!.value\">\n                    <clr-toggle-wrapper>\n                        <input\n                            type=\"checkbox\"\n                            clrToggle\n                            name=\"enabled\"\n                            formControlName=\"enabled\"\n                            [vdrDisabled]=\"!(updatePermission | hasPermission)\"\n                        />\n                    </clr-toggle-wrapper>\n                </td>\n            </ng-container>\n        </tr>\n    </tbody>\n</table>\n", styles: [".placeholder{color:var(--color-grey-300)}.stock input,.price input{max-width:96px}td{transition:background-color .2s}td.disabled{background-color:var(--color-component-bg-200)}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { formArray: [{
                type: Input,
                args: ['productVariantsFormArray']
            }], variants: [{
                type: Input
            }], paginationConfig: [{
                type: Input
            }], channelPriceIncludesTax: [{
                type: Input
            }], optionGroups: [{
                type: Input
            }], pendingAssetChanges: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 